@volverjs/form-vue 0.0.1 → 0.0.3

package/README.md

@@ -73,10 +73,13 @@ A `valid` or `invalid` event is emitted when the form status changes.
   const onSubmit = (formData) => {
     // Do something with the form data
   }
+  const onInvalid = (errors) => {
+    // Do something with the errors
+  }
 </script>
 
 <template>
-  <VvForm @submit="onSubmit">
+  <VvForm @submit="onSubmit" @invalid="onInvalid">
     <!-- form fields -->
     <button type="submit">Submit</button>
   </VvForm>
@@ -87,7 +90,10 @@ The submit can be triggered programmatically with the `submit()` method.
 
 ```vue
 <script lang="ts" setup>
-  const formEl = ref(null)
+  import { ref } from 'vue'
+  import type { FormComponent } from '@volverjs/form-vue'
+
+  const formEl = ref<InstanceType<FormComponent>>(null)
   const onSubmit = (formData) => {
     // Do something with the form data
   }
@@ -121,7 +127,6 @@ The throttle can be changed with the `updateThrottle` option.
 <template>
   <VvForm v-model="formData">
     <!-- form fields -->
-    <button type="submit">Submit</button>
   </VvForm>
 </template>
 ```
@@ -134,13 +139,13 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 ```vue
 <template>
   <VvForm>
-    <VvFormWrapper #default="{ invalid }">
+    <VvFormWrapper v-slot="{ invalid }">
       <div class="form-section-1">
         <span v-if="invalid">There is a validation error</span>
         <!-- form fields of section 1 -->
       </div>
     </VvFormWrapper>
-    <VvFormWrapper #default="{ invalid }">
+    <VvFormWrapper v-slot="{ invalid }">
       <div class="form-section-2">
         <span v-if="invalid">There is a validation error</span>
         <!-- form fields of the section 2 -->
@@ -150,6 +155,27 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 </template>
 ```
 
+`VvFormWrapper` can be used recursively to create a validation tree. The wrapper status is invalid if at least one of the fields inside it or one of its children is invalid.
+
+```vue
+<template>
+  <VvForm>
+    <VvFormWrapper v-slot="{ invalid }">
+      <div class="form-section">
+        <span v-if="invalid">There is a validation error</span>
+        <!-- form fields of section -->
+        <VvFormWrapper v-slot="{ invalid: groupInvalid }">
+          <div class="form-section__group">
+            <span v-if="groupInvalid">There is a validation error</span>
+            <!-- form fields of the group -->
+          </div>
+        </VvFormWrapper>
+      </div>
+    </VvFormWrapper>
+  </VvForm>
+</template>
+```
+
 ### VvFormField
 
 `VvFormField` allow you to render a [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) input component inside a form. It automatically bind the form data through the `name` attribute.
@@ -176,33 +202,33 @@ For nested objects, use the `name` attribute with dot notation.
 The type of input component is defined by the `type` attribute.
 All the available input types are listed in the [VvFormField documentation](/docs/VvFormField.md).
 
-You can also use the `VvFormField` component to render a default slot without .
+You can also use the `VvFormField` component to render a default slot without a `type` (default `type` is `custom`).
 
 ```vue
 <template>
   <VvForm>
     <VvFormField
-      name="name"
-      #default="{
+      v-slot="{
         modelValue,
         invalid,
         invalidLabel,
         formData,
         formErrors,
-        erros,
+        errors,
         onUpdate
       }"
+      name="surname"
     >
-      <label for="name">Name</label>
+      <label for="surname">Surname</label>
       <input
-        id="name"
+        id="surname"
         type="text"
         :value="modelValue"
         :aria-invalid="invalid"
-        :aria-errormessage="invalid ? 'name-alert' : undefined"
+        :aria-errormessage="invalid ? 'surname-alert' : undefined"
         @input="onUpdate"
       />
-      <small v-if="invalid" role="alert" id="name-alert">
+      <small v-if="invalid" role="alert" id="surname-alert">
         {{ invalidLabel }}
       </small>
     </VvFormField>
@@ -219,7 +245,7 @@ Or a custom component.
 
 <template>
   <VvForm>
-    <VvFormField name="name" :is="MyInput" />
+    <VvFormField name="surname" :is="MyInput" />
   </VvForm>
 </template>
 ```
@@ -227,7 +253,7 @@ Or a custom component.
 ## Composable
 
 `useForm` can be used to create a form programmatically inside a Vue 3 Component.
-If the plugin is defined globally, the settings are inherited but can be customized.
+The default settings are inherited from the plugin (if it was defined).
 
 ```vue
 <script lang="ts" setup>
@@ -257,6 +283,7 @@ If the plugin is defined globally, the settings are inherited but can be customi
 ## Outside a Vue 3 Component
 
 `formFactory` can be used to create a form outside a Vue 3 Component.
+No settings are inherited.
 
 ```ts
 import { formFactory } from '@volverjs/form-vue'

package/dist/VvForm.d.ts

@@ -1,12 +1,13 @@
 import { type InjectionKey } from 'vue';
-import type { AnyZodObject } from 'zod';
+import type { AnyZodObject, ZodEffects } from 'zod';
 import type { InjectedFormData } from './types';
 export declare enum FormStatus {
     invalid = "invalid",
     valid = "valid"
 }
