@volverjs/form-vue 0.0.2 → 0.0.4

package/README.md

@@ -54,6 +54,7 @@ const form = createForm({
   schema
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: boolean - default false
   // sideEffects?: (data: any) => void
 })
 
@@ -131,6 +132,31 @@ The throttle can be changed with the `updateThrottle` option.
 </template>
 ```
 
+The `continuosValidation` can be passed through options or with VvForm prop.
+With this field the validation doesn't stop and continue also after a validaton success.
+
+```vue
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const { VvForm, VvFormField } = useForm(MyZodSchema, {
+    lazyLoad: true
+    // continuosValidation: true
+  })
+
+  const formData = ref({
+    name: '',
+    surname: ''
+  })
+</script>
+
+<template>
+  <VvForm v-model="formData" :continuosValidation="true">
+    <!-- form fields -->
+  </VvForm>
+</template>
+```
+
 ### VvFormWrapper
 
 `VvFormWrapper` gives you the validation status of a part of your form.
@@ -214,7 +240,7 @@ You can also use the `VvFormField` component to render a default slot without a
         invalidLabel,
         formData,
         formErrors,
-        erros,
+        errors,
         onUpdate
       }"
       name="surname"
@@ -250,6 +276,86 @@ Or a custom component.
 </template>
 ```
 
+## Nested VvFormField
+
+In some use cases can be usefull nest `VvFormField`.
+For example let's assume:
+
+- a shopping list that is a field of our model (ex: ToDo list)
+- the sum of all products of the shopping list cannot be 0
+- we don't know all the products a priori
+
+So our ToDo model and shopping list are structured like:
+
+```javascript
+const toDo = {
+  shoppingList: {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0,
+    ...
+  }
+}
+```
+
+Our Zod schema can be:
+
+```typescript
+const toDoSchema = z.object({
+  shoppingList: z
+    .object({})
+    .default({})
+    .superRefine((value, ctx) => {
+      const shoppingList = value as Record<string, number>
+      if (
+        Object.keys(value).length &&
+        !Object.keys(value).find((key) => shoppingList[key] > 0)
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: i18n.global.t('atLeastOneProduct')
+        })
+      }
+    })
+})
+```
+
+And the Vue component:
+
+```vue
+<script setup lang="ts">
+  const { VvForm, VvFormField } = useForm(toDoSchema, {
+    lazyLoad: true,
+    continuosValidation: true
+  })
+
+  // shopping list data, const or async
+  const shoppingList = {
+    bread: 0,
+    milk: 0,
+    tomato: 0,
+    potato: 0
+  }
+</script>
+
+<template>
+  <VvForm>
+    <VvFormField v-slot="{ invalid, invalidLabel }" name="shoppingList">
+      <VvFormField
+        v-for="key in Object.keys(shoppingList)"
+        :key="key"
+        :name="`shoppingList.${key}`"
+        :label="$t(key)"
+      />
+      <small v-if="invalid" class="input-counter__hint">{{
+        invalidLabel[0]
+      }}</small>
+    </VvFormField>
+  </VvForm>
+</template>
+```
+
 ## Composable
 
 `useForm` can be used to create a form programmatically inside a Vue 3 Component.
@@ -268,6 +374,7 @@ The default settings are inherited from the plugin (if it was defined).
   const { VvForm, VvFormWrapper, VvFormField } = useForm(schema, {
     // lazyLoad: boolean - default false
     // updateThrottle: number - default 500
+    // continuosValidation: true - default false
     // sideEffects?: (formData: any) => void
   })
 </script>
