@volverjs/form-vue 1.0.0-beta.2 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +163 -162
- package/dist/index.umd.js +1 -1
- package/dist/src/VvForm.d.ts +34 -50
- package/dist/src/VvFormTemplate.d.ts +7 -46
- package/dist/src/VvFormWrapper.d.ts +17 -47
- package/dist/src/index.d.ts +174 -429
- package/dist/src/utils.d.ts +1 -1
- package/package.json +10 -10
- package/src/VvForm.ts +2 -2
- package/src/index.ts +2 -0
- package/src/utils.ts +5 -3
package/dist/index.umd.js
CHANGED
|
@@ -1 +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"})});
|
|
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,u,a){const d=M(a)?a:void 0;if(!N(e)||!Z(u))return d;const i=q(u);if(i.length!==0){for(const t of i){if(t==="*")continue;const s=function(n){return n.map(f=>A(f)||L(f)?f:$(f)?s(f):f[t])};if($(e)&&!J.test(t)?e=s(e):e=e[t],A(e)||L(e))break}return A(e)?d:e}}function K(e,u,a){if(!N(e)||!Z(u))return;const d=q(u);if(d.length===0)return;const i=d.length;for(let t=0;t<i;t++){const s=d[t];if(t===i-1){e[s]=a;return}if(s==="*"&&$(e)){const n=d.slice(t+1).join(".");for(const f of e)K(f,n,a);return}A(e[s])&&(e[s]={}),e=e[s]}}function q(e){const u=e.split(/[.]|(?:\[(\d|\*)\])/).filter(a=>!!a);return u.some(a=>P.indexOf(a)!==-1)?[]:u}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,u,a,d)=>r.defineComponent({name:"VvFormField",props:{type:{type:String,validator:i=>Object.values(c).includes(i),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(i,{slots:t,emit:s}){const n=r.computed({get(){if(l!=null&&l.formData)return E(Object(l.formData.value),String(i.name))},set(o){l!=null&&l.formData&&(K(Object(l.formData.value),String(i.name),o),s("update:modelValue",{newValue:n.value,formData:l==null?void 0:l.formData}))}});r.onMounted(()=>{n.value===void 0&&i.defaultValue!==void 0&&(n.value=i.defaultValue)}),r.onBeforeUnmount(()=>{b(),V()});const f=r.inject(u,void 0);f&&f.fields.value.add(i.name);const l=r.inject(e),{props:v,name:y}=r.toRefs(i),g=r.computed(()=>{if(l!=null&&l.errors.value)return E(l.errors.value,String(i.name))}),h=r.computed(()=>{var o;return(o=g.value)==null?void 0:o._errors}),m=r.computed(()=>g.value!==void 0),b=r.watch(m,()=>{m.value?(s("invalid",h.value),f&&f.errors.value.set(i.name,{_errors:h.value})):(s("valid",n.value),f&&f.errors.value.delete(i.name))}),V=r.watch(()=>l==null?void 0:l.formData,()=>{s("update:formData",l==null?void 0:l.formData)},{deep:!0}),x=o=>{n.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??i.name,invalid:m.value,valid:i.showValid?!!(!m.value&&n.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})(i.type),invalidLabel:h.value,modelValue:n.value,"onUpdate:modelValue":x}));return r.provide(a,{name:r.readonly(y),errors:r.readonly(g)}),{component:r.computed(()=>{if(i.type===c.custom)return{render(){var o;return((o=t.default)==null?void 0:o.call(t,{modelValue:n.value,onUpdate:x,submit:l==null?void 0:l.submit,validate:l==null?void 0:l.validate,invalid:m.value,invalidLabel:h.value,formData:l==null?void 0:l.formData.value,formErrors:l==null?void 0:l.errors.value,errors:g.value}))??t.defalut}};if(!((d==null?void 0:d.lazyLoad)??i.lazyLoad)){let o;switch(i.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(i.type)),i.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:m}},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,u={})=>{const a=t=>{let s=t;for(;s instanceof O.ZodEffects;)s=s.innerType();return s instanceof O.ZodOptional&&(s=s._def.innerType),s},d=a(e);return{...(d instanceof O.ZodObject?d._def.unknownKeys==="passthrough":!1)?u:{},...Object.fromEntries(Object.entries(d.shape).map(([t,s])=>{const n=u[t];let f=a(s),l;if(f instanceof O.ZodDefault&&(l=f._def.defaultValue(),f=f._def.innerType),n===null&&f instanceof O.ZodNullable)return[t,n];if(f instanceof O.ZodSchema){const v=s.safeParse(n);if(v.success)return[t,v.data??l]}if(f instanceof O.ZodArray&&Array.isArray(n)&&n.length){const v=a(f._def.type);if(v instanceof O.ZodObject)return[t,n.map(y=>W(v,y&&typeof y=="object"?y:void 0))??l]}return f instanceof O.ZodObject?[t,W(f,n&&typeof n=="object"?n:l)]:[t,l]}))}},T=(e,u,a,d)=>{const i=r.ref(),t=r.ref(),s=r.computed(()=>t.value===w.invalid),n=r.ref(),f=async(h=n.value)=>{const m=await e.safeParseAsync(h);return m.success?(i.value=void 0,t.value=w.valid,n.value=m.data,!0):(i.value=m.error.format(),t.value=w.invalid,!1)},l=async()=>await f()?(t.value=w.submitting,!0):!1,{ignoreUpdates:v,stop:y}=G.watchIgnorable(n,()=>{t.value=w.updated},{deep:!0,eventFilter:G.throttleFilter((a==null?void 0:a.updateThrottle)??500)}),g=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}){return n.value=W(e,r.toRaw(h.modelValue)),r.watch(()=>h.modelValue,b=>{if(b){const V=r.isProxy(b)?r.toRaw(b):b;n.value=typeof(V==null?void 0:V.clone)=="function"?V.clone():JSON.parse(JSON.stringify(V))}},{deep:!0}),r.watch(t,async b=>{var V,x,k,C,S;if(b===w.invalid){const o=r.toRaw(i.value);m("invalid",o),(V=a==null?void 0:a.onInvalid)==null||V.call(a,o);return}if(b===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(b===w.submitting){const o=r.toRaw(n.value);m("submit",o),(C=a==null?void 0:a.onSubmit)==null||C.call(a,o)}if(b===w.updated){if((i.value||a!=null&&a.continuosValidation||h.continuosValidation)&&await f(),!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)}}),r.provide(u,{formData:n,submit:l,validate:f,ignoreUpdates:v,stopUpdatesWatch:y,errors:r.readonly(i),status:r.readonly(t),invalid:s}),{formData:n,submit:l,validate:f,ignoreUpdates:v,stopUpdatesWatch:y,errors:r.readonly(i),status:r.readonly(t),invalid:s}},render(){const h=()=>{var m,b;return((b=(m=this.$slots)==null?void 0:m.default)==null?void 0:b.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:i,status:t,invalid:s,formData:n,validate:f,submit:l,ignoreUpdates:v,stopUpdatesWatch:y,VvForm:g}},H=(e,u)=>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:i}){const t=r.inject(e),s=r.inject(u,void 0),n=r.ref(new Set),f=r.ref(new Map),{name:l}=r.toRefs(d);r.provide(u,{name:r.readonly(l),errors:f,fields:n}),r.watch(n,y=>{s!=null&&s.fields&&y.forEach(g=>{s==null||s.fields.value.add(g)})},{deep:!0}),r.watch(()=>new Map(f.value),(y,g)=>{s!=null&&s.errors&&(Array.from(g.keys()).forEach(h=>{s.errors.value.delete(h)}),Array.from(y.keys()).forEach(h=>{const m=y.get(h);m&&s.errors.value.set(h,m)}))},{deep:!0});const v=r.computed(()=>t!=null&&t.invalid.value?f.value.size>0:!1);return r.watch(v,()=>{v.value?i("invalid"):i("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:n,fieldsErrors:f}},render(){var d,i;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,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}):((i=(d=this.$slots).default)==null?void 0:i.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,u)=>{const a=r.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0}},setup(d,{slots:i}){const t=r.inject(e);if(t!=null&&t.formData)return()=>{var l;const s=typeof d.schema=="function"?d.schema(t):d.schema;let n;const f=s.reduce((v,y)=>{const g=typeof y=="function"?y(t):y,{vvIs:h,vvName:m,vvSlots:b,vvChildren:V,vvIf:x,vvElseIf:k,vvType:C,vvDefaultValue:S,vvShowValid:o,vvContent:I,...U}=g;if(x!==void 0){if(typeof x=="string"?n=!!E(Object(t.formData.value),x):typeof x=="function"?n=r.unref(x(t)):n=r.unref(x),!n)return v}else if(k!==void 0&&n!==void 0){if(n||(typeof k=="string"?n=!!E(Object(t.formData.value),k):typeof k=="function"?n=r.unref(k(t)):n=r.unref(k),!n))return v}else n=void 0;const R=V?r.h(a,{schema:V}):void 0;return m?(v.push(r.h(u,{name:m,is:h,type:C,defaultValue:S,showValid:o,props:U},b??R??I)),v):h?(v.push(r.h(h,U,b??R??I)),v):(V&&v.push(R),v)},[]);return f.push((l=i==null?void 0:i.default)==null?void 0:l.call(i,{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,u={})=>{const a=Symbol(),d=Symbol(),i=Symbol(),t=H(a,d),s=z(a,d,i,u),n=Q(a,s),{VvForm:f,errors:l,status:v,invalid:y,formData:g,validate:h,submit:m,ignoreUpdates:b,stopUpdatesWatch:V}=T(e,a,u,n);return{VvForm:f,VvFormWrapper:t,VvFormField:s,VvFormTemplate:n,formInjectionKey:a,formWrapperInjectionKey:d,formFieldInjectionKey:i,errors:l,status:v,invalid:y,formData:g,validate:h,submit:m,ignoreUpdates:b,stopUpdatesWatch:V}},B=Symbol(),X=e=>{let u={};return e.schema&&(u=_(e.schema,e)),{...u,install(a,{global:d=!1}={}){a.provide(B,e),d&&(a.config.globalProperties.$vvForm=e,u!=null&&u.VvForm&&a.component("VvForm",u.VvForm),u!=null&&u.VvFormWrapper&&a.component("VvFormWrapper",u.VvFormWrapper),u!=null&&u.VvFormField&&a.component("VvFormField",u.VvFormField),u!=null&&u.VvFormTemplate&&a.component("VvFormTemplate",u.VvFormTemplate))}}},Y=(e,u={})=>r.getCurrentInstance()?_(e,{...r.inject(B,{}),...u}):_(e,u),D=(e,u={})=>_(e,u);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"})});
|
package/dist/src/VvForm.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import { FormStatus } from './enums';
|
|
|
6
6
|
export declare const defineForm: <Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions<Schema> | undefined, VvFormTemplate?: Component) => {
|
|
7
7
|
errors: Ref<z.inferFormattedError<Schema, string> | undefined>;
|
|
8
8
|
status: Ref<FormStatus | undefined>;
|
|
9
|
+
invalid: import("vue").ComputedRef<boolean>;
|
|
9
10
|
formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
|
|
10
11
|
validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => Promise<boolean>;
|
|
11
12
|
submit: () => Promise<boolean>;
|
|
@@ -18,60 +19,43 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
|
|
|
18
19
|
new (...args: any[]): {
|
|
19
20
|
$: import("vue").ComponentInternalInstance;
|
|
20
21
|
$data: {};
|
|
21
|
-
$props: {
|
|
22
|
-
template
|
|
23
|
-
modelValue
|
|
24
|
-
continuosValidation
|
|
25
|
-
tag
|
|
22
|
+
$props: Partial<{
|
|
23
|
+
template: FormTemplate<Schema>;
|
|
24
|
+
modelValue: Record<string, any>;
|
|
25
|
+
continuosValidation: boolean;
|
|
26
|
+
tag: string;
|
|
27
|
+
}> & Omit<{
|
|
28
|
+
readonly modelValue: Record<string, any>;
|
|
29
|
+
readonly continuosValidation: boolean;
|
|
30
|
+
readonly tag: string;
|
|
31
|
+
readonly template?: FormTemplate<Schema> | undefined;
|
|
26
32
|
onInvalid?: ((...args: any[]) => any) | undefined;
|
|
27
33
|
onValid?: ((...args: any[]) => any) | undefined;
|
|
28
34
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
29
|
-
key?: string | number | symbol | undefined;
|
|
30
35
|
onSubmit?: ((...args: any[]) => any) | undefined;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
[key: string]: any;
|
|
55
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
56
|
-
[key: string]: any;
|
|
57
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
58
|
-
[key: string]: any;
|
|
59
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
60
|
-
[key: string]: any;
|
|
61
|
-
}>) => void)[] | undefined;
|
|
62
|
-
onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
63
|
-
[key: string]: any;
|
|
64
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
65
|
-
[key: string]: any;
|
|
66
|
-
}>) => void)[] | undefined;
|
|
67
|
-
onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
68
|
-
[key: string]: any;
|
|
69
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
70
|
-
[key: string]: any;
|
|
71
|
-
}>) => void)[] | undefined;
|
|
72
|
-
class?: unknown;
|
|
73
|
-
style?: unknown;
|
|
74
|
-
};
|
|
36
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
|
|
37
|
+
continuosValidation: {
|
|
38
|
+
type: BooleanConstructor;
|
|
39
|
+
default: boolean;
|
|
40
|
+
};
|
|
41
|
+
modelValue: {
|
|
42
|
+
type: ObjectConstructor;
|
|
43
|
+
default: () => {};
|
|
44
|
+
};
|
|
45
|
+
tag: {
|
|
46
|
+
type: StringConstructor;
|
|
47
|
+
default: string;
|
|
48
|
+
};
|
|
49
|
+
template: {
|
|
50
|
+
type: PropType<FormTemplate<Schema>>;
|
|
51
|
+
default: undefined;
|
|
52
|
+
};
|
|
53
|
+
}>> & {
|
|
54
|
+
onInvalid?: ((...args: any[]) => any) | undefined;
|
|
55
|
+
onValid?: ((...args: any[]) => any) | undefined;
|
|
56
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
57
|
+
onSubmit?: ((...args: any[]) => any) | undefined;
|
|
58
|
+
}, "template" | "modelValue" | "continuosValidation" | "tag">;
|
|
75
59
|
$attrs: {
|
|
76
60
|
[x: string]: unknown;
|
|
77
61
|
};
|
|
@@ -6,53 +6,14 @@ export declare const defineFormTemplate: <Schema extends FormSchema>(formProvide
|
|
|
6
6
|
new (...args: any[]): {
|
|
7
7
|
$: import("vue").ComponentInternalInstance;
|
|
8
8
|
$data: {};
|
|
9
|
-
$props: {
|
|
9
|
+
$props: Partial<{}> & Omit<{
|
|
10
10
|
readonly schema: FormTemplate<Schema>;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
18
|
-
[key: string]: any;
|
|
19
|
-
}>) => void)[] | undefined;
|
|
20
|
-
onVnodeMounted?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
21
|
-
[key: string]: any;
|
|
22
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
23
|
-
[key: string]: any;
|
|
24
|
-
}>) => void)[] | undefined;
|
|
25
|
-
onVnodeBeforeUpdate?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
26
|
-
[key: string]: any;
|
|
27
|
-
}>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
28
|
-
[key: string]: any;
|
|
29
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
-
[key: string]: any;
|
|
31
|
-
}>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
32
|
-
[key: string]: any;
|
|
33
|
-
}>) => void)[] | undefined;
|
|
34
|
-
onVnodeUpdated?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
35
|
-
[key: string]: any;
|
|
36
|
-
}>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
37
|
-
[key: string]: any;
|
|
38
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
39
|
-
[key: string]: any;
|
|
40
|
-
}>, oldVNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
-
[key: string]: any;
|
|
42
|
-
}>) => void)[] | undefined;
|
|
43
|
-
onVnodeBeforeUnmount?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
44
|
-
[key: string]: any;
|
|
45
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
46
|
-
[key: string]: any;
|
|
47
|
-
}>) => void)[] | undefined;
|
|
48
|
-
onVnodeUnmounted?: ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
49
|
-
[key: string]: any;
|
|
50
|
-
}>) => void) | ((vnode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
51
|
-
[key: string]: any;
|
|
52
|
-
}>) => void)[] | undefined;
|
|
53
|
-
class?: unknown;
|
|
54
|
-
style?: unknown;
|
|
55
|
-
};
|
|
11
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
|
|
12
|
+
schema: {
|
|
13
|
+
type: PropType<FormTemplate<Schema>>;
|
|
14
|
+
required: true;
|
|
15
|
+
};
|
|
16
|
+
}>>, never>;
|
|
56
17
|
$attrs: {
|
|
57
18
|
[x: string]: unknown;
|
|
58
19
|
};
|
|
@@ -5,56 +5,26 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
|
|
|
5
5
|
new (...args: any[]): {
|
|
6
6
|
$: import("vue").ComponentInternalInstance;
|
|
7
7
|
$data: {};
|
|
8
|
-
$props: {
|
|
9
|
-
tag
|
|
8
|
+
$props: Partial<{
|
|
9
|
+
tag: string;
|
|
10
|
+
}> & Omit<{
|
|
10
11
|
readonly name: string;
|
|
12
|
+
readonly tag?: string | undefined;
|
|
11
13
|
onInvalid?: ((...args: any[]) => any) | undefined;
|
|
12
14
|
onValid?: ((...args: any[]) => any) | undefined;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}>) => void)[] | undefined;
|
|
27
|
-
onVnodeBeforeUpdate?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
28
|
-
[key: string]: any;
|
|
29
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
-
[key: string]: any;
|
|
31
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
32
|
-
[key: string]: any;
|
|
33
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
34
|
-
[key: string]: any;
|
|
35
|
-
}>) => void)[] | undefined;
|
|
36
|
-
onVnodeUpdated?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
37
|
-
[key: string]: any;
|
|
38
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
39
|
-
[key: string]: any;
|
|
40
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
-
[key: string]: any;
|
|
42
|
-
}>, oldVNode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
43
|
-
[key: string]: any;
|
|
44
|
-
}>) => void)[] | undefined;
|
|
45
|
-
onVnodeBeforeUnmount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
46
|
-
[key: string]: any;
|
|
47
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
48
|
-
[key: string]: any;
|
|
49
|
-
}>) => void)[] | undefined;
|
|
50
|
-
onVnodeUnmounted?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
51
|
-
[key: string]: any;
|
|
52
|
-
}>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
53
|
-
[key: string]: any;
|
|
54
|
-
}>) => void)[] | undefined;
|
|
55
|
-
class?: unknown;
|
|
56
|
-
style?: unknown;
|
|
57
|
-
};
|
|
15
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
|
|
16
|
+
name: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
required: true;
|
|
19
|
+
};
|
|
20
|
+
tag: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
default: undefined;
|
|
23
|
+
};
|
|
24
|
+
}>> & {
|
|
25
|
+
onInvalid?: ((...args: any[]) => any) | undefined;
|
|
26
|
+
onValid?: ((...args: any[]) => any) | undefined;
|
|
27
|
+
}, "tag">;
|
|
58
28
|
$attrs: {
|
|
59
29
|
[x: string]: unknown;
|
|
60
30
|
};
|