@greghowe79/the-lib 0.4.5 → 0.4.7

package/lib/components/button/button.qwik.cjs

@@ -4,7 +4,8 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
 require("@fontsource/roboto-condensed/500.css");
-const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$ }) => {
+const loader = require("../loader/loader.qwik.cjs");
+const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading }) => {
   qwik.useStylesScoped$(styles);
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     id,
@@ -27,7 +28,7 @@ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
         class: "button__text",
-        children: label
+        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
       })
     ]
   });

package/lib/components/button/button.qwik.mjs

@@ -2,7 +2,8 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useStylesScoped$ } from "@builder.io/qwik";
 import styles from "./styles.css.qwik.mjs";
 import "@fontsource/roboto-condensed/500.css";
-const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$ }) => {
+import { Loader } from "../loader/loader.qwik.mjs";
+const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading }) => {
   useStylesScoped$(styles);
   return /* @__PURE__ */ jsxs("button", {
     id,
@@ -25,7 +26,7 @@ const Button = component$(({ id, label, variant = "primary", icon, disabled = fa
       }),
       /* @__PURE__ */ jsx("span", {
         class: "button__text",
-        children: label
+        children: isLoading ? /* @__PURE__ */ jsx(Loader, {}) : label
       })
     ]
   });

package/lib/components/loader/loader.qwik.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const styles = require("./styles.css.qwik.cjs");
+const Loader = qwik.component$(() => {
+  qwik.useStylesScoped$(styles);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "loader"
+  });
+});
+exports.Loader = Loader;

package/lib/components/loader/loader.qwik.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
+const Loader = component$(() => {
+  useStylesScoped$(styles);
+  return /* @__PURE__ */ jsx("div", {
+    class: "loader"
+  });
+});
+export {
+  Loader
+};

package/lib/components/loader/styles.css.qwik.cjs

@@ -0,0 +1,3 @@
+"use strict";
+const styles = '/* HTML: <div class="loader"></div> */\r\n.loader {\r\n  width: 45px;\r\n  aspect-ratio: 2;\r\n  --_g: no-repeat radial-gradient(circle closest-side, white 80%, transparent);\r\n  background:\r\n    var(--_g) 0% 50%,\r\n    var(--_g) 50% 50%,\r\n    var(--_g) 100% 50%;\r\n  background-size: calc(100% / 3) 50%;\r\n  animation: l3 1s infinite linear;\r\n}\r\n@keyframes l3 {\r\n  20% {\r\n    background-position:\r\n      0% 0%,\r\n      50% 50%,\r\n      100% 50%;\r\n  }\r\n  40% {\r\n    background-position:\r\n      0% 100%,\r\n      50% 0%,\r\n      100% 50%;\r\n  }\r\n  60% {\r\n    background-position:\r\n      0% 50%,\r\n      50% 100%,\r\n      100% 0%;\r\n  }\r\n  80% {\r\n    background-position:\r\n      0% 50%,\r\n      50% 50%,\r\n      100% 100%;\r\n  }\r\n}\r\n';
+module.exports = styles;

package/lib/components/loader/styles.css.qwik.mjs

@@ -0,0 +1,4 @@
+const styles = '/* HTML: <div class="loader"></div> */\r\n.loader {\r\n  width: 45px;\r\n  aspect-ratio: 2;\r\n  --_g: no-repeat radial-gradient(circle closest-side, white 80%, transparent);\r\n  background:\r\n    var(--_g) 0% 50%,\r\n    var(--_g) 50% 50%,\r\n    var(--_g) 100% 50%;\r\n  background-size: calc(100% / 3) 50%;\r\n  animation: l3 1s infinite linear;\r\n}\r\n@keyframes l3 {\r\n  20% {\r\n    background-position:\r\n      0% 0%,\r\n      50% 50%,\r\n      100% 50%;\r\n  }\r\n  40% {\r\n    background-position:\r\n      0% 100%,\r\n      50% 0%,\r\n      100% 50%;\r\n  }\r\n  60% {\r\n    background-position:\r\n      0% 50%,\r\n      50% 100%,\r\n      100% 0%;\r\n  }\r\n  80% {\r\n    background-position:\r\n      0% 50%,\r\n      50% 50%,\r\n      100% 100%;\r\n  }\r\n}\r\n';
+export {
+  styles as default
+};

