@volverjs/form-vue 0.0.10-beta.8 → 0.0.10-beta.9

package/README.md

@@ -279,21 +279,20 @@ It automatically bind the form data through the `name` attribute. For nested obj
 ```
 
 To render a [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) input component, use the `type` attribute.
-
-By default [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) components must be defined globally but can be lazy loaded with `lazyLoad` option or prop.
+By default UI components must be installed globally, they can be lazy-loaded with `lazyLoad` option or prop.
 
 ```vue
 <template>
   <VvForm>
-    <VvFormField type="text" name="username" label="Username" />
-    <VvFormField type="password" name="password" label="Password" />
+    <VvFormField type="text" name="username" label="Username" lazy-load />
+    <VvFormField type="password" name="password" label="Password" lazy-load />
   </VvForm>
 </template>
 ```
 
 Check the [`VvFormField`](./docs/VvFormField.md) documentation to learn more about form fields.
 
-## Form Template
+## VvFormTemplate
 
 Forms can also be created using a template. A template is an **array of objects** that describes the form fields. All properties that are **not listed** below are passed to the component **as props**.
 
@@ -367,15 +366,10 @@ Forms can also be created using a template. A template is an **array of objects*
 Template items, by default, are rendered as a `VvFormField` component but this can be changed using the `vvIs` property. The `vvIs` property can be a string or a component.
 
 `vvName` refers to the name of the field in the schema and can be a nested property using **dot notation**.
-
 `vvType` refers to the type of the field and can be any of the supported types.
-
 `vvDefaultValue` can be used to set default values for the form item.
-
 `vvShowValid` can be used to show the valid state of the form item.
-
 `vvSlots` can be used to pass a slots to the template item.
-
 `vvChildren` is an array of template items which will be wrapped in the parent item.
 
 Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties.
@@ -450,7 +444,7 @@ Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties
 
 `vvElseIf` can be used multiple times. `vvElseIf: true` is like an `else` statement and will be rendered if all previous `vvIf` and `vvElseIf` conditions are false.
 
-`vvIf` and `vvElseIf` can be a string or a function. If it is a string it will be evaluated as a **property** of the form data. If it is a function it will be called with the **form context** as the **first argument**.
+`vvIf` and `vvElseIf` can be a string or a function. If it is a string it will be evaluated as a **property** of the form data. If it is a function it will be called with the **form context** as the **first argument** and must return a boolean.
 
 ```ts
 {
@@ -461,7 +455,8 @@ Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties
 }
 ```
 
-The template schema and all template items can be a function. The function will be called with the form context as the first argument.
+Also the template schema and all template items can be a function.
+The function will be called with the **form context** as the **first argument**.
 
 ```ts
 const templateSchema = (ctx) => [

package/dist/VvFormField.d.ts

@@ -28,7 +28,7 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    lazyload: {
+    lazyLoad: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -67,7 +67,7 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    lazyload: {
+    lazyLoad: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -88,5 +88,5 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
     is: Component;
     showValid: boolean;
     defaultValue: string | number | boolean | unknown[] | Record<string, any>;
-    lazyload: boolean;
+    lazyLoad: boolean;
 }>;

package/dist/index.d.ts

@@ -320,7 +320,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -359,7 +359,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -380,7 +380,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         is: import("vue").Component;
         showValid: boolean;
         defaultValue: string | number | boolean | unknown[] | Record<string, any>;
-        lazyload: boolean;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;
@@ -729,7 +729,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -768,7 +768,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -789,7 +789,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         is: import("vue").Component;
         showValid: boolean;
         defaultValue: string | number | boolean | unknown[] | Record<string, any>;
-        lazyload: boolean;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, computed as V, onMounted as X, onBeforeUnmount as Y, inject as O, toRefs as J, watch as w, provide as z, readonly as k, resolveComponent as g, defineAsyncComponent as R, h as x, ref as E, isProxy as T, toRaw as j, withModifiers as F, unref as C, getCurrentInstance as ee } from "vue";
+import { defineComponent as G, computed as V, onMounted as X, onBeforeUnmount as Y, inject as O, toRefs as J, watch as w, provide as z, readonly as k, resolveComponent as g, defineAsyncComponent as R, h as x, ref as E, isProxy as T, toRaw as j, withModifiers as F, unref as C, getCurrentInstance as ee } from "vue";
 import { watchThrottled as re } from "@vueuse/core";
 import { ZodObject as M, ZodDefault as te, ZodNullable as ne, ZodSchema as ae, ZodEffects as oe } from "zod";
 function _(e) {
@@ -20,7 +20,7 @@ function $(e) {
   return typeof e > "u";
 }
 const ue = /^[0-9]+$/, le = ["__proto__", "prototype", "constructor"];
-function B(e, n, i) {
+function N(e, n, i) {
   const s = se(i) ? i : void 0;
   if (!U(e) || !q(n))
     return s;
@@ -64,8 +64,8 @@ function D(e) {
   const n = e.split(/[.]|(?:\[(\d|\*)\])/).filter((i) => !!i);
   return n.some((i) => le.indexOf(i) !== -1) ? [] : n;
 }
-var f = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(f || {}), N = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(N || {});
-const ie = (e, n, i, s) => W({
+var f = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(f || {}), L = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(L || {});
+const ie = (e, n, i, s) => G({
   name: "FieldComponent",
   props: {
     type: {
@@ -93,7 +93,7 @@ const ie = (e, n, i, s) => W({
       type: [String, Number, Boolean, Array, Object],
       default: void 0
     },
-    lazyload: {
+    lazyLoad: {
       type: Boolean,
       default: !1
     }
@@ -104,7 +104,7 @@ const ie = (e, n, i, s) => W({
     const o = V({
       get() {
         if (t != null && t.formData)
-          return B(
+          return N(
             Object(t.formData.value),
             String(a.name)
           );
@@ -129,7 +129,7 @@ const ie = (e, n, i, s) => W({
     u && u.fields.value.add(a.name);
     const t = O(e), { props: m, name: p } = J(a), h = V(() => {
       if (t != null && t.errors.value)
-        return B(t.errors.value, String(a.name));
+        return N(t.errors.value, String(a.name));
     }), d = V(() => {
       var c;
       return (c = h.value) == null ? void 0 : c._errors;
@@ -150,7 +150,7 @@ const ie = (e, n, i, s) => W({
       { deep: !0 }
     ), b = (c) => {
       o.value = c;
-    }, I = V(() => typeof m.value == "function" ? m.value(t == null ? void 0 : t.formData) : m.value), A = V(() => ({
+    }, I = V(() => typeof m.value == "function" ? m.value(t == null ? void 0 : t.formData) : m.value), W = V(() => ({
       ...I.value,
       name: I.value.name ?? a.name,
       invalid: v.value,
@@ -196,7 +196,7 @@ const ie = (e, n, i, s) => W({
             })) ?? r.defalut;
           }
         };
-      if (!((s == null ? void 0 : s.lazyLoad) ?? a.lazyload)) {
+      if (!((s == null ? void 0 : s.lazyLoad) ?? a.lazyLoad)) {
         let c;
         switch (a.type) {
           case f.select:
@@ -246,7 +246,7 @@ const ie = (e, n, i, s) => W({
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: A, invalid: v };
+    }), hasProps: W, invalid: v };
   },
   render() {
     return this.is ? x(this.is, this.hasProps, this.$slots) : this.type === f.custom ? x(this.component, null, this.$slots) : x(this.component, this.hasProps, this.$slots);
@@ -282,7 +282,7 @@ const ie = (e, n, i, s) => W({
     )
   };
 }, fe = (e, n, i) => {
-  const s = E(), a = E(), r = E(), l = W({
+  const s = E(), a = E(), r = E(), l = G({
     name: "FormComponent",
     props: {
       modelValue: {
@@ -324,8 +324,8 @@ const ie = (e, n, i, s) => W({
       );
       const m = (d = r.value) => {
         const v = e.safeParse(d);
-        return v.success ? (s.value = void 0, a.value = N.valid, r.value = v.data, u("update:modelValue", r.value), u("valid", v.data), !0) : (s.value = v.error.format(), a.value = N.invalid, u("invalid", s.value), !1);
-      }, p = () => m() ? (u("submit", r.value), !0) : !1, h = V(() => a.value === N.invalid);
+        return v.success ? (s.value = void 0, a.value = L.valid, r.value = v.data, u("update:modelValue", r.value), u("valid", v.data), !0) : (s.value = v.error.format(), a.value = L.invalid, u("invalid", s.value), !1);
+      }, p = () => m() ? (u("submit", r.value), !0) : !1, h = V(() => a.value === L.invalid);
       return z(n, {
         formData: r,
         submit: p,
@@ -370,7 +370,7 @@ const ie = (e, n, i, s) => W({
      */
     VvForm: l
   };
-}, ce = (e, n) => W({
+}, ce = (e, n) => G({
   name: "WrapperComponent",
   props: {
     name: {
@@ -441,7 +441,7 @@ const ie = (e, n, i, s) => W({
     })) ?? this.$slots.defalut;
   }
 }), de = (e, n) => {
-  const i = W({
+  const i = G({
     props: {
       schema: {
         type: [Array, Function],
@@ -466,25 +466,25 @@ const ie = (e, n, i, s) => W({
               vvIf: y,
               vvElseIf: b,
               vvType: I,
-              vvDefaultValue: A,
+              vvDefaultValue: W,
               vvShowValid: K,
               ...c
             } = p;
             if (y !== void 0) {
-              if (typeof y == "string" ? o = !!B(
+              if (typeof y == "string" ? o = !!N(
                 Object(r.formData.value),
                 y
               ) : typeof y == "function" ? o = C(y(r)) : o = C(y), !o)
                 return t;
             } else if (b !== void 0 && o !== void 0) {
-              if (o || (typeof b == "string" ? o = !!B(
+              if (o || (typeof b == "string" ? o = !!N(
                 Object(r.formData.value),
                 b
               ) : typeof b == "function" ? o = C(b(r)) : o = C(b), !o))
                 return t;
             } else
               o = void 0;
-            const L = S ? x(i, {
+            const A = S ? x(i, {
               schema: S
             }) : void 0;
             return d ? (t.push(
@@ -494,19 +494,19 @@ const ie = (e, n, i, s) => W({
                   name: d,
                   is: h,
                   type: I,
-                  defaultValue: A,
+                  defaultValue: W,
                   showValid: K,
                   props: c
                 },
-                v ?? L
+                v ?? A
               )
             ), t) : h ? (t.push(
               x(
                 h,
                 c,
-                v ?? L
+                v ?? A
               )
-            ), t) : (S && t.push(L), t);
+            ), t) : (S && t.push(A), t);
           },
           [
             (u = a == null ? void 0 : a.default) == null ? void 0 : u.call(a, {
@@ -522,7 +522,7 @@ const ie = (e, n, i, s) => W({
     }
   });
   return i;
-}, G = (e, n = {}) => {
+}, B = (e, n = {}) => {
   const i = Symbol(), s = Symbol(), a = Symbol(), { VvForm: r, errors: l, status: o, formData: u } = fe(
     e,
     i,
@@ -550,16 +550,16 @@ const ie = (e, n, i, s) => W({
   };
 }, Q = Symbol(), pe = (e) => {
   let n = {};
-  return e.schema && (n = G(e.schema, e)), {
+  return e.schema && (n = B(e.schema, e)), {
     ...n,
     install(i, { global: s = !1 } = {}) {
       i.provide(Q, e), s && (i.config.globalProperties.$vvForm = e, n != null && n.VvForm && i.component("VvForm", n.VvForm), n != null && n.VvFormWrapper && i.component("VvFormWrapper", n.VvFormWrapper), n != null && n.VvFormField && i.component("VvFormField", n.VvFormField), n != null && n.VvFormTemplate && i.component("VvFormTemplate", n.VvFormTemplate));
     }
   };
-}, be = (e, n = {}) => ee() ? G(e, {
+}, be = (e, n = {}) => ee() ? B(e, {
   ...O(Q, {}),
   ...n
-}) : G(e, n), Ve = (e, n = {}) => G(e, n);
+}) : B(e, n), Ve = (e, n = {}) => B(e, n);
 export {
   f as FormFieldType,
   pe as createForm,

package/dist/index.umd.js

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

package/package.json

@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/form-vue/issues"
   },
-  "version": "0.0.10-beta.8",
+  "version": "0.0.10-beta.9",
   "engines": {
     "node": ">= 16.x"
   },

package/src/VvFormField.ts

@@ -76,7 +76,7 @@ export const defineFormField = <Schema extends FormSchema>(
 				type: [String, Number, Boolean, Array, Object],
 				default: undefined,
 			},
-			lazyload: {
+			lazyLoad: {
 				type: Boolean,
 				default: false,
 			},
@@ -235,7 +235,7 @@ export const defineFormField = <Schema extends FormSchema>(
 						},
 					}
 				}
-				if (!(options?.lazyLoad ?? props.lazyload)) {
+				if (!(options?.lazyLoad ?? props.lazyLoad)) {
 					let component: string | ConcreteComponent
 					switch (props.type) {
 						case FormFieldType.select: