@vertz/ui 0.2.25 → 0.2.26

package/dist/shared/{chunk-bk7mmn92.js → chunk-h2sjma78.js}

@@ -103,6 +103,74 @@ function validate(schema, data) {
   }
   return { success: false, data: undefined, errors: { _form: "Validation failed" } };
 }
+function isSchemaLike(value) {
+  return value !== null && typeof value === "object" && "parse" in value && typeof value.parse === "function";
+}
+function resolveFieldSchema(schema, fieldPath) {
+  const shape = schema.shape;
+  if (!shape || typeof shape !== "object")
+    return;
+  const segments = fieldPath.split(".");
+  let current = shape;
+  for (let i = 0;i < segments.length; i++) {
+    if (!current || typeof current !== "object")
+      return;
+    const segment = segments[i];
+    let fieldSchema = current[segment];
+    if (i < segments.length - 1) {
+      let unwrapCount = 0;
+      while (fieldSchema && typeof fieldSchema === "object" && "unwrap" in fieldSchema && typeof fieldSchema.unwrap === "function" && !fieldSchema.shape && unwrapCount < 10) {
+        fieldSchema = fieldSchema.unwrap();
+        unwrapCount++;
+      }
+      if (fieldSchema && typeof fieldSchema === "object" && "shape" in fieldSchema && typeof fieldSchema.shape === "object") {
+        current = fieldSchema.shape;
+      } else {
+        return;
+      }
+    } else {
+      if (isSchemaLike(fieldSchema)) {
+        return fieldSchema;
+      }
+      return;
+    }
+  }
+  return;
+}
+function extractErrorFromParseResult(result) {
+  const err = result.error;
+  if (err instanceof Error) {
+    const issues = err.issues;
+    if (Array.isArray(issues) && issues.length > 0) {
+      return issues[0].message ?? "Validation failed";
+    }
+    return err.message;
+  }
+  return "Validation failed";
+}
+function validateField(schema, fieldName, value, formData) {
+  const fieldSchema = resolveFieldSchema(schema, fieldName);
+  if (fieldSchema) {
+    const result = fieldSchema.parse(value);
+    if (result.ok) {
+      return { valid: true, error: undefined };
+    }
+    const error = extractErrorFromParseResult(result);
+    return { valid: false, error };
+  }
+  if (formData) {
+    const result = validate(schema, formData);
+    if (result.success) {
+      return { valid: true, error: undefined };
+    }
+    const fieldError = result.errors[fieldName];
+    if (fieldError) {
+      return { valid: false, error: fieldError };
+    }
+    return { valid: true, error: undefined };
+  }
+  return { valid: true, error: undefined };
+}
 
 // src/form/form.ts
 var FIELD_STATE_SIGNALS = new Set(["error", "dirty", "touched", "value"]);