@@ -297,6 +404,7 @@ const schema = z.object({
 const { VvForm, VvFormWrapper, VvFormField } = formFactory(schema, {
   // lazyLoad: boolean - default false
   // updateThrottle: number - default 500
+  // continuosValidation: true - default false
   // sideEffects?: (data: any) => void
 })
 

package/dist/VvForm.d.ts

@@ -1,17 +1,22 @@
 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;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     submit: () => boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -19,6 +24,10 @@ export declare const defineForm: (schema: AnyZodObject, provideKey: InjectionKey
         type: ObjectConstructor;
         default: () => {};
     };
+    continuosValidation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onValid?: ((...args: any[]) => any) | undefined;
     onInvalid?: ((...args: any[]) => any) | undefined;
@@ -26,4 +35,5 @@ export declare const defineForm: (schema: AnyZodObject, provideKey: InjectionKey
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Record<string, any>;
+    continuosValidation: boolean;
 }>;

package/dist/index.d.ts

@@ -1,15 +1,19 @@
 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;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -17,6 +21,10 @@ export declare const formFactory: (schema: AnyZodObject, options?: FormComposabl
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -24,6 +32,7 @@ export declare const formFactory: (schema: AnyZodObject, options?: FormComposabl
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {
@@ -63,12 +72,16 @@ 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;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         submit: () => boolean;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("valid" | "invalid" | "submit" | "update:modelValue")[], "valid" | "invalid" | "submit" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -76,6 +89,10 @@ export declare const useForm: (schema: AnyZodObject, options?: FormComposableOpt
             type: ObjectConstructor;
             default: () => {};
         };
+        continuosValidation: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onValid?: ((...args: any[]) => any) | undefined;
         onInvalid?: ((...args: any[]) => any) | undefined;
@@ -83,6 +100,7 @@ export declare const useForm: (schema: AnyZodObject, options?: FormComposableOpt
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         modelValue: Record<string, any>;
+        continuosValidation: boolean;
     }>;
     VvFormWrapper: import("vue").DefineComponent<{
         name: {

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 k, 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,12 +16,12 @@ 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);
@@ -29,13 +29,13 @@ function _(e, r, t) {
     for (const o of n) {
       if (o === "*")
         continue;
-      const i = function(s) {
-        return s.map((f) => M(f) || N(f) ? f : E(f) ? i(f) : f[o]);
+      const s = function(i) {
+        return i.map((f) => E(f) || N(f) ? f : A(f) ? s(f) : f[o]);
       };
-      if (E(e) && !ee.test(o) ? e = i(e) : e = e[o], M(e) || N(e))
+      if (A(e) && !re.test(o) ? e = s(e) : e = e[o], E(e) || N(e))
         break;
     }
-    return M(e) ? a : e;
+    return E(e) ? a : e;
   }
 }
 function U(e, r, t) {
@@ -46,26 +46,26 @@ function U(e, r, t) {
     return;
   const n = a.length;
   for (let o = 0; o < n; o++) {
-    const i = a[o];
+    const s = a[o];
     if (o === n - 1) {
-      e[i] = t;
+      e[s] = t;
       return;
     }
-    if (i === "*" && E(e)) {
-      const s = a.slice(o + 1).join(".");
+    if (s === "*" && A(e)) {
+      const i = a.slice(o + 1).join(".");
       for (const f of e)
-        U(f, s, t);
+        U(f, i, t);
       return;
     }
-    M(e[i]) && (e[i] = {}), e = e[i];
+    E(e[s]) && (e[s] = {}), e = e[s];
   }
 }
 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,8 +96,8 @@ const te = (e, r, t, a = {}) => w({
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(n, { slots: o, emit: i }) {
-    const s = h({
+  setup(n, { slots: o, emit: s }) {
+    const i = h({
       get() {
         if (u != null && u.modelValue)
           return _(
@@ -110,44 +110,44 @@ const te = (e, r, t, a = {}) => w({
           Object(u.modelValue.value),
           String(n.name),
           c
-        ), i("update:modelValue", {
-          newValue: s.value,
+        ), s("update:modelValue", {
+          newValue: i.value,
           formData: u == null ? void 0 : u.modelValue
         }));
       }
     });
-    q(() => {
-      s.value === void 0 && n.defaultValue !== void 0 && (s.value = n.defaultValue);
+    Z(() => {
+      i.value === void 0 && n.defaultValue !== void 0 && (i.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(() => {
+    const u = S(e), { props: v, name: m } = G(n), d = h(() => {
       if (u != null && u.errors.value)
         return _(u.errors.value, String(n.name));
     }), y = h(() => {
       var c;
-      return (c = v.value) == null ? void 0 : c._errors;
-    }), p = h(() => v.value !== void 0);
+      return (c = d.value) == null ? void 0 : c._errors;
+    }), p = h(() => d.value !== void 0);
     V(p, () => {
-      p.value ? (i("invalid", y.value), f && f.errors.value.set(n.name, {
+      p.value ? (s("invalid", y.value), f && f.errors.value.set(n.name, {
         _errors: y.value
-      })) : (i("valid", s.value), f && f.errors.value.delete(
+      })) : (s("valid", i.value), f && f.errors.value.delete(
         n.name
       ));
     }), V(
       () => u == null ? void 0 : u.modelValue,
       () => {
-        i("update:formData", u == null ? void 0 : u.modelValue);
+        s("update:formData", u == null ? void 0 : u.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(() => ({
+    const $ = (c) => {
+      i.value = c;
+    }, I = h(() => typeof v.value == "function" ? v.value(u == null ? void 0 : u.modelValue) : v.value), R = h(() => ({
       ...I.value,
       name: I.value.name ?? n.name,
       invalid: p.value,
-      valid: n.showValid ? Boolean(!p.value && s.value) : void 0,
+      valid: n.showValid ? Boolean(!p.value && i.value) : void 0,
       type: ((c) => {
         if ([
           l.text,
@@ -167,26 +167,26 @@ const te = (e, r, t, a = {}) => w({
           return c;
       })(n.type),
       invalidLabel: y.value,
-      modelValue: s.value,
-      errors: n.is ? v.value : void 0,
-      "onUpdate:modelValue": k
+      modelValue: i.value,
+      errors: n.is ? d.value : void 0,
+      "onUpdate:modelValue": $
     }));
-    return $(t, {
-      name: A(m),
-      errors: A(v)
+    return k(t, {
+      name: M(m),
+      errors: M(d)
     }), { component: h(() => {
       if (n.type === l.custom)
         return {
           render() {
             var c;
             return ((c = o.default) == null ? void 0 : c.call(o, {
-              modelValue: s.value,
-              onUpdate: k,
+              modelValue: i.value,
+              onUpdate: $,
               invalid: p.value,
               invalidLabel: y.value,
               formData: u == null ? void 0 : u.modelValue.value,
               formErrors: u == null ? void 0 : u.errors.value,
-              errors: v.value
+              errors: d.value
             })) ?? o.defalut;
           }
         };
@@ -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 oe(r) && !ue(r);
 };
-function ae(e) {
+function oe(e) {
   return !!e && typeof e == "object";
 }
-function oe(e) {
+function ue(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;
+  t = t || {}, t.arrayMerge = t.arrayMerge || fe, t.isMergeableObject = t.isMergeableObject || ae, 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);
+  return o ? a ? t.arrayMerge(e, r, t) : be(e, r, t) : j(r, t);
 }
 g.all = function(r, t) {
   if (!Array.isArray(r))
@@ -315,18 +315,25 @@ 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: {
       type: Object,
       default: () => ({})
+    },
+    continuosValidation: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["invalid", "valid", "submit", "update:modelValue"],
@@ -334,32 +341,32 @@ const J = (e, r = {}) => he(
   setup(a, { emit: n }) {
     const o = x(
       J(e, a.modelValue)
-    );
+    ), s = (t == null ? void 0 : t.continuosValidation) || a.continuosValidation;
     V(
       () => a.modelValue,
-      (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));
+      (m) => {
+        if (m) {
+          const d = Y(m) ? H(m) : m;
+          o.value = typeof (d == null ? void 0 : d.clone) == "function" ? d.clone() : JSON.parse(JSON.stringify(d));
         }
       },
       { deep: !0 }
     ), X(
       o,
-      (d) => {
-        i.value && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
+      (m) => {
+        (i.value || s) && u(), (!m || !a.modelValue || JSON.stringify(m) !== JSON.stringify(a.modelValue)) && n("update:modelValue", m);
       },
       { deep: !0, throttle: (t == null ? void 0 : t.updateThrottle) ?? 500 }
     );
-    const i = x(), s = x(), f = (d = o.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 $(r, {
+    const i = x(), f = x(), u = (m = o.value) => {
+      const d = e.safeParse(m);
+      return d.success ? (i.value = void 0, f.value = "valid", o.value = d.data, n("valid", d.data), !0) : (i.value = d.error.format(), f.value = "invalid", n("invalid", i.value), !1);
+    }, v = () => u() ? (n("submit", o.value), !0) : !1;
+    return k(r, {
       modelValue: o,
-      submit: u,
-      errors: A(i)
-    }), { submit: u };
+      submit: v,
+      errors: M(i)
+    }), { submit: v };
   },
   render() {
     return O(
@@ -370,7 +377,7 @@ const J = (e, r = {}) => he(
       this.$slots
     );
   }
-}), pe = (e, r) => w({
+}), Ve = (e, r) => w({
   name: "WrapperComponent",
   props: {
     name: {
@@ -385,38 +392,38 @@ 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);
-    $(r, {
-      name: A(f),
-      errors: s,
-      fields: i
+    const n = S(e), o = S(r, void 0), s = x(/* @__PURE__ */ new Set()), i = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
+    k(r, {
+      name: M(f),
+      errors: i,
+      fields: s
     }), V(
-      i,
-      (d) => {
-        o != null && o.fields && d.forEach((m) => {
+      s,
+      (v) => {
+        o != null && o.fields && v.forEach((m) => {
           o == null || o.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);
-        }), Array.from(d.keys()).forEach((v) => {
-          const y = d.get(v);
-          y && o.errors.value.set(v, y);
+      () => new Map(i.value),
+      (v, m) => {
+        o != null && o.errors && (Array.from(m.keys()).forEach((d) => {
+          o.errors.value.delete(d);
+        }), Array.from(v.keys()).forEach((d) => {
+          const y = v.get(d);
+          y && o.errors.value.set(d, y);
         }));
       },
       { deep: !0 }
     );
-    const u = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
+    const u = h(() => n != null && n.errors.value ? i.value.size > 0 : !1);
     return V(u, () => {
       u.value ? a("invalid") : a("valid");
-    }), { formProvided: n, invalid: u, fields: i, errors: s };
+    }), { formProvided: n, invalid: u, fields: s, errors: i };
   },
   render() {
-    var t, a, n, o, i, s, f, u;
+    var t, a, n, o, s, i, f, u;
     return this.tag ? O(
       this.tag,
       null,
@@ -428,16 +435,16 @@ const J = (e, r = {}) => he(
       })) ?? this.$slots.defalut
     ) : ((u = (f = this.$slots).default) == null ? void 0 : u.call(f, {
       invalid: this.invalid,
-      formData: (i = this.formProvided) == null ? void 0 : i.modelValue,
-      errors: (s = this.formProvided) == null ? void 0 : s.errors,
+      formData: (s = this.formProvided) == null ? void 0 : s.modelValue,
+      errors: (i = this.formProvided) == null ? void 0 : i.errors,
       fieldsErrors: this.errors
     })) ?? 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(), o = pe(e, t, r), s = Ve(
     t,
     a
-  ), s = te(
+  ), i = ne(
     t,
     a,
     n,
@@ -445,13 +452,13 @@ const J = (e, r = {}) => he(
   );
   return {
     VvForm: o,
-    VvFormWrapper: i,
-    VvFormField: s,
+    VvFormWrapper: s,
+    VvFormField: i,
     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 +466,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 B=/^[0-9]+$/,W=["__proto__","prototype","constructor"];function k(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 u=function(c){return c.map(d=>O(d)||E(d)?d:j(d)?u(d):d[l])};if(j(e)&&!B.test(l)?e=u(e):e=e[l],O(e)||E(e))break}return O(e)?o:e}}function $(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 u=o[l];if(l===n-1){e[u]=t;return}if(u==="*"&&j(e)){const c=o.slice(l+1).join(".");for(const d of e)$(d,c,t);return}O(e[u])&&(e[u]={}),e=e[u]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>W.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:u}){const c=a.computed({get(){if(i!=null&&i.modelValue)return k(Object(i.modelValue.value),String(n.name))},set(f){i!=null&&i.modelValue&&($(Object(i.modelValue.value),String(n.name),f),u("update:modelValue",{newValue:c.value,formData:i==null?void 0:i.modelValue}))}});a.onMounted(()=>{c.value===void 0&&n.defaultValue!==void 0&&(c.value=n.defaultValue)});const d=a.inject(r,void 0);d&&d.fields.value.add(n.name);const i=a.inject(e),{props:y,name:h}=a.toRefs(n),m=a.computed(()=>{if(i!=null&&i.errors.value)return k(i.errors.value,String(n.name))}),p=a.computed(()=>{var f;return(f=m.value)==null?void 0:f._errors}),V=a.computed(()=>m.value!==void 0);a.watch(V,()=>{V.value?(u("invalid",p.value),d&&d.errors.value.set(n.name,{_errors:p.value})):(u("valid",c.value),d&&d.errors.value.delete(n.name))}),a.watch(()=>i==null?void 0:i.modelValue,()=>{u("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{c.value=f},L=a.computed(()=>typeof y.value=="function"?y.value(i==null?void 0:i.modelValue):y.value),le=a.computed(()=>({...L.value,name:L.value.name??n.name,invalid:V.value,valid:n.showValid?Boolean(!V.value&&c.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:p.value,modelValue:c.value,errors:n.is?m.value:void 0,"onUpdate:modelValue":G}));return a.provide(t,{name:a.readonly(h),errors:a.readonly(m)}),{component:a.computed(()=>{if(n.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:c.value,onUpdate:G,invalid:V.value,invalidLabel:p.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:m.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:()=>({})},continuosValidation:{type:Boolean,default:!1}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:n}){const l=a.ref(x(e,o.modelValue)),u=(t==null?void 0:t.continuosValidation)||o.continuosValidation;a.watch(()=>o.modelValue,h=>{if(h){const m=a.isProxy(h)?a.toRaw(h):h;l.value=typeof(m==null?void 0:m.clone)=="function"?m.clone():JSON.parse(JSON.stringify(m))}},{deep:!0}),D.watchThrottled(l,h=>{(c.value||u)&&i(),(!h||!o.modelValue||JSON.stringify(h)!==JSON.stringify(o.modelValue))&&n("update:modelValue",h)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=a.ref(),d=a.ref(),i=(h=l.value)=>{const m=e.safeParse(h);return m.success?(c.value=void 0,d.value="valid",l.value=m.data,n("valid",m.data),!0):(c.value=m.error.format(),d.value="invalid",n("invalid",c.value),!1)},y=()=>i()?(n("submit",l.value),!0):!1;return a.provide(r,{modelValue:l,submit:y,errors:a.readonly(c)}),{submit:y}},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),u=a.ref(new Set),c=a.ref(new Map),{name:d}=a.toRefs(t);a.provide(r,{name:a.readonly(d),errors:c,fields:u}),a.watch(u,y=>{l!=null&&l.fields&&y.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),a.watch(()=>new Map(c.value),(y,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(m=>{l.errors.value.delete(m)}),Array.from(y.keys()).forEach(m=>{const p=y.get(m);p&&l.errors.value.set(m,p)}))},{deep:!0});const i=a.computed(()=>n!=null&&n.errors.value?c.value.size>0:!1);return a.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:n,invalid:i,fields:u,errors:c}},render(){var t,o,n,l,u,c,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:(u=this.formProvided)==null?void 0:u.modelValue,errors:(c=this.formProvided)==null?void 0:c.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),w=(e,r={})=>{const t=Symbol(),o=Symbol(),n=Symbol(),l=te(e,t,r),u=ne(t,o),c=q(t,o,n,r);return{VvForm:l,VvFormWrapper:u,VvFormField:c,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.2",
+  "version": "0.0.4",
   "engines": {
     "node": ">= 16.x"
   },

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({
@@ -35,6 +36,10 @@ export const defineForm = (
 				type: Object,
 				default: () => ({}),
 			},
+			continuosValidation: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
 		expose: ['submit', 'errors', 'status'],
@@ -42,6 +47,10 @@ export const defineForm = (
 			const localModelValue = ref(
 				defaultObjectBySchema(schema, props.modelValue),
 			)
+
+			const keepValidation =
+				options?.continuosValidation || props.continuosValidation
+
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -61,7 +70,7 @@ export const defineForm = (
 			watchThrottled(
 				localModelValue,
 				(newValue) => {
-					if (errors.value) {
+					if (errors.value || keepValidation) {
 						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 }

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()]
 				}