@volverjs/form-vue 0.0.10-beta.1 → 0.0.10-beta.2

package/dist/index.umd.js

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

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { ZodFormattedError } from 'zod'
+import type { z, AnyZodObject, ZodEffects } from 'zod'
 import type { FormFieldType } from './enums'
 
 export type FormComposableOptions = {
@@ -13,19 +13,34 @@ export type FormPluginOptions = {
 	schema?: ZodSchema
 } & FormComposableOptions
 
-export type InjectedFormData<Type = Recrod<string | number, unknown>> = {
-	modelValue: Ref<Type>
-	errors: Ref<ZodFormattedError<Type>>
+export type InjectedFormData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
+	modelValue: Ref<Partial<z.infer<Schema>> | undefined>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 	submit: () => boolean
 }
 
-export type InjectedFormWrapperData = {
+export type InjectedFormWrapperData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
 	name: Ref<string>
 	fields: Ref<Set<string>>
-	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }
 
-export type InjectedFormFieldData = {
+export type InjectedFormFieldData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
 	name: Ref<string>
-	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }

package/dist/utils.d.ts

@@ -3,4 +3,12 @@ export declare const defaultObjectBySchema: <Schema extends z.AnyZodObject | z.Z
     [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>>;

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.10-beta.1",
+  "version": "0.0.10-beta.2",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,33 +35,33 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "0.0.5-beta.9",
+    "@volverjs/ui-vue": "0.0.6-beta.6",
     "@vueuse/core": "^9.13.0",
     "ts-dot-prop": "^2.1.2",
     "vue": "^3.2.47",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "^1.32.1",
+    "@playwright/experimental-ct-vue": "^1.32.3",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@volverjs/style": "^0.1.8",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/runtime-core": "^3.2.47",
     "@vue/test-utils": "^2.3.2",
     "copy": "^0.3.2",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^8.9.0",
+    "happy-dom": "^9.1.9",
     "prettier": "^2.8.7",
-    "typescript": "^5.0.2",
+    "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.5.0",
-    "vitest": "^0.29.8",
+    "vitest": "^0.30.1",
     "vue-tsc": "^1.2.0"
   },
   "typesVersions": {

package/src/VvForm.ts

@@ -12,7 +12,12 @@ import {
 } from 'vue'
 import { watchThrottled } from '@vueuse/core'
 
-import type { AnyZodObject, ZodEffects } from 'zod'
+import {
+	type z,
+	type ZodFormattedError,
+	type AnyZodObject,
+	type ZodEffects,
+} from 'zod'
 import type { InjectedFormData } from './types'
 import { defaultObjectBySchema } from './utils'
 
@@ -21,114 +26,129 @@ export enum FormStatus {
 	valid = 'valid',
 }
 
-export const defineForm = (
-	schema: AnyZodObject | ZodEffects<AnyZodObject>,
-	provideKey: InjectionKey<InjectedFormData>,
+export const defineForm = <
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+>(
+	schema: Schema,
+	provideKey: InjectionKey<InjectedFormData<Schema>>,
 	options?: {
 		updateThrottle?: number
 		continuosValidation?: boolean
 	},
 ) => {
-	return defineComponent({
-		name: 'FormComponent',
-		props: {
-			modelValue: {
-				type: Object,
-				default: () => ({}),
-			},
-			continuosValidation: {
-				type: Boolean,
-				default: false,
-			},
-		},
-		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
-		expose: ['submit', 'errors', 'status'],
-		setup(props, { emit }) {
-			const localModelValue = ref(
-				defaultObjectBySchema(schema, props.modelValue),
-			)
-
-			const keepValidation =
-				options?.continuosValidation || props.continuosValidation
+	const errors = ref<ZodFormattedError<z.infer<Schema>>>()
+	const status = ref<FormStatus | undefined>()
+	const localModelValue = ref<Partial<z.infer<Schema> | undefined>>()
 
-			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))
-					}
+	return {
+		errors,
+		status,
+		formData: localModelValue,
+		component: defineComponent({
+			name: 'FormComponent',
+			props: {
+				modelValue: {
+					type: Object,
+					default: () => ({}),
 				},
-				{ 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)
-					}
+				continuosValidation: {
+					type: Boolean,
+					default: false,
 				},
-				{ deep: true, throttle: options?.updateThrottle ?? 500 },
-			)
+			},
+			emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
+			expose: ['submit', 'errors', 'status'],
+			setup(props, { emit }) {
+				localModelValue.value = defaultObjectBySchema(
+					schema,
+					props.modelValue,
+				)
 
-			// validation
-			const errors = ref()
-			const status = ref()
-			const parseModelValue = (value = localModelValue.value) => {
-				const parseResult = schema.safeParse(value)
-				if (!parseResult.success) {
-					errors.value = parseResult.error.format()
-					status.value = FormStatus.invalid
-					emit('invalid', errors.value)
-					return false
+				const keepValidation =
+					options?.continuosValidation || props.continuosValidation
+
+				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 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
+					}
+					errors.value = undefined
+					status.value = FormStatus.valid
+					localModelValue.value = parseResult.data
+					emit('valid', parseResult.data)
+					return true
 				}
-				errors.value = undefined
-				status.value = FormStatus.valid
-				localModelValue.value = parseResult.data
-				emit('valid', parseResult.data)
-				return true
-			}
 
-			// submit
-			const submit = () => {
-				if (!parseModelValue()) {
-					return false
+				// submit
+				const submit = () => {
+					if (!parseModelValue()) {
+						return false
+					}
+					emit('submit', localModelValue.value)
+					return true
 				}
-				emit('submit', localModelValue.value)
-				return true
-			}
 
-			// provide
-			provide(provideKey, {
-				modelValue: localModelValue,
-				submit,
-				errors: readonly(errors),
-			})
+				// provide
+				provide(provideKey, {
+					modelValue: localModelValue,
+					submit,
+					errors: readonly(errors),
+				})
 
-			return { submit }
-		},
-		render() {
-			return h(
-				'form',
-				{
-					onSubmit: withModifiers(this.submit, ['prevent']),
-				},
-				this.$slots,
-			)
-		},
-	})
+				return { submit }
+			},
+			render() {
+				return h(
+					'form',
+					{
+						onSubmit: withModifiers(this.submit, ['prevent']),
+					},
+					this.$slots,
+				)
+			},
+		}),
+	}
 }