@@ -112,6 +180,8 @@ function form(sdkMethod, options) {
   const chainProxyCache = new Map;
   const submitting = signal(false);
   const fieldGeneration = signal(0);
+  const revalidateOn = options?.revalidateOn ?? "blur";
+  let hasSubmitted = false;
   const dirty = computed(() => {
     fieldGeneration.value;
     for (const field of fieldCache.values()) {
@@ -178,6 +248,7 @@ function form(sdkMethod, options) {
   }
   const resolvedSchema = options?.schema ?? sdkMethod.meta?.bodySchema;
   async function submitPipeline(formData) {
+    hasSubmitted = true;
     const data = formDataToObject(formData, { nested: true });
     if (resolvedSchema) {
       const result2 = validate(resolvedSchema, data);
@@ -209,10 +280,42 @@ function form(sdkMethod, options) {
   }
   let boundElement;
   function resetForm() {
+    hasSubmitted = false;
     for (const field of fieldCache.values()) {
       field.reset();
     }
   }
+  function assembleFormData() {
+    const result = {};
+    for (const [name, f] of fieldCache) {
+      const value = f.value.peek();
+      if (!name.includes(".")) {
+        result[name] = value;
+        continue;
+      }
+      const segments = name.split(".");
+      let current = result;
+      for (let i = 0;i < segments.length - 1; i++) {
+        const seg = segments[i];
+        if (!(seg in current) || typeof current[seg] !== "object" || current[seg] === null) {
+          current[seg] = {};
+        }
+        current = current[seg];
+      }
+      current[segments[segments.length - 1]] = value;
+    }
+    return result;
+  }
+  function revalidateFieldIfNeeded(fieldName) {
+    if (!hasSubmitted || revalidateOn === "submit" || !resolvedSchema)
+      return;
+    const field = fieldCache.get(fieldName);
+    if (!field || field.error.peek() === undefined)
+      return;
+    const formData = assembleFormData();
+    const result = validateField(resolvedSchema, fieldName, field.value.peek(), formData);
+    field.error.value = result.valid ? undefined : result.error;
+  }
   async function submitPipelineWithReset(formData) {
     await submitPipeline(formData);
     if (options?.resetOnSuccess && !submitting.peek() && boundElement) {
@@ -228,6 +331,9 @@ function form(sdkMethod, options) {
       return;
     const field = getOrCreateField(target.name);
     field.setValue(target.value);
+    if (revalidateOn === "change") {
+      revalidateFieldIfNeeded(target.name);
+    }
   }
   function handleFocusout(e) {
     const target = e.target;
@@ -235,6 +341,9 @@ function form(sdkMethod, options) {
       return;
     const field = getOrCreateField(target.name);
     field.touched.value = true;
+    if (revalidateOn === "blur") {
+      revalidateFieldIfNeeded(target.name);
+    }
   }
   const baseProperties = {
     action: sdkMethod.url,

package/dist/src/form/public.d.ts

@@ -156,6 +156,17 @@ interface FormOptions<
 	onError?: (errors: Record<string, string>) => void;
 	/** When true, reset the form after a successful submission. */
 	resetOnSuccess?: boolean;
+	/**
+	* Controls when fields with errors are re-validated after the first form submission.
+	*
+	* - `'blur'` (default) — Re-validates flagged fields when the user blurs them.
+	* - `'change'` — Re-validates flagged fields on every input/change event.
+	* - `'submit'` — No re-validation between submissions; errors only update on submit.
+	*
+	* Re-validation only activates after the first submit attempt. Fields without prior
+	* errors are never re-validated on blur/change (no premature validation).
+	*/
+	revalidateOn?: "submit" | "blur" | "change";
 }
 /**
 * Create a form instance bound to an SDK method.

package/dist/src/form/public.js

@@ -3,7 +3,7 @@ import {
   form,
   formDataToObject,
   validate
-} from "../../shared/chunk-bk7mmn92.js";
+} from "../../shared/chunk-h2sjma78.js";
 import"../../shared/chunk-ppr06jgn.js";
 export {
   validate,

package/dist/src/index.d.ts

@@ -964,6 +964,17 @@ interface FormOptions<
 	onError?: (errors: Record<string, string>) => void;
 	/** When true, reset the form after a successful submission. */
 	resetOnSuccess?: boolean;
+	/**
+	* Controls when fields with errors are re-validated after the first form submission.
+	*
+	* - `'blur'` (default) — Re-validates flagged fields when the user blurs them.
+	* - `'change'` — Re-validates flagged fields on every input/change event.
+	* - `'submit'` — No re-validation between submissions; errors only update on submit.
+	*
+	* Re-validation only activates after the first submit attempt. Fields without prior
+	* errors are never re-validated on blur/change (no premature validation).
+	*/
+	revalidateOn?: "submit" | "blur" | "change";
 }
 /**
 * Create a form instance bound to an SDK method.

package/dist/src/index.js

@@ -54,7 +54,7 @@ import {
   form,
   formDataToObject,
   validate
-} from "../shared/chunk-bk7mmn92.js";
+} from "../shared/chunk-h2sjma78.js";
 import {
   EntityStore,
   FieldSelectionTracker,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui",
-  "version": "0.2.25",
+  "version": "0.2.26",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI framework — signals, components, JSX runtime",
@@ -74,11 +74,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/fetch": "^0.2.24"
+    "@vertz/fetch": "^0.2.25"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/schema": "^0.2.24",
+    "@vertz/schema": "^0.2.25",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"