@greghowe79/the-lib 0.9.9 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/card/card.qwik.cjs +83 -0
- package/lib/components/card/card.qwik.mjs +83 -0
- package/lib/components/card/styles.css.qwik.cjs +3 -0
- package/lib/components/card/styles.css.qwik.mjs +4 -0
- package/lib/components/select/select.qwik.cjs +13 -5
- package/lib/components/select/select.qwik.mjs +13 -5
- package/lib/index.qwik.cjs +2 -0
- package/lib/index.qwik.mjs +2 -0
- package/lib-types/components/card/card.d.ts +27 -0
- package/lib-types/index.d.ts +1 -0
- package/lib-types/stories/card.stories.d.ts +6 -0
- package/package.json +2 -1
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
|
|
4
|
+
const qwik = require("@builder.io/qwik");
|
|
5
|
+
const qwik$1 = require("@unpic/qwik");
|
|
6
|
+
const styles = require("./styles.css.qwik.cjs");
|
|
7
|
+
require("@fontsource/roboto-condensed/500.css");
|
|
8
|
+
const qwikCity = require("@builder.io/qwik-city");
|
|
9
|
+
const Card = qwik.component$(({ item, icon, subtitle, link, path }) => {
|
|
10
|
+
qwik.useStyles$(styles);
|
|
11
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
12
|
+
class: "card",
|
|
13
|
+
"data-state": "#about",
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
16
|
+
class: "card-header",
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
19
|
+
class: "card-cover"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwik$1.Image, {
|
|
22
|
+
objectFit: "cover",
|
|
23
|
+
width: 128,
|
|
24
|
+
height: 128,
|
|
25
|
+
src: item.img_url,
|
|
26
|
+
layout: "constrained",
|
|
27
|
+
decoding: "async",
|
|
28
|
+
loading: "eager",
|
|
29
|
+
alt: `${item.first_name} ${item.last_name}`,
|
|
30
|
+
class: "card-avatar"
|
|
31
|
+
}),
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", {
|
|
33
|
+
class: "card-fullname",
|
|
34
|
+
children: `${item.first_name} ${item.last_name}`
|
|
35
|
+
}),
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", {
|
|
37
|
+
class: "card-jobtitle",
|
|
38
|
+
children: item.job_title
|
|
39
|
+
})
|
|
40
|
+
]
|
|
41
|
+
}),
|
|
42
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
43
|
+
class: "card-main",
|
|
44
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
45
|
+
class: "card-section",
|
|
46
|
+
id: "about",
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
49
|
+
class: "card-content",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
52
|
+
class: "card-subtitle",
|
|
53
|
+
children: subtitle
|
|
54
|
+
}),
|
|
55
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", {
|
|
56
|
+
class: "card-desc",
|
|
57
|
+
children: item.description.split(" ").slice(0, 20).join(" ") + (item.description.split(" ").length > 20 ? "…" : "")
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
}),
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
62
|
+
class: "card-container-url",
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
65
|
+
class: "card-icon",
|
|
66
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx(qwikCity.Link, {
|
|
69
|
+
href: path,
|
|
70
|
+
class: "go-to-profile",
|
|
71
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
72
|
+
children: link
|
|
73
|
+
})
|
|
74
|
+
})
|
|
75
|
+
]
|
|
76
|
+
})
|
|
77
|
+
]
|
|
78
|
+
})
|
|
79
|
+
})
|
|
80
|
+
]
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
exports.Card = Card;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
|
|
2
|
+
import { component$, useStyles$ } from "@builder.io/qwik";
|
|
3
|
+
import { Image } from "@unpic/qwik";
|
|
4
|
+
import styles from "./styles.css.qwik.mjs";
|
|
5
|
+
import "@fontsource/roboto-condensed/500.css";
|
|
6
|
+
import { Link } from "@builder.io/qwik-city";
|
|
7
|
+
const Card = component$(({ item, icon, subtitle, link, path }) => {
|
|
8
|
+
useStyles$(styles);
|
|
9
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
10
|
+
class: "card",
|
|
11
|
+
"data-state": "#about",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ jsxs("div", {
|
|
14
|
+
class: "card-header",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ jsx("div", {
|
|
17
|
+
class: "card-cover"
|
|
18
|
+
}),
|
|
19
|
+
/* @__PURE__ */ jsx(Image, {
|
|
20
|
+
objectFit: "cover",
|
|
21
|
+
width: 128,
|
|
22
|
+
height: 128,
|
|
23
|
+
src: item.img_url,
|
|
24
|
+
layout: "constrained",
|
|
25
|
+
decoding: "async",
|
|
26
|
+
loading: "eager",
|
|
27
|
+
alt: `${item.first_name} ${item.last_name}`,
|
|
28
|
+
class: "card-avatar"
|
|
29
|
+
}),
|
|
30
|
+
/* @__PURE__ */ jsx("h1", {
|
|
31
|
+
class: "card-fullname",
|
|
32
|
+
children: `${item.first_name} ${item.last_name}`
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ jsx("h2", {
|
|
35
|
+
class: "card-jobtitle",
|
|
36
|
+
children: item.job_title
|
|
37
|
+
})
|
|
38
|
+
]
|
|
39
|
+
}),
|
|
40
|
+
/* @__PURE__ */ jsx("div", {
|
|
41
|
+
class: "card-main",
|
|
42
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
43
|
+
class: "card-section",
|
|
44
|
+
id: "about",
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsxs("div", {
|
|
47
|
+
class: "card-content",
|
|
48
|
+
children: [
|
|
49
|
+
/* @__PURE__ */ jsx("div", {
|
|
50
|
+
class: "card-subtitle",
|
|
51
|
+
children: subtitle
|
|
52
|
+
}),
|
|
53
|
+
/* @__PURE__ */ jsx("p", {
|
|
54
|
+
class: "card-desc",
|
|
55
|
+
children: item.description.split(" ").slice(0, 20).join(" ") + (item.description.split(" ").length > 20 ? "…" : "")
|
|
56
|
+
})
|
|
57
|
+
]
|
|
58
|
+
}),
|
|
59
|
+
/* @__PURE__ */ jsxs("div", {
|
|
60
|
+
class: "card-container-url",
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ jsx("div", {
|
|
63
|
+
class: "card-icon",
|
|
64
|
+
children: typeof icon === "function" ? icon({}, null, 0) : icon
|
|
65
|
+
}),
|
|
66
|
+
/* @__PURE__ */ jsx(Link, {
|
|
67
|
+
href: path,
|
|
68
|
+
class: "go-to-profile",
|
|
69
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
70
|
+
children: link
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
]
|
|
74
|
+
})
|
|
75
|
+
]
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
});
|
|
80
|
+
});
|
|
81
|
+
export {
|
|
82
|
+
Card
|
|
83
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const styles = ".card {\r\n max-width: 340px;\r\n margin: auto;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n";
|
|
3
|
+
module.exports = styles;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const styles = ".card {\r\n max-width: 340px;\r\n margin: auto;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n position: relative;\r\n z-index: 1;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n font-family: 'Roboto Condensed', sans-serif;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n position: relative;\r\n display: flex;\r\n height: 200px;\r\n flex-shrink: 0;\r\n width: 100%;\r\n transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n width: 100%;\r\n height: 160px;\r\n position: absolute;\r\n top: -28%;\r\n left: 0;\r\n will-change: top;\r\n background: #0a66c2;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.2);\r\n transition: 0.5s;\r\n}\r\n\r\n.card-avatar {\r\n box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);\r\n border-radius: 50%;\r\n object-position: center;\r\n position: absolute;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-64px);\r\n}\r\n\r\n.card-fullname {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 22px;\r\n font-weight: 700;\r\n text-align: center;\r\n white-space: nowrap;\r\n transform: translateY(-10px) translateX(-50%);\r\n left: 50%;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n position: absolute;\r\n bottom: 0;\r\n font-size: 11px;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(-7px);\r\n margin: 0;\r\n}\r\n\r\n.card-main {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n display: block;\r\n}\r\n\r\n.card-content {\r\n padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n font-weight: 700;\r\n font-size: 13px;\r\n margin-bottom: 8px;\r\n color: #333;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n line-height: 1.6;\r\n color: rgb(110, 110, 115);\r\n font-size: 14px;\r\n margin: 0;\r\n font-weight: 400;\r\n}\r\n\r\n.card-container-url {\r\n display: flex;\r\n align-items: center;\r\n padding: 0 20px;\r\n margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n color: #8797a1;\r\n height: 32px;\r\n width: 32px;\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.3s;\r\n background-color: rgba(93, 133, 193, 0.05);\r\n margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n align-self: center;\r\n color: #06c;\r\n text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n text-decoration: underline;\r\n}\r\n";
|
|
2
|
+
export {
|
|
3
|
+
styles as default
|
|
4
|
+
};
|
|
@@ -19,16 +19,24 @@ const Select = qwik.component$(({ id, label, options, selected, prefix }) => {
|
|
|
19
19
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
20
20
|
class: `select-wrapper ${selected.value ? "has-value" : ""}`,
|
|
21
21
|
children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.
|
|
22
|
+
/* @__PURE__ */ jsxRuntime.jsxs("select", {
|
|
23
23
|
id,
|
|
24
24
|
name: id,
|
|
25
25
|
class: "select-element",
|
|
26
26
|
onChange$: handleChange$,
|
|
27
27
|
value: selected.value,
|
|
28
|
-
children:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ jsxRuntime.jsx("option", {
|
|
30
|
+
value: "",
|
|
31
|
+
disabled: true,
|
|
32
|
+
selected: true,
|
|
33
|
+
hidden: true
|
|
34
|
+
}),
|
|
35
|
+
options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", {
|
|
36
|
+
value: option.value,
|
|
37
|
+
children: option.label
|
|
38
|
+
}, option.value))
|
|
39
|
+
]
|
|
32
40
|
}),
|
|
33
41
|
/* @__PURE__ */ jsxRuntime.jsx("label", {
|
|
34
42
|
for: id,
|
|
@@ -17,16 +17,24 @@ const Select = component$(({ id, label, options, selected, prefix }) => {
|
|
|
17
17
|
children: /* @__PURE__ */ jsxs("div", {
|
|
18
18
|
class: `select-wrapper ${selected.value ? "has-value" : ""}`,
|
|
19
19
|
children: [
|
|
20
|
-
/* @__PURE__ */
|
|
20
|
+
/* @__PURE__ */ jsxs("select", {
|
|
21
21
|
id,
|
|
22
22
|
name: id,
|
|
23
23
|
class: "select-element",
|
|
24
24
|
onChange$: handleChange$,
|
|
25
25
|
value: selected.value,
|
|
26
|
-
children:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
children: [
|
|
27
|
+
/* @__PURE__ */ jsx("option", {
|
|
28
|
+
value: "",
|
|
29
|
+
disabled: true,
|
|
30
|
+
selected: true,
|
|
31
|
+
hidden: true
|
|
32
|
+
}),
|
|
33
|
+
options.map((option) => /* @__PURE__ */ jsx("option", {
|
|
34
|
+
value: option.value,
|
|
35
|
+
children: option.label
|
|
36
|
+
}, option.value))
|
|
37
|
+
]
|
|
30
38
|
}),
|
|
31
39
|
/* @__PURE__ */ jsx("label", {
|
|
32
40
|
for: id,
|
package/lib/index.qwik.cjs
CHANGED
|
@@ -11,6 +11,7 @@ const hero = require("./components/hero/hero.qwik.cjs");
|
|
|
11
11
|
const onboardingsteps = require("./components/onboarding/onboardingsteps.qwik.cjs");
|
|
12
12
|
const select = require("./components/select/select.qwik.cjs");
|
|
13
13
|
const text_area = require("./components/text_area/text_area.qwik.cjs");
|
|
14
|
+
const card = require("./components/card/card.qwik.cjs");
|
|
14
15
|
exports.Logo = logo.Logo;
|
|
15
16
|
exports.Counter = counter.Counter;
|
|
16
17
|
exports.Button = button.Button;
|
|
@@ -22,3 +23,4 @@ exports.Hero = hero.Hero;
|
|
|
22
23
|
exports.OnboardingSteps = onboardingsteps.OnboardingSteps;
|
|
23
24
|
exports.Select = select.Select;
|
|
24
25
|
exports.TextArea = text_area.TextArea;
|
|
26
|
+
exports.Card = card.Card;
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -9,8 +9,10 @@ import { Hero } from "./components/hero/hero.qwik.mjs";
|
|
|
9
9
|
import { OnboardingSteps } from "./components/onboarding/onboardingsteps.qwik.mjs";
|
|
10
10
|
import { Select } from "./components/select/select.qwik.mjs";
|
|
11
11
|
import { TextArea } from "./components/text_area/text_area.qwik.mjs";
|
|
12
|
+
import { Card } from "./components/card/card.qwik.mjs";
|
|
12
13
|
export {
|
|
13
14
|
Button,
|
|
15
|
+
Card,
|
|
14
16
|
Counter,
|
|
15
17
|
Hero,
|
|
16
18
|
Input,
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, JSXOutput } from '@builder.io/qwik';
|
|
2
|
+
import '@fontsource/roboto-condensed/500.css';
|
|
3
|
+
type UserProfile = {
|
|
4
|
+
id: string;
|
|
5
|
+
img_url: string;
|
|
6
|
+
first_name: string;
|
|
7
|
+
last_name: string;
|
|
8
|
+
job_title: string;
|
|
9
|
+
description: string;
|
|
10
|
+
email: string;
|
|
11
|
+
telephone: string;
|
|
12
|
+
facebook?: string;
|
|
13
|
+
twitter?: string;
|
|
14
|
+
instagram?: string;
|
|
15
|
+
linkedin?: string;
|
|
16
|
+
position: string;
|
|
17
|
+
created_at: string;
|
|
18
|
+
};
|
|
19
|
+
export interface CardProps {
|
|
20
|
+
item: UserProfile;
|
|
21
|
+
icon: JSXOutput | Component<unknown>;
|
|
22
|
+
subtitle: string;
|
|
23
|
+
link: string;
|
|
24
|
+
path: string;
|
|
25
|
+
}
|
|
26
|
+
export declare const Card: Component<CardProps>;
|
|
27
|
+
export {};
|
package/lib-types/index.d.ts
CHANGED
|
@@ -9,3 +9,4 @@ export { Hero } from './components/hero/hero';
|
|
|
9
9
|
export { OnboardingSteps } from './components/onboarding/onboardingsteps';
|
|
10
10
|
export { Select } from './components/select/select';
|
|
11
11
|
export { TextArea } from './components/text_area/text_area';
|
|
12
|
+
export { Card } from './components/card/card';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greghowe79/the-lib",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Collection of fast components for Qwik",
|
|
5
5
|
"main": "./lib/index.qwik.mjs",
|
|
6
6
|
"qwik": "./lib/index.qwik.mjs",
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
"dependencies": {
|
|
66
66
|
"@builder.io/qwik-city": "^1.13.0",
|
|
67
67
|
"@fontsource/roboto-condensed": "^5.2.5",
|
|
68
|
+
"@unpic/qwik": "^1.0.0",
|
|
68
69
|
"@vanilla-extract/vite-plugin": "^5.0.1"
|
|
69
70
|
},
|
|
70
71
|
"publishConfig": {
|