@nr1e/qwik-ui 0.0.13 → 0.0.15

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

@@ -3,30 +3,38 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const CheckboxField = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+  const error = qwik.useSignal(props.error);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
-    children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
-      class: "label",
-      ...props.id && {
-        for: props.id
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("input", {
-          type: "checkbox",
-          ...props.name && {
-            name: props.name
-          },
-          ...props.id && {
-            id: props.id
-          },
-          ...props.checked && {
-            checked: props.checked
-          },
-          class: "checkbox"
-        }),
-        props.label
-      ]
-    })
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", {
+            type: "checkbox",
+            ...props.name && {
+              name: props.name
+            },
+            ...props.id && {
+              id: props.id
+            },
+            ...props.checked && {
+              checked: props.checked
+            },
+            class: `checkbox ${error.value ? "checkbox-error" : ""}`,
+            onClick$: (e) => props.onClick$ && props.onClick$(e, e.target.checked, error)
+          }),
+          props.label
+        ]
+      }),
+      error.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
+      })
+    ]
   });
 });
 exports.CheckboxField = CheckboxField;

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

@@ -1,30 +1,38 @@
-import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
-import { component$ } from "@builder.io/qwik";
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useSignal } from "@builder.io/qwik";
 const CheckboxField = component$((props) => {
-  return /* @__PURE__ */ jsx("div", {
+  const error = useSignal(props.error);
+  return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
-    children: /* @__PURE__ */ jsxs("label", {
-      class: "label",
-      ...props.id && {
-        for: props.id
-      },
-      children: [
-        /* @__PURE__ */ jsx("input", {
-          type: "checkbox",
-          ...props.name && {
-            name: props.name
-          },
-          ...props.id && {
-            id: props.id
-          },
-          ...props.checked && {
-            checked: props.checked
-          },
-          class: "checkbox"
-        }),
-        props.label
-      ]
-    })
+    children: [
+      /* @__PURE__ */ jsxs("label", {
+        class: "label",
+        ...props.id && {
+          for: props.id
+        },
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            type: "checkbox",
+            ...props.name && {
+              name: props.name
+            },
+            ...props.id && {
+              id: props.id
+            },
+            ...props.checked && {
+              checked: props.checked
+            },
+            class: `checkbox ${error.value ? "checkbox-error" : ""}`,
+            onClick$: (e) => props.onClick$ && props.onClick$(e, e.target.checked, error)
+          }),
+          props.label
+        ]
+      }),
+      error.value && /* @__PURE__ */ jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
+      })
+    ]
   });
 });
 export {

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const SelectField = qwik.component$((props) => {
+  const error = qwik.useSignal(props.error);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
     children: [
@@ -13,7 +14,7 @@ const SelectField = qwik.component$((props) => {
         },
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           class: "label-text",
-          children: props.title
+          children: props.label
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("select", {
@@ -23,8 +24,13 @@ const SelectField = qwik.component$((props) => {
         ...props.id && {
           id: props.id
         },
-        class: "select",
+        class: `select ${error.value ? "select-error" : ""}`,
+        onChange$: (e) => props.onChange$ && props.onChange$(e, e.target.value, error),
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      }),
+      error.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
       })
     ]
   });

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot } from "@builder.io/qwik";
+import { component$, useSignal, Slot } from "@builder.io/qwik";
 const SelectField = component$((props) => {
+  const error = useSignal(props.error);
   return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
     children: [
@@ -11,7 +12,7 @@ const SelectField = component$((props) => {
         },
         children: /* @__PURE__ */ jsx("span", {
           class: "label-text",
-          children: props.title
+          children: props.label
         })
       }),
       /* @__PURE__ */ jsx("select", {
@@ -21,8 +22,13 @@ const SelectField = component$((props) => {
         ...props.id && {
           id: props.id
         },
-        class: "select",
+        class: `select ${error.value ? "select-error" : ""}`,
+        onChange$: (e) => props.onChange$ && props.onChange$(e, e.target.value, error),
         children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      error.value && /* @__PURE__ */ jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error.value
       })
     ]
   });

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

@@ -33,8 +33,8 @@ const TextField = qwik.component$((props) => {
             },
             class: "placeholder:opacity-50",
             placeholder: props.placeholder,
-            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, error),
-            onInput$: (e) => props.onInput$ && props.onInput$(e, error)
+            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, e.target.value, error),
+            onInput$: (e) => props.onInput$ && props.onInput$(e, e.target.value, error)
           }),
           /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "right"

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

@@ -31,8 +31,8 @@ const TextField = component$((props) => {
             },
             class: "placeholder:opacity-50",
             placeholder: props.placeholder,
-            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, error),
-            onInput$: (e) => props.onInput$ && props.onInput$(e, error)
+            onBlur$: (e) => props.onBlur$ && props.onBlur$(e, e.target.value, error),
+            onInput$: (e) => props.onInput$ && props.onInput$(e, e.target.value, error)
           }),
           /* @__PURE__ */ jsx(Slot, {
             name: "right"

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

@@ -1,7 +1,10 @@
+import { QRL, Signal } from '@builder.io/qwik';
 export interface CheckboxFieldProps {
     id?: string;
     label: string;
     name?: string;
     checked?: boolean;
+    error?: string;
+    onClick$?: QRL<(event: Event, checked: boolean, error: Signal<string | undefined>) => void>;
 }
 export declare const CheckboxField: import("@builder.io/qwik").Component<CheckboxFieldProps>;

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

@@ -1,6 +1,9 @@
+import { QRL, Signal } from '@builder.io/qwik';
 export interface SelectFieldProps {
     id?: string;
-    title: string;
+    label: string;
     name?: string;
+    error?: string;
+    onChange$?: QRL<(event: Event, value: string, error: Signal<string | undefined>) => void>;
 }
 export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;

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

@@ -6,7 +6,7 @@ export interface TextFieldProps {
     placeholder?: string;
     error?: string;
     maxLength?: number;
-    onBlur$?: QRL<(event: FocusEvent, error: Signal<string | undefined | null>) => void>;
-    onInput$?: QRL<(event: InputEvent, error: Signal<string | undefined | null>) => void>;
+    onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
+    onInput$?: QRL<(event: InputEvent, value: string, error: Signal<string | undefined>) => void>;
 }
 export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {
@@ -60,7 +60,7 @@
     "build.lib": "vite build --mode lib",
     "build.types": "tsc --emitDeclarationOnly",
     "clean": "rm -rf lib lib-types",
-    "dev": "vite --mode ssr",
+    "dev": "vite --mode ssr --port 5175",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",