@volverjs/form-vue 0.0.14 → 1.0.0-beta.1

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, computed as g, onMounted as D, onBeforeUnmount as j, inject as I, toRefs as R, watch as E, unref as _, provide as M, readonly as p, resolveComponent as O, defineAsyncComponent as F, h as x, ref as $, toRaw as S, isProxy as ee, withModifiers as re, getCurrentInstance as te } from "vue";
+import { defineComponent as W, computed as g, onMounted as D, onBeforeUnmount as j, inject as E, toRefs as R, watch as A, unref as _, provide as M, readonly as p, resolveComponent as w, defineAsyncComponent as F, h as x, ref as $, toRaw as S, isProxy as ee, withModifiers as re, getCurrentInstance as te } from "vue";
 import { watchThrottled as ae } from "@vueuse/core";
 import { ZodObject as K, ZodDefault as ue, ZodNullable as ne, ZodSchema as le, ZodArray as se, ZodEffects as ie, ZodOptional as fe } from "zod";
 function U(e) {
@@ -123,17 +123,17 @@ const ce = (e, l, t, f) => W({
     D(() => {
       i.value === void 0 && n.defaultValue !== void 0 && (i.value = n.defaultValue);
     }), j(() => {
-      w(), k();
+      O(), k();
     });
-    const s = I(l, void 0);
+    const s = E(l, void 0);
     s && s.fields.value.add(n.name);
-    const a = I(e), { props: o, name: h } = R(n), b = g(() => {
+    const a = E(e), { props: o, name: h } = R(n), y = g(() => {
       if (a != null && a.errors.value)
         return G(a.errors.value, String(n.name));
     }), c = g(() => {
       var d;
-      return (d = b.value) == null ? void 0 : d._errors;
-    }), m = g(() => b.value !== void 0), w = E(m, () => {
+      return (d = y.value) == null ? void 0 : d._errors;
+    }), m = g(() => y.value !== void 0), O = A(m, () => {
       m.value ? (u("invalid", c.value), s && s.errors.value.set(
         n.name,
         {
@@ -142,18 +142,18 @@ const ce = (e, l, t, f) => W({
       )) : (u("valid", i.value), s && s.errors.value.delete(
         n.name
       ));
-    }), k = E(
+    }), k = A(
       () => a == null ? void 0 : a.formData,
       () => {
         u("update:formData", a == null ? void 0 : a.formData);
       },
       { deep: !0 }
-    ), y = (d) => {
+    ), b = (d) => {
       i.value = d;
     }, V = g(() => {
       let d = o.value;
       return typeof d == "function" && (d = d(a == null ? void 0 : a.formData)), Object.keys(d).reduce(
-        (A, C) => (A[C] = _(d[C]), A),
+        (I, C) => (I[C] = _(d[C]), I),
         {}
       );
     }), z = g(() => ({
@@ -181,11 +181,11 @@ const ce = (e, l, t, f) => W({
       })(n.type),
       invalidLabel: c.value,
       modelValue: i.value,
-      "onUpdate:modelValue": y
+      "onUpdate:modelValue": b
     }));
     return M(t, {
       name: p(h),
-      errors: p(b)
+      errors: p(y)
     }), { component: g(() => {
       if (n.type === v.custom)
         return {
@@ -193,14 +193,14 @@ const ce = (e, l, t, f) => W({
             var d;
             return ((d = r.default) == null ? void 0 : d.call(r, {
               modelValue: i.value,
-              onUpdate: y,
+              onUpdate: b,
               submit: a == null ? void 0 : a.submit,
               validate: a == null ? void 0 : a.validate,
               invalid: m.value,
               invalidLabel: c.value,
               formData: a == null ? void 0 : a.formData.value,
               formErrors: a == null ? void 0 : a.errors.value,
-              errors: b.value
+              errors: y.value
             })) ?? r.defalut;
           }
         };
@@ -208,28 +208,28 @@ const ce = (e, l, t, f) => W({
         let d;
         switch (n.type) {
           case v.select:
-            d = O("VvSelect");
+            d = w("VvSelect");
             break;
           case v.checkbox:
-            d = O("VvCheckbox");
+            d = w("VvCheckbox");
             break;
           case v.radio:
-            d = O("VvRadio");
+            d = w("VvRadio");
             break;
           case v.textarea:
-            d = O("VvTextarea");
+            d = w("VvTextarea");
             break;
           case v.radioGroup:
-            d = O("VvRadioGroup");
+            d = w("VvRadioGroup");
             break;
           case v.checkboxGroup:
-            d = O("VvCheckboxGroup");
+            d = w("VvCheckboxGroup");
             break;
           case v.combobox:
-            d = O("VvCombobox");
+            d = w("VvCombobox");
             break;
           default:
-            d = O("VvInputText");
+            d = w("VvInputText");
         }
         if (typeof d != "string")
           return d;
@@ -333,7 +333,7 @@ const ce = (e, l, t, f) => W({
       u.value = J(
         e,
         S(s.modelValue)
-      ), E(
+      ), A(
         () => s.modelValue,
         (c) => {
           if (c) {
@@ -344,37 +344,37 @@ const ce = (e, l, t, f) => W({
         { deep: !0 }
       ), ae(
         u,
-        (c) => {
+        async (c) => {
           var m;
-          ((n.value || (t == null ? void 0 : t.continuosValidation)) ?? s.continuosValidation) && o(), (!c || !s.modelValue || JSON.stringify(c) !== JSON.stringify(s.modelValue)) && (a("update:modelValue", c), (m = t == null ? void 0 : t.onUpdate) == null || m.call(t, S(c)));
+          ((n.value || (t == null ? void 0 : t.continuosValidation)) ?? s.continuosValidation) && await o(), (!c || !s.modelValue || JSON.stringify(c) !== JSON.stringify(s.modelValue)) && (a("update:modelValue", c), (m = t == null ? void 0 : t.onUpdate) == null || m.call(t, S(c)));
         },
         {
           deep: !0,
           throttle: (t == null ? void 0 : t.updateThrottle) ?? s.updateThrottle
         }
       );
-      const o = (c = u.value) => {
-        var w, k, y;
-        const m = e.safeParse(c);
-        return m.success ? (n.value = void 0, r.value = B.valid, u.value = m.data, a("update:modelValue", u.value), (k = t == null ? void 0 : t.onUpdate) == null || k.call(t, S(u.value)), a("valid", m.data), (y = t == null ? void 0 : t.onValid) == null || y.call(t, S(u.value)), !0) : (n.value = m.error.format(), r.value = B.invalid, a("invalid", n.value), (w = t == null ? void 0 : t.onInvalid) == null || w.call(t, S(n.value)), !1);
-      }, h = () => {
+      const o = async (c = u.value) => {
+        var O, k, b;
+        const m = await e.safeParseAsync(c);
+        return m.success ? (n.value = void 0, r.value = B.valid, u.value = m.data, a("update:modelValue", u.value), (k = t == null ? void 0 : t.onUpdate) == null || k.call(t, S(u.value)), a("valid", m.data), (b = t == null ? void 0 : t.onValid) == null || b.call(t, S(u.value)), !0) : (n.value = m.error.format(), r.value = B.invalid, a("invalid", n.value), (O = t == null ? void 0 : t.onInvalid) == null || O.call(t, S(n.value)), !1);
+      }, h = async () => {
         var c;
-        return o() ? (a("submit", u.value), (c = t == null ? void 0 : t.onSubmit) == null || c.call(t, S(u.value)), !0) : !1;
-      }, b = g(() => r.value === B.invalid);
+        return await o() ? (a("submit", u.value), (c = t == null ? void 0 : t.onSubmit) == null || c.call(t, S(u.value)), !0) : !1;
+      }, y = g(() => r.value === B.invalid);
       return M(l, {
         formData: u,
         submit: h,
         validate: o,
         errors: p(n),
         status: p(r),
-        invalid: b
+        invalid: y
       }), {
         formData: u,
         submit: h,
         validate: o,
         errors: p(n),
         status: p(r),
-        invalid: b
+        invalid: y
       };
     },
     render() {
@@ -434,23 +434,23 @@ const ce = (e, l, t, f) => W({
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
   setup(f, { emit: n }) {
-    const r = I(e), u = I(l, void 0), i = $(/* @__PURE__ */ new Set()), s = $(/* @__PURE__ */ new Map()), { name: a } = R(f);
+    const r = E(e), u = E(l, void 0), i = $(/* @__PURE__ */ new Set()), s = $(/* @__PURE__ */ new Map()), { name: a } = R(f);
     M(l, {
       name: p(a),
       errors: s,
       fields: i
-    }), E(
+    }), A(
       i,
       (h) => {
-        u != null && u.fields && h.forEach((b) => {
-          u == null || u.fields.value.add(b);
+        u != null && u.fields && h.forEach((y) => {
+          u == null || u.fields.value.add(y);
         });
       },
       { deep: !0 }
-    ), E(
+    ), A(
       () => new Map(s.value),
-      (h, b) => {
-        u != null && u.errors && (Array.from(b.keys()).forEach((c) => {
+      (h, y) => {
+        u != null && u.errors && (Array.from(y.keys()).forEach((c) => {
           u.errors.value.delete(c);
         }), Array.from(h.keys()).forEach((c) => {
           const m = h.get(c);
@@ -460,7 +460,7 @@ const ce = (e, l, t, f) => W({
       { deep: !0 }
     );
     const o = g(() => r != null && r.invalid.value ? s.value.size > 0 : !1);
-    return E(o, () => {
+    return A(o, () => {
       o.value ? n("invalid") : n("valid");
     }), {
       formData: r == null ? void 0 : r.formData,
@@ -495,7 +495,7 @@ const ce = (e, l, t, f) => W({
       fieldsErrors: this.fieldsErrors
     })) ?? this.$slots.defalut;
   }
-}), be = (e, l) => {
+}), ye = (e, l) => {
   const t = W({
     props: {
       schema: {
@@ -504,31 +504,31 @@ const ce = (e, l, t, f) => W({
       }
     },
     setup(f, { slots: n }) {
-      const r = I(e);
+      const r = E(e);
       if (r != null && r.formData)
         return () => {
           var a;
           const u = typeof f.schema == "function" ? f.schema(r) : f.schema;
           let i;
           const s = u.reduce((o, h) => {
-            const b = typeof h == "function" ? h(r) : h, {
+            const y = typeof h == "function" ? h(r) : h, {
               vvIs: c,
               vvName: m,
-              vvSlots: w,
+              vvSlots: O,
               vvChildren: k,
-              vvIf: y,
+              vvIf: b,
               vvElseIf: V,
               vvType: z,
               vvDefaultValue: q,
               vvShowValid: d,
-              vvContent: A,
+              vvContent: I,
               ...C
-            } = b;
-            if (y !== void 0) {
-              if (typeof y == "string" ? i = !!G(
+            } = y;
+            if (b !== void 0) {
+              if (typeof b == "string" ? i = !!G(
                 Object(r.formData.value),
-                y
-              ) : typeof y == "function" ? i = _(y(r)) : i = _(y), !i)
+                b
+              ) : typeof b == "function" ? i = _(b(r)) : i = _(b), !i)
                 return o;
             } else if (V !== void 0 && i !== void 0) {
               if (i || (typeof V == "string" ? i = !!G(
@@ -552,13 +552,13 @@ const ce = (e, l, t, f) => W({
                   showValid: d,
                   props: C
                 },
-                w ?? Z ?? A
+                O ?? Z ?? I
               )
             ), o) : c ? (o.push(
               x(
                 c,
                 C,
-                w ?? Z ?? A
+                O ?? Z ?? I
               )
             ), o) : (k && o.push(Z), o);
           }, []);
@@ -585,7 +585,7 @@ const ce = (e, l, t, f) => W({
     f,
     n,
     l
-  ), i = be(t, u), { VvForm: s, errors: a, status: o, formData: h } = me(
+  ), i = ye(t, u), { VvForm: s, errors: a, status: o, formData: h } = me(
     e,
     t,
     l,
@@ -614,15 +614,15 @@ const ce = (e, l, t, f) => W({
 }, ke = (e, l = {}) => te() ? L(
   e,
   {
-    ...I(Y, {}),
+    ...E(Y, {}),
     ...l
   }
-) : L(e, l), Oe = (e, l = {}) => L(e, l);
+) : L(e, l), we = (e, l = {}) => L(e, l);
 export {
   v as FormFieldType,
   xe as createForm,
   J as defaultObjectBySchema,
-  Oe as formFactory,
+  we as formFactory,
   Y as pluginInjectionKey,
   ke as useForm
 };

package/dist/index.umd.js

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

package/dist/src/VvForm.d.ts

@@ -104,8 +104,8 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
                 onSubmit?: ((...args: any[]) => any) | undefined;
             }, {
                 formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
-                submit: () => boolean;
-                validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
+                submit: () => Promise<boolean>;
+                validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => Promise<boolean>;
                 errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>;
                 status: Readonly<Ref<FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -158,8 +158,8 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
             onSubmit?: ((...args: any[]) => any) | undefined;
         } & import("vue").ShallowUnwrapRef<{
             formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
-            submit: () => boolean;
-            validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
+            submit: () => Promise<boolean>;
+            validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => Promise<boolean>;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>;
             status: Readonly<Ref<FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -191,8 +191,8 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
         onSubmit?: ((...args: any[]) => any) | undefined;
     }, {
         formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
-        submit: () => boolean;
-        validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
+        submit: () => Promise<boolean>;
+        validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => Promise<boolean>;
         errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>;
         status: Readonly<Ref<FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -205,8 +205,8 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
         $slots: {
             default: (_: {
                 formData: unknown extends Partial<z.TypeOf<Schema>> | undefined ? undefined : Partial<z.TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
                 status: Ref<DeepReadonly<`${FormStatus}` | undefined>>;
                 invalid: Ref<DeepReadonly<boolean>>;

package/dist/src/VvFormTemplate.d.ts

@@ -121,8 +121,8 @@ export declare const defineFormTemplate: <Schema extends FormSchema>(formProvide
     $slots: {
         default: (_: {
             formData: unknown extends Partial<TypeOf<Schema>> | undefined ? undefined : Partial<TypeOf<Schema>> | undefined;
-            submit: () => boolean;
-            validate: () => boolean;
+            submit: () => Promise<boolean>;
+            validate: () => Promise<boolean>;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
             status: Ref<DeepReadonly<`${FormStatus}` | undefined>>;
             invalid: Ref<DeepReadonly<boolean>>;

package/dist/src/VvFormWrapper.d.ts

@@ -83,8 +83,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
         }, {
             formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>> | undefined;
-            submit: (() => boolean) | undefined;
-            validate: (() => boolean) | undefined;
+            submit: (() => Promise<boolean>) | undefined;
+            validate: (() => Promise<boolean>) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: Ref<Set<string>>;
             fieldsErrors: Ref<Map<string, z.inferFormattedError<Schema, string>>>;
@@ -125,8 +125,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
     } & import("vue").ShallowUnwrapRef<{
         formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>> | undefined;
-        submit: (() => boolean) | undefined;
-        validate: (() => boolean) | undefined;
+        submit: (() => Promise<boolean>) | undefined;
+        validate: (() => Promise<boolean>) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: Ref<Set<string>>;
         fieldsErrors: Ref<Map<string, z.inferFormattedError<Schema, string>>>;
@@ -149,8 +149,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
 }, {
     formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>> | undefined;
-    submit: (() => boolean) | undefined;
-    validate: (() => boolean) | undefined;
+    submit: (() => Promise<boolean>) | undefined;
+    validate: (() => Promise<boolean>) | undefined;
     invalid: import("vue").ComputedRef<boolean>;
     fields: Ref<Set<string>>;
     fieldsErrors: Ref<Map<string, z.inferFormattedError<Schema, string>>>;
@@ -161,8 +161,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
         default: (_: {
             invalid: boolean;
             formData: unknown extends Partial<TypeOf<Schema>> | undefined ? undefined : Partial<TypeOf<Schema>> | undefined;
-            submit: () => boolean;
-            validate: () => boolean;
+            submit: () => Promise<boolean>;
+            validate: () => Promise<boolean>;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
             fieldsErrors: Map<string, Record<string, {
                 _errors: string[];

package/dist/src/index.d.ts

@@ -103,8 +103,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 onSubmit?: ((...args: any[]) => any) | undefined;
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-                submit: () => boolean;
-                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+                submit: () => Promise<boolean>;
+                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
                 status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -157,8 +157,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             onSubmit?: ((...args: any[]) => any) | undefined;
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-            submit: () => boolean;
-            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+            submit: () => Promise<boolean>;
+            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
             status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -190,8 +190,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         onSubmit?: ((...args: any[]) => any) | undefined;
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-        submit: () => boolean;
-        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+        submit: () => Promise<boolean>;
+        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
         status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -204,8 +204,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         $slots: {
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -294,8 +294,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-                submit: (() => boolean) | undefined;
-                validate: (() => boolean) | undefined;
+                submit: (() => Promise<boolean>) | undefined;
+                validate: (() => Promise<boolean>) | undefined;
                 invalid: import("vue").ComputedRef<boolean>;
                 fields: import("vue").Ref<Set<string>>;
                 fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -336,8 +336,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-            submit: (() => boolean) | undefined;
-            validate: (() => boolean) | undefined;
+            submit: (() => Promise<boolean>) | undefined;
+            validate: (() => Promise<boolean>) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: import("vue").Ref<Set<string>>;
             fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -360,8 +360,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-        submit: (() => boolean) | undefined;
-        validate: (() => boolean) | undefined;
+        submit: (() => Promise<boolean>) | undefined;
+        validate: (() => Promise<boolean>) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -372,8 +372,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             default: (_: {
                 invalid: boolean;
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 fieldsErrors: Map<string, Record<string, {
                     _errors: string[];
@@ -602,8 +602,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         $slots: {
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -714,10 +714,10 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 formData: import("vue").Ref<Partial<{
                     [x: string]: any;
                 } | undefined>>;
-                submit: () => boolean;
+                submit: () => Promise<boolean>;
                 validate: (value?: Partial<{
                     [x: string]: any;
-                } | undefined>) => boolean;
+                } | undefined>) => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<{
                     readonly [x: string]: {
                         readonly _errors: readonly string[];
@@ -777,10 +777,10 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             formData: import("vue").Ref<Partial<{
                 [x: string]: any;
             } | undefined>>;
-            submit: () => boolean;
+            submit: () => Promise<boolean>;
             validate: (value?: Partial<{
                 [x: string]: any;
-            } | undefined>) => boolean;
+            } | undefined>) => Promise<boolean>;
             errors: Readonly<import("vue").Ref<{
                 readonly [x: string]: {
                     readonly _errors: readonly string[];
@@ -819,10 +819,10 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         formData: import("vue").Ref<Partial<{
             [x: string]: any;
         } | undefined>>;
-        submit: () => boolean;
+        submit: () => Promise<boolean>;
         validate: (value?: Partial<{
             [x: string]: any;
-        } | undefined>) => boolean;
+        } | undefined>) => Promise<boolean>;
         errors: Readonly<import("vue").Ref<{
             readonly [x: string]: {
                 readonly _errors: readonly string[];
@@ -842,8 +842,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 formData: Partial<{
                     [x: string]: any;
                 }> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<{
                     readonly [x: string]: {
                         readonly _errors: readonly string[];
@@ -944,8 +944,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                     } | undefined;
                     readonly _errors: readonly string[];
                 } | undefined>> | undefined;
-                submit: (() => boolean) | undefined;
-                validate: (() => boolean) | undefined;
+                submit: (() => Promise<boolean>) | undefined;
+                validate: (() => Promise<boolean>) | undefined;
                 invalid: import("vue").ComputedRef<boolean>;
                 fields: import("vue").Ref<Set<string>>;
                 fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<AnyZodObject, string>>>;
@@ -993,8 +993,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 } | undefined;
                 readonly _errors: readonly string[];
             } | undefined>> | undefined;
-            submit: (() => boolean) | undefined;
-            validate: (() => boolean) | undefined;
+            submit: (() => Promise<boolean>) | undefined;
+            validate: (() => Promise<boolean>) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: import("vue").Ref<Set<string>>;
             fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<AnyZodObject, string>>>;
@@ -1024,8 +1024,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             } | undefined;
             readonly _errors: readonly string[];
         } | undefined>> | undefined;
-        submit: (() => boolean) | undefined;
-        validate: (() => boolean) | undefined;
+        submit: (() => Promise<boolean>) | undefined;
+        validate: (() => Promise<boolean>) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<AnyZodObject, string>>>;
@@ -1038,8 +1038,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 formData: Partial<{
                     [x: string]: any;
                 }> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<{
                     readonly [x: string]: {
                         readonly _errors: readonly string[];
@@ -1275,8 +1275,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
                 formData: Partial<{
                     [x: string]: any;
                 }> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<{
                     readonly [x: string]: {
                         readonly _errors: readonly string[];
@@ -1403,8 +1403,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
                 onSubmit?: ((...args: any[]) => any) | undefined;
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-                submit: () => boolean;
-                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+                submit: () => Promise<boolean>;
+                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
                 status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -1457,8 +1457,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             onSubmit?: ((...args: any[]) => any) | undefined;
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-            submit: () => boolean;
-            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+            submit: () => Promise<boolean>;
+            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
             status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -1490,8 +1490,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         onSubmit?: ((...args: any[]) => any) | undefined;
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
-        submit: () => boolean;
-        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
+        submit: () => Promise<boolean>;
+        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => Promise<boolean>;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>>;
         status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -1504,8 +1504,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         $slots: {
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -1594,8 +1594,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-                submit: (() => boolean) | undefined;
-                validate: (() => boolean) | undefined;
+                submit: (() => Promise<boolean>) | undefined;
+                validate: (() => Promise<boolean>) | undefined;
                 invalid: import("vue").ComputedRef<boolean>;
                 fields: import("vue").Ref<Set<string>>;
                 fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -1636,8 +1636,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-            submit: (() => boolean) | undefined;
-            validate: (() => boolean) | undefined;
+            submit: (() => Promise<boolean>) | undefined;
+            validate: (() => Promise<boolean>) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: import("vue").Ref<Set<string>>;
             fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -1660,8 +1660,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>> | undefined>> | undefined;
-        submit: (() => boolean) | undefined;
-        validate: (() => boolean) | undefined;
+        submit: (() => Promise<boolean>) | undefined;
+        validate: (() => Promise<boolean>) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         fieldsErrors: import("vue").Ref<Map<string, import("zod").inferFormattedError<Schema, string>>>;
@@ -1672,8 +1672,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             default: (_: {
                 invalid: boolean;
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 fieldsErrors: Map<string, Record<string, {
                     _errors: string[];
@@ -1902,8 +1902,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         $slots: {
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
-                submit: () => boolean;
-                validate: () => boolean;
+                submit: () => Promise<boolean>;
+                validate: () => Promise<boolean>;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;

package/dist/src/types.d.ts

@@ -23,8 +23,8 @@ export type FormPluginOptions = FormPluginOptionsSchema & FormComposableOptions<
 export type InjectedFormData<Schema extends FormSchema> = {
     formData: Ref<Partial<z.infer<Schema>> | undefined>;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>>;
-    submit: () => boolean;
-    validate: () => boolean;
+    submit: () => Promise<boolean>;
+    validate: () => Promise<boolean>;
     status: Readonly<Ref<FormStatus | undefined>>;
     invalid: Readonly<Ref<boolean>>;
 };
@@ -38,16 +38,15 @@ export type InjectedFormFieldData<Schema extends FormSchema> = {
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>;
 };
 export type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-type ArrayKey = number;
 type IsTuple<T extends readonly any[]> = number extends T['length'] ? false : true;
 type TupleKeys<T extends readonly any[]> = Exclude<keyof T, keyof any[]>;
 export type PathConcat<TKey extends string | number, TValue> = TValue extends Primitive ? `${TKey}` : `${TKey}` | `${TKey}.${Path<TValue>}`;
 export type Path<T> = T extends readonly (infer V)[] ? IsTuple<T> extends true ? {
     [K in TupleKeys<T>]-?: PathConcat<K & string, T[K]>;
-}[TupleKeys<T>] : PathConcat<ArrayKey, V> : {
+}[TupleKeys<T>] : PathConcat<number, V> : {
     [K in keyof T]-?: PathConcat<K & string, T[K]>;
 }[keyof T];
-export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any ? TPath extends `${infer K}.${infer R}` ? K extends keyof T ? R extends Path<T[K]> ? undefined extends T[K] ? PathValue<T[K], R> | undefined : PathValue<T[K], R> : never : K extends `${ArrayKey}` ? T extends readonly (infer V)[] ? PathValue<V, R & Path<V>> : never : never : TPath extends keyof T ? T[TPath] : TPath extends `${ArrayKey}` ? T extends readonly (infer V)[] ? V : never : never : never;
+export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any ? TPath extends `${infer K}.${infer R}` ? K extends keyof T ? R extends Path<T[K]> ? undefined extends T[K] ? PathValue<T[K], R> | undefined : PathValue<T[K], R> : never : K extends `${number}` ? T extends readonly (infer V)[] ? PathValue<V, R & Path<V>> : never : never : TPath extends keyof T ? T[TPath] : TPath extends `${number}` ? T extends readonly (infer V)[] ? V : never : never : never;
 export type AnyBoolean<Schema extends FormSchema> = boolean | Ref<boolean> | ((data?: InjectedFormData<Schema>) => boolean | Ref<boolean>);
 export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, any> & {
     vvIs?: string | Component;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.14",
+  "version": "1.0.0-beta.1",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,16 +35,16 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "0.0.10-beta.3",
+    "@volverjs/ui-vue": "next",
     "@vueuse/core": "^10.4.1",
     "ts-dot-prop": "^2.1.3",
     "vue": "^3.3.4",
     "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.38.0",
+    "@playwright/experimental-ct-vue": "1.38.1",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@vitejs/plugin-vue": "^4.3.4",
     "@volverjs/style": "^0.1.11",
     "@vue/compiler-sfc": "^3.3.4",
@@ -52,18 +52,18 @@
     "@vue/runtime-core": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "copy": "^0.3.2",
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
-    "happy-dom": "^11.0.6",
+    "happy-dom": "^12.2.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.3",
+    "vite-plugin-dts": "^3.6.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.4"
+    "vitest": "^0.34.5"
   },
   "typesVersions": {
     "*": {

package/src/VvForm.ts

@@ -83,12 +83,12 @@ export const defineForm = <Schema extends FormSchema>(
 			// emit update:modelValue on formData change
 			watchThrottled(
 				formData,
-				(newValue) => {
+				async (newValue) => {
 					if (
 						(errors.value || options?.continuosValidation) ??
 						props.continuosValidation
 					) {
-						validate()
+						await validate()
 					}
 					if (
 						!newValue ||
@@ -107,8 +107,8 @@ export const defineForm = <Schema extends FormSchema>(
 			)
 
 			// validate formData with safeParse
-			const validate = (value = formData.value) => {
-				const parseResult = schema.safeParse(value)
+			const validate = async (value = formData.value) => {
+				const parseResult = await schema.safeParseAsync(value)
 				if (!parseResult.success) {
 					errors.value =
 						parseResult.error.format() as ZodFormattedError<
@@ -130,8 +130,8 @@ export const defineForm = <Schema extends FormSchema>(
 			}
 
 			// emit submit event if form is valid
-			const submit = () => {
-				if (!validate()) {
+			const submit = async () => {
+				if (!(await validate())) {
 					return false
 				}
 				emit('submit', formData.value as z.infer<Schema>)
@@ -209,8 +209,8 @@ export const defineForm = <Schema extends FormSchema>(
 							| undefined
 							? undefined
 							: Partial<TypeOf<Schema>> | undefined
-						submit: () => boolean
-						validate: () => boolean
+						submit: () => Promise<boolean>
+						validate: () => Promise<boolean>
 						errors: Readonly<
 							Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 						>

package/src/VvFormTemplate.ts

@@ -162,8 +162,8 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						| undefined
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
-					submit: () => boolean
-					validate: () => boolean
+					submit: () => Promise<boolean>
+					validate: () => Promise<boolean>
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 					>

package/src/VvFormWrapper.ts

@@ -149,8 +149,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 						| undefined
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
-					submit: () => boolean
-					validate: () => boolean
+					submit: () => Promise<boolean>
+					validate: () => Promise<boolean>
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 					>

package/src/types.ts

@@ -45,8 +45,8 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	errors: Readonly<
 		Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>
 	>
-	submit: () => boolean
-	validate: () => boolean
+	submit: () => Promise<boolean>
+	validate: () => Promise<boolean>
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
 }
@@ -71,8 +71,6 @@ export type Primitive =
 	| symbol
 	| bigint
 
-type ArrayKey = number
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type IsTuple<T extends readonly any[]> = number extends T['length']
 	? false
@@ -91,7 +89,7 @@ export type Path<T> = T extends readonly (infer V)[]
 		? {
 				[K in TupleKeys<T>]-?: PathConcat<K & string, T[K]>
 		  }[TupleKeys<T>]
-		: PathConcat<ArrayKey, V>
+		: PathConcat<number, V>
 	: {
 			[K in keyof T]-?: PathConcat<K & string, T[K]>
 	  }[keyof T]
@@ -105,14 +103,14 @@ export type PathValue<T, TPath extends Path<T> | Path<T>[]> = T extends any
 					? PathValue<T[K], R> | undefined
 					: PathValue<T[K], R>
 				: never
-			: K extends `${ArrayKey}`
+			: K extends `${number}`
 			? T extends readonly (infer V)[]
 				? PathValue<V, R & Path<V>>
 				: never
 			: never
 		: TPath extends keyof T
 		? T[TPath]
-		: TPath extends `${ArrayKey}`
+		: TPath extends `${number}`
 		? T extends readonly (infer V)[]
 			? V
 			: never