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

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

package/dist/types.d.ts

@@ -111,8 +111,8 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 		| SimpleFormTemplateItem<Schema>
 		| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
 	>
-	vvIf?: AnyBoolean<Schema>
-	vvElseIf?: AnyBoolean<Schema>
+	vvIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
+	vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
 	vvType?: `${FormFieldType}`
 	vvShowValid?: boolean
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.10-beta.6",
+  "version": "0.0.10-beta.7",
   "engines": {
     "node": ">= 16.x"
   },
@@ -36,7 +36,7 @@
   ],
   "dependencies": {
     "@volverjs/ui-vue": "0.0.6-beta.7",
-    "@vueuse/core": "^10.0.2",
+    "@vueuse/core": "^10.1.2",
     "ts-dot-prop": "^2.1.2",
     "vue": "^3.2.47",
     "zod": "^3.21.4"
@@ -44,25 +44,25 @@
   "devDependencies": {
     "@playwright/experimental-ct-vue": "^1.32.3",
     "@testing-library/vue": "^7.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "@vitejs/plugin-vue": "^4.2.1",
     "@volverjs/style": "^0.1.8",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/runtime-core": "^3.2.47",
     "@vue/test-utils": "^2.3.2",
     "copy": "^0.3.2",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "happy-dom": "^9.9.2",
-    "prettier": "^2.8.7",
+    "happy-dom": "^9.10.4",
+    "prettier": "^2.8.8",
     "typescript": "^5.0.4",
-    "vite": "^4.3.1",
+    "vite": "^4.3.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-externalize-deps": "^0.5.0",
+    "vite-plugin-externalize-deps": "^0.6.0",
     "vitest": "^0.30.1",
-    "vue-tsc": "^1.4.2"
+    "vue-tsc": "^1.6.3"
   },
   "typesVersions": {
     "*": {

package/src/VvForm.ts

@@ -37,6 +37,10 @@ export const defineForm = <Schema extends FormSchema>(
 				type: Object,
 				default: () => ({}),
 			},
+			updateThrottle: {
+				type: Number,
+				default: 500,
+			},
 			continuosValidation: {
 				type: Boolean,
 				default: false,
@@ -48,7 +52,7 @@ export const defineForm = <Schema extends FormSchema>(
 			formData.value = defaultObjectBySchema(schema, props.modelValue)
 
 			const keepValidation =
-				options?.continuosValidation || props.continuosValidation
+				options?.continuosValidation ?? props.continuosValidation
 
 			watch(
 				() => props.modelValue,
@@ -81,7 +85,10 @@ export const defineForm = <Schema extends FormSchema>(
 						emit('update:modelValue', newValue)
 					}
 				},
-				{ deep: true, throttle: options?.updateThrottle ?? 500 },
+				{
+					deep: true,
+					throttle: options?.updateThrottle ?? props.updateThrottle,
+				},
 			)
 
 			const parseModelValue = (value = formData.value) => {

package/src/VvFormField.ts

@@ -205,7 +205,6 @@ export const defineFormField = <Schema extends FormSchema>(
 				})(props.type as FormFieldType),
 				invalidLabel: invalidLabel.value,
 				modelValue: modelValue.value,
-				errors: props.is ? errors.value : undefined,
 				'onUpdate:modelValue': onUpdate,
 			}))
 

package/src/VvFormTemplate.ts

@@ -1,3 +1,4 @@
+import { get } from 'ts-dot-prop'
 import {
 	type Component,
 	type PropType,
@@ -32,13 +33,14 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 		},
 		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)[]>(
+				normalizedSchema.reduce<(VNode | VNode[] | undefined)[]>(
 					(acc, field) => {
 						const normalizedField =
 							typeof field === 'function'
@@ -58,10 +60,18 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						} = normalizedField
 						// conditions
 						if (vvIf !== undefined) {
-							lastIf =
-								typeof vvIf === 'function'
-									? unref(vvIf(injectedFormData))
-									: unref(vvIf)
+							if (typeof vvIf === 'string') {
+								lastIf = Boolean(
+									get(
+										Object(injectedFormData.formData.value),
+										vvIf,
+									),
+								)
+							} else if (typeof vvIf === 'function') {
+								lastIf = unref(vvIf(injectedFormData))
+							} else {
+								lastIf = unref(vvIf)
+							}
 							if (!lastIf) {
 								return acc
 							}
@@ -72,10 +82,18 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 							if (lastIf) {
 								return acc
 							}
-							lastIf =
-								typeof vvElseIf === 'function'
-									? unref(vvElseIf(injectedFormData))
-									: unref(vvElseIf)
+							if (typeof vvElseIf === 'string') {
+								lastIf = Boolean(
+									get(
+										Object(injectedFormData.formData.value),
+										vvElseIf,
+									),
+								)
+							} else if (typeof vvElseIf === 'function') {
+								lastIf = unref(vvElseIf(injectedFormData))
+							} else {
+								lastIf = unref(vvElseIf)
+							}
 							if (!lastIf) {
 								return acc
 							}

package/src/types.d.ts

@@ -111,8 +111,8 @@ export type SimpleFormTemplateItem<Schema extends FormSchema> = Record<
 		| SimpleFormTemplateItem<Schema>
 		| ((data?: InjectedFormData<Schema>) => SimpleFormTemplateItem<Schema>)
 	>
-	vvIf?: AnyBoolean<Schema>
-	vvElseIf?: AnyBoolean<Schema>
+	vvIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
+	vvElseIf?: AnyBoolean<Schema> | Path<z.infer<Schema>>
 	vvType?: `${FormFieldType}`
 	vvShowValid?: boolean
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any