@nr1e/qwik-ui 2.0.6 → 2.0.8

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

@@ -16,6 +16,8 @@ const TextField = qwik.component$((props) => {
     }
   }
   const touched = qwik.useSignal(false);
+  const originalTriggerResetValue = props.triggerReset?.value;
+  const originalTriggerValidationValue = props.triggerValidation?.value;
   qwik.useTask$(({ track }) => {
     if (props.error && typeof props.error !== "string") {
       track(() => error.value);
@@ -67,9 +69,11 @@ const TextField = qwik.component$((props) => {
   qwik.useTask$(async ({ track }) => {
     if (props.triggerReset) {
       track(() => props.triggerReset?.value);
-      value.value = originalValue;
-      error.value = void 0;
-      touched.value = false;
+      if (originalTriggerResetValue !== props.triggerReset.value) {
+        value.value = originalValue;
+        error.value = void 0;
+        touched.value = false;
+      }
     }
   });
   const validate = qwik.$(async () => {
@@ -91,16 +95,22 @@ const TextField = qwik.component$((props) => {
           return;
         }
       }
+      if (value.value !== result.output) {
+        value.value = result.output;
+      }
     }
     if (props.validate$) {
       const result = await props.validate$(value.value);
-      if (result) {
+      if (!result.success) {
         if (props.valid) {
           props.valid.value = false;
         }
-        error.value = result;
+        error.value = result.error;
         return;
       }
+      if (value.value !== result.output) {
+        value.value = result.output;
+      }
     }
     if (props.valid) {
       props.valid.value = true;
@@ -110,8 +120,10 @@ const TextField = qwik.component$((props) => {
   qwik.useTask$(async ({ track }) => {
     if (props.triggerValidation) {
       track(() => props.triggerValidation?.value);
-      touched.value = true;
-      await validate();
+      if (props.triggerValidation.value !== originalTriggerValidationValue) {
+        touched.value = true;
+        await validate();
+      }
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -134,7 +146,7 @@ const TextField = qwik.component$((props) => {
             name: "left"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("input", {
-            type: "text",
+            type: props.type || "text",
             ...props.id && {
               id: props.id
             },
@@ -153,6 +165,7 @@ const TextField = qwik.component$((props) => {
               touched.value = true;
               value.value = target.value;
               await validate();
+              target.value = value.value ?? "";
               if (props.onBlur$) {
                 props.onBlur$(e, target.value, error);
               }

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

@@ -14,6 +14,8 @@ const TextField = component$((props) => {
     }
   }
   const touched = useSignal(false);
+  const originalTriggerResetValue = props.triggerReset?.value;
+  const originalTriggerValidationValue = props.triggerValidation?.value;
   useTask$(({ track }) => {
     if (props.error && typeof props.error !== "string") {
       track(() => error.value);
@@ -65,9 +67,11 @@ const TextField = component$((props) => {
   useTask$(async ({ track }) => {
     if (props.triggerReset) {
       track(() => props.triggerReset?.value);
-      value.value = originalValue;
-      error.value = void 0;
-      touched.value = false;
+      if (originalTriggerResetValue !== props.triggerReset.value) {
+        value.value = originalValue;
+        error.value = void 0;
+        touched.value = false;
+      }
     }
   });
   const validate = $(async () => {
@@ -89,16 +93,22 @@ const TextField = component$((props) => {
           return;
         }
       }
+      if (value.value !== result.output) {
+        value.value = result.output;
+      }
     }
     if (props.validate$) {
       const result = await props.validate$(value.value);
-      if (result) {
+      if (!result.success) {
         if (props.valid) {
           props.valid.value = false;
         }
-        error.value = result;
+        error.value = result.error;
         return;
       }
+      if (value.value !== result.output) {
+        value.value = result.output;
+      }
     }
     if (props.valid) {
       props.valid.value = true;
@@ -108,8 +118,10 @@ const TextField = component$((props) => {
   useTask$(async ({ track }) => {
     if (props.triggerValidation) {
       track(() => props.triggerValidation?.value);
-      touched.value = true;
-      await validate();
+      if (props.triggerValidation.value !== originalTriggerValidationValue) {
+        touched.value = true;
+        await validate();
+      }
     }
   });
   return /* @__PURE__ */ jsxs("div", {
@@ -132,7 +144,7 @@ const TextField = component$((props) => {
             name: "left"
           }),
           /* @__PURE__ */ jsx("input", {
-            type: "text",
+            type: props.type || "text",
             ...props.id && {
               id: props.id
             },
@@ -151,6 +163,7 @@ const TextField = component$((props) => {
               touched.value = true;
               value.value = target.value;
               await validate();
+              target.value = value.value ?? "";
               if (props.onBlur$) {
                 props.onBlur$(e, target.value, error);
               }

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

@@ -1,7 +1,32 @@
 import { QRL, Signal } from '@builder.io/qwik';
 import * as v from 'valibot';
+/**
+ * The type of the input field.
+ */
+export type TextFieldType = 'text' | 'date' | 'email' | 'number' | 'tel' | 'url';
+/**
+ * The result of validating a form input.
+ */
+export type TextFieldValidationResult = {
+    /**
+     * True if validation was successful. False if validation failed.
+     */
+    success: boolean;
+    /**
+     * The error message if validation failed.
+     */
+    error?: string;
+    /**
+     * The normalized value of the input after successful validation.
+     */
+    output: string | null | undefined;
+};
+/**
+ * Properties for the TextField component.
+ */
 export interface TextFieldProps {
     id?: string;
+    type?: TextFieldType;
     label?: string;
     name?: string;
     value?: string | null | Signal<string | null | undefined>;
@@ -10,19 +35,47 @@ export interface TextFieldProps {
     maxLength?: number;
     required?: boolean;
     disabled?: boolean | Signal<boolean>;
+    /**
+     * Called when the input loses focus.
+     */
     onBlur$?: QRL<(event: FocusEvent, value: string, error: Signal<string | undefined>) => void>;
+    /**
+     * Called when the input value changes.
+     */
     onInput$?: QRL<(event: InputEvent, value: string, error: Signal<string | undefined>) => void>;
+    /**
+     * Called on blur or input events
+     */
     onEvent$?: QRL<(type: 'blur' | 'input', event: FocusEvent | InputEvent, value: string, error: Signal<string | undefined>) => void>;
-    validate$?: QRL<(value: string | null | undefined) => string | undefined>;
+    /**
+     * Validates the form input. This is called on input and blur events.
+     */
+    validate$?: QRL<(value: string | null | undefined) => TextFieldValidationResult>;
+    /**
+     * Called to validate the form input. This is called on input and blur events
+     * and is an alternative to the validate$ prop.
+     */
     schema$?: QRL<() => v.BaseSchema<any, any, any>>;
+    /**
+     * An optional signal that indicates whether the input is valid.
+     */
     valid?: Signal<undefined | boolean>;
     /**
      * Increment the value of this signal to reset the input to its original value.
      */
     triggerReset?: Signal<number>;
     /**
-     * Increment the value of this signal to force validation to execute.
+     * Increment the value of this signal to force validation to execute. Be
+     * aware that this will also cause the input to be touched, which will
+     * display the error message if one exists.
      */
     triggerValidation?: Signal<number>;
 }
+/**
+ * A standardized text input field meant to be used independently or with Qwik
+ * Modular Forms.
+ *
+ * Be aware that the normalized value of the input from validation is reflected
+ * back into the text field automatically on blur.
+ */
 export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;

package/package.json

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