@volverjs/form-vue 1.0.0-beta.12 → 1.0.0-beta.13
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/README.md +247 -239
- package/dist/VvForm.d.ts +5 -5
- package/dist/VvFormField.d.ts +7 -7
- package/dist/VvFormTemplate.d.ts +4 -4
- package/dist/VvFormWrapper.d.ts +3 -3
- package/dist/index.d.ts +17 -17
- package/dist/index.es.js +475 -453
- package/dist/index.umd.js +1 -1
- package/dist/types.d.ts +3 -3
- package/dist/utils.d.ts +2 -2
- package/package.json +52 -56
- package/src/VvForm.ts +287 -291
- package/src/VvFormField.ts +323 -325
- package/src/VvFormTemplate.ts +193 -188
- package/src/VvFormWrapper.ts +144 -147
- package/src/enums.ts +26 -26
- package/src/index.ts +117 -128
- package/src/types.ts +111 -117
- package/src/utils.ts +93 -97
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(w,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):(w=typeof globalThis<"u"?globalThis:w||self,e(w["@volverjs/form-vue"]={},w.Vue,w.VueUseCore,w.zod))})(this,function(w,e,$,S){"use strict";function N(r){return Array.isArray(r)}function J(r){return typeof r<"u"}function G(r){return r===null}function L(r){return typeof r=="object"}function Z(r){return typeof r=="string"}function A(r){return typeof r>"u"}const M=/^[0-9]+$/,z=["__proto__","prototype","constructor"];function E(r,u,a){const d=J(a)?a:void 0;if(!L(r)||!Z(u))return d;const i=q(u);if(i.length!==0){for(const t of i){if(t==="*")continue;const s=function(l){return l.map(f=>A(f)||G(f)?f:N(f)?s(f):f[t])};if(N(r)&&!M.test(t)?r=s(r):r=r[t],A(r)||G(r))break}return A(r)?d:r}}function K(r,u,a){if(!L(r)||!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){r[s]=a;return}if(s==="*"&&N(r)){const l=d.slice(t+1).join(".");for(const f of r)K(f,l,a);return}A(r[s])&&(r[s]={}),r=r[s]}}function q(r){const u=r.split(/[.]|(?:\[(\d|\*)\])/).filter(a=>!!a);return u.some(a=>z.indexOf(a)!==-1)?[]:u}var c=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.tel="tel",r.url="url",r.search="search",r.date="date",r.time="time",r.datetimeLocal="datetime-local",r.month="month",r.week="week",r.color="color",r.select="select",r.checkbox="checkbox",r.radio="radio",r.textarea="textarea",r.radioGroup="radioGroup",r.checkboxGroup="checkboxGroup",r.combobox="combobox",r.custom="custom",r))(c||{}),O=(r=>(r.invalid="invalid",r.valid="valid",r.submitting="submitting",r.updated="updated",r.unknown="unknown",r))(O||{});const T=(r,u,a,d)=>e.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},readonly:{type:Boolean,default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(i,{slots:t,emit:s}){const l=e.computed({get(){if(n!=null&&n.formData)return E(Object(n.formData.value),String(i.name))},set(o){n!=null&&n.formData&&(K(Object(n.formData.value),String(i.name),o),s("update:modelValue",{newValue:l.value,formData:n==null?void 0:n.formData}))}});e.onMounted(()=>{l.value===void 0&&i.defaultValue!==void 0&&(l.value=i.defaultValue)}),e.onBeforeUnmount(()=>{y(),h()});const f=e.inject(u,void 0);f&&f.fields.value.add(i.name);const n=e.inject(r),{props:m,name:V}=e.toRefs(i),p=e.computed(()=>{if(n!=null&&n.errors.value)return E(n.errors.value,String(i.name))}),g=e.computed(()=>{var o;return(o=p.value)==null?void 0:o._errors}),v=e.computed(()=>p.value!==void 0),y=e.watch(v,()=>{v.value?(s("invalid",g.value),f&&f.errors.value.set(i.name,{_errors:g.value})):(s("valid",l.value),f&&f.errors.value.delete(i.name))}),h=e.watch(()=>n==null?void 0:n.formData,()=>{s("update:formData",n==null?void 0:n.formData)},{deep:!0}),b=o=>{l.value=o},x=e.computed(()=>{let o=m.value;return typeof o=="function"&&(o=o(n==null?void 0:n.formData)),Object.keys(o).reduce((U,k)=>(U[k]=e.unref(o[k]),U),{})}),C=e.computed(()=>n!=null&&n.readonly.value?!0:x.value.readonly??i.readonly),I=e.computed(()=>({...x.value,name:x.value.name??i.name,invalid:v.value,valid:i.showValid?!!(!v.value&&l.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:g.value,modelValue:l.value,readonly:C.value,"onUpdate:modelValue":b}));return e.provide(a,{name:e.readonly(V),errors:e.readonly(p)}),{component:e.computed(()=>{if(i.type===c.custom)return{render(){var o;return((o=t.default)==null?void 0:o.call(t,{modelValue:l.value,onUpdate:b,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,invalid:v.value,invalidLabel:g.value,formData:n==null?void 0:n.formData.value,formErrors:n==null?void 0:n.errors.value,errors:p.value,readonly:C.value}))??t.defalut}};if(!((d==null?void 0:d.lazyLoad)??i.lazyLoad)){let o;switch(i.type){case c.select:o=e.resolveComponent("VvSelect");break;case c.checkbox:o=e.resolveComponent("VvCheckbox");break;case c.radio:o=e.resolveComponent("VvRadio");break;case c.textarea:o=e.resolveComponent("VvTextarea");break;case c.radioGroup:o=e.resolveComponent("VvRadioGroup");break;case c.checkboxGroup:o=e.resolveComponent("VvCheckboxGroup");break;case c.combobox:o=e.resolveComponent("VvCombobox");break;default:o=e.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 e.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:I,invalid:v}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===c.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}}),W=(r,u={})=>{const a=t=>{let s=t;for(;s instanceof S.ZodEffects;)s=s.innerType();return s instanceof S.ZodOptional&&(s=s._def.innerType),s},d=a(r);return{...(d instanceof S.ZodObject?d._def.unknownKeys==="passthrough":!1)?u:{},...Object.fromEntries(Object.entries(d.shape).map(([t,s])=>{const l=u[t];let f=a(s),n;if(f instanceof S.ZodDefault&&(n=f._def.defaultValue(),f=f._def.innerType),l===null&&f instanceof S.ZodNullable)return[t,l];if(f instanceof S.ZodSchema){const m=s.safeParse(l);if(m.success)return[t,m.data??n]}if(f instanceof S.ZodArray&&Array.isArray(l)&&l.length){const m=a(f._def.type);if(m instanceof S.ZodObject)return[t,l.map(V=>W(m,V&&typeof V=="object"?V:void 0))??n]}return f instanceof S.ZodObject?[t,W(f,l&&typeof l=="object"?l:n)]:[t,n]}))}},P=(r,u,a,d)=>{const i=e.ref(),t=e.ref(),s=e.computed(()=>t.value===O.invalid),l=e.ref(),f=e.ref(!1),n=async(v=l.value)=>{if(f.value)return!0;const y=await r.safeParseAsync(v);return y.success?(i.value=void 0,t.value=O.valid,l.value=y.data,!0):(i.value=y.error.format(),t.value=O.invalid,!1)},m=async()=>f.value||!await n()?!1:(t.value=O.submitting,!0),{ignoreUpdates:V,stop:p}=$.watchIgnorable(l,()=>{t.value=O.updated},{deep:!0,eventFilter:$.throttleFilter((a==null?void 0:a.updateThrottle)??500)}),g=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(a==null?void 0:a.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","valid","submit","update:modelValue","update:readonly"],expose:["submit","validate","errors","status","valid","invalid","readonly"],setup(v,{emit:y}){return l.value=W(r,e.toRaw(v.modelValue)),e.watch(()=>v.modelValue,h=>{if(h){const b=e.isProxy(h)?e.toRaw(h):h;if(JSON.stringify(b)===JSON.stringify(e.toRaw(l.value)))return;l.value=typeof(b==null?void 0:b.clone)=="function"?b.clone():JSON.parse(JSON.stringify(b))}},{deep:!0}),e.watch(t,async h=>{var b,x,C,I,R;if(h===O.invalid){const o=e.toRaw(i.value);y("invalid",o),(b=a==null?void 0:a.onInvalid)==null||b.call(a,o);return}if(h===O.valid){const o=e.toRaw(l.value);y("valid",o),(x=a==null?void 0:a.onValid)==null||x.call(a,o),y("update:modelValue",o),(C=a==null?void 0:a.onUpdate)==null||C.call(a,o);return}if(h===O.submitting){const o=e.toRaw(l.value);y("submit",o),(I=a==null?void 0:a.onSubmit)==null||I.call(a,o)}if(h===O.updated){if((i.value||a!=null&&a.continuousValidation||v.continuousValidation)&&await n(),!l.value||!v.modelValue||JSON.stringify(l.value)!==JSON.stringify(v.modelValue)){const o=e.toRaw(l.value);y("update:modelValue",o),(R=a==null?void 0:a.onUpdate)==null||R.call(a,o)}t.value===O.updated&&(t.value=O.unknown)}}),e.onMounted(()=>{f.value=v.readonly}),e.watch(()=>v.readonly,h=>{f.value=h}),e.watch(f,h=>{h!==v.readonly&&y("update:readonly",f.value)}),e.provide(u,{formData:l,submit:m,validate:n,ignoreUpdates:V,stopUpdatesWatch:p,errors:e.readonly(i),status:e.readonly(t),invalid:s,readonly:f}),{formData:l,submit:m,validate:n,ignoreUpdates:V,stopUpdatesWatch:p,errors:e.readonly(i),status:e.readonly(t),invalid:s,isReadonly:f}},render(){const v=()=>{var y,h;return((h=(y=this.$slots)==null?void 0:y.default)==null?void 0:h.call(y,{formData:this.formData,submit:this.submit,validate:this.validate,ignoreUpdates:this.ignoreUpdates,stopUpdatesWatch:this.stopUpdatesWatch,errors:this.errors,status:this.status,invalid:this.invalid,readonly:this.isReadonly}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"])},(this.template??(a==null?void 0:a.template))&&d?[e.h(d,{schema:this.template??(a==null?void 0:a.template)},{default:v})]:{default:v})}});return{errors:i,status:t,invalid:s,readonly:f,formData:l,validate:n,submit:m,ignoreUpdates:V,stopUpdatesWatch:p,VvForm:g}},H=(r,u)=>e.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=e.inject(r),s=e.inject(u,void 0),l=e.ref(new Set),f=e.ref(new Map),{name:n}=e.toRefs(d);e.provide(u,{name:e.readonly(n),errors:f,fields:l}),e.watch(l,V=>{s!=null&&s.fields&&V.forEach(p=>{s==null||s.fields.value.add(p)})},{deep:!0}),e.watch(()=>new Map(f.value),(V,p)=>{s!=null&&s.errors&&(Array.from(p.keys()).forEach(g=>{s.errors.value.delete(g)}),Array.from(V.keys()).forEach(g=>{const v=V.get(g);v&&s.errors.value.set(g,v)}))},{deep:!0});const m=e.computed(()=>t!=null&&t.invalid.value?f.value.size>0:!1);return e.watch(m,()=>{m.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:m,fields:l,fieldsErrors:f}},render(){var d,i;return this.tag?e.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=(r,u)=>{const a=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},setup(d,{slots:i}){const t=e.inject(r);if(t!=null&&t.formData)return()=>{var n;const s=typeof d.schema=="function"?d.schema(t,d.scope):d.schema;let l;const f=s.reduce((m,V)=>{const p=typeof V=="function"?V(t,d.scope):V,{vvIs:g,vvName:v,vvSlots:y,vvChildren:h,vvIf:b,vvElseIf:x,vvType:C,vvDefaultValue:I,vvShowValid:R,vvContent:o,...U}=p;if(b!==void 0){if(typeof b=="string"?l=!!E(Object(t.formData.value),b):typeof b=="function"?l=e.unref(b(t)):l=e.unref(b),!l)return m}else if(x!==void 0&&l!==void 0){if(l||(typeof x=="string"?l=!!E(Object(t.formData.value),x):typeof x=="function"?l=e.unref(x(t)):l=e.unref(x),!l))return m}else l=void 0;let k;return h&&(typeof g=="string"?k=e.h(a,{schema:h}):k={default:j=>e.h(a,{schema:h,scope:j})}),v?(m.push(e.h(u,{name:v,is:g,type:C,defaultValue:I,showValid:R,props:U},y??k??o)),m):g?(m.push(e.h(g,U,y??k??o)),m):(k&&("default"in k?m.push(k.default(d.scope)):m.push(k)),m)},[]);return f.push((n=i==null?void 0:i.default)==null?void 0:n.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},B=(r,u={})=>{const a=Symbol(),d=Symbol(),i=Symbol(),t=H(a,d),s=T(a,d,i,u),l=Q(a,s),{VvForm:f,errors:n,status:m,invalid:V,readonly:p,formData:g,validate:v,submit:y,ignoreUpdates:h,stopUpdatesWatch:b}=P(r,a,u,l);return{VvForm:f,VvFormWrapper:t,VvFormField:s,VvFormTemplate:l,formInjectionKey:a,formWrapperInjectionKey:d,formFieldInjectionKey:i,errors:n,status:m,invalid:V,readonly:p,formData:g,validate:v,submit:y,ignoreUpdates:h,stopUpdatesWatch:b}},_=Symbol(),X=r=>{let u={};return r.schema&&(u=B(r.schema,r)),{...u,install(a,{global:d=!1}={}){a.provide(_,r),d&&(a.config.globalProperties.$vvForm=r,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=(r,u={})=>e.getCurrentInstance()?B(r,{...e.inject(_,{}),...u}):B(r,u),D=(r,u={})=>B(r,u);w.FormFieldType=c,w.createForm=X,w.defaultObjectBySchema=W,w.formFactory=D,w.pluginInjectionKey=_,w.useForm=Y,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(w,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):(w=typeof globalThis<"u"?globalThis:w||self,e(w["@volverjs/form-vue"]={},w.Vue,w.VueUseCore,w.zod))})(this,function(w,e,$,S){"use strict";function N(r){return Array.isArray(r)}function J(r){return typeof r<"u"}function K(r){return r===null}function G(r){return typeof r=="object"}function L(r){return typeof r=="string"}function W(r){return typeof r>"u"}const M=/^[0-9]+$/,z=["__proto__","prototype","constructor"];function A(r,s,n){const f=J(n)?n:void 0;if(!G(r)||!L(s))return f;const i=q(s);if(i.length!==0){for(const t of i){if(t==="*")continue;const u=function(l){return l.map(a=>W(a)||K(a)?a:N(a)?u(a):a[t])};if(N(r)&&!M.test(t)?r=u(r):r=r[t],W(r)||K(r))break}return W(r)?f:r}}function Z(r,s,n){if(!G(r)||!L(s))return;const f=q(s);if(f.length===0)return;const i=f.length;for(let t=0;t<i;t++){const u=f[t];if(t===i-1){r[u]=n;return}if(u==="*"&&N(r)){const l=f.slice(t+1).join(".");for(const a of r)Z(a,l,n);return}W(r[u])&&(r[u]={}),r=r[u]}}function q(r){const s=r.split(/[.]|(?:\[(\d|\*)\])/).filter(n=>!!n);return s.some(n=>z.indexOf(n)!==-1)?[]:s}var d=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.tel="tel",r.url="url",r.search="search",r.date="date",r.time="time",r.datetimeLocal="datetime-local",r.month="month",r.week="week",r.color="color",r.select="select",r.checkbox="checkbox",r.radio="radio",r.textarea="textarea",r.radioGroup="radioGroup",r.checkboxGroup="checkboxGroup",r.combobox="combobox",r.custom="custom",r))(d||{}),O=(r=>(r.invalid="invalid",r.valid="valid",r.submitting="submitting",r.updated="updated",r.unknown="unknown",r))(O||{});function T(r,s,n,f){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:i=>Object.values(d).includes(i),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},readonly:{type:Boolean,default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(i,{slots:t,emit:u}){const l=e.inject(s,void 0);l&&l.fields.value.add(i.name);const a=e.inject(r),{props:V,name:c}=e.toRefs(i),v=e.computed({get(){if(a!=null&&a.formData)return A(Object(a.formData.value),String(i.name))},set(o){a!=null&&a.formData&&(Z(Object(a.formData.value),String(i.name),o),u("update:modelValue",{newValue:v.value,formData:a==null?void 0:a.formData}))}});e.onMounted(()=>{v.value===void 0&&i.defaultValue!==void 0&&(v.value=i.defaultValue)});const p=e.computed(()=>{if(a!=null&&a.errors.value)return A(a.errors.value,String(i.name))}),g=e.computed(()=>{var o;return(o=p.value)==null?void 0:o._errors}),m=e.computed(()=>p.value!==void 0),y=e.watch(m,()=>{m.value?(u("invalid",g.value),l&&l.errors.value.set(i.name,{_errors:g.value})):(u("valid",v.value),l&&l.errors.value.delete(i.name))}),h=e.watch(()=>a==null?void 0:a.formData,()=>{u("update:formData",a==null?void 0:a.formData)},{deep:!0});e.onBeforeUnmount(()=>{y(),h()});const b=o=>{v.value=o},x=e.computed(()=>{let o=V.value;return typeof o=="function"&&(o=o(a==null?void 0:a.formData)),Object.keys(o).reduce((U,k)=>(U[k]=e.unref(o[k]),U),{})}),C=e.computed(()=>a!=null&&a.readonly.value?!0:x.value.readonly??i.readonly),I=e.computed(()=>({...x.value,name:x.value.name??i.name,invalid:m.value,valid:i.showValid?!!(!m.value&&v.value):void 0,type:(o=>{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(o))return o})(i.type),invalidLabel:g.value,modelValue:v.value,readonly:C.value,"onUpdate:modelValue":b}));return e.provide(n,{name:e.readonly(c),errors:e.readonly(p)}),{component:e.computed(()=>{if(i.type===d.custom)return{render(){var o;return((o=t.default)==null?void 0:o.call(t,{modelValue:v.value,onUpdate:b,submit:a==null?void 0:a.submit,validate:a==null?void 0:a.validate,invalid:m.value,invalidLabel:g.value,formData:a==null?void 0:a.formData.value,formErrors:a==null?void 0:a.errors.value,errors:p.value,readonly:C.value}))??t.defalut}};if(!((f==null?void 0:f.lazyLoad)??i.lazyLoad)){let o;switch(i.type){case d.select:o=e.resolveComponent("VvSelect");break;case d.checkbox:o=e.resolveComponent("VvCheckbox");break;case d.radio:o=e.resolveComponent("VvRadio");break;case d.textarea:o=e.resolveComponent("VvTextarea");break;case d.radioGroup:o=e.resolveComponent("VvRadioGroup");break;case d.checkboxGroup:o=e.resolveComponent("VvCheckboxGroup");break;case d.combobox:o=e.resolveComponent("VvCombobox");break;default:o=e.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 e.defineAsyncComponent(async()=>{switch(f!=null&&f.sideEffects&&await Promise.resolve(f.sideEffects(i.type)),i.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:I,invalid:m}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===d.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function E(r,s={}){const n=t=>{let u=t;for(;u instanceof S.ZodEffects;)u=u.innerType();return u instanceof S.ZodOptional&&(u=u._def.innerType),u},f=n(r);return{...(f instanceof S.ZodObject?f._def.unknownKeys==="passthrough":!1)?s:{},...Object.fromEntries(Object.entries(f.shape).map(([t,u])=>{const l=s[t];let a=n(u),V;if(a instanceof S.ZodDefault&&(V=a._def.defaultValue(),a=a._def.innerType),l===null&&a instanceof S.ZodNullable)return[t,l];if(a instanceof S.ZodSchema){const c=u.safeParse(l);if(c.success)return[t,c.data??V]}if(a instanceof S.ZodArray&&Array.isArray(l)&&l.length){const c=n(a._def.type);if(c instanceof S.ZodObject)return[t,l.map(v=>E(c,v&&typeof v=="object"?v:void 0))??V]}return a instanceof S.ZodObject?[t,E(a,l&&typeof l=="object"?l:V)]:[t,V]}))}}function P(r,s,n,f){const i=e.ref(),t=e.ref(),u=e.computed(()=>t.value===O.invalid),l=e.ref(),a=e.ref(!1),V=async(m=l.value)=>{if(a.value)return!0;const y=await r.safeParseAsync(m);return y.success?(i.value=void 0,t.value=O.valid,l.value=y.data,!0):(i.value=y.error.format(),t.value=O.invalid,!1)},c=async()=>a.value||!await V()?!1:(t.value=O.submitting,!0),{ignoreUpdates:v,stop:p}=$.watchIgnorable(l,()=>{t.value=O.updated},{deep:!0,eventFilter:$.throttleFilter((n==null?void 0:n.updateThrottle)??500)}),g=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(n==null?void 0:n.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","valid","submit","update:modelValue","update:readonly"],expose:["submit","validate","errors","status","valid","invalid","readonly"],setup(m,{emit:y}){return l.value=E(r,e.toRaw(m.modelValue)),e.watch(()=>m.modelValue,h=>{if(h){const b=e.isProxy(h)?e.toRaw(h):h;if(JSON.stringify(b)===JSON.stringify(e.toRaw(l.value)))return;l.value=typeof(b==null?void 0:b.clone)=="function"?b.clone():JSON.parse(JSON.stringify(b))}},{deep:!0}),e.watch(t,async h=>{var b,x,C,I,R;if(h===O.invalid){const o=e.toRaw(i.value);y("invalid",o),(b=n==null?void 0:n.onInvalid)==null||b.call(n,o);return}if(h===O.valid){const o=e.toRaw(l.value);y("valid",o),(x=n==null?void 0:n.onValid)==null||x.call(n,o),y("update:modelValue",o),(C=n==null?void 0:n.onUpdate)==null||C.call(n,o);return}if(h===O.submitting){const o=e.toRaw(l.value);y("submit",o),(I=n==null?void 0:n.onSubmit)==null||I.call(n,o)}if(h===O.updated){if((i.value||n!=null&&n.continuousValidation||m.continuousValidation)&&await V(),!l.value||!m.modelValue||JSON.stringify(l.value)!==JSON.stringify(m.modelValue)){const o=e.toRaw(l.value);y("update:modelValue",o),(R=n==null?void 0:n.onUpdate)==null||R.call(n,o)}t.value===O.updated&&(t.value=O.unknown)}}),e.onMounted(()=>{a.value=m.readonly}),e.watch(()=>m.readonly,h=>{a.value=h}),e.watch(a,h=>{h!==m.readonly&&y("update:readonly",a.value)}),e.provide(s,{formData:l,submit:c,validate:V,ignoreUpdates:v,stopUpdatesWatch:p,errors:e.readonly(i),status:e.readonly(t),invalid:u,readonly:a}),{formData:l,submit:c,validate:V,ignoreUpdates:v,stopUpdatesWatch:p,errors:e.readonly(i),status:e.readonly(t),invalid:u,isReadonly:a}},render(){const m=()=>{var y,h;return((h=(y=this.$slots)==null?void 0:y.default)==null?void 0:h.call(y,{formData:this.formData,submit:this.submit,validate:this.validate,ignoreUpdates:this.ignoreUpdates,stopUpdatesWatch:this.stopUpdatesWatch,errors:this.errors,status:this.status,invalid:this.invalid,readonly:this.isReadonly}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"])},(this.template??(n==null?void 0:n.template))&&f?[e.h(f,{schema:this.template??(n==null?void 0:n.template)},{default:m})]:{default:m})}});return{errors:i,status:t,invalid:u,readonly:a,formData:l,validate:V,submit:c,ignoreUpdates:v,stopUpdatesWatch:p,VvForm:g}}function H(r,s){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(f,{emit:i}){const t=e.inject(r),u=e.inject(s,void 0),l=e.ref(new Set),a=e.ref(new Map),{name:V}=e.toRefs(f);e.provide(s,{name:e.readonly(V),errors:a,fields:l}),e.watch(l,v=>{u!=null&&u.fields&&v.forEach(p=>{u==null||u.fields.value.add(p)})},{deep:!0}),e.watch(()=>new Map(a.value),(v,p)=>{u!=null&&u.errors&&(Array.from(p.keys()).forEach(g=>{u.errors.value.delete(g)}),Array.from(v.keys()).forEach(g=>{const m=v.get(g);m&&u.errors.value.set(g,m)}))},{deep:!0});const c=e.computed(()=>t!=null&&t.invalid.value?a.value.size>0:!1);return e.watch(c,()=>{c.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:c,fields:l,fieldsErrors:a}},render(){var f,i;return this.tag?e.h(this.tag,null,{default:()=>{var t,u;return((u=(t=this.$slots).default)==null?void 0:u.call(t,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}}):((i=(f=this.$slots).default)==null?void 0:i.call(f,{invalid:this.invalid,formData:this.formData,submit:this.submit,validate:this.validate,errors:this.errors,fieldsErrors:this.fieldsErrors}))??this.$slots.defalut}})}function Q(r,s){const n=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},setup(f,{slots:i}){const t=e.inject(r);if(t!=null&&t.formData)return()=>{var V;const u=typeof f.schema=="function"?f.schema(t,f.scope):f.schema;let l;const a=u.reduce((c,v)=>{const p=typeof v=="function"?v(t,f.scope):v,{vvIs:g,vvName:m,vvSlots:y,vvChildren:h,vvIf:b,vvElseIf:x,vvType:C,vvDefaultValue:I,vvShowValid:R,vvContent:o,...U}=p;if(b!==void 0){if(typeof b=="string"?l=!!A(Object(t.formData.value),b):typeof b=="function"?l=e.unref(b(t)):l=e.unref(b),!l)return c}else if(x!==void 0&&l!==void 0){if(l||(typeof x=="string"?l=!!A(Object(t.formData.value),x):typeof x=="function"?l=e.unref(x(t)):l=e.unref(x),!l))return c}else l=void 0;let k;return h&&(typeof g=="string"?k=e.h(n,{schema:h}):k={default:j=>e.h(n,{schema:h,scope:j})}),m?(c.push(e.h(s,{name:m,is:g,type:C,defaultValue:I,showValid:R,props:U},y??k??o)),c):g?(c.push(e.h(g,U,y??k??o)),c):(k&&("default"in k?c.push(k.default(f.scope)):c.push(k)),c)},[]);return a.push((V=i==null?void 0:i.default)==null?void 0:V.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})),a}}});return n}function B(r,s={}){const n=Symbol("formInjectionKey"),f=Symbol("formWrapperInjectionKey"),i=Symbol("formFieldInjectionKey"),t=H(n,f),u=T(n,f,i,s),l=Q(n,u),{VvForm:a,errors:V,status:c,invalid:v,readonly:p,formData:g,validate:m,submit:y,ignoreUpdates:h,stopUpdatesWatch:b}=P(r,n,s,l);return{VvForm:a,VvFormWrapper:t,VvFormField:u,VvFormTemplate:l,formInjectionKey:n,formWrapperInjectionKey:f,formFieldInjectionKey:i,errors:V,status:c,invalid:v,readonly:p,formData:g,validate:m,submit:y,ignoreUpdates:h,stopUpdatesWatch:b}}const _=Symbol("pluginInjectionKey");function X(r){let s={};return r.schema&&(s=B(r.schema,r)),{...s,install(n,{global:f=!1}={}){n.provide(_,r),f&&(n.config.globalProperties.$vvForm=r,s!=null&&s.VvForm&&n.component("VvForm",s.VvForm),s!=null&&s.VvFormWrapper&&n.component("VvFormWrapper",s.VvFormWrapper),s!=null&&s.VvFormField&&n.component("VvFormField",s.VvFormField),s!=null&&s.VvFormTemplate&&n.component("VvFormTemplate",s.VvFormTemplate))}}}function Y(r,s={}){return e.getCurrentInstance()?B(r,{...e.inject(_,{}),...s}):B(r,s)}function D(r,s={}){return B(r,s)}w.FormFieldType=d,w.createForm=X,w.defaultObjectBySchema=E,w.formFactory=D,w.pluginInjectionKey=_,w.useForm=Y,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { FormFieldType, FormStatus } from './enums';
|
|
2
|
-
import { IgnoredUpdater } from '@vueuse/core';
|
|
3
|
-
import { z } from 'zod';
|
|
4
1
|
import { Component, DeepReadonly, Ref, RendererElement, RendererNode, VNode, WatchStopHandle } from 'vue';
|
|
2
|
+
import { z } from 'zod';
|
|
3
|
+
import { IgnoredUpdater } from '@vueuse/core';
|
|
4
|
+
import { FormFieldType, FormStatus } from './enums';
|
|
5
5
|
|
|
6
6
|
export type FormSchema = z.AnyZodObject | z.ZodEffects<z.AnyZodObject> | z.ZodEffects<z.ZodEffects<z.AnyZodObject>>;
|
|
7
7
|
export type FormFieldComponentOptions = {
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FormSchema } from './types';
|
|
2
1
|
import { z } from 'zod';
|
|
2
|
+
import { FormSchema } from './types';
|
|
3
3
|
|
|
4
|
-
export declare
|
|
4
|
+
export declare function defaultObjectBySchema<Schema extends FormSchema>(schema: Schema, original?: Partial<z.infer<Schema>> & Record<string, unknown>): Partial<z.infer<Schema>>;
|
package/package.json
CHANGED
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volverjs/form-vue",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "1.0.0-beta.13",
|
|
3
5
|
"description": "Vue 3 Forms with @volverjs/ui-vue",
|
|
4
6
|
"author": "8 Wave S.r.l.",
|
|
5
7
|
"license": "MIT",
|
|
6
|
-
"keywords": [
|
|
7
|
-
"form",
|
|
8
|
-
"form-field",
|
|
9
|
-
"form-wrapper",
|
|
10
|
-
"vue3",
|
|
11
|
-
"zod",
|
|
12
|
-
"validation"
|
|
13
|
-
],
|
|
14
8
|
"homepage": "https://github.com/volverjs/form-vue",
|
|
15
9
|
"repository": {
|
|
16
10
|
"type": "git",
|
|
@@ -19,70 +13,71 @@
|
|
|
19
13
|
"bugs": {
|
|
20
14
|
"url": "https://github.com/volverjs/form-vue/issues"
|
|
21
15
|
},
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
"
|
|
16
|
+
"keywords": [
|
|
17
|
+
"form",
|
|
18
|
+
"form-field",
|
|
19
|
+
"form-wrapper",
|
|
20
|
+
"vue3",
|
|
21
|
+
"zod",
|
|
22
|
+
"validation"
|
|
23
|
+
],
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"import": "./dist/index.es.js",
|
|
28
|
+
"default": "./dist/index.umd.js"
|
|
29
|
+
},
|
|
30
|
+
"./src/*": "./src/*",
|
|
31
|
+
"./dist/*": "./dist/*"
|
|
25
32
|
},
|
|
26
|
-
"packageManager": "pnpm@9.0.5",
|
|
27
|
-
"type": "module",
|
|
28
33
|
"main": "./dist/index.js",
|
|
29
34
|
"module": "./dist/index.js",
|
|
30
35
|
"types": "./dist/index.d.ts",
|
|
36
|
+
"typesVersions": {
|
|
37
|
+
"*": {
|
|
38
|
+
"*": [
|
|
39
|
+
"dist/index.d.ts"
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
31
43
|
"files": [
|
|
44
|
+
"*.d.ts",
|
|
32
45
|
"dist",
|
|
33
|
-
"src",
|
|
34
46
|
"node",
|
|
35
|
-
"
|
|
47
|
+
"src"
|
|
36
48
|
],
|
|
49
|
+
"engines": {
|
|
50
|
+
"node": ">= 16.x"
|
|
51
|
+
},
|
|
37
52
|
"dependencies": {
|
|
38
|
-
"@volverjs/ui-vue": "0.0.10-beta.
|
|
39
|
-
"@vueuse/core": "^10.
|
|
40
|
-
"ts-dot-prop": "^2.1.
|
|
41
|
-
"vue": "^3.4.
|
|
42
|
-
"zod": "^3.
|
|
53
|
+
"@volverjs/ui-vue": "0.0.10-beta.36",
|
|
54
|
+
"@vueuse/core": "^10.10.0",
|
|
55
|
+
"ts-dot-prop": "^2.1.4",
|
|
56
|
+
"vue": "^3.4.27",
|
|
57
|
+
"zod": "^3.23.8"
|
|
43
58
|
},
|
|
44
59
|
"devDependencies": {
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
47
|
-
"@
|
|
48
|
-
"@
|
|
49
|
-
"@vitejs/plugin-vue": "^5.0.
|
|
60
|
+
"@antfu/eslint-config": "^2.20.0",
|
|
61
|
+
"@nabla/vite-plugin-eslint": "^2.0.4",
|
|
62
|
+
"@playwright/experimental-ct-vue": "1.44.1",
|
|
63
|
+
"@testing-library/vue": "^8.1.0",
|
|
64
|
+
"@vitejs/plugin-vue": "^5.0.5",
|
|
50
65
|
"@volverjs/style": "0.1.12-beta.15",
|
|
51
|
-
"@vue/compiler-sfc": "^3.4.
|
|
52
|
-
"@vue/
|
|
53
|
-
"@vue/
|
|
54
|
-
"@vue/test-utils": "^2.4.5",
|
|
66
|
+
"@vue/compiler-sfc": "^3.4.27",
|
|
67
|
+
"@vue/runtime-core": "^3.4.27",
|
|
68
|
+
"@vue/test-utils": "^2.4.6",
|
|
55
69
|
"copy": "^0.3.2",
|
|
56
|
-
"eslint": "^9.
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"prettier": "^3.2.5",
|
|
62
|
-
"typescript": "^5.4.4",
|
|
63
|
-
"vite": "^5.2.7",
|
|
64
|
-
"vite-plugin-dts": "^3.8.1",
|
|
70
|
+
"eslint": "^9.4.0",
|
|
71
|
+
"happy-dom": "^14.12.0",
|
|
72
|
+
"typescript": "^5.4.5",
|
|
73
|
+
"vite": "^5.2.12",
|
|
74
|
+
"vite-plugin-dts": "^3.9.1",
|
|
65
75
|
"vite-plugin-externalize-deps": "^0.8.0",
|
|
66
|
-
"vitest": "^1.
|
|
67
|
-
},
|
|
68
|
-
"typesVersions": {
|
|
69
|
-
"*": {
|
|
70
|
-
"*": [
|
|
71
|
-
"dist/index.d.ts"
|
|
72
|
-
]
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
"exports": {
|
|
76
|
-
".": {
|
|
77
|
-
"types": "./dist/index.d.ts",
|
|
78
|
-
"import": "./dist/index.es.js",
|
|
79
|
-
"default": "./dist/index.umd.js"
|
|
80
|
-
},
|
|
81
|
-
"./src/*": "./src/*",
|
|
82
|
-
"./dist/*": "./dist/*"
|
|
76
|
+
"vitest": "^1.6.0"
|
|
83
77
|
},
|
|
84
78
|
"scripts": {
|
|
85
|
-
"lint": "eslint .
|
|
79
|
+
"lint": "eslint .",
|
|
80
|
+
"lint:fix": "eslint . --fix",
|
|
86
81
|
"type-check": "tsc --noEmit",
|
|
87
82
|
"dev": "vite build --watch",
|
|
88
83
|
"build": "vite build",
|
|
@@ -90,6 +85,7 @@
|
|
|
90
85
|
"test-vitest": "vitest run",
|
|
91
86
|
"test-vitest-watch": "vitest",
|
|
92
87
|
"test-playwright": "playwright test -c playwright-ct.config.ts",
|
|
88
|
+
"test-playwright:ui": "playwright test -c playwright-ct.config.ts --ui",
|
|
93
89
|
"credits": "npx @opengovsg/credits-generator"
|
|
94
90
|
}
|
|
95
91
|
}
|