@volverjs/form-vue 0.0.14-beta.2 → 0.0.14-beta.3

package/dist/index.umd.js

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

package/dist/types.d.ts

@@ -1,19 +1,25 @@
-import type { Component, DeepReadonly, Ref } from 'vue';
-import type { z, AnyZodObject, ZodEffects } from 'zod';
+import { type Component, type DeepReadonly, type Ref } from 'vue';
+import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod';
 import type { FormFieldType, FormStatus } from './enums';
 export type FormSchema = AnyZodObject | ZodEffects<AnyZodObject> | ZodEffects<ZodEffects<AnyZodObject>>;
 export type FormFieldComponentOptions = {
     lazyLoad?: boolean;
     sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void;
 };
-export type FormComponentOptions = {
+export type FormComponentOptions<Schema> = {
     updateThrottle?: number;
     continuosValidation?: boolean;
+    template?: Schema extends FormSchema ? FormTemplate<Schema> : never;
+    onUpdate?: Schema extends FormSchema ? (data: Partial<z.infer<Schema> | undefined>) => void : never;
+    onSubmit?: Schema extends FormSchema ? (data: z.infer<Schema>) => void : never;
+    onInvalid?: Schema extends FormSchema ? (error: inferFormattedError<Schema, string>) => void : never;
+    onValid?: Schema extends FormSchema ? (data: z.infer<Schema>) => void : never;
 };
-export type FormComposableOptions = FormFieldComponentOptions & FormComponentOptions;
-export type FormPluginOptions = {
+export type FormComposableOptions<Schema> = FormFieldComponentOptions & FormComponentOptions<Schema>;
+type FormPluginOptionsSchema = {
     schema?: FormSchema;
-} & FormComposableOptions;
+};
+export type FormPluginOptions = FormPluginOptionsSchema & FormComposableOptions<FormPluginOptionsSchema['schema']>;
 export type InjectedFormData<Schema extends FormSchema> = {
     formData: Ref<Partial<z.infer<Schema>> | undefined>;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>>;
@@ -52,7 +58,9 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, a
     vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>;
     vvType?: `${FormFieldType}`;
     vvShowValid?: boolean;
+    vvContent?: string;
     vvDefaultValue?: any;
 };
 export type FormTemplateItem<Schema extends FormSchema> = SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>);
+export type FormTemplate<Schema extends FormSchema> = FormTemplateItem<Schema>[] | ((data?: InjectedFormData<Schema>) => FormTemplateItem<Schema>[]);
 export {};

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.14-beta.2",
+  "version": "0.0.14-beta.3",
   "engines": {
     "node": ">= 16.x"
   },
