@nr1e/qwik-ui 0.0.16 → 0.0.18

package/lib/components/dialog.qwik.cjs

@@ -8,15 +8,33 @@ const alertInfo = require("./alert-info.qwik.cjs");
 const alertWarning = require("./alert-warning.qwik.cjs");
 const alertSuccess = require("./alert-success.qwik.cjs");
 const Dialog = qwik.component$((props) => {
+  const internalOpen = qwik.useSignal(props.open.value);
+  const dialog = qwik.useSignal();
+  qwik.useTask$(({ track }) => {
+    track(() => props.open.value);
+    if (!props.open.value && internalOpen.value) {
+      if (props.onClose$ && dialog.value) {
+        props.onClose$(dialog.value);
+      }
+      internalOpen.value = false;
+    }
+    if (props.open.value && !internalOpen.value) {
+      if (props.onOpen$ && dialog.value) {
+        props.onOpen$(dialog.value);
+      }
+      internalOpen.value = true;
+    }
+  });
   qwik.useOnDocument("keydown", qwik.$((event) => {
     if (event.key === "Escape") {
       props.open.value = false;
     }
   }));
   return /* @__PURE__ */ jsxRuntime.jsx("dialog", {
+    ref: dialog,
     class: `modal ${props.class}`,
     id: props.id,
-    open: props.open.value,
+    open: internalOpen.value,
     children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
       class: "modal-box",
       children: [
@@ -57,7 +75,7 @@ const Dialog = qwik.component$((props) => {
           ]
         }),
         /* @__PURE__ */ jsxRuntime.jsx("div", {
-          class: "modal-action",
+          class: "modal-action mt-2",
           children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "action"
           })

package/lib/components/dialog.qwik.mjs

@@ -1,20 +1,38 @@
 import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
-import { component$, useOnDocument, $, Slot } from "@builder.io/qwik";
+import { component$, useSignal, useTask$, useOnDocument, $, Slot } from "@builder.io/qwik";
 import { MdiClose } from "../qwik-icons/lib/components/icons/mdi-close.qwik.qwik.mjs";
 import { AlertError } from "./alert-error.qwik.mjs";
 import { AlertInfo } from "./alert-info.qwik.mjs";
 import { AlertWarning } from "./alert-warning.qwik.mjs";
 import { AlertSuccess } from "./alert-success.qwik.mjs";
 const Dialog = component$((props) => {
+  const internalOpen = useSignal(props.open.value);
+  const dialog = useSignal();
+  useTask$(({ track }) => {
+    track(() => props.open.value);
+    if (!props.open.value && internalOpen.value) {
+      if (props.onClose$ && dialog.value) {
+        props.onClose$(dialog.value);
+      }
+      internalOpen.value = false;
+    }
+    if (props.open.value && !internalOpen.value) {
+      if (props.onOpen$ && dialog.value) {
+        props.onOpen$(dialog.value);
+      }
+      internalOpen.value = true;
+    }
+  });
   useOnDocument("keydown", $((event) => {
     if (event.key === "Escape") {
       props.open.value = false;
     }
   }));
   return /* @__PURE__ */ jsx("dialog", {
+    ref: dialog,
     class: `modal ${props.class}`,
     id: props.id,
-    open: props.open.value,
+    open: internalOpen.value,
     children: /* @__PURE__ */ jsxs("div", {
       class: "modal-box",
       children: [
@@ -55,7 +73,7 @@ const Dialog = component$((props) => {
           ]
         }),
         /* @__PURE__ */ jsx("div", {
-          class: "modal-action",
+          class: "modal-action mt-2",
           children: /* @__PURE__ */ jsx(Slot, {
             name: "action"
           })

package/lib/components/text-field.qwik.cjs

@@ -25,11 +25,14 @@ const TextField = qwik.component$((props) => {
           }),
           /* @__PURE__ */ jsxRuntime.jsx("input", {
             type: "text",
+            ...props.id && {
+              id: props.id
+            },
             ...props.name && {
               name: props.name
             },
-            ...props.id && {
-              id: props.id
+            ...props.value && {
+              value: props.value
             },
             class: "placeholder:opacity-50",
             placeholder: props.placeholder,

package/lib/components/text-field.qwik.mjs

@@ -23,11 +23,14 @@ const TextField = component$((props) => {
           }),
           /* @__PURE__ */ jsx("input", {
             type: "text",
+            ...props.id && {
+              id: props.id
+            },
             ...props.name && {
               name: props.name
             },
-            ...props.id && {
-              id: props.id
+            ...props.value && {
+              value: props.value
             },
             class: "placeholder:opacity-50",
             placeholder: props.placeholder,

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

@@ -1,4 +1,4 @@
-import { Signal } from '@builder.io/qwik';
+import { QRL, Signal } from '@builder.io/qwik';
 export interface DialogProps {
     id?: string;
     open: Signal<boolean>;
@@ -9,5 +9,7 @@ export interface DialogProps {
     infoMessage?: string;
     successMessage?: string;
     warningMessage?: string;
+    onClose$?: QRL<(e: HTMLDialogElement) => void>;
+    onOpen$?: QRL<(e: HTMLDialogElement) => void>;
 }
 export declare const Dialog: import("@builder.io/qwik").Component<DialogProps>;

package/lib-types/components/text-field.d.ts

@@ -3,6 +3,7 @@ export interface TextFieldProps {
     id?: string;
     label: string;
     name?: string;
+    value?: string | null;
     placeholder?: string;
     error?: string;
     maxLength?: number;

package/package.json

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