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