@volverjs/form-vue 1.0.1 → 1.0.3
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/VvForm.d.ts +3 -3
- package/dist/VvFormField.d.ts +4 -4
- package/dist/index.d.ts +14 -14
- package/dist/index.es.js +678 -605
- package/dist/index.umd.js +1 -1
- package/dist/types.d.ts +2 -2
- package/package.json +20 -20
- package/src/VvFormField.ts +14 -14
- package/src/VvFormFieldsGroup.ts +5 -5
- package/src/VvFormTemplate.ts +118 -118
- package/src/types.ts +2 -2
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(I,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(I=typeof globalThis<"u"?globalThis:I||self,e(I["@volverjs/form-vue"]={},I.Vue,I.VueUseCore,I.zod))})(this,function(I,e,Z,F){"use strict";var V=(t=>(t.text="text",t.number="number",t.email="email",t.password="password",t.tel="tel",t.url="url",t.search="search",t.date="date",t.time="time",t.datetimeLocal="datetime-local",t.month="month",t.week="week",t.color="color",t.select="select",t.checkbox="checkbox",t.radio="radio",t.textarea="textarea",t.radioGroup="radioGroup",t.checkboxGroup="checkboxGroup",t.combobox="combobox",t.custom="custom",t))(V||{}),x=(t=>(t.invalid="invalid",t.valid="valid",t.submitting="submitting",t.reset="reset",t.updated="updated",t.unknown="unknown",t))(x||{});function U(t,u={}){const n=s=>{let l=s;for(;l instanceof F.ZodEffects;)l=l.innerType();return l instanceof F.ZodOptional&&(l=l._def.innerType),l},v=s=>{let l=s;for(;l instanceof F.ZodEffects;)l=l.innerType();return l instanceof F.ZodOptional},o=n(t);return{...(o instanceof F.ZodObject?o._def.unknownKeys==="passthrough":!1)?u:{},...Object.fromEntries(Object.entries(o.shape).map(([s,l])=>{const a=u[s],y=v(l);let f=n(l),m;if(f instanceof F.ZodDefault&&(m=f._def.defaultValue(),f=f._def.innerType),a===null&&f instanceof F.ZodNullable)return[s,a];if(a==null&&y)return[s,m];if(f instanceof F.ZodSchema){const p=l.safeParse(a);if(p.success)return[s,p.data??m]}if(f instanceof F.ZodArray&&Array.isArray(a)&&a.length){const p=n(f._def.type);if(p instanceof F.ZodObject)return[s,a.map(O=>U(p,O&&typeof O=="object"?O:void 0))]}if(f instanceof F.ZodRecord&&a){const p=n(f._def.valueType);if(p instanceof F.ZodObject)return[s,Object.keys(a).reduce((O,h)=>(O[h]=U(p,a[h]),O),{})]}return f instanceof F.ZodObject?[s,U(f,a&&typeof a=="object"?a:m)]:[s,m]}))}}function H(t,u,n,v,o){const i=e.ref(),s=e.ref(),l=e.computed(()=>s.value===x.invalid),a=e.ref(),y=e.ref(!1);let f;const m=D=>{const R=U(t,D);if(n?.class){const r=n.class;return new r(R)}return R},p=async(D=a.value,R)=>{if(f=R?.fields,y.value)return!0;const r=R?.superRefine?await t.superRefine(R.superRefine).safeParseAsync(D):await t.safeParseAsync(D);if(!r.success){if(s.value=x.invalid,!f?.size)return i.value=r.error.format(),!1;const j=r.error.issues.filter(A=>f?.has(A.path.join(".")));return j.length?(i.value=new F.ZodError(j).format(),!1):(i.value=void 0,!0)}return i.value=void 0,s.value=x.valid,a.value=m(r.data),!0},O=()=>{i.value=void 0,s.value=void 0,f=void 0},h=()=>{a.value=m(),O(),s.value=x.reset},c=async D=>y.value||!await p(void 0,D)?!1:(s.value=x.submitting,!0),{ignoreUpdates:b,stop:g}=Z.watchIgnorable(a,()=>{s.value=x.updated},{deep:!0,eventFilter:Z.throttleFilter(n?.updateThrottle??500)}),E=e.readonly(i),S=e.readonly(s),k=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:n?.readonly??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0},superRefine:{type:Function,default:void 0},validateFields:{type:Array,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(D,{emit:R}){return a.value=m(e.toRaw(D.modelValue)),e.watch(()=>D.modelValue,r=>{if(r){const j=e.isProxy(r)?e.toRaw(r):r;if(JSON.stringify(j)===JSON.stringify(e.toRaw(a.value)))return;a.value=typeof j?.clone=="function"?j.clone():JSON.parse(JSON.stringify(j))}},{deep:!0}),e.watch(s,async r=>{if(r===x.invalid){const j=e.toRaw(i.value);R("invalid",j),n?.onInvalid?.(j);return}if(r===x.valid){const j=e.toRaw(a.value);R("valid",j),n?.onValid?.(j),R("update:modelValue",j),n?.onUpdate?.(j);return}if(r===x.submitting){const j=e.toRaw(a.value);R("submit",j),n?.onSubmit?.(j);return}if(r===x.reset){const j=e.toRaw(a.value);R("reset",j),n?.onReset?.(j);return}if(r===x.updated){if((i.value||n?.continuousValidation||D.continuousValidation)&&await p(void 0,{superRefine:D.superRefine,fields:f??new Set(D.validateFields)}),!a.value||!D.modelValue||JSON.stringify(a.value)!==JSON.stringify(D.modelValue)){const j=e.toRaw(a.value);R("update:modelValue",j),n?.onUpdate?.(j)}s.value===x.updated&&(s.value=x.unknown)}}),e.onMounted(()=>{y.value=D.readonly}),e.watch(()=>D.readonly,r=>{y.value=r}),e.watch(y,r=>{r!==D.readonly&&R("update:readonly",y.value)}),e.provide(u,{clear:O,errors:E,formData:a,ignoreUpdates:b,invalid:l,readonly:y,reset:h,status:S,stopUpdatesWatch:g,submit:c,validate:p,wrappers:o}),{clear:O,errors:E,formData:a,ignoreUpdates:b,invalid:l,isReadonly:y,reset:h,status:S,stopUpdatesWatch:g,submit:()=>c({superRefine:D.superRefine,fields:new Set(D.validateFields)}),validate:p,wrappers:o}},render(){const D=()=>this.$slots?.default?.({errors:E.value,formData:a.value,invalid:l.value,readonly:y.value,status:S.value,wrappers:o,clear:O,ignoreUpdates:b,reset:h,stopUpdatesWatch:g,submit:c,validate:p})??this.$slots.default;return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??n?.template)&&v?[e.h(v,{schema:this.template??n?.template},{default:D})]:{default:D})}});return{clear:O,errors:i,formData:a,ignoreUpdates:b,invalid:l,readonly:y,reset:h,status:s,wrappers:o,stopUpdatesWatch:g,submit:c,validate:p,VvForm:k}}function L(t){return Array.isArray(t)}function Q(t){return!1}function _(t){return t===null}function N(t){return typeof t=="object"}function K(t){return typeof t=="string"}function G(t){return typeof t>"u"}const X=/^[0-9]+$/,Y=["__proto__","prototype","constructor"];function B(t,u,n){const v=Q()?n:void 0;if(!N(t)||!K(u))return v;const o=T(u);if(o.length!==0){for(const i of o){if(i==="*")continue;const s=function(l){return l.map(a=>G(a)||_(a)?a:L(a)?s(a):a[i])};if(L(t)&&!X.test(i)?t=s(t):t=t[i],G(t)||_(t))break}return G(t)?v:t}}function M(t,u,n){if(!N(t)||!K(u))return;const v=T(u);if(v.length===0)return;const o=v.length;for(let i=0;i<o;i++){const s=v[i];if(i===o-1){t[s]=n;return}if(s==="*"&&L(t)){const l=v.slice(i+1).join(".");for(const a of t)M(a,l,n);return}G(t[s])&&(t[s]={}),t=t[s]}}function T(t){const u=t.split(/[.]|(?:\[(\d|\*)\])/).filter(n=>!!n);return u.some(n=>Y.indexOf(n)!==-1)?[]:u}function z(t,u,n,v){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:o=>Object.values(V).includes(o),default:V.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(o,{slots:i,emit:s}){const{props:l,name:a}=e.toRefs(o),y=e.useId(),f=e.inject(u,void 0);f&&f.fields.value.set(y,o.name);const m=e.inject(t),p=e.computed({get(){if(m?.formData)return B(new Object(m.formData.value),String(o.name))},set(r){m?.formData&&(M(new Object(m.formData.value),String(o.name),r),s("update:modelValue",{newValue:p.value,formData:m?.formData}))}});e.onMounted(()=>{p.value===void 0&&o.defaultValue!==void 0&&(p.value=o.defaultValue)}),e.onBeforeUnmount(()=>{f&&f.fields.value.delete(y)});const O=e.computed(()=>{if(m?.errors.value)return B(m.errors.value,String(o.name))}),h=e.computed(()=>O.value?._errors),c=e.computed(()=>O.value!==void 0),b=e.watch(c,r=>{if(r){s("invalid",O.value),f&&f.errors.value.set(String(o.name),O.value);return}s("valid",p.value),f&&f.errors.value.delete(o.name)}),g=e.watch(()=>m?.formData,()=>{s("update:formData",m?.formData)},{deep:!0});e.onBeforeUnmount(()=>{b(),g()});const E=r=>{r instanceof InputEvent&&(r=r.target.value),p.value=r},S=e.computed(()=>{let r=l.value;return typeof r=="function"&&(r=r(m?.formData)),Object.keys(r).reduce((j,A)=>(j[A]=e.unref(r[A]),j),{})}),k=e.computed(()=>m?.readonly.value||f?.readonly.value?!0:S.value.readonly??o.readonly),D=e.computed(()=>({...S.value,name:S.value.name??o.name,invalid:c.value,valid:o.showValid?!!(!c.value&&p.value):void 0,type:(r=>{if([V.color,V.date,V.datetimeLocal,V.email,V.month,V.number,V.password,V.search,V.tel,V.text,V.time,V.url,V.week].includes(r))return r})(o.type),invalidLabel:h.value,modelValue:p.value,readonly:k.value,"onUpdate:modelValue":E}));return e.provide(n,{name:e.readonly(a),errors:e.readonly(O)}),{component:e.computed(()=>{if(o.type===V.custom)return{render(){return i.default?.({errors:O.value,formData:m?.formData.value,formErrors:m?.errors.value,invalid:c.value,invalidLabel:h.value,modelValue:p.value,readonly:k.value,onUpdate:E,submit:m?.submit,validate:m?.validate})??i.default}};if(!(v?.lazyLoad??o.lazyLoad)){let r;switch(o.type){case V.select:r=e.resolveComponent("VvSelect");break;case V.checkbox:r=e.resolveComponent("VvCheckbox");break;case V.radio:r=e.resolveComponent("VvRadio");break;case V.textarea:r=e.resolveComponent("VvTextarea");break;case V.radioGroup:r=e.resolveComponent("VvRadioGroup");break;case V.checkboxGroup:r=e.resolveComponent("VvCheckboxGroup");break;case V.combobox:r=e.resolveComponent("VvCombobox");break;default:r=e.resolveComponent("VvInputText")}if(typeof r!="string")return r;console.warn(`[@volverjs/form-vue]: ${r} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(v?.sideEffects&&await Promise.resolve(v.sideEffects(o.type)),o.type){case V.textarea:return import("@volverjs/ui-vue/vv-textarea");case V.radio:return import("@volverjs/ui-vue/vv-radio");case V.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case V.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case V.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case V.select:return import("@volverjs/ui-vue/vv-select");case V.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:D,invalid:c}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===V.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function ee(t,u,n){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array,Object],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(v,{slots:o,emit:i}){const{props:s,names:l,defaultValues:a}=e.toRefs(v),y=e.useId(),f=e.computed(()=>Array.isArray(l.value)?l.value:Object.values(l.value)),m=e.computed(()=>Array.isArray(l.value)?l.value:Object.keys(l.value)),p=e.computed(()=>Array.isArray(l.value)?l.value.reduce((d,w)=>(d[String(w)]=w,d),{}):l.value),O=e.computed(()=>Object.keys(p.value).reduce((d,w)=>(d[String(p.value[w])]=w,d),{})),h=e.inject(u,void 0);h&&f.value.forEach(d=>{h.fields.value.set(`${y}-${d}`,d)});const c=e.inject(t),b=e.computed({get(){return c?.formData?m.value.reduce((d,w)=>(d[w]=B(new Object(c.formData.value),p.value[w]),d),{}):{}},set(d){c?.formData&&(m.value.forEach(w=>{M(new Object(c.formData.value),p.value[w],d?.[w])}),i("update:modelValue",{newValue:b.value,formData:c?.formData}))}});e.onMounted(()=>{a.value&&f.value.forEach(d=>{a.value?.[d]!==void 0&&b.value[d]===void 0&&(b.value={...b.value,[d]:a.value?.[d]})})}),e.onBeforeUnmount(()=>{h&&f.value.forEach(d=>{h.fields.value.delete(`${y}-${d}`)})});const g=e.computed(()=>{if(!c?.errors.value)return;const d=f.value.reduce((w,C)=>{if(!c.errors.value)return w;const J=B(c.errors.value,String(C));return J===void 0||(w[String(C)]=J),w},{});if(Object.keys(d).length!==0)return d}),E=e.computed(()=>{if(!g.value)return;const d=Object.keys(g.value).reduce((w,C)=>(g.value?.[C]&&(w[O.value[C]]=g.value[C]._errors),w),{});if(Object.keys(d).length!==0)return d}),S=e.computed(()=>g.value!==void 0),k=e.computed(()=>m.value.reduce((d,w)=>(d[w]=!!g.value?.[O.value[w]],d),{})),D=e.watch(S,()=>{if(S.value){i("invalid",g.value),h&&f.value.forEach(d=>{if(!g.value?.[d]){h.errors.value.delete(d);return}h.errors.value.set(d,g.value?.[d])});return}i("valid",b.value),h&&f.value.forEach(d=>{h.errors.value.delete(d)})}),R=e.watch(()=>c?.formData,()=>{i("update:formData",c?.formData)},{deep:!0});e.onBeforeUnmount(()=>{D(),R()});const r=d=>{b.value=d},j=(d,w)=>{w instanceof InputEvent&&(w=w.target.value),m.value.includes(d)&&(b.value={...b.value,[d]:w})},A=e.computed(()=>{let d=s.value;return typeof d=="function"&&(d=d(c?.formData)),Object.keys(d).reduce((w,C)=>(w[C]=e.unref(d[C]),w),{})}),q=e.computed(()=>c?.readonly.value?!0:A.value.readonly??v.readonly),le=e.computed(()=>m.value.reduce((d,w)=>(d[`onUpdate:${w}`]=C=>{j(w,C)},d),{"onUpdate:modelValue":r})),ie=e.computed(()=>({...le.value,...A.value,...b.value,modelValue:b.value,names:A.value.name??f.value,invalid:S.value,invalids:k.value,valid:v.showValid?!!(!S.value&&b.value):void 0,invalidLabels:E.value,readonly:q.value}));return e.provide(n,{names:e.readonly(l),errors:e.readonly(g)}),{component:e.computed(()=>({render(){return o.default?.({errors:g.value,formData:c?.formData.value,formErrors:c?.errors.value,invalid:S.value,invalids:k.value,invalidLabels:E.value,modelValue:b.value,onUpdate:r,onUpdateField:j,readonly:q.value,submit:c?.submit,validate:c?.validate})??o.default}})),hasProps:ie,invalid:S}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function te(t,u){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0},readonly:{type:Boolean,default:!1}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","readonly","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(n,{emit:v}){const o=e.inject(t),i=e.inject(u,void 0),s=e.ref(new Map),l=e.ref(new Map),{name:a}=e.toRefs(n),y=e.computed(()=>o?.invalid.value?l.value.size>0:!1);e.watch(y,h=>{if(h){v("invalid");return}v("valid")});const f=e.computed(()=>o?.readonly.value||n.readonly),m={name:e.readonly(a),errors:l,invalid:e.readonly(y),readonly:e.readonly(f),fields:s};e.provide(u,m);const p=e.computed(()=>new Map(s.value));e.watch(p,(h,c)=>{i?.fields&&(c.forEach((b,g)=>{h.has(g)||i?.fields.value.delete(g)}),h.forEach((b,g)=>{i?.fields.value.has(g)||i?.fields.value.set(g,b)}))},{deep:!0}),e.watch(l,h=>{i?.errors&&s.value.forEach(c=>{if(h.has(c)||i.errors.value.delete(c),h.has(c)){const b=h.get(c);b&&i.errors.value.set(c,b)}})},{deep:!0}),e.onMounted(()=>{if(!o?.wrappers||!a.value){console.warn("[@volverjs/form-vue]: Invalid wrapper registration state");return}if(o.wrappers.has(a.value)){console.warn(`[@volverjs/form-vue]: wrapper name "${a.value}" is already used`);return}o.wrappers.set(a.value,m)}),e.onBeforeUnmount(()=>{o?.wrappers&&a.value&&o.wrappers.delete(a.value)});const O=()=>o?.validate(void 0,{fields:new Set(s.value.values())})??Promise.resolve(!0);return{errors:o?.errors,fields:s,fieldsErrors:l,formData:o?.formData,invalid:y,readonly:f,clear:o?.clear,reset:o?.reset,submit:o?.submit,validate:o?.validate,validateWrapper:O}},render(){const n=()=>this.$slots.default?.({errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,readonly:this.readonly,clear:this.clear,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper});return this.tag?e.h(this.tag,null,{default:n}):n()}})}function re(t,u){const n=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(v,{slots:o}){const i=e.inject(t);if(i?.formData)return()=>{const s=typeof v.schema=="function"?v.schema(i,v.scope):v.schema;let l;const a=s.reduce((y,f)=>{const m=typeof f=="function"?f(i,v.scope):f,{vvIs:p,vvName:O,vvSlots:h,vvChildren:c,vvIf:b,vvElseIf:g,vvType:E,vvDefaultValue:S,vvShowValid:k,vvContent:D,...R}=m;if(b!==void 0){if(typeof b=="string"?l=!!B(new Object(i.formData.value),b):typeof b=="function"?l=e.unref(b(i)):l=e.unref(b),!l)return y}else if(g!==void 0&&l!==void 0){if(l||(typeof g=="string"?l=!!B(new Object(i.formData.value),g):typeof g=="function"?l=e.unref(g(i)):l=e.unref(g),!l))return y}else l=void 0;let r;return c&&(typeof p=="string"?r=e.h(n,{schema:c}):r={default:j=>e.h(n,{schema:c,scope:j})}),O?(y.push(e.h(u,{name:O,is:p,type:E,defaultValue:S,showValid:k,props:R},h??r??D)),y):p?(y.push(e.h(p,R,h??r??D)),y):(r&&("default"in r?y.push(r.default(v.scope)):y.push(r)),y)},[]);return a.push(o?.default?.({errors:i?.errors.value,formData:i?.formData.value,invalid:i?.invalid.value,status:i?.status.value,submit:i?.submit,validate:i?.validate,clear:i?.clear,reset:i?.reset})),a}}});return n}function W(t,u={}){const n=Symbol("formInjectionKey"),v=Symbol("formWrapperInjectionKey"),o=Symbol("formFieldInjectionKey"),i=Symbol("formFieldsGroupInjectionKey"),s=te(n,v),l=z(n,v,o,u),a=ee(n,v,i),y=re(n,l),f=new Map,{clear:m,errors:p,formData:O,ignoreUpdates:h,invalid:c,readonly:b,reset:g,status:E,stopUpdatesWatch:S,submit:k,validate:D,VvForm:R}=H(t,n,u,y,f);return{clear:m,errors:p,formData:O,formFieldInjectionKey:o,formInjectionKey:n,formWrapperInjectionKey:v,ignoreUpdates:h,invalid:c,readonly:b,reset:g,status:E,stopUpdatesWatch:S,submit:k,validate:D,wrappers:f,VvForm:R,VvFormField:l,VvFormFieldsGroup:a,VvFormTemplate:y,VvFormWrapper:s}}const P=Symbol("pluginInjectionKey");function ae(t){let u={};return t.schema&&(u=W(t.schema,t)),{...u,install(n,{global:v=!1}={}){n.provide(P,t),v&&(n.config.globalProperties.$vvForm=t,u?.VvForm&&n.component("VvForm",u.VvForm),u?.VvFormWrapper&&n.component("VvFormWrapper",u.VvFormWrapper),u?.VvFormField&&n.component("VvFormField",u.VvFormField),u?.VvFormFieldsGroup&&n.component("VvFormFieldsGroup",u.VvFormFieldsGroup),u?.VvFormTemplate&&n.component("VvFormTemplate",u.VvFormTemplate))}}}const $=new Map;function ne(t,u={}){if(u.scope&&$.has(u.scope))return $.get(u.scope);if(!e.getCurrentInstance()){const v=W(t,u);return u.scope&&$.set(u.scope,v),v}const n=W(t,{...e.inject(P,{}),...u});return u.scope&&$.set(u.scope,n),n}function oe(t,u={}){return W(t,u)}I.FormFieldType=V,I.createForm=ae,I.defaultObjectBySchema=U,I.formType=oe,I.pluginInjectionKey=P,I.useForm=ne,Object.defineProperty(I,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(S,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(S=typeof globalThis<"u"?globalThis:S||self,e(S["@volverjs/form-vue"]={},S.Vue,S.VueUseCore,S.zod))})(this,function(S,e,$,R){"use strict";var g=(t=>(t.text="text",t.number="number",t.email="email",t.password="password",t.tel="tel",t.url="url",t.search="search",t.date="date",t.time="time",t.datetimeLocal="datetime-local",t.month="month",t.week="week",t.color="color",t.select="select",t.checkbox="checkbox",t.radio="radio",t.textarea="textarea",t.radioGroup="radioGroup",t.checkboxGroup="checkboxGroup",t.combobox="combobox",t.custom="custom",t))(g||{}),E=(t=>(t.invalid="invalid",t.valid="valid",t.submitting="submitting",t.reset="reset",t.updated="updated",t.unknown="unknown",t))(E||{});function G(t,n={}){const r=f=>{let s=f;for(;s instanceof R.ZodEffects;)s=s.innerType();return s instanceof R.ZodOptional&&(s=s._def.innerType),s},l=f=>{let s=f;for(;s instanceof R.ZodEffects;)s=s.innerType();return s instanceof R.ZodOptional},a=r(t);return{...(a instanceof R.ZodObject?a._def.unknownKeys==="passthrough":!1)?n:{},...Object.fromEntries(Object.entries(a.shape).map(([f,s])=>{const u=n[f],m=l(s);let c=r(s),p;if(c instanceof R.ZodDefault&&(p=c._def.defaultValue(),c=c._def.innerType),u===null&&c instanceof R.ZodNullable)return[f,u];if(u==null&&m)return[f,p];if(c instanceof R.ZodSchema){const h=s.safeParse(u);if(h.success)return[f,h.data??p]}if(c instanceof R.ZodArray&&Array.isArray(u)&&u.length){const h=r(c._def.type);if(h instanceof R.ZodObject)return[f,u.map(D=>G(h,D&&typeof D=="object"?D:void 0))]}if(c instanceof R.ZodRecord&&u){const h=r(c._def.valueType);if(h instanceof R.ZodObject)return[f,Object.keys(u).reduce((D,y)=>(D[y]=G(h,u[y]),D),{})]}return c instanceof R.ZodObject?[f,G(c,u&&typeof u=="object"?u:p)]:[f,p]}))}}function z(t,n,r,l,a){const i=e.ref(),f=e.ref(),s=e.computed(()=>f.value===E.invalid),u=e.ref(),m=e.ref(!1);let c;const p=x=>{const I=G(t,x);if(r?.class){const o=r.class;return new o(I)}return I},h=async(x=u.value,I)=>{if(c=I?.fields,m.value)return!0;const o=I?.superRefine?await t.superRefine(I.superRefine).safeParseAsync(x):await t.safeParseAsync(x);if(!o.success){if(f.value=E.invalid,!c?.size)return i.value=o.error.format(),!1;const j=o.error.issues.filter(C=>c?.has(C.path.join(".")));return j.length?(i.value=new R.ZodError(j).format(),!1):(i.value=void 0,!0)}return i.value=void 0,f.value=E.valid,u.value=p(o.data),!0},D=()=>{i.value=void 0,f.value=void 0,c=void 0},y=()=>{u.value=p(),D(),f.value=E.reset},v=async x=>m.value||!await h(void 0,x)?!1:(f.value=E.submitting,!0),{ignoreUpdates:b,stop:V}=$.watchIgnorable(u,()=>{f.value=E.updated},{deep:!0,eventFilter:$.throttleFilter(r?.updateThrottle??500)}),F=e.readonly(i),O=e.readonly(f),k=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:r?.readonly??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0},superRefine:{type:Function,default:void 0},validateFields:{type:Array,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(x,{emit:I}){return u.value=p(e.toRaw(x.modelValue)),e.watch(()=>x.modelValue,o=>{if(o){const j=e.isProxy(o)?e.toRaw(o):o;if(JSON.stringify(j)===JSON.stringify(e.toRaw(u.value)))return;u.value=typeof j?.clone=="function"?j.clone():JSON.parse(JSON.stringify(j))}},{deep:!0}),e.watch(f,async o=>{if(o===E.invalid){const j=e.toRaw(i.value);I("invalid",j),r?.onInvalid?.(j);return}if(o===E.valid){const j=e.toRaw(u.value);I("valid",j),r?.onValid?.(j),I("update:modelValue",j),r?.onUpdate?.(j);return}if(o===E.submitting){const j=e.toRaw(u.value);I("submit",j),r?.onSubmit?.(j);return}if(o===E.reset){const j=e.toRaw(u.value);I("reset",j),r?.onReset?.(j);return}if(o===E.updated){if((i.value||r?.continuousValidation||x.continuousValidation)&&await h(void 0,{superRefine:x.superRefine,fields:c??new Set(x.validateFields)}),!u.value||!x.modelValue||JSON.stringify(u.value)!==JSON.stringify(x.modelValue)){const j=e.toRaw(u.value);I("update:modelValue",j),r?.onUpdate?.(j)}f.value===E.updated&&(f.value=E.unknown)}}),e.onMounted(()=>{m.value=x.readonly}),e.watch(()=>x.readonly,o=>{m.value=o}),e.watch(m,o=>{o!==x.readonly&&I("update:readonly",m.value)}),e.provide(n,{clear:D,errors:F,formData:u,ignoreUpdates:b,invalid:s,readonly:m,reset:y,status:O,stopUpdatesWatch:V,submit:v,validate:h,wrappers:a}),{clear:D,errors:F,formData:u,ignoreUpdates:b,invalid:s,isReadonly:m,reset:y,status:O,stopUpdatesWatch:V,submit:()=>v({superRefine:x.superRefine,fields:new Set(x.validateFields)}),validate:h,wrappers:a}},render(){const x=()=>this.$slots?.default?.({errors:F.value,formData:u.value,invalid:s.value,readonly:m.value,status:O.value,wrappers:a,clear:D,ignoreUpdates:b,reset:y,stopUpdatesWatch:V,submit:v,validate:h})??this.$slots.default;return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??r?.template)&&l?[e.h(l,{schema:this.template??r?.template},{default:x})]:{default:x})}});return{clear:D,errors:i,formData:u,ignoreUpdates:b,invalid:s,readonly:m,reset:y,status:f,wrappers:a,stopUpdatesWatch:V,submit:v,validate:h,VvForm:k}}const W=t=>{const n=typeof t;return t!==null&&(n==="object"||n==="function")},K=new Set(["__proto__","prototype","constructor"]),H=new Set("0123456789");function L(t){return typeof t=="string"&&/^\d+$/.test(t)&&Number.parseInt(t,10)>=0&&(t==="0"||!t.startsWith("0"))}function M(t,n,r){return r>0&&typeof t=="string"&&Array.isArray(n)&&L(t)?Number.parseInt(t,10):t}function Z(t){const n=[];let r="",l="start",a=!1;for(const i of t)switch(i){case"\\":{if(l==="index")throw new Error("Invalid character in an index");if(l==="indexEnd")throw new Error("Invalid character after an index");a&&(r+=i),l="property",a=!a;break}case".":{if(l==="index")throw new Error("Invalid character in an index");if(l==="indexEnd"){l="property";break}if(a){a=!1,r+=i;break}if(K.has(r))return[];n.push(r),r="",l="property";break}case"[":{if(l==="index")throw new Error("Invalid character in an index");if(l==="indexEnd"){l="index";break}if(a){a=!1,r+=i;break}if(l==="property"){if(K.has(r))return[];n.push(r),r=""}l="index";break}case"]":{if(l==="index"){n.push(Number.parseInt(r,10)),r="",l="indexEnd";break}if(l==="indexEnd")throw new Error("Invalid character after an index")}default:{if(l==="index"&&!H.has(i))throw new Error("Invalid character in an index");if(l==="indexEnd")throw new Error("Invalid character after an index");l==="start"&&(l="property"),a&&(a=!1,r+="\\"),r+=i}}switch(a&&(r+="\\"),l){case"property":{if(K.has(r))return[];n.push(r);break}case"index":throw new Error("Index was not closed");case"start":{n.push("");break}}return n}function _(t,n){if(!Array.isArray(t)||typeof n=="number")return!1;const r=Number.parseInt(n,10);return Number.isInteger(r)&&String(r)===n}function Q(t,n){if(_(t,n))throw new Error("Cannot use string index")}function B(t,n,r){if(!W(t)||typeof n!="string")return r===void 0?t:r;const l=Z(n);if(l.length===0)return r;for(let a=0;a<l.length;a++){const i=l[a],f=M(i,t,a);if(f===i&&_(t,i)?t=a===l.length-1?void 0:null:t=t[f],t==null){if(a!==l.length-1)return r;break}}return t===void 0?r:t}function T(t,n,r){if(!W(t)||typeof n!="string")return t;const l=t,a=Z(n);for(let i=0;i<a.length;i++){const f=a[i],s=M(f,t,i);if(s===f&&Q(t,f),i===a.length-1)t[s]=r;else if(!W(t[s])){const u=a[i+1],m=typeof u=="number"||typeof u=="string"&&L(u);t[s]=m?[]:{}}t=t[s]}return l}function X(t,n,r,l){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:a=>Object.values(g).includes(a),default:g.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(a,{slots:i,emit:f}){const{props:s,name:u}=e.toRefs(a),m=e.useId(),c=e.inject(n,void 0);c&&c.fields.value.set(m,a.name);const p=e.inject(t),h=e.computed({get(){if(p?.formData)return B(new Object(p.formData.value),String(a.name))},set(o){p?.formData&&(T(new Object(p.formData.value),String(a.name),o),f("update:modelValue",{newValue:h.value,formData:p?.formData}))}});e.onMounted(()=>{h.value===void 0&&a.defaultValue!==void 0&&(h.value=a.defaultValue)}),e.onBeforeUnmount(()=>{c&&c.fields.value.delete(m)});const D=e.computed(()=>{if(p?.errors.value)return B(p.errors.value,String(a.name))}),y=e.computed(()=>D.value?._errors),v=e.computed(()=>D.value!==void 0),b=e.watch(v,o=>{if(o){f("invalid",D.value),c&&c.errors.value.set(String(a.name),D.value);return}f("valid",h.value),c&&c.errors.value.delete(a.name)}),V=e.watch(()=>p?.formData,()=>{f("update:formData",p?.formData)},{deep:!0});e.onBeforeUnmount(()=>{b(),V()});const F=o=>{o instanceof InputEvent&&(o=o.target.value),h.value=o},O=e.computed(()=>{let o=s.value;return typeof o=="function"&&(o=o(p?.formData)),Object.keys(o).reduce((j,C)=>(j[C]=e.unref(o[C]),j),{})}),k=e.computed(()=>p?.readonly.value||c?.readonly.value?!0:O.value.readonly??a.readonly),x=e.computed(()=>({...O.value,name:O.value.name??a.name,invalid:v.value,valid:a.showValid?!!(!v.value&&h.value):void 0,type:(o=>{if([g.color,g.date,g.datetimeLocal,g.email,g.month,g.number,g.password,g.search,g.tel,g.text,g.time,g.url,g.week].includes(o))return o})(a.type),invalidLabel:y.value,modelValue:h.value,readonly:k.value,"onUpdate:modelValue":F}));return e.provide(r,{name:e.readonly(u),errors:e.readonly(D)}),{component:e.computed(()=>{if(a.type===g.custom)return{render(){return i.default?.({errors:e.readonly(D).value,formData:p?.formData.value,formErrors:p?.errors.value,invalid:v.value,invalidLabel:y.value,modelValue:h.value,readonly:k.value,onUpdate:F,submit:p?.submit,validate:p?.validate})??i.default}};if(!(l?.lazyLoad??a.lazyLoad)){let o;switch(a.type){case g.select:o=e.resolveComponent("VvSelect");break;case g.checkbox:o=e.resolveComponent("VvCheckbox");break;case g.radio:o=e.resolveComponent("VvRadio");break;case g.textarea:o=e.resolveComponent("VvTextarea");break;case g.radioGroup:o=e.resolveComponent("VvRadioGroup");break;case g.checkboxGroup:o=e.resolveComponent("VvCheckboxGroup");break;case g.combobox:o=e.resolveComponent("VvCombobox");break;default:o=e.resolveComponent("VvInputText")}if(typeof o!="string")return o;console.warn(`[@volverjs/form-vue]: ${o} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(l?.sideEffects&&await Promise.resolve(l.sideEffects(a.type)),a.type){case g.textarea:return import("@volverjs/ui-vue/vv-textarea");case g.radio:return import("@volverjs/ui-vue/vv-radio");case g.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case g.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case g.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case g.select:return import("@volverjs/ui-vue/vv-select");case g.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:x,invalid:v}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===g.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function Y(t,n,r){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array,Object],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(l,{slots:a,emit:i}){const{props:f,names:s,defaultValues:u}=e.toRefs(l),m=e.useId(),c=e.computed(()=>Array.isArray(s.value)?s.value:Object.values(s.value)),p=e.computed(()=>Array.isArray(s.value)?s.value:Object.keys(s.value)),h=e.computed(()=>Array.isArray(s.value)?s.value.reduce((d,w)=>(d[String(w)]=w,d),{}):s.value),D=e.computed(()=>Object.keys(h.value).reduce((d,w)=>(d[String(h.value[w])]=w,d),{})),y=e.inject(n,void 0);y&&c.value.forEach(d=>{y.fields.value.set(`${m}-${d}`,d)});const v=e.inject(t),b=e.computed({get(){return v?.formData?p.value.reduce((d,w)=>(d[w]=B(new Object(v.formData.value),h.value[w]),d),{}):{}},set(d){v?.formData&&(p.value.forEach(w=>{T(new Object(v.formData.value),h.value[w],d?.[w])}),i("update:modelValue",{newValue:b.value,formData:v?.formData}))}});e.onMounted(()=>{u.value&&c.value.forEach(d=>{u.value?.[d]!==void 0&&b.value[d]===void 0&&(b.value={...b.value,[d]:u.value?.[d]})})}),e.onBeforeUnmount(()=>{y&&c.value.forEach(d=>{y.fields.value.delete(`${m}-${d}`)})});const V=e.computed(()=>{if(!v?.errors.value)return;const d=c.value.reduce((w,A)=>{if(!v.errors.value)return w;const J=B(v.errors.value,String(A));return J===void 0||(w[String(A)]=J),w},{});if(Object.keys(d).length!==0)return d}),F=e.computed(()=>{if(!V.value)return;const d=Object.keys(V.value).reduce((w,A)=>(V.value?.[A]&&(w[D.value[A]]=V.value[A]._errors),w),{});if(Object.keys(d).length!==0)return d}),O=e.computed(()=>V.value!==void 0),k=e.computed(()=>p.value.reduce((d,w)=>(d[w]=!!V.value?.[D.value[w]],d),{})),x=e.watch(O,()=>{if(O.value){i("invalid",V.value),y&&c.value.forEach(d=>{if(!V.value?.[d]){y.errors.value.delete(d);return}y.errors.value.set(d,V.value?.[d])});return}i("valid",b.value),y&&c.value.forEach(d=>{y.errors.value.delete(d)})}),I=e.watch(()=>v?.formData,()=>{i("update:formData",v?.formData)},{deep:!0});e.onBeforeUnmount(()=>{x(),I()});const o=d=>{b.value=d},j=(d,w)=>{w instanceof InputEvent&&(w=w.target.value),p.value.includes(d)&&(b.value={...b.value,[d]:w})},C=e.computed(()=>{let d=f.value;return typeof d=="function"&&(d=d(v?.formData)),Object.keys(d).reduce((w,A)=>(w[A]=e.unref(d[A]),w),{})}),q=e.computed(()=>v?.readonly.value?!0:C.value.readonly??l.readonly),oe=e.computed(()=>p.value.reduce((d,w)=>(d[`onUpdate:${w}`]=A=>{j(w,A)},d),{"onUpdate:modelValue":o})),ie=e.computed(()=>({...oe.value,...C.value,...b.value,modelValue:b.value,names:C.value.name??c.value,invalid:O.value,invalids:k.value,valid:l.showValid?!!(!O.value&&b.value):void 0,invalidLabels:F.value,readonly:q.value}));return e.provide(r,{names:e.readonly(s),errors:e.readonly(V)}),{component:e.computed(()=>({render(){return a.default?.({errors:V.value,formData:v?.formData.value,formErrors:v?.errors.value,invalid:O.value,invalids:k.value,invalidLabels:F.value,modelValue:b.value,onUpdate:o,onUpdateField:j,readonly:q.value,submit:v?.submit,validate:v?.validate})??a.default}})),hasProps:ie,invalid:O}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function ee(t,n){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0},readonly:{type:Boolean,default:!1}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","readonly","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(r,{emit:l}){const a=e.inject(t),i=e.inject(n,void 0),f=e.ref(new Map),s=e.ref(new Map),{name:u}=e.toRefs(r),m=e.computed(()=>a?.invalid.value?s.value.size>0:!1);e.watch(m,y=>{if(y){l("invalid");return}l("valid")});const c=e.computed(()=>a?.readonly.value||r.readonly),p={name:e.readonly(u),errors:s,invalid:e.readonly(m),readonly:e.readonly(c),fields:f};e.provide(n,p);const h=e.computed(()=>new Map(f.value));e.watch(h,(y,v)=>{i?.fields&&(v.forEach((b,V)=>{y.has(V)||i?.fields.value.delete(V)}),y.forEach((b,V)=>{i?.fields.value.has(V)||i?.fields.value.set(V,b)}))},{deep:!0}),e.watch(s,y=>{i?.errors&&f.value.forEach(v=>{if(y.has(v)||i.errors.value.delete(v),y.has(v)){const b=y.get(v);b&&i.errors.value.set(v,b)}})},{deep:!0}),e.onMounted(()=>{if(!a?.wrappers||!u.value){console.warn("[@volverjs/form-vue]: Invalid wrapper registration state");return}if(a.wrappers.has(u.value)){console.warn(`[@volverjs/form-vue]: wrapper name "${u.value}" is already used`);return}a.wrappers.set(u.value,p)}),e.onBeforeUnmount(()=>{a?.wrappers&&u.value&&a.wrappers.delete(u.value)});const D=()=>a?.validate(void 0,{fields:new Set(f.value.values())})??Promise.resolve(!0);return{errors:a?.errors,fields:f,fieldsErrors:s,formData:a?.formData,invalid:m,readonly:c,clear:a?.clear,reset:a?.reset,submit:a?.submit,validate:a?.validate,validateWrapper:D}},render(){const r=()=>this.$slots.default?.({errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,readonly:this.readonly,clear:this.clear,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper});return this.tag?e.h(this.tag,null,{default:r}):r()}})}function te(t,n){const r=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(l,{slots:a}){const i=e.inject(t);if(i?.formData)return()=>{const f=typeof l.schema=="function"?l.schema(i,l.scope):l.schema;let s;const u=f.reduce((m,c)=>{const p=typeof c=="function"?c(i,l.scope):c,{vvIs:h,vvName:D,vvSlots:y,vvChildren:v,vvIf:b,vvElseIf:V,vvType:F,vvDefaultValue:O,vvShowValid:k,vvContent:x,...I}=p;if(b!==void 0){if(typeof b=="string"?s=!!B(new Object(i.formData.value),b):typeof b=="function"?s=e.unref(b(i)):s=e.unref(b),!s)return m}else if(V!==void 0&&s!==void 0){if(s||(typeof V=="string"?s=!!B(new Object(i.formData.value),V):typeof V=="function"?s=e.unref(V(i)):s=e.unref(V),!s))return m}else s=void 0;let o;return v&&(typeof h=="string"?o=e.h(r,{schema:v}):o={default:j=>e.h(r,{schema:v,scope:j})}),D?(m.push(e.h(n,{name:D,is:h,type:F,defaultValue:O,showValid:k,props:I},y??o??x)),m):h?(m.push(e.h(h,I,y??o??x)),m):(o&&("default"in o?m.push(o.default(l.scope)):m.push(o)),m)},[]);return u.push(a?.default?.({errors:i?.errors.value,formData:i?.formData.value,invalid:i?.invalid.value,status:i?.status.value,submit:i?.submit,validate:i?.validate,clear:i?.clear,reset:i?.reset})),u}}});return r}function U(t,n={}){const r=Symbol("formInjectionKey"),l=Symbol("formWrapperInjectionKey"),a=Symbol("formFieldInjectionKey"),i=Symbol("formFieldsGroupInjectionKey"),f=ee(r,l),s=X(r,l,a,n),u=Y(r,l,i),m=te(r,s),c=new Map,{clear:p,errors:h,formData:D,ignoreUpdates:y,invalid:v,readonly:b,reset:V,status:F,stopUpdatesWatch:O,submit:k,validate:x,VvForm:I}=z(t,r,n,m,c);return{clear:p,errors:h,formData:D,formFieldInjectionKey:a,formInjectionKey:r,formWrapperInjectionKey:l,ignoreUpdates:y,invalid:v,readonly:b,reset:V,status:F,stopUpdatesWatch:O,submit:k,validate:x,wrappers:c,VvForm:I,VvFormField:s,VvFormFieldsGroup:u,VvFormTemplate:m,VvFormWrapper:f}}const P=Symbol("pluginInjectionKey");function re(t){let n={};return t.schema&&(n=U(t.schema,t)),{...n,install(r,{global:l=!1}={}){r.provide(P,t),l&&(r.config.globalProperties.$vvForm=t,n?.VvForm&&r.component("VvForm",n.VvForm),n?.VvFormWrapper&&r.component("VvFormWrapper",n.VvFormWrapper),n?.VvFormField&&r.component("VvFormField",n.VvFormField),n?.VvFormFieldsGroup&&r.component("VvFormFieldsGroup",n.VvFormFieldsGroup),n?.VvFormTemplate&&r.component("VvFormTemplate",n.VvFormTemplate))}}}const N=new Map;function ae(t,n={}){if(n.scope&&N.has(n.scope))return N.get(n.scope);if(!e.getCurrentInstance()){const l=U(t,n);return n.scope&&N.set(n.scope,l),l}const r=U(t,{...e.inject(P,{}),...n});return n.scope&&N.set(n.scope,r),r}function ne(t,n={}){return U(t,n)}S.FormFieldType=g,S.createForm=re,S.defaultObjectBySchema=G,S.formType=ne,S.pluginInjectionKey=P,S.useForm=ae,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types.d.ts
CHANGED
|
@@ -49,14 +49,14 @@ export type InjectedFormData<Schema extends FormSchema, Type> = {
|
|
|
49
49
|
};
|
|
50
50
|
export type InjectedFormWrapperData<Schema extends FormSchema> = {
|
|
51
51
|
name: Readonly<Ref<string>>;
|
|
52
|
-
errors: Ref<Map<string, z.inferFormattedError<Schema
|
|
52
|
+
errors: Ref<Map<string, z.inferFormattedError<Schema> | undefined>>;
|
|
53
53
|
invalid: Readonly<Ref<boolean>>;
|
|
54
54
|
readonly: Readonly<Ref<boolean>>;
|
|
55
55
|
fields: Ref<Map<string, string>>;
|
|
56
56
|
};
|
|
57
57
|
export type InjectedFormFieldData<Schema extends FormSchema> = {
|
|
58
58
|
name: Readonly<Ref<Path<z.infer<Schema>>>>;
|
|
59
|
-
errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema
|
|
59
|
+
errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema> | undefined>>>;
|
|
60
60
|
};
|
|
61
61
|
export type InjectedFormFieldsGroupData<Schema extends FormSchema> = {
|
|
62
62
|
names: DeepReadonly<Ref<Path<z.infer<Schema>>[]>>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volverjs/form-vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"description": "Vue 3 Forms with @volverjs/ui-vue",
|
|
6
6
|
"author": "8 Wave S.r.l.",
|
|
7
7
|
"license": "MIT",
|
|
@@ -50,34 +50,34 @@
|
|
|
50
50
|
"node": ">= 16.x"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@volverjs/ui-vue": "^0.0.
|
|
54
|
-
"@vueuse/core": "^13.
|
|
55
|
-
"
|
|
56
|
-
"vue": "^3.5.
|
|
57
|
-
"zod": "^3.24.
|
|
53
|
+
"@volverjs/ui-vue": "^0.0.10",
|
|
54
|
+
"@vueuse/core": "^13.9.0",
|
|
55
|
+
"dot-prop": "^10.0.0",
|
|
56
|
+
"vue": "^3.5.21",
|
|
57
|
+
"zod": "^3.24.4"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@antfu/eslint-config": "^5.
|
|
61
|
-
"@nabla/vite-plugin-eslint": "^2.0.
|
|
62
|
-
"@playwright/experimental-ct-vue": "^1.
|
|
60
|
+
"@antfu/eslint-config": "^5.4.1",
|
|
61
|
+
"@nabla/vite-plugin-eslint": "^2.0.6",
|
|
62
|
+
"@playwright/experimental-ct-vue": "^1.55.1",
|
|
63
63
|
"@testing-library/vue": "^8.1.0",
|
|
64
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
65
|
-
"@volverjs/style": "^0.1.
|
|
66
|
-
"@volverjs/ui-vue": "^0.0.
|
|
67
|
-
"@vue/compiler-sfc": "^3.5.
|
|
68
|
-
"@vue/runtime-core": "^3.5.
|
|
64
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
65
|
+
"@volverjs/style": "^0.1.22",
|
|
66
|
+
"@volverjs/ui-vue": "^0.0.10",
|
|
67
|
+
"@vue/compiler-sfc": "^3.5.21",
|
|
68
|
+
"@vue/runtime-core": "^3.5.21",
|
|
69
69
|
"@vue/test-utils": "^2.4.6",
|
|
70
|
-
"@vueuse/core": "^13.
|
|
70
|
+
"@vueuse/core": "^13.9.0",
|
|
71
71
|
"copy": "^0.3.2",
|
|
72
|
-
"
|
|
72
|
+
"dot-prop": "^10.0.0",
|
|
73
|
+
"eslint": "^9.36.0",
|
|
73
74
|
"happy-dom": "^18.0.1",
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"vite": "^7.0.6",
|
|
75
|
+
"typescript": "^5.9.2",
|
|
76
|
+
"vite": "^7.1.7",
|
|
77
77
|
"vite-plugin-dts": "^4.5.4",
|
|
78
78
|
"vite-plugin-externalize-deps": "^0.9.0",
|
|
79
79
|
"vitest": "^3.2.4",
|
|
80
|
-
"vue": "^3.5.
|
|
80
|
+
"vue": "^3.5.21",
|
|
81
81
|
"zod": "^3.24.4"
|
|
82
82
|
},
|
|
83
83
|
"scripts": {
|
package/src/VvFormField.ts
CHANGED
|
@@ -8,7 +8,7 @@ import type {
|
|
|
8
8
|
InjectedFormWrapperData,
|
|
9
9
|
Path,
|
|
10
10
|
} from './types'
|
|
11
|
-
import {
|
|
11
|
+
import { getProperty, setProperty } from 'dot-prop'
|
|
12
12
|
import {
|
|
13
13
|
computed,
|
|
14
14
|
defineAsyncComponent,
|
|
@@ -95,9 +95,9 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
95
95
|
slots: Object as SlotsType<{
|
|
96
96
|
[key: string]: any
|
|
97
97
|
default: {
|
|
98
|
-
errors: DeepReadonly<z.inferFormattedError<Schema
|
|
98
|
+
errors: DeepReadonly<z.inferFormattedError<Schema> | undefined>
|
|
99
99
|
formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type
|
|
100
|
-
formErrors?: DeepReadonly<z.inferFormattedError<Schema, string
|
|
100
|
+
formErrors?: DeepReadonly<z.inferFormattedError<Schema, string> | undefined>
|
|
101
101
|
invalid: boolean
|
|
102
102
|
invalidLabel?: string[]
|
|
103
103
|
modelValue: any
|
|
@@ -126,7 +126,7 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
126
126
|
if (!injectedFormData?.formData) {
|
|
127
127
|
return
|
|
128
128
|
}
|
|
129
|
-
return
|
|
129
|
+
return getProperty(
|
|
130
130
|
new Object(injectedFormData.formData.value),
|
|
131
131
|
String(props.name),
|
|
132
132
|
)
|
|
@@ -135,7 +135,7 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
135
135
|
if (!injectedFormData?.formData) {
|
|
136
136
|
return
|
|
137
137
|
}
|
|
138
|
-
|
|
138
|
+
setProperty(
|
|
139
139
|
new Object(injectedFormData.formData.value),
|
|
140
140
|
String(props.name),
|
|
141
141
|
value,
|
|
@@ -164,7 +164,7 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
164
164
|
if (!injectedFormData?.errors.value) {
|
|
165
165
|
return undefined
|
|
166
166
|
}
|
|
167
|
-
return
|
|
167
|
+
return getProperty(injectedFormData.errors.value, String(props.name)) as z.inferFormattedError<Schema> | undefined
|
|
168
168
|
})
|
|
169
169
|
const invalidLabel = computed(() => {
|
|
170
170
|
return errors.value?._errors
|
|
@@ -277,7 +277,7 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
277
277
|
render() {
|
|
278
278
|
return (
|
|
279
279
|
slots.default?.({
|
|
280
|
-
errors: errors.value,
|
|
280
|
+
errors: readonly(errors).value,
|
|
281
281
|
formData: injectedFormData?.formData.value,
|
|
282
282
|
formErrors: injectedFormData?.errors.value,
|
|
283
283
|
invalid: isInvalid.value,
|
|
@@ -333,31 +333,31 @@ export function defineFormField<Schema extends FormSchema, Type = undefined>(for
|
|
|
333
333
|
switch (props.type) {
|
|
334
334
|
case FormFieldType.textarea:
|
|
335
335
|
return import(
|
|
336
|
-
'@volverjs/ui-vue/vv-textarea'
|
|
336
|
+
'@volverjs/ui-vue/vv-textarea',
|
|
337
337
|
) as Component
|
|
338
338
|
case FormFieldType.radio:
|
|
339
339
|
return import(
|
|
340
|
-
'@volverjs/ui-vue/vv-radio'
|
|
340
|
+
'@volverjs/ui-vue/vv-radio',
|
|
341
341
|
) as Component
|
|
342
342
|
case FormFieldType.radioGroup:
|
|
343
343
|
return import(
|
|
344
|
-
'@volverjs/ui-vue/vv-radio-group'
|
|
344
|
+
'@volverjs/ui-vue/vv-radio-group',
|
|
345
345
|
) as Component
|
|
346
346
|
case FormFieldType.checkbox:
|
|
347
347
|
return import(
|
|
348
|
-
'@volverjs/ui-vue/vv-checkbox'
|
|
348
|
+
'@volverjs/ui-vue/vv-checkbox',
|
|
349
349
|
) as Component
|
|
350
350
|
case FormFieldType.checkboxGroup:
|
|
351
351
|
return import(
|
|
352
|
-
'@volverjs/ui-vue/vv-checkbox-group'
|
|
352
|
+
'@volverjs/ui-vue/vv-checkbox-group',
|
|
353
353
|
) as Component
|
|
354
354
|
case FormFieldType.select:
|
|
355
355
|
return import(
|
|
356
|
-
'@volverjs/ui-vue/vv-select'
|
|
356
|
+
'@volverjs/ui-vue/vv-select',
|
|
357
357
|
) as Component
|
|
358
358
|
case FormFieldType.combobox:
|
|
359
359
|
return import(
|
|
360
|
-
'@volverjs/ui-vue/vv-combobox'
|
|
360
|
+
'@volverjs/ui-vue/vv-combobox',
|
|
361
361
|
) as Component
|
|
362
362
|
}
|
|
363
363
|
return import('@volverjs/ui-vue/vv-input-text') as Component
|
package/src/VvFormFieldsGroup.ts
CHANGED
|
@@ -7,7 +7,7 @@ import type {
|
|
|
7
7
|
InjectedFormWrapperData,
|
|
8
8
|
Path,
|
|
9
9
|
} from './types'
|
|
10
|
-
import {
|
|
10
|
+
import { getProperty, setProperty } from 'dot-prop'
|
|
11
11
|
import {
|
|
12
12
|
computed,
|
|
13
13
|
defineComponent,
|
|
@@ -147,7 +147,7 @@ export function defineFormFieldsGroup<Schema extends FormSchema, Type = undefine
|
|
|
147
147
|
return {}
|
|
148
148
|
}
|
|
149
149
|
return namesKeys.value.reduce<Record<string, any>>((acc, nameKey) => {
|
|
150
|
-
acc[nameKey] =
|
|
150
|
+
acc[nameKey] = getProperty(
|
|
151
151
|
new Object(injectedFormData.formData.value),
|
|
152
152
|
namesMap.value[nameKey],
|
|
153
153
|
)
|
|
@@ -159,7 +159,7 @@ export function defineFormFieldsGroup<Schema extends FormSchema, Type = undefine
|
|
|
159
159
|
return
|
|
160
160
|
}
|
|
161
161
|
namesKeys.value.forEach((nameKey) => {
|
|
162
|
-
|
|
162
|
+
setProperty(
|
|
163
163
|
new Object(injectedFormData.formData.value),
|
|
164
164
|
namesMap.value[nameKey],
|
|
165
165
|
value?.[nameKey],
|
|
@@ -207,11 +207,11 @@ export function defineFormFieldsGroup<Schema extends FormSchema, Type = undefine
|
|
|
207
207
|
if (!injectedFormData.errors.value) {
|
|
208
208
|
return acc
|
|
209
209
|
}
|
|
210
|
-
const error =
|
|
210
|
+
const error = getProperty(injectedFormData.errors.value, String(name))
|
|
211
211
|
if (error === undefined) {
|
|
212
212
|
return acc
|
|
213
213
|
}
|
|
214
|
-
acc[String(name)] = error
|
|
214
|
+
acc[String(name)] = error as z.inferFormattedError<Schema>
|
|
215
215
|
return acc
|
|
216
216
|
}, {})
|
|
217
217
|
if (Object.keys(toReturn).length === 0) {
|
package/src/VvFormTemplate.ts
CHANGED
|
@@ -2,7 +2,7 @@ import type { Component, DeepReadonly, InjectionKey, PropType, SlotsType, VNode
|
|
|
2
2
|
import type { FormSchema, InjectedFormData, FormTemplate, RenderFunctionOutput } from './types'
|
|
3
3
|
import type { z } from 'zod'
|
|
4
4
|
import type { FormStatus } from './enums'
|
|
5
|
-
import {
|
|
5
|
+
import { getProperty } from 'dot-prop'
|
|
6
6
|
import {
|
|
7
7
|
defineComponent,
|
|
8
8
|
h,
|
|
@@ -49,128 +49,128 @@ export function defineFormTemplate<Schema extends FormSchema, Type = undefined>(
|
|
|
49
49
|
let lastIf: boolean | undefined
|
|
50
50
|
const toReturn = normalizedSchema.reduce<
|
|
51
51
|
(VNode | VNode[] | undefined)[]
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
52
|
+
>((acc, field) => {
|
|
53
|
+
const normalizedField = typeof field === 'function'
|
|
54
|
+
? field(injectedFormData, templateProps.scope)
|
|
55
|
+
: field
|
|
56
|
+
const {
|
|
57
|
+
vvIs,
|
|
58
|
+
vvName,
|
|
59
|
+
vvSlots,
|
|
60
|
+
vvChildren,
|
|
61
|
+
vvIf,
|
|
62
|
+
vvElseIf,
|
|
63
|
+
vvType,
|
|
64
|
+
vvDefaultValue,
|
|
65
|
+
vvShowValid,
|
|
66
|
+
vvContent,
|
|
67
|
+
...props
|
|
68
|
+
} = normalizedField
|
|
69
69
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
70
|
+
// conditions
|
|
71
|
+
if (vvIf !== undefined) {
|
|
72
|
+
if (typeof vvIf === 'string') {
|
|
73
|
+
lastIf = Boolean(
|
|
74
|
+
getProperty(
|
|
75
|
+
new Object(injectedFormData.formData.value),
|
|
76
|
+
vvIf,
|
|
77
|
+
),
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
else if (typeof vvIf === 'function') {
|
|
81
|
+
lastIf = unref(vvIf(injectedFormData))
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
lastIf = unref(vvIf)
|
|
85
|
+
}
|
|
86
|
+
if (!lastIf) {
|
|
87
|
+
return acc
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
else if (vvElseIf !== undefined && lastIf !== undefined) {
|
|
91
|
+
if (lastIf) {
|
|
92
|
+
return acc
|
|
93
|
+
}
|
|
94
|
+
if (typeof vvElseIf === 'string') {
|
|
95
|
+
lastIf = Boolean(
|
|
96
|
+
getProperty(
|
|
97
|
+
new Object(injectedFormData.formData.value),
|
|
98
|
+
vvElseIf,
|
|
99
|
+
),
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
else if (typeof vvElseIf === 'function') {
|
|
103
|
+
lastIf = unref(vvElseIf(injectedFormData))
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
lastIf = unref(vvElseIf)
|
|
107
|
+
}
|
|
108
|
+
if (!lastIf) {
|
|
109
|
+
return acc
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
lastIf = undefined
|
|
114
|
+
}
|
|
115
115
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
116
|
+
// children
|
|
117
|
+
let hChildren: RenderFunctionOutput | { default: (scope: Record<string, unknown>) => RenderFunctionOutput } | undefined
|
|
118
|
+
if (vvChildren) {
|
|
119
|
+
if (typeof vvIs === 'string') {
|
|
120
|
+
hChildren = h(VvFormTemplate, {
|
|
121
|
+
schema: vvChildren,
|
|
122
|
+
})
|
|
123
|
+
}
|
|
124
|
+
else {
|
|
125
|
+
hChildren = {
|
|
126
|
+
default: (scope: Record<string, unknown>) =>
|
|
127
|
+
h(VvFormTemplate, {
|
|
121
128
|
schema: vvChildren,
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
else {
|
|
125
|
-
hChildren = {
|
|
126
|
-
default: (scope: Record<string, unknown>) =>
|
|
127
|
-
h(VvFormTemplate, {
|
|
128
|
-
schema: vvChildren,
|
|
129
|
-
scope,
|
|
130
|
-
}),
|
|
131
|
-
}
|
|
132
|
-
}
|
|
129
|
+
scope,
|
|
130
|
+
}),
|
|
133
131
|
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
134
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
135
|
+
// render
|
|
136
|
+
if (vvName) {
|
|
137
|
+
acc.push(
|
|
138
|
+
h(
|
|
139
|
+
VvFormField,
|
|
140
|
+
{
|
|
141
|
+
name: vvName,
|
|
142
|
+
is: vvIs,
|
|
143
|
+
type: vvType,
|
|
144
|
+
defaultValue: vvDefaultValue,
|
|
145
|
+
showValid: vvShowValid,
|
|
146
|
+
props,
|
|
147
|
+
},
|
|
148
|
+
vvSlots ?? hChildren ?? vvContent,
|
|
149
|
+
),
|
|
150
|
+
)
|
|
151
|
+
return acc
|
|
152
|
+
}
|
|
153
|
+
if (vvIs) {
|
|
154
|
+
acc.push(
|
|
155
|
+
h(
|
|
156
|
+
vvIs as Component,
|
|
157
|
+
props,
|
|
158
|
+
vvSlots ?? hChildren ?? vvContent,
|
|
159
|
+
),
|
|
160
|
+
)
|
|
161
|
+
return acc
|
|
162
|
+
}
|
|
163
|
+
if (hChildren) {
|
|
164
|
+
if ('default' in hChildren) {
|
|
165
|
+
acc.push(hChildren.default(templateProps.scope))
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
acc.push(hChildren)
|
|
169
|
+
}
|
|
170
|
+
return acc
|
|
171
|
+
}
|
|
172
|
+
return acc
|
|
173
|
+
}, [])
|
|
174
174
|
toReturn.push(
|
|
175
175
|
templateSlots?.default?.({
|
|
176
176
|
errors: injectedFormData?.errors.value,
|
package/src/types.ts
CHANGED
|
@@ -72,7 +72,7 @@ export type InjectedFormData<Schema extends FormSchema, Type> = {
|
|
|
72
72
|
|
|
73
73
|
export type InjectedFormWrapperData<Schema extends FormSchema> = {
|
|
74
74
|
name: Readonly<Ref<string>>
|
|
75
|
-
errors: Ref<Map<string, z.inferFormattedError<Schema
|
|
75
|
+
errors: Ref<Map<string, z.inferFormattedError<Schema> | undefined>>
|
|
76
76
|
invalid: Readonly<Ref<boolean>>
|
|
77
77
|
readonly: Readonly<Ref<boolean>>
|
|
78
78
|
fields: Ref<Map<string, string>>
|
|
@@ -80,7 +80,7 @@ export type InjectedFormWrapperData<Schema extends FormSchema> = {
|
|
|
80
80
|
|
|
81
81
|
export type InjectedFormFieldData<Schema extends FormSchema> = {
|
|
82
82
|
name: Readonly<Ref<Path<z.infer<Schema>>>>
|
|
83
|
-
errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema
|
|
83
|
+
errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema> | undefined>>>
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
export type InjectedFormFieldsGroupData<Schema extends FormSchema> = {
|