@nr1e/qwik-ui 2.0.6 → 2.0.7

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

@@ -91,16 +91,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;
@@ -134,7 +140,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 +159,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

@@ -89,16 +89,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;
@@ -132,7 +138,7 @@ const TextField = component$((props) => {
             name: "left"
           }),
           /* @__PURE__ */ jsx("input", {
-            type: "text",
+            type: props.type || "text",
             ...props.id && {
               id: props.id
             },
@@ -151,6 +157,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.7",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {