@volverjs/form-vue 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/index.umd.js

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

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

@@ -1,20 +1,22 @@
-import type { Component, DeepReadonly, Ref, WatchStopHandle } from 'vue';
-import type { z, AnyZodObject, ZodEffects, inferFormattedError } from 'zod';
-import type { IgnoredUpdater } from '@vueuse/core';
-import type { FormFieldType, FormStatus } from './enums';
-export type FormSchema = AnyZodObject | ZodEffects<AnyZodObject> | ZodEffects<ZodEffects<AnyZodObject>>;
+import { Component, DeepReadonly, Ref, RendererElement, RendererNode, VNode, WatchStopHandle } from 'vue';
+import { z } from 'zod';
+import { IgnoredUpdater } from '@vueuse/core';
+import { FormFieldType, FormStatus } from './enums';
+export type FormSchema = z.AnyZodObject | z.ZodEffects<z.AnyZodObject> | z.ZodEffects<z.ZodEffects<z.AnyZodObject>>;
 export type FormFieldComponentOptions = {
     lazyLoad?: boolean;
     sideEffects?: (type: `${FormFieldType}`) => Promise<void> | void;
 };
 export type FormComponentOptions<Schema> = {
     updateThrottle?: number;
-    continuosValidation?: boolean;
+    continuousValidation?: boolean;
+    readonly?: 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;
+    onUpdate?: Schema extends FormSchema ? (data?: Partial<z.infer<Schema>>) => void : never;
+    onSubmit?: Schema extends FormSchema ? (data?: z.infer<Schema>) => void : never;
+    onReset?: Schema extends FormSchema ? (data?: z.infer<Schema>) => void : never;
+    onInvalid?: Schema extends FormSchema ? (error?: z.inferFormattedError<Schema>) => void : never;
+    onValid?: Schema extends FormSchema ? (data?: z.infer<Schema>) => void : never;
 };
 export type FormComposableOptions<Schema> = FormFieldComponentOptions & FormComponentOptions<Schema>;
 type FormPluginOptionsSchema = {
@@ -25,16 +27,19 @@ export type InjectedFormData<Schema extends FormSchema> = {
     formData: Ref<Partial<z.infer<Schema>> | undefined>;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>> | undefined>>;
     submit: () => Promise<boolean>;
-    validate: () => Promise<boolean>;
+    validate: (formData?: Partial<z.infer<Schema>>, fields?: Set<string>) => Promise<boolean>;
+    clear: () => void;
+    reset: () => void;
     ignoreUpdates: IgnoredUpdater;
     stopUpdatesWatch: WatchStopHandle;
     status: Readonly<Ref<FormStatus | undefined>>;
     invalid: Readonly<Ref<boolean>>;
+    readonly: Ref<boolean>;
 };
 export type InjectedFormWrapperData<Schema extends FormSchema> = {
     name: Ref<string>;
     fields: Ref<Set<string>>;
-    errors: Ref<Map<string, z.inferFormattedError<Schema, string>>>;
+    errors: Ref<Map<string, z.inferFormattedError<Schema>>>;
 };
 export type InjectedFormFieldData<Schema extends FormSchema> = {
     name: Ref<string>;
@@ -55,7 +60,7 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, a
     vvIs?: string | Component;
     vvName?: Path<z.infer<Schema>>;
     vvSlots?: Record<string, any>;
-    vvChildren?: Array<SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)>;
+    vvChildren?: Array<SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>, scope?: Record<string, unknown>) => SimpleFormTemplateItem<Schema>)> | ((data?: InjectedFormData<Schema>, scope?: Record<string, unknown>) => Array<SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>, scope?: Record<string, unknown>) => SimpleFormTemplateItem<Schema>)>);
     vvIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>;
     vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>;
     vvType?: `${FormFieldType}`;
@@ -63,6 +68,9 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<string, a
     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 type FormTemplateItem<Schema extends FormSchema> = SimpleFormTemplateItem<Schema> | ((data?: InjectedFormData<Schema>, scope?: Record<string, unknown>) => SimpleFormTemplateItem<Schema>);
+export type FormTemplate<Schema extends FormSchema> = FormTemplateItem<Schema>[] | ((data?: InjectedFormData<Schema>, scope?: Record<string, unknown>) => FormTemplateItem<Schema>[]);
+export type RenderFunctionOutput = VNode<RendererNode, RendererElement, {
+    [key: string]: any;
+}>;
 export {};

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+import { FormSchema } from './types';
+export declare function defaultObjectBySchema<Schema extends FormSchema>(schema: Schema, original?: Partial<z.infer<Schema>> & Record<string, unknown>): Partial<z.infer<Schema>>;

package/package.json

@@ -1,16 +1,10 @@
 {
   "name": "@volverjs/form-vue",
+  "type": "module",
+  "version": "1.0.0-beta.21",
   "description": "Vue 3 Forms with @volverjs/ui-vue",
-  "author": "24/Consulting",
+  "author": "8 Wave S.r.l.",
   "license": "MIT",
-  "keywords": [
-    "form",
-    "form-field",
-    "form-wrapper",
-    "vue3",
-    "zod",
-    "validation"
-  ],
   "homepage": "https://github.com/volverjs/form-vue",
   "repository": {
     "type": "git",
@@ -19,52 +13,26 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "1.0.0-beta.2",
-  "engines": {
-    "node": ">= 16.x"
+  "keywords": [
+    "form",
+    "form-field",
+    "form-wrapper",
+    "vue3",
+    "zod",
+    "validation"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.umd.js"
+    },
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*"
   },
-  "packageManager": "pnpm@8.7.5",
-  "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "node",
-    "*.d.ts"
-  ],
-  "dependencies": {
-    "@volverjs/ui-vue": "next",
-    "@vueuse/core": "^10.5.0",
-    "ts-dot-prop": "^2.1.3",
-    "vue": "^3.3.6",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.39.0",
-    "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@volverjs/style": "^0.1.11",
-    "@vue/compiler-sfc": "^3.3.6",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/runtime-core": "^3.3.6",
-    "@vue/test-utils": "^2.4.1",
-    "copy": "^0.3.2",
-    "eslint": "^8.52.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.17.0",
-    "happy-dom": "^12.9.1",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.0",
-    "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.7.0",
-    "vitest": "^0.34.6"
-  },
   "typesVersions": {
     "*": {
       "*": [
@@ -72,17 +40,44 @@
       ]
     }
   },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.umd.cjs"
-    },
-    "./src/*": "./src/*",
-    "./dist/*": "./dist/*"
+  "files": [
+    "*.d.ts",
+    "dist",
+    "node",
+    "src"
+  ],
+  "engines": {
+    "node": ">= 16.x"
+  },
+  "peerDependencies": {
+    "@volverjs/ui-vue": "^0.*",
+    "@vueuse/core": "^10.11.*",
+    "ts-dot-prop": "^2.1.*",
+    "vue": "^3.4.*",
+    "zod": "^3.23.*"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.7.3",
+    "@nabla/vite-plugin-eslint": "^2.0.4",
+    "@playwright/experimental-ct-vue": "1.48.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@volverjs/style": "0.1.13",
+    "@vue/compiler-sfc": "^3.5.12",
+    "@vue/runtime-core": "^3.5.12",
+    "@vue/test-utils": "^2.4.6",
+    "copy": "^0.3.2",
+    "eslint": "^9.12.0",
+    "happy-dom": "^15.7.4",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
+    "vite-plugin-dts": "^4.2.4",
+    "vite-plugin-externalize-deps": "^0.8.0",
+    "vitest": "^2.1.3"
   },
   "scripts": {
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "type-check": "tsc --noEmit",
     "dev": "vite build --watch",
     "build": "vite build",
@@ -90,6 +85,7 @@
     "test-vitest": "vitest run",
     "test-vitest-watch": "vitest",
     "test-playwright": "playwright test -c playwright-ct.config.ts",
+    "test-playwright:ui": "playwright test -c playwright-ct.config.ts --ui",
     "credits": "npx @opengovsg/credits-generator"
   }
 }