@volverjs/form-vue 0.0.10-beta.4 → 0.0.10-beta.6

package/dist/index.umd.js

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

package/dist/types.d.ts

@@ -1,6 +1,11 @@
 import type { Ref } from 'vue'
 import type { z, AnyZodObject, ZodEffects } from 'zod'
-import type { FormFieldType } from './enums'
+import type { FormFieldType, FormStatus } from './enums'
+
+export type FormSchema =
+	| AnyZodObject
+	| ZodEffects<AnyZodObject>
+	| ZodEffects<ZodEffects<AnyZodObject>>
 
 export type FormComposableOptions = {
 	lazyLoad?: boolean
@@ -13,34 +18,107 @@ export type FormPluginOptions = {
 	schema?: ZodSchema
 } & FormComposableOptions
 
-export type InjectedFormData<
-	Schema extends
-		| AnyZodObject
-		| ZodEffects<AnyZodObject>
-		| ZodEffects<ZodEffects<AnyZodObject>>,
-> = {
-	modelValue: Ref<Partial<z.infer<Schema>> | undefined>
+export type InjectedFormData<Schema extends FormSchema> = {
+	formData: Ref<Partial<z.infer<Schema>> | undefined>
 	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 	submit: () => boolean
+	status: Readonly<Ref<FormStatus | undefined>>
+	invalid: Readonly<Ref<boolean>>
 }
 
-export type InjectedFormWrapperData<
-	Schema extends
-		| AnyZodObject
-		| ZodEffects<AnyZodObject>
-		| ZodEffects<ZodEffects<AnyZodObject>>,
-> = {
+export type InjectedFormWrapperData<Schema extends FormSchema> = {
 	name: Ref<string>
 	fields: Ref<Set<string>>
 	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }
 
-export type InjectedFormFieldData<
-	Schema extends
-		| AnyZodObject
-		| ZodEffects<AnyZodObject>
-		| ZodEffects<ZodEffects<AnyZodObject>>,
-> = {
+export type InjectedFormFieldData<Schema extends FormSchema> = {
 	name: Ref<string>
 	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }
+
+export type Primitive =
+	| null
+	| undefined
+	| string
+	| number
+	| boolean
+	| 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
+	: true
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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>
+	: {
+			[K in keyof T]-?: PathConcat<K & string, T[K]>
+	  }[keyof T]
+
+export type PathValue<T, TPath extends Path<T> | ArrayPath<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 AnyBoolean<Schema> =
+	| boolean
+	| Ref<boolean>
+	| ((data?: InjectedFormData<Schema>) => boolean | Ref<boolean>)
+
+export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
+	string,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	any
+> & {
+	vvIs?: string | Component
+	vvName?: Path<z.infer<Schema>>
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	vvSlots?: Record<string, any>
+	vvChildren?: Array<
+		| SimpleFormTemplateItem<Schema>
+		| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
+	>
+	vvIf?: AnyBoolean<Schema>
+	vvElseIf?: AnyBoolean<Schema>
+	vvType?: `${FormFieldType}`
+	vvShowValid?: boolean
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	vvDefaultValue?: any
+}
+
+export type FormTemplateItem<Schema extends FormSchema> =
+	| SimpleFormTemplateItem<Schema>
+	| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)

package/dist/utils.d.ts

@@ -1,14 +1,3 @@
 import { type z } from 'zod';
-export declare const defaultObjectBySchema: <Schema extends z.AnyZodObject | z.ZodEffects<z.AnyZodObject, {
-    [x: string]: any;
-}, {
-    [x: string]: any;
-}> | z.ZodEffects<z.ZodEffects<z.AnyZodObject, {
-    [x: string]: any;
-}, {
-    [x: string]: any;
-}>, {
-    [x: string]: any;
-}, {
-    [x: string]: any;
-}>>(schema: Schema, original?: Partial<z.TypeOf<Schema>>) => Partial<z.TypeOf<Schema>>;
+import type { FormSchema } from './types';
+export declare const defaultObjectBySchema: <Schema extends FormSchema>(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.10-beta.4",
+  "version": "0.0.10-beta.6",
   "engines": {
     "node": ">= 16.x"
   },
@@ -44,8 +44,8 @@
   "devDependencies": {
     "@playwright/experimental-ct-vue": "^1.32.3",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@volverjs/style": "^0.1.8",
     "@vue/compiler-sfc": "^3.2.47",
@@ -55,14 +55,14 @@
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^9.6.1",
+    "happy-dom": "^9.9.2",
     "prettier": "^2.8.7",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.3.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.5.0",
     "vitest": "^0.30.1",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.4.2"
   },
   "typesVersions": {
     "*": {
@@ -84,6 +84,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "type-check": "tsc --noEmit",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && copy src/**/types.d.ts dist",
+    "test": "pnpm run test-vitest && pnpm run test-playwright",
     "test-vitest": "vitest run",
     "test-vitest-watch": "vitest",
     "test-playwright": "playwright test -c playwright-ct.config.ts",

package/src/VvForm.ts

@@ -1,5 +1,7 @@
 import {
 	type InjectionKey,
+	type DeepReadonly,
+	type Ref,
 	withModifiers,
 	defineComponent,
 	ref,
@@ -9,29 +11,15 @@ import {
 	h,
 	toRaw,
 	isProxy,
+	computed,
 } from 'vue'
 import { watchThrottled } from '@vueuse/core'
-
-import {
-	type z,
-	type ZodFormattedError,
-	type AnyZodObject,
-	type ZodEffects,
-} from 'zod'
-import type { InjectedFormData } from './types'
+import type { z, ZodFormattedError, TypeOf } from 'zod'
+import type { FormSchema, InjectedFormData } from './types'
+import { FormStatus } from './enums'
 import { defaultObjectBySchema } from './utils'
 
-export enum FormStatus {
-	invalid = 'invalid',
-	valid = 'valid',
-}
-
-export const defineForm = <
-	Schema extends
-		| AnyZodObject
-		| ZodEffects<AnyZodObject>
-		| ZodEffects<ZodEffects<AnyZodObject>>,
->(
+export const defineForm = <Schema extends FormSchema>(
 	schema: Schema,
 	provideKey: InjectionKey<InjectedFormData<Schema>>,
 	options?: {
@@ -41,115 +29,153 @@ export const defineForm = <
 ) => {
 	const errors = ref<ZodFormattedError<z.infer<Schema>>>()
 	const status = ref<FormStatus | undefined>()
-	const localModelValue = ref<Partial<z.infer<Schema> | undefined>>()
-
-	return {
-		errors,
-		status,
-		formData: localModelValue,
-		component: defineComponent({
-			name: 'FormComponent',
-			props: {
-				modelValue: {
-					type: Object,
-					default: () => ({}),
-				},
-				continuosValidation: {
-					type: Boolean,
-					default: false,
-				},
+	const formData = ref<Partial<z.infer<Schema> | undefined>>()
+	const component = defineComponent({
+		name: 'FormComponent',
+		props: {
+			modelValue: {
+				type: Object,
+				default: () => ({}),
 			},
-			emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
-			expose: ['submit', 'errors', 'status'],
-			setup(props, { emit }) {
-				localModelValue.value = defaultObjectBySchema(
-					schema,
-					props.modelValue,
-				)
-
-				const keepValidation =
-					options?.continuosValidation || props.continuosValidation
+			continuosValidation: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
+		expose: ['submit', 'errors', 'status'],
+		setup(props, { emit }) {
+			formData.value = defaultObjectBySchema(schema, props.modelValue)
 
-				watch(
-					() => props.modelValue,
-					(newValue) => {
-						if (newValue) {
-							const original = isProxy(newValue)
-								? toRaw(newValue)
-								: newValue
-							localModelValue.value =
-								typeof original?.clone === 'function'
-									? original.clone()
-									: JSON.parse(JSON.stringify(original))
-						}
-					},
-					{ deep: true },
-				)
-				// v-model
-				watchThrottled(
-					localModelValue,
-					(newValue) => {
-						if (errors.value || keepValidation) {
-							parseModelValue()
-						}
-						if (
-							!newValue ||
-							!props.modelValue ||
-							JSON.stringify(newValue) !==
-								JSON.stringify(props.modelValue)
-						) {
-							emit('update:modelValue', newValue)
-						}
-					},
-					{ deep: true, throttle: options?.updateThrottle ?? 500 },
-				)
+			const keepValidation =
+				options?.continuosValidation || props.continuosValidation
 
-				const parseModelValue = (value = localModelValue.value) => {
-					const parseResult = schema.safeParse(value)
-					if (!parseResult.success) {
-						errors.value =
-							parseResult.error.format() as ZodFormattedError<
-								z.infer<Schema>
-							>
-						status.value = FormStatus.invalid
-						emit('invalid', errors.value)
-						return false
+			watch(
+				() => props.modelValue,
+				(newValue) => {
+					if (newValue) {
+						const original = isProxy(newValue)
+							? toRaw(newValue)
+							: newValue
+						formData.value =
+							typeof original?.clone === 'function'
+								? original.clone()
+								: JSON.parse(JSON.stringify(original))
+					}
+				},
+				{ deep: true },
+			)
+			// v-model
+			watchThrottled(
+				formData,
+				(newValue) => {
+					if (errors.value || keepValidation) {
+						parseModelValue()
 					}
-					errors.value = undefined
-					status.value = FormStatus.valid
-					localModelValue.value = parseResult.data
-					emit('update:modelValue', localModelValue.value)
-					emit('valid', parseResult.data)
-					return true
+					if (
+						!newValue ||
+						!props.modelValue ||
+						JSON.stringify(newValue) !==
+							JSON.stringify(props.modelValue)
+					) {
+						emit('update:modelValue', newValue)
+					}
+				},
+				{ deep: true, throttle: options?.updateThrottle ?? 500 },
+			)
+
+			const parseModelValue = (value = formData.value) => {
+				const parseResult = schema.safeParse(value)
+				if (!parseResult.success) {
+					errors.value =
+						parseResult.error.format() as ZodFormattedError<
+							z.infer<Schema>
+						>
+					status.value = FormStatus.invalid
+					emit('invalid', errors.value)
+					return false
 				}
+				errors.value = undefined
+				status.value = FormStatus.valid
+				formData.value = parseResult.data
+				emit('update:modelValue', formData.value)
+				emit('valid', parseResult.data)
+				return true
+			}
 
-				// submit
-				const submit = () => {
-					if (!parseModelValue()) {
-						return false
-					}
-					emit('submit', localModelValue.value)
-					return true
+			// submit
+			const submit = () => {
+				if (!parseModelValue()) {
+					return false
 				}
+				emit('submit', formData.value)
+				return true
+			}
 
-				// provide
-				provide(provideKey, {
-					modelValue: localModelValue,
-					submit,
-					errors: readonly(errors),
-				})
+			const invalid = computed(() => status.value === FormStatus.invalid)
 
-				return { submit }
-			},
-			render() {
-				return h(
-					'form',
-					{
-						onSubmit: withModifiers(this.submit, ['prevent']),
-					},
-					this.$slots,
-				)
-			},
-		}),
+			// provide
+			provide(provideKey, {
+				formData,
+				submit,
+				errors: readonly(errors),
+				status: readonly(status),
+				invalid,
+			})
+
+			return {
+				formData,
+				submit,
+				errors: readonly(errors),
+				status: readonly(status),
+				invalid,
+			}
+		},
+		render() {
+			return h(
+				'form',
+				{
+					onSubmit: withModifiers(this.submit, ['prevent']),
+				},
+				{
+					default: () =>
+						this.$slots?.default?.({
+							formData: this.formData,
+							submit: this.submit,
+							errors: this.errors,
+							status: this.status,
+							invalid: this.invalid,
+						}) ?? this.$slots.default,
+				},
+			)
+		},
+	})
+	return {
+		errors,
+		status,
+		formData,
+		/**
+		 * An hack to add types to the default slot
+		 */
+		VvForm: component as typeof component & {
+			new (): {
+				$slots: {
+					default: (_: {
+						formData: unknown extends
+							| Partial<TypeOf<Schema>>
+							| undefined
+							? undefined
+							: Partial<TypeOf<Schema>> | undefined
+						submit: () => boolean
+						errors: Readonly<
+							Ref<DeepReadonly<z.inferFormattedError<Schema>>>
+						>
+						status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
+						invalid: Ref<DeepReadonly<boolean>>
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					}) => any
+				}
+			}
+		},
 	}
 }

package/src/VvFormField.ts

@@ -18,21 +18,18 @@ import {
 	defineComponent,
 	onBeforeUnmount,
 } from 'vue'
-import type { AnyZodObject, ZodEffects, z } from 'zod'
+import type { z } from 'zod'
 import { FormFieldType } from './enums'
 import type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
 	FormComposableOptions,
+	Path,
+	FormSchema,
 } from './types'
 
-export const defineFormField = <
-	Schema extends
-		| AnyZodObject
-		| ZodEffects<AnyZodObject>
-		| ZodEffects<ZodEffects<AnyZodObject>>,
->(
+export const defineFormField = <Schema extends FormSchema>(
 	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
 	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
 	formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>,
@@ -54,7 +51,9 @@ export const defineFormField = <
 				default: undefined,
 			},
 			name: {
-				type: [String, Number, Boolean, Symbol],
+				type: [String, Number, Boolean, Symbol] as PropType<
+					Path<z.infer<Schema>>
+				>,
 				required: true,
 			},
 			props: {
@@ -84,22 +83,22 @@ export const defineFormField = <
 			// v-model
 			const modelValue = computed({
 				get() {
-					if (!injectedFormData?.modelValue) return
+					if (!injectedFormData?.formData) return
 					return get(
-						Object(injectedFormData.modelValue.value),
+						Object(injectedFormData.formData.value),
 						String(props.name),
 					)
 				},
 				set(value) {
-					if (!injectedFormData?.modelValue) return
+					if (!injectedFormData?.formData) return
 					set(
-						Object(injectedFormData.modelValue.value),
+						Object(injectedFormData.formData.value),
 						String(props.name),
 						value,
 					)
 					emit('update:modelValue', {
 						newValue: modelValue.value,
-						formData: injectedFormData?.modelValue,
+						formData: injectedFormData?.formData,
 					})
 				},
 			})
@@ -160,9 +159,9 @@ export const defineFormField = <
 				}
 			})
 			const unwatchInjectedFormData = watch(
-				() => injectedFormData?.modelValue,
+				() => injectedFormData?.formData,
 				() => {
-					emit('update:formData', injectedFormData?.modelValue)
+					emit('update:formData', injectedFormData?.formData)
 				},
 				{ deep: true },
 			)
@@ -171,7 +170,7 @@ export const defineFormField = <
 			}
 			const hasFieldProps = computed(() => {
 				if (typeof fieldProps.value === 'function') {
-					return fieldProps.value(injectedFormData?.modelValue)
+					return fieldProps.value(injectedFormData?.formData)
 				}
 				return fieldProps.value
 			})
@@ -225,8 +224,7 @@ export const defineFormField = <
 									onUpdate,
 									invalid: invalid.value,
 									invalidLabel: invalidLabel.value,
-									formData:
-										injectedFormData?.modelValue.value,
+									formData: injectedFormData?.formData.value,
 									formErrors: injectedFormData?.errors.value,
 									errors: errors.value,
 								}) ?? slots.defalut