@nr1e/qwik-ui 2.0.19 → 2.0.20

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

@@ -5,37 +5,26 @@ const qwik = require("@builder.io/qwik");
 const qwikIcons = require("@nr1e/qwik-icons");
 const button = require("./button.qwik.cjs");
 const ProcessingButton = qwik.component$((props) => {
-  const externalProcessing = qwik.isSignal(props.processing) ? props.processing : void 0;
   const internalProcessing = qwik.useSignal(qwik.isSignal(props.processing) ? props.processing.value : props.processing ?? false);
+  const processing = qwik.isSignal(props.processing) ? props.processing : internalProcessing;
   const onClick$ = props.onClick$;
-  qwik.useTask$(({ track }) => {
-    if (externalProcessing) {
-      track(() => externalProcessing.value);
-      if (externalProcessing.value !== internalProcessing.value) {
-        internalProcessing.value = externalProcessing.value;
-      }
-    }
-  });
-  qwik.useTask$(({ track }) => {
-    if (externalProcessing) {
-      track(() => internalProcessing.value);
-      if (externalProcessing.value !== internalProcessing.value) {
-        externalProcessing.value = internalProcessing.value;
-      }
-    }
-  });
   return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
     ...props,
     class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
-    disabled: internalProcessing.value || props.disabled,
+    disabled: processing.value || props.disabled,
     onClick$: (e) => {
-      internalProcessing.value = true;
+      processing.value = true;
       if (onClick$) {
-        onClick$(e);
+        const result = onClick$(e);
+        if (result instanceof Promise) {
+          result.finally(() => {
+            processing.value = false;
+          });
+        }
       }
     },
-    icon: internalProcessing.value ? qwikIcons.SpinnersBarsFade : props.icon,
-    iconClass: internalProcessing.value ? "animate-spin" : props.iconClass,
+    icon: processing.value ? qwikIcons.SpinnersBarsFade : props.icon,
+    iconClass: processing.value ? "animate-spin" : props.iconClass,
     children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
   });
 });

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

@@ -1,39 +1,28 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, isSignal, useSignal, useTask$, Slot } from "@builder.io/qwik";
+import { component$, useSignal, isSignal, Slot } from "@builder.io/qwik";
 import { SpinnersBarsFade } from "@nr1e/qwik-icons";
 import { Button } from "./button.qwik.mjs";
 const ProcessingButton = component$((props) => {
-  const externalProcessing = isSignal(props.processing) ? props.processing : void 0;
   const internalProcessing = useSignal(isSignal(props.processing) ? props.processing.value : props.processing ?? false);
+  const processing = isSignal(props.processing) ? props.processing : internalProcessing;
   const onClick$ = props.onClick$;
-  useTask$(({ track }) => {
-    if (externalProcessing) {
-      track(() => externalProcessing.value);
-      if (externalProcessing.value !== internalProcessing.value) {
-        internalProcessing.value = externalProcessing.value;
-      }
-    }
-  });
-  useTask$(({ track }) => {
-    if (externalProcessing) {
-      track(() => internalProcessing.value);
-      if (externalProcessing.value !== internalProcessing.value) {
-        externalProcessing.value = internalProcessing.value;
-      }
-    }
-  });
   return /* @__PURE__ */ jsx(Button, {
     ...props,
     class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
-    disabled: internalProcessing.value || props.disabled,
+    disabled: processing.value || props.disabled,
     onClick$: (e) => {
-      internalProcessing.value = true;
+      processing.value = true;
       if (onClick$) {
-        onClick$(e);
+        const result = onClick$(e);
+        if (result instanceof Promise) {
+          result.finally(() => {
+            processing.value = false;
+          });
+        }
       }
     },
-    icon: internalProcessing.value ? SpinnersBarsFade : props.icon,
-    iconClass: internalProcessing.value ? "animate-spin" : props.iconClass,
+    icon: processing.value ? SpinnersBarsFade : props.icon,
+    iconClass: processing.value ? "animate-spin" : props.iconClass,
     children: /* @__PURE__ */ jsx(Slot, {})
   });
 });

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

@@ -15,7 +15,7 @@ export interface ButtonProps {
     /**
      * Callback function to be called when the button is clicked.
      */
-    onClick$?: QRL<(event: Event) => void>;
+    onClick$?: QRL<(event: Event) => void | Promise<void>>;
     /**
      * Whether the button is disabled.
      */

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

@@ -2,9 +2,7 @@ import { Signal } from '@builder.io/qwik';
 import { ButtonProps } from './button';
 /**
  * Props for the ProcessingButton component. This class will replace the icon
- * with a rotating spinner when the button is processing. It will also
- * automatically set processing to true when the button is clicked. It does
- * not set processing to false when the button is clicked.
+ * with a rotating spinner when clicked.
  */
 export interface ProcessingButtonProps extends ButtonProps {
     /**

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

@@ -11,7 +11,7 @@ export interface RefreshButtonProps {
     /**
      * Callback function to be called when the button is clicked.
      */
-    onClick$?: QRL<(event: Event) => void>;
+    onClick$?: QRL<(event: Event) => void | Promise<void>>;
     /**
      * Whether the button is disabled.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {