@greghowe79/the-lib 2.13.5 → 2.13.7

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.
@@ -5,10 +5,45 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  const loader = require("../loader/loader.qwik.cjs");
7
7
  const button_utils = require("./button.utils.qwik.cjs");
8
- const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
8
+ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
9
9
  qwik.useStylesScoped$(styles);
10
10
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
11
11
  const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
12
+ const classes = [
13
+ `button-${variant}`,
14
+ `button-${size}`,
15
+ disabled && "button-disabled",
16
+ active && "button-active",
17
+ className
18
+ ].filter(Boolean).join(" ");
19
+ if (href) {
20
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
21
+ children: [
22
+ hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
23
+ dangerouslySetInnerHTML: button_utils.generateCustomCSS(id, customColors)
24
+ }),
25
+ /* @__PURE__ */ jsxRuntime.jsxs("a", {
26
+ id,
27
+ href: disabled ? void 0 : href,
28
+ target,
29
+ rel,
30
+ class: classes,
31
+ "aria-disabled": disabled,
32
+ children: [
33
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
34
+ class: "button__icon",
35
+ "aria-hidden": "true",
36
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
37
+ }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
39
+ class: "button__text",
40
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
41
+ })
42
+ ]
43
+ })
44
+ ]
45
+ });
46
+ }
12
47
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
13
48
  children: [
14
49
  hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
@@ -17,12 +52,7 @@ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled
17
52
  /* @__PURE__ */ jsxRuntime.jsxs("button", {
18
53
  id,
19
54
  type,
20
- class: [
21
- `button-${variant}`,
22
- `button-${size}`,
23
- disabled && "button-disabled",
24
- active && "button-active"
25
- ].filter(Boolean).join(" "),
55
+ class: classes,
26
56
  disabled,
27
57
  "aria-disabled": disabled,
28
58
  "aria-label": ariaLabel || (icon ? label : void 0),
@@ -3,10 +3,45 @@ import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import { Loader } from "../loader/loader.qwik.mjs";
5
5
  import { generateCustomCSS } from "./button.utils.qwik.mjs";
6
- const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
6
+ const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", href, target, rel, className, onClick$, isLoading, active = false, customColors }) => {
7
7
  useStylesScoped$(styles);
8
8
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
9
9
  const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border || customColors.padding || customColors.width || customColors.height);
10
+ const classes = [
11
+ `button-${variant}`,
12
+ `button-${size}`,
13
+ disabled && "button-disabled",
14
+ active && "button-active",
15
+ className
16
+ ].filter(Boolean).join(" ");
17
+ if (href) {
18
+ return /* @__PURE__ */ jsxs(Fragment, {
19
+ children: [
20
+ hasCustomStyles && /* @__PURE__ */ jsx("style", {
21
+ dangerouslySetInnerHTML: generateCustomCSS(id, customColors)
22
+ }),
23
+ /* @__PURE__ */ jsxs("a", {
24
+ id,
25
+ href: disabled ? void 0 : href,
26
+ target,
27
+ rel,
28
+ class: classes,
29
+ "aria-disabled": disabled,
30
+ children: [
31
+ icon && /* @__PURE__ */ jsx("span", {
32
+ class: "button__icon",
33
+ "aria-hidden": "true",
34
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
35
+ }),
36
+ /* @__PURE__ */ jsx("span", {
37
+ class: "button__text",
38
+ children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
39
+ })
40
+ ]
41
+ })
42
+ ]
43
+ });
44
+ }
10
45
  return /* @__PURE__ */ jsxs(Fragment, {
11
46
  children: [
12
47
  hasCustomStyles && /* @__PURE__ */ jsx("style", {
@@ -15,12 +50,7 @@ const Button = component$(({ id, label, variant = "primary", icon, disabled = fa
15
50
  /* @__PURE__ */ jsxs("button", {
16
51
  id,
17
52
  type,
18
- class: [
19
- `button-${variant}`,
20
- `button-${size}`,
21
- disabled && "button-disabled",
22
- active && "button-active"
23
- ].filter(Boolean).join(" "),
53
+ class: classes,
24
54
  disabled,
25
55
  "aria-disabled": disabled,
26
56
  "aria-label": ariaLabel || (icon ? label : void 0),
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\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 justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\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: #00758a;\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-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\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 word-wrap: break-word;\r\n word-break: break-word;\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 text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\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 min-height: 10ch;\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\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
2
+ const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\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 justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\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: #00758a;\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-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\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 word-wrap: break-word;\r\n word-break: break-word;\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 line-height: 1.5;\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\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 height: 150px;\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 min-height: 10ch;\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\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
3
3
  module.exports = styles;
@@ -1,4 +1,4 @@
1
- const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\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 justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\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: #00758a;\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-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\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 word-wrap: break-word;\r\n word-break: break-word;\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 text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\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 min-height: 10ch;\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\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
1
+ const styles = ".card {\r\n max-width: 340px;\r\n width: 100%;\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 justify-content: flex-end;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 250px;\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: #00758a;\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-container {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n width: 100%;\r\n max-width: 200px;\r\n height: 100px;\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 word-wrap: break-word;\r\n word-break: break-word;\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 line-height: 1.5;\r\n font-weight: 500;\r\n text-align: center;\r\n opacity: 0.7;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n word-wrap: break-word;\r\n word-break: break-word;\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 height: 150px;\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 min-height: 10ch;\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\r\n.link_disabled {\r\n color: #cccccc;\r\n cursor: not-allowed;\r\n text-decoration: none;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
@@ -23,6 +23,10 @@ export interface ButtonProps {
23
23
  ariaLabel?: string;
24
24
  type?: ButtonType;
25
25
  size?: ButtonSize;
26
+ href?: string;
27
+ target?: string;
28
+ rel?: string;
29
+ className?: string;
26
30
  onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
27
31
  isLoading?: boolean | Signal<boolean>;
28
32
  active?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.13.5",
3
+ "version": "2.13.7",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",