package/src/VvFormField.ts

@@ -16,7 +16,9 @@ import {
 	toRefs,
 	watch,
 	defineComponent,
+	onBeforeUnmount,
 } from 'vue'
+import type { AnyZodObject, ZodEffects, z } from 'zod'
 import { FormFieldType } from './enums'
 import type {
 	InjectedFormData,
@@ -25,12 +27,17 @@ import type {
 	FormComposableOptions,
 } from './types'
 
-export const defineFormField = (
-	formProvideKey: InjectionKey<InjectedFormData>,
-	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
-	formFieldInjectionKey: InjectionKey<InjectedFormFieldData>,
+export const defineFormField = <
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+>(
+	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
+	formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>,
 	options: FormComposableOptions = {},
-): Component => {
+) => {
 	// define component
 	return defineComponent({
 		name: 'FieldComponent',
@@ -52,10 +59,13 @@ export const defineFormField = (
 			},
 			props: {
 				type: [Object, Function] as PropType<
-					| Record<string, unknown>
-					| ((
-							formData?: Ref<ObjectConstructor>,
-					  ) => Record<string, unknown>)
+					Partial<
+						| z.infer<Schema>
+						| undefined
+						| ((
+								formData?: Ref<ObjectConstructor>,
+						  ) => Partial<z.infer<Schema>> | undefined)
+					>
 				>,
 				default: () => ({}),
 			},
@@ -102,6 +112,11 @@ export const defineFormField = (
 				}
 			})
 
+			onBeforeUnmount(() => {
+				unwatchInvalid()
+				unwatchFormProvided()
+			})
+
 			// inject data from parent form wrapper
 			const wrapperProvided = inject(wrapperProvideKey, undefined)
 			if (wrapperProvided) {
@@ -124,7 +139,7 @@ export const defineFormField = (
 			const invalid = computed(() => {
 				return errors.value !== undefined
 			})
-			watch(invalid, () => {
+			const unwatchInvalid = watch(invalid, () => {
 				if (invalid.value) {
 					emit('invalid', invalidLabel.value)
 					if (wrapperProvided) {
@@ -141,7 +156,7 @@ export const defineFormField = (
 					}
 				}
 			})
-			watch(
+			const unwatchFormProvided = watch(
 				() => formProvided?.modelValue,
 				() => {
 					emit('update:formData', formProvided?.modelValue)

package/src/VvFormWrapper.ts

@@ -11,11 +11,17 @@ import {
 	watch,
 	h,
 } from 'vue'
+import type { AnyZodObject, ZodEffects } from 'zod'
 import type { InjectedFormData, InjectedFormWrapperData } from './types'
 
-export const defineFormWrapper = (
-	formProvideKey: InjectionKey<InjectedFormData>,
-	wrapperProvideKey: InjectionKey<InjectedFormWrapperData>,
+export const defineFormWrapper = <
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+>(
+	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
+	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
 ) => {
 	return defineComponent({
 		name: 'WrapperComponent',
@@ -103,8 +109,8 @@ export const defineFormWrapper = (
 					null,
 					this.$slots.default?.({
 						invalid: this.invalid,
-						formData: this.formProvided?.modelValue,
-						errors: this.formProvided?.errors,
+						formData: this.formProvided?.modelValue.value,
+						errors: this.formProvided?.errors.value,
 						fieldsErrors: this.errors,
 					}) ?? this.$slots.defalut,
 				)
@@ -112,8 +118,8 @@ export const defineFormWrapper = (
 			return (
 				this.$slots.default?.({
 					invalid: this.invalid,
-					formData: this.formProvided?.modelValue,
-					errors: this.formProvided?.errors,
+					formData: this.formProvided?.modelValue.value,
+					errors: this.formProvided?.errors.value,
 					fieldsErrors: this.errors,
 				}) ?? this.$slots.defalut
 			)

package/src/index.ts

@@ -11,20 +11,32 @@ import type {
 	FormPluginOptions,
 } from './types'
 
-export const formFactory = (
-	schema: AnyZodObject | ZodEffects<AnyZodObject>,
+export const formFactory = <
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+>(
+	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
 	// create injection keys form provide/inject
-	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData>
-	const formWrapperInjectionKey =
-		Symbol() as InjectionKey<InjectedFormWrapperData>
+	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
+	const formWrapperInjectionKey = Symbol() as InjectionKey<
+		InjectedFormWrapperData<Schema>
+	>
 
-	const formFieldInjectionKey =
-		Symbol() as InjectionKey<InjectedFormFieldData>
+	const formFieldInjectionKey = Symbol() as InjectionKey<
+		InjectedFormFieldData<Schema>
+	>
 
 	// create components
-	const VvForm = defineForm(schema, formInjectionKey, options)
+	const {
+		component: VvForm,
+		errors,
+		status,
+		formData,
+	} = defineForm(schema, formInjectionKey, options)
 	const VvFormWrapper = defineFormWrapper(
 		formInjectionKey,
 		formWrapperInjectionKey,
@@ -43,6 +55,9 @@ export const formFactory = (
 		formInjectionKey,
 		formWrapperInjectionKey,
 		formFieldInjectionKey,
+		errors,
+		status,
+		formData,
 	}
 }
 
@@ -77,8 +92,13 @@ export const createForm = (
 	}
 }
 
-export const useForm = (
-	schema: AnyZodObject | ZodEffects<AnyZodObject>,
+export const useForm = <
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+>(
+	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
 	const hasOptions = { ...inject(pluginInjectionKey, {}), ...options }

package/src/types.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { ZodFormattedError } from 'zod'
+import type { z, AnyZodObject, ZodEffects } from 'zod'
 import type { FormFieldType } from './enums'
 
 export type FormComposableOptions = {
@@ -13,19 +13,34 @@ export type FormPluginOptions = {
 	schema?: ZodSchema
 } & FormComposableOptions
 
-export type InjectedFormData<Type = Recrod<string | number, unknown>> = {
-	modelValue: Ref<Type>
-	errors: Ref<ZodFormattedError<Type>>
+export type InjectedFormData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
+	modelValue: Ref<Partial<z.infer<Schema>> | undefined>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 	submit: () => boolean
 }
 
-export type InjectedFormWrapperData = {
+export type InjectedFormWrapperData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
 	name: Ref<string>
 	fields: Ref<Set<string>>
-	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }
 
-export type InjectedFormFieldData = {
+export type InjectedFormFieldData<
+	Schema extends
+		| AnyZodObject
+		| ZodEffects<AnyZodObject>
+		| ZodEffects<ZodEffects<AnyZodObject>>,
+> = {
 	name: Ref<string>
-	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 }