@greghowe79/the-lib 2.2.4 → 2.2.6

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.
Files changed (7) hide show
  1. package/lib/components/button/button.utils.qwik.cjs +10 -0
  2. package/lib/components/button/button.utils.qwik.mjs +10 -0
  3. package/lib/components/modal/modal.qwik.cjs +5 -3
  4. package/lib/components/modal/modal.qwik.mjs +5 -3
  5. package/lib-types/components/modal/modal.d.ts +3 -0
  6. package/lib-types/stories/button.stories.d.ts +1 -0
  7. package/package.json +1 -1
package/lib/components/button/button.utils.qwik.cjs CHANGED
@@ -21,9 +21,19 @@ function generateCustomCSS(id, colors) {
21
21
  hoverText && `color: ${hoverText} !important;`,
22
22
  hoverBorder && `border: 2px solid ${hoverBorder} !important;`
23
23
  ].filter(Boolean).join("\n");
24
+ const disabledStyles = `
25
+ background-color: #cccccc !important;
26
+ background-image: none !important;
27
+ color: #000000 !important;
28
+ border: 2px solid transparent !important;
29
+ cursor: default !important;
30
+ opacity: 0.6 !important;
31
+ `;
24
32
  return `
25
33
  #${id} { ${baseStyles} }
26
34
  #${id}:not(:disabled):hover { ${hoverStyles} }
35
+ #${id}:disabled, #${id}.button-disabled { ${disabledStyles} }
36
+ #${id}:disabled:hover, #${id}.button-disabled:hover { ${disabledStyles} }
27
37
  `;
28
38
  }
29
39
  exports.generateCustomCSS = generateCustomCSS;
package/lib/components/button/button.utils.qwik.mjs CHANGED
@@ -19,9 +19,19 @@ function generateCustomCSS(id, colors) {
19
19
  hoverText && `color: ${hoverText} !important;`,
20
20
  hoverBorder && `border: 2px solid ${hoverBorder} !important;`
21
21
  ].filter(Boolean).join("\n");
22
+ const disabledStyles = `
23
+ background-color: #cccccc !important;
24
+ background-image: none !important;
25
+ color: #000000 !important;
26
+ border: 2px solid transparent !important;
27
+ cursor: default !important;
28
+ opacity: 0.6 !important;
29
+ `;
22
30
  return `
23
31
  #${id} { ${baseStyles} }
24
32
  #${id}:not(:disabled):hover { ${hoverStyles} }
33
+ #${id}:disabled, #${id}.button-disabled { ${disabledStyles} }
34
+ #${id}:disabled:hover, #${id}.button-disabled:hover { ${disabledStyles} }
25
35
  `;
26
36
  }
27
37
  export {
package/lib/components/modal/modal.qwik.cjs CHANGED
@@ -6,7 +6,7 @@ const styles = require("./styles.css.qwik.cjs");
6
6
  const button = require("../button/button.qwik.cjs");
7
7
  const closeIcon = require("../icons/closeIcon.qwik.cjs");
8
8
  require("@fontsource/roboto-condensed/latin-400.css");
9
- const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false }) => {
9
+ const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false, primaryButtonColors, secondaryButtonColors }) => {
10
10
  qwik.useStylesScoped$(styles);
11
11
  const isDisabled = typeof primaryButtonDisabled === "object" ? primaryButtonDisabled.value : primaryButtonDisabled ?? false;
12
12
  const modalClass = type === "small" ? "modal small" : "modal";
@@ -51,14 +51,16 @@ const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButto
51
51
  id: "cancel-button",
52
52
  label: secondaryButtonLabel,
53
53
  onClick$: secondaryAction,
54
- variant: "tertiary"
54
+ variant: "tertiary",
55
+ customColors: secondaryButtonColors
55
56
  }),
56
57
  primaryButtonLabel && /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
57
58
  id: "confirm-button",
58
59
  label: primaryButtonLabel,
59
60
  onClick$: primaryAction,
60
61
  isLoading,
61
- disabled: isDisabled
62
+ disabled: isDisabled,
63
+ customColors: primaryButtonColors
62
64
  })
63
65
  ]
64
66
  })
package/lib/components/modal/modal.qwik.mjs CHANGED
@@ -4,7 +4,7 @@ import styles from "./styles.css.qwik.mjs";
4
4
  import { Button } from "../button/button.qwik.mjs";
5
5
  import { CloseIcon } from "../icons/closeIcon.qwik.mjs";
6
6
  import "@fontsource/roboto-condensed/latin-400.css";
7
- const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false }) => {
7
+ const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading, primaryButtonDisabled, type = "default", light = false, primaryButtonColors, secondaryButtonColors }) => {
8
8
  useStylesScoped$(styles);
9
9
  const isDisabled = typeof primaryButtonDisabled === "object" ? primaryButtonDisabled.value : primaryButtonDisabled ?? false;
10
10
  const modalClass = type === "small" ? "modal small" : "modal";
@@ -49,14 +49,16 @@ const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabe
49
49
  id: "cancel-button",
50
50
  label: secondaryButtonLabel,
51
51
  onClick$: secondaryAction,
52
- variant: "tertiary"
52
+ variant: "tertiary",
53
+ customColors: secondaryButtonColors
53
54
  }),
54
55
  primaryButtonLabel && /* @__PURE__ */ jsx(Button, {
55
56
  id: "confirm-button",
56
57
  label: primaryButtonLabel,
57
58
  onClick$: primaryAction,
58
59
  isLoading,
59
- disabled: isDisabled
60
+ disabled: isDisabled,
61
+ customColors: primaryButtonColors
60
62
  })
61
63
  ]
62
64
  })
package/lib-types/components/modal/modal.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { QRL, Signal } from '@builder.io/qwik';
2
+ import { CustomColors } from '../button/button';
2
3
  import '@fontsource/roboto-condensed/latin-400.css';
3
4
  export interface ModalProps {
4
5
  title?: string;
@@ -12,5 +13,7 @@ export interface ModalProps {
12
13
  primaryButtonDisabled?: Signal<boolean>;
13
14
  type?: 'small' | 'default';
14
15
  light?: boolean;
16
+ primaryButtonColors?: CustomColors;
17
+ secondaryButtonColors?: CustomColors;
15
18
  }
16
19
  export declare const Modal: import("@builder.io/qwik").Component<ModalProps>;
package/lib-types/stories/button.stories.d.ts CHANGED
@@ -13,3 +13,4 @@ export declare const CustomSuccess: Story;
13
13
  export declare const CustomWarning: Story;
14
14
  export declare const CustomWithIcon: Story;
15
15
  export declare const CustomWithBorder: Story;
16
+ export declare const CustomDisabled: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.2.4",
3
+ "version": "2.2.6",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",