package/lib/components/modal/modal.qwik.cjs

@@ -6,7 +6,7 @@ const styles = require("./styles.css.qwik.cjs");
 const button = require("../button/button.qwik.cjs");
 const closeIcon = require("../icons/closeIcon.qwik.cjs");
 require("@fontsource/roboto-condensed");
-const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true }) => {
+const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading }) => {
   qwik.useStylesScoped$(styles);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     id: "modal",
@@ -52,7 +52,8 @@ const Modal = qwik.component$(({ title, open, primaryButtonLabel, secondaryButto
             primaryButtonLabel && /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
               id: "confirm-button",
               label: primaryButtonLabel,
-              onClick$: primaryAction
+              onClick$: primaryAction,
+              isLoading: isLoading?.value
             })
           ]
         })

package/lib/components/modal/modal.qwik.mjs

@@ -4,7 +4,7 @@ import styles from "./styles.css.qwik.mjs";
 import { Button } from "../button/button.qwik.mjs";
 import { CloseIcon } from "../icons/closeIcon.qwik.mjs";
 import "@fontsource/roboto-condensed";
-const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true }) => {
+const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction, closeButtonVisible = true, isLoading }) => {
   useStylesScoped$(styles);
   return /* @__PURE__ */ jsx("div", {
     id: "modal",
@@ -50,7 +50,8 @@ const Modal = component$(({ title, open, primaryButtonLabel, secondaryButtonLabe
             primaryButtonLabel && /* @__PURE__ */ jsx(Button, {
               id: "confirm-button",
               label: primaryButtonLabel,
-              onClick$: primaryAction
+              onClick$: primaryAction,
+              isLoading: isLoading?.value
             })
           ]
         })

package/lib/index.qwik.cjs

@@ -5,8 +5,10 @@ const counter = require("./components/counter/counter.qwik.cjs");
 const button = require("./components/button/button.qwik.cjs");
 const NavigationMenu = require("./components/navigationmenu/NavigationMenu.qwik.cjs");
 const modal = require("./components/modal/modal.qwik.cjs");
+const loader = require("./components/loader/loader.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
 exports.NavigationMenu = NavigationMenu.NavigationMenu;
 exports.Modal = modal.Modal;
+exports.Loader = loader.Loader;

package/lib/index.qwik.mjs

@@ -3,9 +3,11 @@ import { Counter } from "./components/counter/counter.qwik.mjs";
 import { Button } from "./components/button/button.qwik.mjs";
 import { NavigationMenu } from "./components/navigationmenu/NavigationMenu.qwik.mjs";
 import { Modal } from "./components/modal/modal.qwik.mjs";
+import { Loader } from "./components/loader/loader.qwik.mjs";
 export {
   Button,
   Counter,
+  Loader,
   Logo,
   Modal,
   NavigationMenu

package/lib-types/components/button/button.d.ts

@@ -13,5 +13,6 @@ export interface ButtonProps {
     type?: ButtonType;
     size?: ButtonSize;
     onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
+    isLoading?: boolean;
 }
 export declare const Button: Component<ButtonProps>;

package/lib-types/components/loader/loader.d.ts

@@ -0,0 +1 @@
+export declare const Loader: import("@builder.io/qwik").Component<unknown>;

package/lib-types/components/modal/modal.d.ts

@@ -8,5 +8,6 @@ export interface ModalProps {
     secondaryButtonLabel?: string;
     primaryAction?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
     secondaryAction?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>>;
+    isLoading?: Signal<boolean>;
 }
 export declare const Modal: import("@builder.io/qwik").Component<ModalProps>;

package/lib-types/index.d.ts

@@ -3,3 +3,4 @@ export { Counter } from './components/counter/counter';
 export { Button } from './components/button/button';
 export { NavigationMenu } from './components/navigationmenu/NavigationMenu';
 export { Modal } from './components/modal/modal';
+export { Loader } from './components/loader/loader';

package/lib-types/stories/button.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<ButtonProps>;
 export declare const Primary: Story;
 export declare const WithIcon: Story;
+export declare const WithLoader: Story;

package/lib-types/stories/loader.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WhiteLoader: Story;

package/lib-types/stories/modal.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const WithoutTitle: Story;
 export declare const LongContent: Story;
 export declare const WithoutCloseButton: Story;
+export declare const WithLoadingBtn: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",