-export declare const defineForm: (schema: AnyZodObject, provideKey: InjectionKey<InjectedFormData>, options?: {
+export declare const defineForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>, provideKey: InjectionKey<InjectedFormData>, options?: {
     updateThrottle?: number;
+    continuosValidation?: boolean;
 }) => import("vue").DefineComponent<{
     modelValue: {
         type: ObjectConstructor;

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import { type InjectionKey, type Plugin } from 'vue';
-import type { AnyZodObject } from 'zod';
+import type { AnyZodObject, ZodEffects } from 'zod';
+import { defineFormField } from './VvFormField';
+import { defineForm } from './VvForm';
+import { defineFormWrapper } from './VvFormWrapper';
 import type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions } from './types';
-export declare const formFactory: (schema: AnyZodObject, options?: FormComposableOptions) => {
+export declare const formFactory: (schema: AnyZodObject | ZodEffects<AnyZodObject>, options?: FormComposableOptions) => {
     VvForm: import("vue").DefineComponent<{
         modelValue: {
             type: ObjectConstructor;
@@ -60,7 +63,7 @@ export declare const formFactory: (schema: AnyZodObject, options?: FormComposabl
 };
 export declare const pluginInjectionKey: InjectionKey<FormPluginOptions>;
 export declare const createForm: (options: FormPluginOptions) => Plugin & Partial<ReturnType<typeof useForm>>;
-export declare const useForm: (schema: AnyZodObject, options?: FormComposableOptions) => {
+export declare const useForm: (schema: AnyZodObject | ZodEffects<AnyZodObject>, options?: FormComposableOptions) => {
     VvForm: import("vue").DefineComponent<{
         modelValue: {
             type: ObjectConstructor;
@@ -119,4 +122,7 @@ export declare const useForm: (schema: AnyZodObject, options?: FormComposableOpt
 };
 export { FormFieldType } from './enums';
 export { defaultObjectBySchema } from './utils';
-export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, };
+type FormComponent = ReturnType<typeof defineForm>;
+type FormWrapperComponent = ReturnType<typeof defineFormWrapper>;
+type FormFieldComponent = ReturnType<typeof defineFormField>;
+export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormComponent, FormWrapperComponent, FormFieldComponent, };

package/dist/index.es.js

@@ -1,10 +1,10 @@
-import { defineComponent as w, computed as h, onMounted as q, inject as S, toRefs as G, watch as V, provide as $, readonly as A, resolveComponent as b, defineAsyncComponent as Z, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
+import { defineComponent as w, computed as h, onMounted as Z, inject as S, toRefs as G, watch as V, provide as $, readonly as M, resolveComponent as b, defineAsyncComponent as q, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
 import { watchThrottled as X } from "@vueuse/core";
-import { ZodDefault as P, ZodObject as T } from "zod";
-function E(e) {
+import { ZodEffects as P, ZodDefault as T, ZodObject as F } from "zod";
+function A(e) {
   return Array.isArray(e);
 }
-function F(e) {
+function ee(e) {
   return typeof e < "u";
 }
 function N(e) {
@@ -16,26 +16,26 @@ function L(e) {
 function D(e) {
   return typeof e == "string";
 }
-function M(e) {
+function E(e) {
   return typeof e > "u";
 }
-const ee = /^[0-9]+$/, re = ["__proto__", "prototype", "constructor"];
+const re = /^[0-9]+$/, te = ["__proto__", "prototype", "constructor"];
 function _(e, r, t) {
-  const a = F(t) ? t : void 0;
+  const a = ee(t) ? t : void 0;
   if (!L(e) || !D(r))
     return a;
   const n = W(r);
   if (n.length !== 0) {
-    for (const o of n) {
-      if (o === "*")
+    for (const u of n) {
+      if (u === "*")
         continue;
       const i = function(s) {
-        return s.map((f) => M(f) || N(f) ? f : E(f) ? i(f) : f[o]);
+        return s.map((f) => E(f) || N(f) ? f : A(f) ? i(f) : f[u]);
       };
-      if (E(e) && !ee.test(o) ? e = i(e) : e = e[o], M(e) || N(e))
+      if (A(e) && !re.test(u) ? e = i(e) : e = e[u], E(e) || N(e))
         break;
     }
-    return M(e) ? a : e;
+    return E(e) ? a : e;
   }
 }
 function U(e, r, t) {
@@ -45,27 +45,27 @@ function U(e, r, t) {
   if (a.length === 0)
     return;
   const n = a.length;
-  for (let o = 0; o < n; o++) {
-    const i = a[o];
-    if (o === n - 1) {
+  for (let u = 0; u < n; u++) {
+    const i = a[u];
+    if (u === n - 1) {
       e[i] = t;
       return;
     }
-    if (i === "*" && E(e)) {
-      const s = a.slice(o + 1).join(".");
+    if (i === "*" && A(e)) {
+      const s = a.slice(u + 1).join(".");
       for (const f of e)
         U(f, s, t);
       return;
     }
-    M(e[i]) && (e[i] = {}), e = e[i];
+    E(e[i]) && (e[i] = {}), e = e[i];
   }
 }
 function W(e) {
   const r = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
-  return r.some((t) => re.indexOf(t) !== -1) ? [] : r;
+  return r.some((t) => te.indexOf(t) !== -1) ? [] : r;
 }
 var l = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(l || {});
-const te = (e, r, t, a = {}) => w({
+const ne = (e, r, t, a = {}) => w({
   name: "FieldComponent",
   props: {
     type: {
@@ -96,34 +96,34 @@ const te = (e, r, t, a = {}) => w({
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(n, { slots: o, emit: i }) {
+  setup(n, { slots: u, emit: i }) {
     const s = h({
       get() {
-        if (u != null && u.modelValue)
+        if (o != null && o.modelValue)
           return _(
-            Object(u.modelValue.value),
+            Object(o.modelValue.value),
             String(n.name)
           );
       },
       set(c) {
-        u != null && u.modelValue && (U(
-          Object(u.modelValue.value),
+        o != null && o.modelValue && (U(
+          Object(o.modelValue.value),
           String(n.name),
           c
         ), i("update:modelValue", {
           newValue: s.value,
-          formData: u == null ? void 0 : u.modelValue
+          formData: o == null ? void 0 : o.modelValue
         }));
       }
     });
-    q(() => {
+    Z(() => {
       s.value === void 0 && n.defaultValue !== void 0 && (s.value = n.defaultValue);
     });
     const f = S(r, void 0);
     f && f.fields.value.add(n.name);
-    const u = S(e), { props: d, name: m } = G(n), v = h(() => {
-      if (u != null && u.errors.value)
-        return _(u.errors.value, String(n.name));
+    const o = S(e), { props: d, name: m } = G(n), v = h(() => {
+      if (o != null && o.errors.value)
+        return _(o.errors.value, String(n.name));
     }), y = h(() => {
       var c;
       return (c = v.value) == null ? void 0 : c._errors;
@@ -135,15 +135,15 @@ const te = (e, r, t, a = {}) => w({
         n.name
       ));
     }), V(
-      () => u == null ? void 0 : u.modelValue,
+      () => o == null ? void 0 : o.modelValue,
       () => {
-        i("update:formData", u == null ? void 0 : u.modelValue);
+        i("update:formData", o == null ? void 0 : o.modelValue);
       },
       { deep: !0 }
     );
     const k = (c) => {
       s.value = c;
-    }, I = h(() => typeof d.value == "function" ? d.value(u == null ? void 0 : u.modelValue) : d.value), R = h(() => ({
+    }, I = h(() => typeof d.value == "function" ? d.value(o == null ? void 0 : o.modelValue) : d.value), R = h(() => ({
       ...I.value,
       name: I.value.name ?? n.name,
       invalid: p.value,
@@ -172,22 +172,22 @@ const te = (e, r, t, a = {}) => w({
       "onUpdate:modelValue": k
     }));
     return $(t, {
-      name: A(m),
-      errors: A(v)
+      name: M(m),
+      errors: M(v)
     }), { component: h(() => {
       if (n.type === l.custom)
         return {
           render() {
             var c;
-            return ((c = o.default) == null ? void 0 : c.call(o, {
+            return ((c = u.default) == null ? void 0 : c.call(u, {
               modelValue: s.value,
               onUpdate: k,
               invalid: p.value,
               invalidLabel: y.value,
-              formData: u == null ? void 0 : u.modelValue.value,
-              formErrors: u == null ? void 0 : u.errors.value,
+              formData: o == null ? void 0 : o.modelValue.value,
+              formErrors: o == null ? void 0 : o.errors.value,
               errors: v.value
-            })) ?? o.defalut;
+            })) ?? u.defalut;
           }
         };
       if (!a.lazyLoad) {
@@ -223,7 +223,7 @@ const te = (e, r, t, a = {}) => w({
           `[form-vue warn]: ${c} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
         );
       }
-      return Z(async () => {
+      return q(async () => {
         switch (a.sideEffects && await Promise.resolve(a.sideEffects(n.type)), n.type) {
           case l.textarea:
             return import("@volverjs/ui-vue/vv-textarea");
@@ -246,44 +246,44 @@ const te = (e, r, t, a = {}) => w({
     return this.is ? O(this.is, this.hasProps, this.$slots) : this.type === l.custom ? O(this.component, null, this.$slots) : O(this.component, this.hasProps, this.$slots);
   }
 });
-var ne = function(r) {
-  return ae(r) && !oe(r);
+var ae = function(r) {
+  return ue(r) && !oe(r);
 };
-function ae(e) {
+function ue(e) {
   return !!e && typeof e == "object";
 }
 function oe(e) {
   var r = Object.prototype.toString.call(e);
-  return r === "[object RegExp]" || r === "[object Date]" || ie(e);
-}
-var ue = typeof Symbol == "function" && Symbol.for, le = ue ? Symbol.for("react.element") : 60103;
-function ie(e) {
-  return e.$$typeof === le;
+  return r === "[object RegExp]" || r === "[object Date]" || se(e);
 }
+var le = typeof Symbol == "function" && Symbol.for, ie = le ? Symbol.for("react.element") : 60103;
 function se(e) {
+  return e.$$typeof === ie;
+}
+function ce(e) {
   return Array.isArray(e) ? [] : {};
 }
 function j(e, r) {
-  return r.clone !== !1 && r.isMergeableObject(e) ? g(se(e), e, r) : e;
+  return r.clone !== !1 && r.isMergeableObject(e) ? g(ce(e), e, r) : e;
 }
-function ce(e, r, t) {
+function fe(e, r, t) {
   return e.concat(r).map(function(a) {
     return j(a, t);
   });
 }
-function fe(e, r) {
+function de(e, r) {
   if (!r.customMerge)
     return g;
   var t = r.customMerge(e);
   return typeof t == "function" ? t : g;
 }
-function de(e) {
+function me(e) {
   return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(e).filter(function(r) {
     return Object.propertyIsEnumerable.call(e, r);
   }) : [];
 }
 function C(e) {
-  return Object.keys(e).concat(de(e));
+  return Object.keys(e).concat(me(e));
 }
 function B(e, r) {
   try {
@@ -292,21 +292,21 @@ function B(e, r) {
     return !1;
   }
 }
-function me(e, r) {
+function ve(e, r) {
   return B(e, r) && !(Object.hasOwnProperty.call(e, r) && Object.propertyIsEnumerable.call(e, r));
 }
-function ve(e, r, t) {
+function be(e, r, t) {
   var a = {};
   return t.isMergeableObject(e) && C(e).forEach(function(n) {
     a[n] = j(e[n], t);
   }), C(r).forEach(function(n) {
-    me(e, n) || (B(e, n) && t.isMergeableObject(r[n]) ? a[n] = fe(n, t)(e[n], r[n], t) : a[n] = j(r[n], t));
+    ve(e, n) || (B(e, n) && t.isMergeableObject(r[n]) ? a[n] = de(n, t)(e[n], r[n], t) : a[n] = j(r[n], t));
   }), a;
 }
 function g(e, r, t) {
-  t = t || {}, t.arrayMerge = t.arrayMerge || ce, t.isMergeableObject = t.isMergeableObject || ne, t.cloneUnlessOtherwiseSpecified = j;
-  var a = Array.isArray(r), n = Array.isArray(e), o = a === n;
-  return o ? a ? t.arrayMerge(e, r, t) : ve(e, r, t) : j(r, t);
+  t = t || {}, t.arrayMerge = t.arrayMerge || fe, t.isMergeableObject = t.isMergeableObject || ae, t.cloneUnlessOtherwiseSpecified = j;
+  var a = Array.isArray(r), n = Array.isArray(e), u = a === n;
+  return u ? a ? t.arrayMerge(e, r, t) : be(e, r, t) : j(r, t);
 }
 g.all = function(r, t) {
   if (!Array.isArray(r))
@@ -315,13 +315,16 @@ g.all = function(r, t) {
     return g(a, n, t);
   }, {});
 };
-var be = g, he = be;
-const J = (e, r = {}) => he(
-  Object.fromEntries(
-    Object.entries(e.shape).map(([t, a]) => a instanceof P ? [t, a._def.defaultValue()] : a instanceof T ? [t, J(a)] : [t, void 0])
-  ),
-  r
-), ye = (e, r, t) => w({
+var he = g, ye = he;
+const J = (e, r = {}) => {
+  const t = e instanceof P ? e.innerType().shape : e.shape;
+  return ye(
+    Object.fromEntries(
+      Object.entries(t).map(([a, n]) => n instanceof T ? [a, n._def.defaultValue()] : n instanceof F ? [a, J(n)] : [a, void 0])
+    ),
+    r
+  );
+}, pe = (e, r, t) => w({
   name: "FormComponent",
   props: {
     modelValue: {
@@ -332,7 +335,7 @@ const J = (e, r = {}) => he(
   emits: ["invalid", "valid", "submit", "update:modelValue"],
   expose: ["submit", "errors", "status"],
   setup(a, { emit: n }) {
-    const o = x(
+    const u = x(
       J(e, a.modelValue)
     );
     V(
@@ -340,26 +343,26 @@ const J = (e, r = {}) => he(
       (d) => {
         if (d) {
           const m = Y(d) ? H(d) : d;
-          o.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
+          u.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
         }
       },
       { deep: !0 }
     ), X(
-      o,
+      u,
       (d) => {
-        i.value && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
+        (i.value || t != null && t.continuosValidation) && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
       },
       { deep: !0, throttle: (t == null ? void 0 : t.updateThrottle) ?? 500 }
     );
-    const i = x(), s = x(), f = (d = o.value) => {
+    const i = x(), s = x(), f = (d = u.value) => {
       const m = e.safeParse(d);
-      return m.success ? (i.value = void 0, s.value = "valid", o.value = m.data, n("valid", m.data), !0) : (i.value = m.error.format(), s.value = "invalid", n("invalid", i.value), !1);
-    }, u = () => f() ? (n("submit", o.value), !0) : !1;
+      return m.success ? (i.value = void 0, s.value = "valid", u.value = m.data, n("valid", m.data), !0) : (i.value = m.error.format(), s.value = "invalid", n("invalid", i.value), !1);
+    }, o = () => f() ? (n("submit", u.value), !0) : !1;
     return $(r, {
-      modelValue: o,
-      submit: u,
-      errors: A(i)
-    }), { submit: u };
+      modelValue: u,
+      submit: o,
+      errors: M(i)
+    }), { submit: o };
   },
   render() {
     return O(
@@ -370,7 +373,7 @@ const J = (e, r = {}) => he(
       this.$slots
     );
   }
-}), pe = (e, r) => w({
+}), Ve = (e, r) => w({
   name: "WrapperComponent",
   props: {
     name: {
@@ -385,48 +388,48 @@ const J = (e, r = {}) => he(
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
   setup(t, { emit: a }) {
-    const n = S(e), o = S(r, void 0), i = x(/* @__PURE__ */ new Set()), s = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
+    const n = S(e), u = S(r, void 0), i = x(/* @__PURE__ */ new Set()), s = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
     $(r, {
-      name: A(f),
+      name: M(f),
       errors: s,
       fields: i
     }), V(
       i,
       (d) => {
-        o != null && o.fields && d.forEach((m) => {
-          o == null || o.fields.value.add(m);
+        u != null && u.fields && d.forEach((m) => {
+          u == null || u.fields.value.add(m);
         });
       },
       { deep: !0 }
     ), V(
       () => new Map(s.value),
       (d, m) => {
-        o != null && o.errors && (Array.from(m.keys()).forEach((v) => {
-          o.errors.value.delete(v);
+        u != null && u.errors && (Array.from(m.keys()).forEach((v) => {
+          u.errors.value.delete(v);
         }), Array.from(d.keys()).forEach((v) => {
           const y = d.get(v);
-          y && o.errors.value.set(v, y);
+          y && u.errors.value.set(v, y);
         }));
       },
       { deep: !0 }
     );
-    const u = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
-    return V(u, () => {
-      u.value ? a("invalid") : a("valid");
-    }), { formProvided: n, invalid: u, fields: i, errors: s };
+    const o = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
+    return V(o, () => {
+      o.value ? a("invalid") : a("valid");
+    }), { formProvided: n, invalid: o, fields: i, errors: s };
   },
   render() {
-    var t, a, n, o, i, s, f, u;
+    var t, a, n, u, i, s, f, o;
     return this.tag ? O(
       this.tag,
       null,
-      ((o = (n = this.$slots).default) == null ? void 0 : o.call(n, {
+      ((u = (n = this.$slots).default) == null ? void 0 : u.call(n, {
         invalid: this.invalid,
         formData: (t = this.formProvided) == null ? void 0 : t.modelValue,
         errors: (a = this.formProvided) == null ? void 0 : a.errors,
         fieldsErrors: this.errors
       })) ?? this.$slots.defalut
-    ) : ((u = (f = this.$slots).default) == null ? void 0 : u.call(f, {
+    ) : ((o = (f = this.$slots).default) == null ? void 0 : o.call(f, {
       invalid: this.invalid,
       formData: (i = this.formProvided) == null ? void 0 : i.modelValue,
       errors: (s = this.formProvided) == null ? void 0 : s.errors,
@@ -434,24 +437,24 @@ const J = (e, r = {}) => he(
     })) ?? this.$slots.defalut;
   }
 }), K = (e, r = {}) => {
-  const t = Symbol(), a = Symbol(), n = Symbol(), o = ye(e, t, r), i = pe(
+  const t = Symbol(), a = Symbol(), n = Symbol(), u = pe(e, t, r), i = Ve(
     t,
     a
-  ), s = te(
+  ), s = ne(
     t,
     a,
     n,
     r
   );
   return {
-    VvForm: o,
+    VvForm: u,
     VvFormWrapper: i,
     VvFormField: s,
     formInjectionKey: t,
     formWrapperInjectionKey: a,
     formFieldInjectionKey: n
   };
-}, z = Symbol(), Se = (e) => {
+}, z = Symbol(), je = (e) => {
   let r = {};
   return e.schema && (r = K(e.schema, e)), {
     ...r,
@@ -459,15 +462,15 @@ const J = (e, r = {}) => he(
       t.provide(z, e), a && (t.config.globalProperties.$vvForm = e, r != null && r.VvForm && t.component("VvForm", r.VvForm), r != null && r.VvFormWrapper && t.component("VvFormWrapper", r.VvFormWrapper), r != null && r.VvFormField && t.component("VvFormField", r.VvFormField));
     }
   };
-}, je = (e, r = {}) => {
+}, Ee = (e, r = {}) => {
   const t = { ...S(z, {}), ...r };
   return K(e, t);
 };
 export {
   l as FormFieldType,
-  Se as createForm,
+  je as createForm,
   J as defaultObjectBySchema,
   K as formFactory,
   z as pluginInjectionKey,
-  je as useForm
+  Ee as useForm
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(b,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],n):(b=typeof globalThis<"u"?globalThis:b||self,n(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,n,D,M){"use strict";function S(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function A(e){return e===null}function E(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const W=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,r,t){const o=U(t)?t:void 0;if(!E(e)||!C(r))return o;const a=I(r);if(a.length!==0){for(const l of a){if(l==="*")continue;const c=function(u){return u.map(d=>O(d)||A(d)?d:S(d)?c(d):d[l])};if(S(e)&&!W.test(l)?e=c(e):e=e[l],O(e)||A(e))break}return O(e)?o:e}}function k(e,r,t){if(!E(e)||!C(r))return;const o=I(r);if(o.length===0)return;const a=o.length;for(let l=0;l<a;l++){const c=o[l];if(l===a-1){e[c]=t;return}if(c==="*"&&S(e)){const u=o.slice(l+1).join(".");for(const d of e)k(d,u,t);return}O(e[c])&&(e[c]={}),e=e[c]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>B.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>n.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:a=>Object.values(s).includes(a),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(a,{slots:l,emit:c}){const u=n.computed({get(){if(i!=null&&i.modelValue)return $(Object(i.modelValue.value),String(a.name))},set(f){i!=null&&i.modelValue&&(k(Object(i.modelValue.value),String(a.name),f),c("update:modelValue",{newValue:u.value,formData:i==null?void 0:i.modelValue}))}});n.onMounted(()=>{u.value===void 0&&a.defaultValue!==void 0&&(u.value=a.defaultValue)});const d=n.inject(r,void 0);d&&d.fields.value.add(a.name);const i=n.inject(e),{props:m,name:h}=n.toRefs(a),p=n.computed(()=>{if(i!=null&&i.errors.value)return $(i.errors.value,String(a.name))}),v=n.computed(()=>{var f;return(f=p.value)==null?void 0:f._errors}),V=n.computed(()=>p.value!==void 0);n.watch(V,()=>{V.value?(c("invalid",v.value),d&&d.errors.value.set(a.name,{_errors:v.value})):(c("valid",u.value),d&&d.errors.value.delete(a.name))}),n.watch(()=>i==null?void 0:i.modelValue,()=>{c("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{u.value=f},L=n.computed(()=>typeof m.value=="function"?m.value(i==null?void 0:i.modelValue):m.value),le=n.computed(()=>({...L.value,name:L.value.name??a.name,invalid:V.value,valid:a.showValid?Boolean(!V.value&&u.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(a.type),invalidLabel:v.value,modelValue:u.value,errors:a.is?p.value:void 0,"onUpdate:modelValue":G}));return n.provide(t,{name:n.readonly(h),errors:n.readonly(p)}),{component:n.computed(()=>{if(a.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:u.value,onUpdate:G,invalid:V.value,invalidLabel:v.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:p.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(a.type){case s.select:f=n.resolveComponent("VvSelect");break;case s.checkbox:f=n.resolveComponent("VvCheckbox");break;case s.radio:f=n.resolveComponent("VvRadio");break;case s.textarea:f=n.resolveComponent("VvTextarea");break;case s.radioGroup:f=n.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=n.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=n.resolveComponent("VvCombobox");break;default:f=n.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return n.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(a.type)),a.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?n.h(this.is,this.hasProps,this.$slots):this.type===s.custom?n.h(this.component,null,this.$slots):n.h(this.component,this.hasProps,this.$slots)}});var z=function(r){return K(r)&&!J(r)};function K(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?y(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return y;var t=r.customMerge(e);return typeof t=="function"?t:y}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function F(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function T(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(a){o[a]=g(e[a],t)}),N(r).forEach(function(a){F(e,a)||(_(e,a)&&t.isMergeableObject(r[a])?o[a]=X(a,t)(e[a],r[a],t):o[a]=g(r[a],t))}),o}function y(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||z,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),a=Array.isArray(e),l=o===a;return l?o?t.arrayMerge(e,r,t):T(e,r,t):g(r,t)}y.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,a){return y(o,a,t)},{})};var ee=y,re=ee;const j=(e,r={})=>re(Object.fromEntries(Object.entries(e.shape).map(([t,o])=>o instanceof M.ZodDefault?[t,o._def.defaultValue()]:o instanceof M.ZodObject?[t,j(o)]:[t,void 0])),r),te=(e,r,t)=>n.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:a}){const l=n.ref(j(e,o.modelValue));n.watch(()=>o.modelValue,m=>{if(m){const h=n.isProxy(m)?n.toRaw(m):m;l.value=typeof(h==null?void 0:h.clone)=="function"?h.clone():JSON.parse(JSON.stringify(h))}},{deep:!0}),D.watchThrottled(l,m=>{c.value&&d(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&a("update:modelValue",m)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=n.ref(),u=n.ref(),d=(m=l.value)=>{const h=e.safeParse(m);return h.success?(c.value=void 0,u.value="valid",l.value=h.data,a("valid",h.data),!0):(c.value=h.error.format(),u.value="invalid",a("invalid",c.value),!1)},i=()=>d()?(a("submit",l.value),!0):!1;return n.provide(r,{modelValue:l,submit:i,errors:n.readonly(c)}),{submit:i}},render(){return n.h("form",{onSubmit:n.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>n.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const a=n.inject(e),l=n.inject(r,void 0),c=n.ref(new Set),u=n.ref(new Map),{name:d}=n.toRefs(t);n.provide(r,{name:n.readonly(d),errors:u,fields:c}),n.watch(c,m=>{l!=null&&l.fields&&m.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),n.watch(()=>new Map(u.value),(m,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(p=>{l.errors.value.delete(p)}),Array.from(m.keys()).forEach(p=>{const v=m.get(p);v&&l.errors.value.set(p,v)}))},{deep:!0});const i=n.computed(()=>a!=null&&a.errors.value?u.value.size>0:!1);return n.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:a,invalid:i,fields:c,errors:u}},render(){var t,o,a,l,c,u,d,i;return this.tag?n.h(this.tag,null,((l=(a=this.$slots).default)==null?void 0:l.call(a,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),x=(e,r={})=>{const t=Symbol(),o=Symbol(),a=Symbol(),l=te(e,t,r),c=ne(t,o),u=q(t,o,a,r);return{VvForm:l,VvFormWrapper:c,VvFormField:u,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:a}},w=Symbol(),ae=e=>{let r={};return e.schema&&(r=x(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(w,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...n.inject(w,{}),...r};return x(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=j,b.formFactory=x,b.pluginInjectionKey=w,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+(function(b,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],a):(b=typeof globalThis<"u"?globalThis:b||self,a(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,a,D,S){"use strict";function j(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function E(e){return e===null}function A(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const W=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,r,t){const o=U(t)?t:void 0;if(!A(e)||!C(r))return o;const n=I(r);if(n.length!==0){for(const l of n){if(l==="*")continue;const c=function(u){return u.map(d=>O(d)||E(d)?d:j(d)?c(d):d[l])};if(j(e)&&!W.test(l)?e=c(e):e=e[l],O(e)||E(e))break}return O(e)?o:e}}function k(e,r,t){if(!A(e)||!C(r))return;const o=I(r);if(o.length===0)return;const n=o.length;for(let l=0;l<n;l++){const c=o[l];if(l===n-1){e[c]=t;return}if(c==="*"&&j(e)){const u=o.slice(l+1).join(".");for(const d of e)k(d,u,t);return}O(e[c])&&(e[c]={}),e=e[c]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>B.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>a.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:n=>Object.values(s).includes(n),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(n,{slots:l,emit:c}){const u=a.computed({get(){if(i!=null&&i.modelValue)return $(Object(i.modelValue.value),String(n.name))},set(f){i!=null&&i.modelValue&&(k(Object(i.modelValue.value),String(n.name),f),c("update:modelValue",{newValue:u.value,formData:i==null?void 0:i.modelValue}))}});a.onMounted(()=>{u.value===void 0&&n.defaultValue!==void 0&&(u.value=n.defaultValue)});const d=a.inject(r,void 0);d&&d.fields.value.add(n.name);const i=a.inject(e),{props:m,name:h}=a.toRefs(n),p=a.computed(()=>{if(i!=null&&i.errors.value)return $(i.errors.value,String(n.name))}),y=a.computed(()=>{var f;return(f=p.value)==null?void 0:f._errors}),V=a.computed(()=>p.value!==void 0);a.watch(V,()=>{V.value?(c("invalid",y.value),d&&d.errors.value.set(n.name,{_errors:y.value})):(c("valid",u.value),d&&d.errors.value.delete(n.name))}),a.watch(()=>i==null?void 0:i.modelValue,()=>{c("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{u.value=f},L=a.computed(()=>typeof m.value=="function"?m.value(i==null?void 0:i.modelValue):m.value),le=a.computed(()=>({...L.value,name:L.value.name??n.name,invalid:V.value,valid:n.showValid?Boolean(!V.value&&u.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(n.type),invalidLabel:y.value,modelValue:u.value,errors:n.is?p.value:void 0,"onUpdate:modelValue":G}));return a.provide(t,{name:a.readonly(h),errors:a.readonly(p)}),{component:a.computed(()=>{if(n.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:u.value,onUpdate:G,invalid:V.value,invalidLabel:y.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:p.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(n.type){case s.select:f=a.resolveComponent("VvSelect");break;case s.checkbox:f=a.resolveComponent("VvCheckbox");break;case s.radio:f=a.resolveComponent("VvRadio");break;case s.textarea:f=a.resolveComponent("VvTextarea");break;case s.radioGroup:f=a.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=a.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=a.resolveComponent("VvCombobox");break;default:f=a.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return a.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(n.type)),n.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?a.h(this.is,this.hasProps,this.$slots):this.type===s.custom?a.h(this.component,null,this.$slots):a.h(this.component,this.hasProps,this.$slots)}});var K=function(r){return z(r)&&!J(r)};function z(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?v(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return v;var t=r.customMerge(e);return typeof t=="function"?t:v}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function T(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function F(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(n){o[n]=g(e[n],t)}),N(r).forEach(function(n){T(e,n)||(_(e,n)&&t.isMergeableObject(r[n])?o[n]=X(n,t)(e[n],r[n],t):o[n]=g(r[n],t))}),o}function v(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||K,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),n=Array.isArray(e),l=o===n;return l?o?t.arrayMerge(e,r,t):F(e,r,t):g(r,t)}v.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,n){return v(o,n,t)},{})};var ee=v,re=ee;const x=(e,r={})=>{const t=e instanceof S.ZodEffects?e.innerType().shape:e.shape;return re(Object.fromEntries(Object.entries(t).map(([o,n])=>n instanceof S.ZodDefault?[o,n._def.defaultValue()]:n instanceof S.ZodObject?[o,x(n)]:[o,void 0])),r)},te=(e,r,t)=>a.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:n}){const l=a.ref(x(e,o.modelValue));a.watch(()=>o.modelValue,m=>{if(m){const h=a.isProxy(m)?a.toRaw(m):m;l.value=typeof(h==null?void 0:h.clone)=="function"?h.clone():JSON.parse(JSON.stringify(h))}},{deep:!0}),D.watchThrottled(l,m=>{(c.value||t!=null&&t.continuosValidation)&&d(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&n("update:modelValue",m)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=a.ref(),u=a.ref(),d=(m=l.value)=>{const h=e.safeParse(m);return h.success?(c.value=void 0,u.value="valid",l.value=h.data,n("valid",h.data),!0):(c.value=h.error.format(),u.value="invalid",n("invalid",c.value),!1)},i=()=>d()?(n("submit",l.value),!0):!1;return a.provide(r,{modelValue:l,submit:i,errors:a.readonly(c)}),{submit:i}},render(){return a.h("form",{onSubmit:a.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>a.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const n=a.inject(e),l=a.inject(r,void 0),c=a.ref(new Set),u=a.ref(new Map),{name:d}=a.toRefs(t);a.provide(r,{name:a.readonly(d),errors:u,fields:c}),a.watch(c,m=>{l!=null&&l.fields&&m.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),a.watch(()=>new Map(u.value),(m,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(p=>{l.errors.value.delete(p)}),Array.from(m.keys()).forEach(p=>{const y=m.get(p);y&&l.errors.value.set(p,y)}))},{deep:!0});const i=a.computed(()=>n!=null&&n.errors.value?u.value.size>0:!1);return a.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:n,invalid:i,fields:c,errors:u}},render(){var t,o,n,l,c,u,d,i;return this.tag?a.h(this.tag,null,((l=(n=this.$slots).default)==null?void 0:l.call(n,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,r={})=>{const t=Symbol(),o=Symbol(),n=Symbol(),l=te(e,t,r),c=ne(t,o),u=q(t,o,n,r);return{VvForm:l,VvFormWrapper:c,VvFormField:u,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:n}},M=Symbol(),ae=e=>{let r={};return e.schema&&(r=w(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(M,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...a.inject(M,{}),...r};return w(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=x,b.formFactory=w,b.pluginInjectionKey=M,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -5,6 +5,7 @@ import type { FormFieldType } from './enums'
 export type FormComposableOptions = {
 	lazyLoad?: boolean
 	updateThrottle?: number
+	continuosValidation?: boolean
 	sideEffects?: (type: `${FormFieldType}`) => Promise | void
 }
 

package/dist/utils.d.ts

@@ -1,2 +1,6 @@
 import { type z } from 'zod';
-export declare const defaultObjectBySchema: <Schema extends z.AnyZodObject>(schema: Schema, original?: Partial<z.TypeOf<Schema>>) => Partial<z.TypeOf<Schema>>;
+export declare const defaultObjectBySchema: <Schema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject, {
+    [x: string]: any;
+}, {
+    [x: string]: any;
+}>>(schema: Schema, original?: Partial<z.TypeOf<Schema>>) => Partial<z.TypeOf<Schema>>;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.1",
+  "version": "0.0.3",
   "engines": {
     "node": ">= 16.x"
   },
@@ -34,8 +34,6 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@iconify/tools": "^2.2.6",
-    "@iconify/vue": "^4.1.0",
     "@volverjs/ui-vue": "0.0.5-beta.1",
     "@vueuse/core": "^9.13.0",
     "deepmerge": "^4.3.0",

package/src/VvForm.ts

@@ -12,7 +12,7 @@ import {
 } from 'vue'
 import { watchThrottled } from '@vueuse/core'
 
-import type { AnyZodObject } from 'zod'
+import type { AnyZodObject, ZodEffects } from 'zod'
 import type { InjectedFormData } from './types'
 import { defaultObjectBySchema } from './utils'
 
@@ -22,10 +22,11 @@ export enum FormStatus {
 }
 
 export const defineForm = (
-	schema: AnyZodObject,
+	schema: AnyZodObject | ZodEffects<AnyZodObject>,
 	provideKey: InjectionKey<InjectedFormData>,
 	options?: {
 		updateThrottle?: number
+		continuosValidation?: boolean
 	},
 ) => {
 	return defineComponent({
@@ -61,7 +62,7 @@ export const defineForm = (
 			watchThrottled(
 				localModelValue,
 				(newValue) => {
-					if (errors.value) {
+					if (errors.value || options?.continuosValidation) {
 						parseModelValue()
 					}
 					if (

package/src/index.ts

@@ -1,5 +1,5 @@
 import { type App, inject, type InjectionKey, type Plugin } from 'vue'
-import type { AnyZodObject } from 'zod'
+import type { AnyZodObject, ZodEffects } from 'zod'
 import { defineFormField } from './VvFormField'
 import { defineForm } from './VvForm'
 import { defineFormWrapper } from './VvFormWrapper'
@@ -12,7 +12,7 @@ import type {
 } from './types'
 
 export const formFactory = (
-	schema: AnyZodObject,
+	schema: AnyZodObject | ZodEffects<AnyZodObject>,
 	options: FormComposableOptions = {},
 ) => {
 	// create injection keys form provide/inject
@@ -78,7 +78,7 @@ export const createForm = (
 }
 
 export const useForm = (
-	schema: AnyZodObject,
+	schema: AnyZodObject | ZodEffects<AnyZodObject>,
 	options: FormComposableOptions = {},
 ) => {
 	const hasOptions = { ...inject(pluginInjectionKey, {}), ...options }
@@ -88,10 +88,17 @@ export const useForm = (
 export { FormFieldType } from './enums'
 export { defaultObjectBySchema } from './utils'
 
+type FormComponent = ReturnType<typeof defineForm>
+type FormWrapperComponent = ReturnType<typeof defineFormWrapper>
+type FormFieldComponent = ReturnType<typeof defineFormField>
+
 export type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
 	FormComposableOptions,
 	FormPluginOptions,
+	FormComponent,
+	FormWrapperComponent,
+	FormFieldComponent,
 }

package/src/types.d.ts

@@ -5,6 +5,7 @@ import type { FormFieldType } from './enums'
 export type FormComposableOptions = {
 	lazyLoad?: boolean
 	updateThrottle?: number
+	continuosValidation?: boolean
 	sideEffects?: (type: `${FormFieldType}`) => Promise | void
 }
 

package/src/utils.ts

@@ -1,13 +1,23 @@
 import merge from 'deepmerge'
-import { type z, type AnyZodObject, ZodDefault, ZodObject } from 'zod'
+import {
+	type z,
+	type AnyZodObject,
+	ZodDefault,
+	ZodObject,
+	ZodEffects,
+} from 'zod'
 
-export const defaultObjectBySchema = <Schema extends AnyZodObject>(
+export const defaultObjectBySchema = <
+	Schema extends AnyZodObject | ZodEffects<AnyZodObject>,
+>(
 	schema: Schema,
 	original: Partial<z.infer<Schema>> = {},
 ): Partial<z.infer<Schema>> => {
+	const shape =
+		schema instanceof ZodEffects ? schema.innerType().shape : schema.shape
 	return merge(
 		Object.fromEntries(
-			Object.entries(schema.shape).map(([key, value]) => {
+			Object.entries(shape).map(([key, value]) => {
 				if (value instanceof ZodDefault) {
 					return [key, value._def.defaultValue()]
 				}