@@ -35,34 +35,34 @@
     "*.d.ts"
   ],
   "dependencies": {
-    "@volverjs/ui-vue": "^0.0.8",
-    "@vueuse/core": "^10.3.0",
+    "@volverjs/ui-vue": "^0.0.9",
+    "@vueuse/core": "^10.4.1",
     "ts-dot-prop": "^2.1.3",
     "vue": "^3.3.4",
-    "zod": "^3.21.4"
+    "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.36.2",
+    "@playwright/experimental-ct-vue": "1.37.1",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@vitejs/plugin-vue": "^4.3.4",
     "@volverjs/style": "^0.1.11",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/runtime-core": "^3.3.4",
     "@vue/test-utils": "^2.4.1",
     "copy": "^0.3.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "happy-dom": "^10.9.0",
-    "prettier": "^3.0.1",
-    "typescript": "^5.1.6",
+    "happy-dom": "^10.11.2",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.5.1",
+    "vite-plugin-dts": "^3.5.3",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.1"
+    "vitest": "^0.34.3"
   },
   "typesVersions": {
     "*": {

package/src/VvForm.ts

@@ -1,7 +1,9 @@
 import {
+	type Component,
 	type InjectionKey,
 	type DeepReadonly,
 	type Ref,
+	type PropType,
 	withModifiers,
 	defineComponent,
 	ref,
@@ -18,6 +20,7 @@ import type { z, ZodFormattedError, TypeOf } from 'zod'
 import type {
 	FormComponentOptions,
 	FormSchema,
+	FormTemplate,
 	InjectedFormData,
 } from './types'
 import { FormStatus } from './enums'
@@ -26,7 +29,8 @@ import { defaultObjectBySchema } from './utils'
 export const defineForm = <Schema extends FormSchema>(
 	schema: Schema,
 	provideKey: InjectionKey<InjectedFormData<Schema>>,
-	options?: FormComponentOptions,
+	options?: FormComponentOptions<Schema>,
+	VvFormTemplate?: Component,
 ) => {
 	const errors = ref<z.inferFormattedError<Schema> | undefined>()
 	const status = ref<FormStatus | undefined>()
@@ -46,6 +50,9 @@ export const defineForm = <Schema extends FormSchema>(
 				type: Boolean,
 				default: false,
 			},
+			template: {
+				type: [Array, Function] as PropType<FormTemplate<Schema>>,
+			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
 		expose: ['submit', 'validate', 'errors', 'status', 'valid', 'invalid'],
@@ -89,6 +96,7 @@ export const defineForm = <Schema extends FormSchema>(
 							JSON.stringify(props.modelValue)
 					) {
 						emit('update:modelValue', newValue)
+						options?.onUpdate?.(toRaw(newValue))
 					}
 				},
 				{
@@ -107,13 +115,16 @@ export const defineForm = <Schema extends FormSchema>(
 						>
 					status.value = FormStatus.invalid
 					emit('invalid', errors.value)
+					options?.onInvalid?.(toRaw(errors.value))
 					return false
 				}
 				errors.value = undefined
 				status.value = FormStatus.valid
 				formData.value = parseResult.data
 				emit('update:modelValue', formData.value)
+				options?.onUpdate?.(toRaw(formData.value))
 				emit('valid', parseResult.data)
+				options?.onValid?.(toRaw(formData.value))
 				return true
 			}
 
@@ -122,7 +133,8 @@ export const defineForm = <Schema extends FormSchema>(
 				if (!validate()) {
 					return false
 				}
-				emit('submit', formData.value)
+				emit('submit', formData.value as z.infer<Schema>)
+				options?.onSubmit?.(toRaw(formData.value) as z.infer<Schema>)
 				return true
 			}
 
@@ -153,17 +165,23 @@ export const defineForm = <Schema extends FormSchema>(
 				{
 					onSubmit: withModifiers(this.submit, ['prevent']),
 				},
-				{
-					default: () =>
-						this.$slots?.default?.({
-							formData: this.formData,
-							submit: this.submit,
-							validate: this.validate,
-							errors: this.errors,
-							status: this.status,
-							invalid: this.invalid,
-						}) ?? this.$slots.default,
-				},
+				(this.template ?? options?.template) && VvFormTemplate
+					? [
+							h(VvFormTemplate, {
+								schema: this.template ?? options?.template,
+							}),
+					  ]
+					: {
+							default: () =>
+								this.$slots?.default?.({
+									formData: this.formData,
+									submit: this.submit,
+									validate: this.validate,
+									errors: this.errors,
+									status: this.status,
+									invalid: this.invalid,
+								}) ?? this.$slots.default,
+					  },
 			)
 		},
 	})

package/src/VvFormTemplate.ts

@@ -12,35 +12,30 @@ import {
 	unref,
 } from 'vue'
 import type { TypeOf, z } from 'zod'
-import type { FormSchema, InjectedFormData, FormTemplateItem } from './types'
+import type { FormSchema, InjectedFormData, FormTemplate } from './types'
 import type { FormStatus } from './enums'
 
 export const defineFormTemplate = <Schema extends FormSchema>(
 	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
 	VvFormField: Component,
 ) => {
-	const VvFormTemplate: Component = defineComponent({
+	const VvFormTemplate = defineComponent({
 		props: {
 			schema: {
-				type: [Array, Function] as PropType<
-					| FormTemplateItem<Schema>[]
-					| ((
-							data?: InjectedFormData<Schema>,
-					  ) => FormTemplateItem<Schema>[])
-				>,
+				type: [Array, Function] as PropType<FormTemplate<Schema>>,
 				required: true,
 			},
 		},
 		setup(templateProps, { slots: templateSlots }) {
 			const injectedFormData = inject(formProvideKey)
 			if (!injectedFormData?.formData) return
-			const normalizedSchema =
-				typeof templateProps.schema === 'function'
-					? templateProps.schema(injectedFormData)
-					: templateProps.schema
-			let lastIf: boolean | undefined = undefined
-			return () =>
-				normalizedSchema.reduce<(VNode | VNode[] | undefined)[]>(
+			return () => {
+				const normalizedSchema =
+					typeof templateProps.schema === 'function'
+						? templateProps.schema(injectedFormData)
+						: templateProps.schema
+				let lastIf: boolean | undefined = undefined
+				return normalizedSchema.reduce<(VNode | VNode[] | undefined)[]>(
 					(acc, field) => {
 						const normalizedField =
 							typeof field === 'function'
@@ -56,6 +51,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 							vvType,
 							vvDefaultValue,
 							vvShowValid,
+							vvContent,
 							...props
 						} = normalizedField
 
@@ -120,7 +116,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 										showValid: vvShowValid,
 										props,
 									},
-									vvSlots ?? hChildren,
+									vvSlots ?? hChildren ?? vvContent,
 								),
 							)
 							return acc
@@ -130,7 +126,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 								h(
 									vvIs as Component,
 									props,
-									vvSlots ?? hChildren,
+									vvSlots ?? hChildren ?? vvContent,
 								),
 							)
 							return acc
@@ -152,6 +148,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						}),
 					],
 				)
+			}
 		},
 	})
 

package/src/index.ts

@@ -19,11 +19,13 @@ import type {
 	Path,
 	PathValue,
 	FormSchema,
+	FormTemplate,
 } from './types'
+import type { AnyZodObject } from 'zod'
 
 const _formFactory = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	// create injection keys
 	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
@@ -35,11 +37,6 @@ const _formFactory = <Schema extends FormSchema>(
 	>
 
 	// create components
-	const { VvForm, errors, status, formData } = defineForm(
-		schema,
-		formInjectionKey,
-		options,
-	)
 	const VvFormWrapper = defineFormWrapper(
 		formInjectionKey,
 		formWrapperInjectionKey,
@@ -51,6 +48,12 @@ const _formFactory = <Schema extends FormSchema>(
 		options,
 	)
 	const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
+	const { VvForm, errors, status, formData } = defineForm(
+		schema,
+		formInjectionKey,
+		options,
+		VvFormTemplate,
+	)
 
 	return {
 		VvForm,
@@ -73,7 +76,7 @@ export const createForm = (
 ): Plugin & Partial<ReturnType<typeof useForm>> => {
 	let toReturn: Partial<ReturnType<typeof useForm>> = {}
 	if (options.schema) {
-		toReturn = _formFactory(options.schema, options)
+		toReturn = _formFactory(options.schema as AnyZodObject, options)
 	}
 	return {
 		...toReturn,
@@ -102,15 +105,18 @@ export const createForm = (
 
 export const useForm = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	if (!getCurrentInstance()) {
 		return _formFactory(schema, options)
 	}
-	return _formFactory(schema, {
-		...inject(pluginInjectionKey, {}),
-		...options,
-	})
+	return _formFactory(
+		schema as AnyZodObject,
+		{
+			...inject(pluginInjectionKey, {}),
+			...options,
+		} as FormComposableOptions<AnyZodObject>,
+	)
 }
 
 export { FormFieldType } from './enums'
@@ -130,6 +136,7 @@ export type {
 	FormComponent,
 	FormWrapperComponent,
 	FormFieldComponent,
+	FormTemplate,
 	FormTemplateComponent,
 	FormTemplateItem,
 	Path,
@@ -141,7 +148,7 @@ export type {
  */
 export const formFactory = <Schema extends FormSchema>(
 	schema: Schema,
-	options: FormComposableOptions = {},
+	options: FormComposableOptions<Schema> = {},
 ) => {
 	return _formFactory(schema, options)
 }

package/src/types.ts

@@ -1,5 +1,5 @@
-import type { Component, DeepReadonly, Ref } from 'vue'
-import type { z, AnyZodObject, ZodEffects } from 'zod'
+import { type Component, type DeepReadonly, type Ref } from 'vue'
+import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod'
 import type { FormFieldType, FormStatus } from './enums'
 
 export type FormSchema =
@@ -12,17 +12,33 @@ export type FormFieldComponentOptions = {
 	sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void
 }
 
-export type FormComponentOptions = {
+export type FormComponentOptions<Schema> = {
 	updateThrottle?: number
 	continuosValidation?: boolean
+	template?: Schema extends FormSchema ? FormTemplate<Schema> : never
+	onUpdate?: Schema extends FormSchema
+		? (data: Partial<z.infer<Schema> | undefined>) => void
+		: never
+	onSubmit?: Schema extends FormSchema
+		? (data: z.infer<Schema>) => void
+		: never
+	onInvalid?: Schema extends FormSchema
+		? (error: inferFormattedError<Schema, string>) => void
+		: never
+	onValid?: Schema extends FormSchema
+		? (data: z.infer<Schema>) => void
+		: never
 }
 
-export type FormComposableOptions = FormFieldComponentOptions &
-	FormComponentOptions
+export type FormComposableOptions<Schema> = FormFieldComponentOptions &
+	FormComponentOptions<Schema>
 
-export type FormPluginOptions = {
+type FormPluginOptionsSchema = {
 	schema?: FormSchema
-} & FormComposableOptions
+}
+
+export type FormPluginOptions = FormPluginOptionsSchema &
+	FormComposableOptions<FormPluginOptionsSchema['schema']>
 
 export type InjectedFormData<Schema extends FormSchema> = {
 	formData: Ref<Partial<z.infer<Schema>> | undefined>
@@ -125,6 +141,7 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 	vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
 	vvType?: `${FormFieldType}`
 	vvShowValid?: boolean
+	vvContent?: string
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	vvDefaultValue?: any
 }
@@ -132,3 +149,7 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 export type FormTemplateItem<Schema extends FormSchema> =
 	| SimpleFormTemplateItem<Schema>
 	| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
+
+export type FormTemplate<Schema extends FormSchema> =
+	| FormTemplateItem<Schema>[]
+	| ((data?: InjectedFormData<Schema>) => FormTemplateItem<Schema>[])