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

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

package/dist/{VvForm.d.ts → src/VvForm.d.ts}

@@ -1,8 +1,8 @@
-import { type InjectionKey, type DeepReadonly, type Ref } from 'vue';
+import { type Component, type InjectionKey, type DeepReadonly, type Ref, type PropType } from 'vue';
 import type { z, TypeOf } from 'zod';
-import type { FormComponentOptions, FormSchema, InjectedFormData } from './types';
+import type { FormComponentOptions, FormSchema, FormTemplate, InjectedFormData } from './types';
 import { FormStatus } from './enums';
-export declare const defineForm: <Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions) => {
+export declare const defineForm: <Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions<Schema> | undefined, VvFormTemplate?: Component) => {
     errors: Ref<z.inferFormattedError<Schema, string> | undefined>;
     status: Ref<FormStatus | undefined>;
     formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
@@ -14,6 +14,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: {
+                template?: FormTemplate<Schema> | undefined;
                 modelValue?: Record<string, any> | undefined;
                 updateThrottle?: number | undefined;
                 continuosValidation?: boolean | undefined;
@@ -92,6 +93,10 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
                     type: BooleanConstructor;
                     default: boolean;
                 };
+                template: {
+                    type: PropType<FormTemplate<Schema>>;
+                    default: undefined;
+                };
             }>> & {
                 onInvalid?: ((...args: any[]) => any) | undefined;
                 onValid?: ((...args: any[]) => any) | undefined;
@@ -105,6 +110,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
                 status: Readonly<Ref<FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
             }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "submit")[], string, {
+                template: FormTemplate<Schema>;
                 modelValue: Record<string, any>;
                 updateThrottle: number;
                 continuosValidation: boolean;
@@ -141,6 +147,10 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
                 type: BooleanConstructor;
                 default: boolean;
             };
+            template: {
+                type: PropType<FormTemplate<Schema>>;
+                default: undefined;
+            };
         }>> & {
             onInvalid?: ((...args: any[]) => any) | undefined;
             onValid?: ((...args: any[]) => any) | undefined;
@@ -170,6 +180,10 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
             type: BooleanConstructor;
             default: boolean;
         };
+        template: {
+            type: PropType<FormTemplate<Schema>>;
+            default: undefined;
+        };
     }>> & {
         onInvalid?: ((...args: any[]) => any) | undefined;
         onValid?: ((...args: any[]) => any) | undefined;
@@ -183,6 +197,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
         status: Readonly<Ref<FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "submit")[], "invalid" | "valid" | "update:modelValue" | "submit", {
+        template: FormTemplate<Schema>;
         modelValue: Record<string, any>;
         updateThrottle: number;
         continuosValidation: boolean;

package/dist/src/VvFormTemplate.d.ts

@@ -0,0 +1,131 @@
+import { type Component, type PropType, type InjectionKey, type DeepReadonly, type Ref, type VNode } from 'vue';
+import type { TypeOf, z } from 'zod';
+import type { FormSchema, InjectedFormData, FormTemplate } from './types';
+import type { FormStatus } from './enums';
+export declare const defineFormTemplate: <Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, VvFormField: Component) => {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly schema: FormTemplate<Schema>;
+            key?: string | number | symbol | undefined;
+            ref?: import("vue").VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            onVnodeBeforeMount?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            class?: unknown;
+            style?: unknown;
+        };
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            schema: {
+                type: PropType<FormTemplate<Schema>>;
+                required: true;
+            };
+        }>>, (() => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[] | undefined)[]) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        schema: {
+            type: PropType<FormTemplate<Schema>>;
+            required: true;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{} | (() => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>[] | undefined)[])> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: PropType<FormTemplate<Schema>>;
+        required: true;
+    };
+}>>, (() => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined)[]) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default: (_: {
+            formData: unknown extends Partial<TypeOf<Schema>> | undefined ? undefined : Partial<TypeOf<Schema>> | undefined;
+            submit: () => boolean;
+            validate: () => boolean;
+            errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
+            status: Ref<DeepReadonly<`${FormStatus}` | undefined>>;
+            invalid: Ref<DeepReadonly<boolean>>;
+        }) => any;
+    };
+});