@volverjs/form-vue 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { defineComponent as z, computed as k, onMounted as D, onBeforeUnmount as j, inject as U, toRefs as P, watch as I, unref as B, provide as M, readonly as S, resolveComponent as O, defineAsyncComponent as F, h as w, ref as C, toRaw as E, isProxy as ee, withModifiers as re, getCurrentInstance as te } from "vue";
+import { defineComponent as z, computed as k, onMounted as D, onBeforeUnmount as j, inject as U, toRefs as P, watch as A, unref as $, provide as M, readonly as I, resolveComponent as O, defineAsyncComponent as F, h as w, ref as B, toRaw as S, isProxy as ee, withModifiers as re, getCurrentInstance as te } from "vue";
 import { watchIgnorable as ae, throttleFilter as ne } from "@vueuse/core";
-import { ZodObject as K, ZodDefault as ue, ZodNullable as le, ZodSchema as se, ZodArray as ie, ZodEffects as fe, ZodOptional as oe } from "zod";
-function R(e) {
+import { ZodObject as J, ZodDefault as ue, ZodNullable as le, ZodSchema as se, ZodArray as ie, ZodEffects as fe, ZodOptional as oe } from "zod";
+function K(e) {
   return Array.isArray(e);
 }
 function de(e) {
@@ -16,11 +16,11 @@ function H(e) {
 function Q(e) {
   return typeof e == "string";
 }
-function G(e) {
+function C(e) {
   return typeof e > "u";
 }
 const ve = /^[0-9]+$/, ce = ["__proto__", "prototype", "constructor"];
-function L(e, s, t) {
+function G(e, s, t) {
   const o = de(t) ? t : void 0;
   if (!H(e) || !Q(s))
     return o;
@@ -30,12 +30,12 @@ function L(e, s, t) {
       if (r === "*")
         continue;
       const l = function(a) {
-        return a.map((f) => G(f) || q(f) ? f : R(f) ? l(f) : f[r]);
+        return a.map((f) => C(f) || q(f) ? f : K(f) ? l(f) : f[r]);
       };
-      if (R(e) && !ve.test(r) ? e = l(e) : e = e[r], G(e) || q(e))
+      if (K(e) && !ve.test(r) ? e = l(e) : e = e[r], C(e) || q(e))
         break;
     }
-    return G(e) ? o : e;
+    return C(e) ? o : e;
   }
 }
 function X(e, s, t) {
@@ -51,13 +51,13 @@ function X(e, s, t) {
       e[l] = t;
       return;
     }
-    if (l === "*" && R(e)) {
+    if (l === "*" && K(e)) {
       const a = o.slice(r + 1).join(".");
       for (const f of e)
         X(f, a, t);
       return;
     }
-    G(e[l]) && (e[l] = {}), e = e[l];
+    C(e[l]) && (e[l] = {}), e = e[l];
   }
 }
 function Y(e) {
@@ -104,7 +104,7 @@ const me = (e, s, t, o) => z({
     const a = k({
       get() {
         if (n != null && n.formData)
-          return L(
+          return G(
             Object(n.formData.value),
             String(u.name)
           );
@@ -129,11 +129,11 @@ const me = (e, s, t, o) => z({
     f && f.fields.value.add(u.name);
     const n = U(e), { props: c, name: h } = P(u), V = k(() => {
       if (n != null && n.errors.value)
-        return L(n.errors.value, String(u.name));
+        return G(n.errors.value, String(u.name));
     }), m = k(() => {
       var i;
       return (i = V.value) == null ? void 0 : i._errors;
-    }), v = k(() => V.value !== void 0), b = I(v, () => {
+    }), v = k(() => V.value !== void 0), b = A(v, () => {
       v.value ? (l("invalid", m.value), f && f.errors.value.set(
         u.name,
         {
@@ -142,7 +142,7 @@ const me = (e, s, t, o) => z({
       )) : (l("valid", a.value), f && f.errors.value.delete(
         u.name
       ));
-    }), y = I(
+    }), y = A(
       () => n == null ? void 0 : n.formData,
       () => {
         l("update:formData", n == null ? void 0 : n.formData);
@@ -153,10 +153,10 @@ const me = (e, s, t, o) => z({
     }, p = k(() => {
       let i = c.value;
       return typeof i == "function" && (i = i(n == null ? void 0 : n.formData)), Object.keys(i).reduce(
-        (_, $) => (_[$] = B(i[$]), _),
+        (N, _) => (N[_] = $(i[_]), N),
         {}
       );
-    }), A = k(() => ({
+    }), E = k(() => ({
       ...p.value,
       name: p.value.name ?? u.name,
       invalid: v.value,
@@ -184,8 +184,8 @@ const me = (e, s, t, o) => z({
       "onUpdate:modelValue": g
     }));
     return M(t, {
-      name: S(h),
-      errors: S(V)
+      name: I(h),
+      errors: I(V)
     }), { component: k(() => {
       if (u.type === d.custom)
         return {
@@ -256,12 +256,12 @@ const me = (e, s, t, o) => z({
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: A, invalid: v };
+    }), hasProps: E, invalid: v };
   },
   render() {
     return this.is ? w(this.is, this.hasProps, this.$slots) : this.type === d.custom ? w(this.component, null, this.$slots) : w(this.component, this.hasProps, this.$slots);
   }
-}), J = (e, s = {}) => {
+}), R = (e, s = {}) => {
   const t = (r) => {
     let l = r;
     for (; l instanceof fe; )
@@ -269,7 +269,7 @@ const me = (e, s, t, o) => z({
     return l instanceof oe && (l = l._def.innerType), l;
   }, o = t(e);
   return {
-    ...(o instanceof K ? o._def.unknownKeys === "passthrough" : !1) ? s : {},
+    ...(o instanceof J ? o._def.unknownKeys === "passthrough" : !1) ? s : {},
     ...Object.fromEntries(
       Object.entries(o.shape).map(
         ([r, l]) => {
@@ -284,20 +284,20 @@ const me = (e, s, t, o) => z({
           }
           if (f instanceof ie && Array.isArray(a) && a.length) {
             const c = t(f._def.type);
-            if (c instanceof K)
+            if (c instanceof J)
               return [
                 r,
                 a.map(
-                  (h) => J(
+                  (h) => R(
                     c,
                     h && typeof h == "object" ? h : void 0
                   )
                 ) ?? n
               ];
           }
-          return f instanceof K ? [
+          return f instanceof J ? [
             r,
-            J(
+            R(
               f,
               a && typeof a == "object" ? a : n
             )
@@ -307,7 +307,7 @@ const me = (e, s, t, o) => z({
     )
   };
 }, he = (e, s, t, o) => {
-  const u = C(), r = C(), l = k(() => r.value === x.invalid), a = C(), f = async (m = a.value) => {
+  const u = B(), r = B(), l = k(() => r.value === x.invalid), a = B(), f = async (m = a.value) => {
     const v = await e.safeParseAsync(m);
     return v.success ? (u.value = void 0, r.value = x.valid, a.value = v.data, !0) : (u.value = v.error.format(), r.value = x.invalid, !1);
   }, n = async () => await f() ? (r.value = x.submitting, !0) : !1, { ignoreUpdates: c, stop: h } = ae(
@@ -342,39 +342,41 @@ const me = (e, s, t, o) => z({
     emits: ["invalid", "valid", "submit", "update:modelValue"],
     expose: ["submit", "validate", "errors", "status", "valid", "invalid"],
     setup(m, { emit: v }) {
-      return a.value = J(
+      return a.value = R(
         e,
-        E(m.modelValue)
-      ), I(
+        S(m.modelValue)
+      ), A(
         () => m.modelValue,
         (b) => {
           if (b) {
-            const y = ee(b) ? E(b) : b;
+            const y = ee(b) ? S(b) : b;
+            if (JSON.stringify(y) === JSON.stringify(S(a.value)))
+              return;
             a.value = typeof (y == null ? void 0 : y.clone) == "function" ? y.clone() : JSON.parse(JSON.stringify(y));
           }
         },
         { deep: !0 }
-      ), I(r, async (b) => {
-        var y, g, p, A, W;
+      ), A(r, async (b) => {
+        var y, g, p, E, W;
         if (b === x.invalid) {
-          const i = E(
+          const i = S(
             u.value
           );
           v("invalid", i), (y = t == null ? void 0 : t.onInvalid) == null || y.call(t, i);
           return;
         }
         if (b === x.valid) {
-          const i = E(a.value);
+          const i = S(a.value);
           v("valid", i), (g = t == null ? void 0 : t.onValid) == null || g.call(t, i), v("update:modelValue", i), (p = t == null ? void 0 : t.onUpdate) == null || p.call(t, i);
           return;
         }
         if (b === x.submitting) {
-          const i = E(a.value);
-          v("submit", i), (A = t == null ? void 0 : t.onSubmit) == null || A.call(t, i);
+          const i = S(a.value);
+          v("submit", i), (E = t == null ? void 0 : t.onSubmit) == null || E.call(t, i);
         }
         if (b === x.updated) {
           if ((u.value || t != null && t.continuosValidation || m.continuosValidation) && await f(), !a.value || !m.modelValue || JSON.stringify(a.value) !== JSON.stringify(m.modelValue)) {
-            const i = E(
+            const i = S(
               a.value
             );
             v("update:modelValue", i), (W = t == null ? void 0 : t.onUpdate) == null || W.call(t, i);
@@ -387,8 +389,8 @@ const me = (e, s, t, o) => z({
         validate: f,
         ignoreUpdates: c,
         stopUpdatesWatch: h,
-        errors: S(u),
-        status: S(r),
+        errors: I(u),
+        status: I(r),
         invalid: l
       }), {
         formData: a,
@@ -396,8 +398,8 @@ const me = (e, s, t, o) => z({
         validate: f,
         ignoreUpdates: c,
         stopUpdatesWatch: h,
-        errors: S(u),
-        status: S(r),
+        errors: I(u),
+        status: I(r),
         invalid: l
       };
     },
@@ -465,12 +467,12 @@ const me = (e, s, t, o) => z({
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
   setup(o, { emit: u }) {
-    const r = U(e), l = U(s, void 0), a = C(/* @__PURE__ */ new Set()), f = C(/* @__PURE__ */ new Map()), { name: n } = P(o);
+    const r = U(e), l = U(s, void 0), a = B(/* @__PURE__ */ new Set()), f = B(/* @__PURE__ */ new Map()), { name: n } = P(o);
     M(s, {
-      name: S(n),
+      name: I(n),
       errors: f,
       fields: a
-    }), I(
+    }), A(
       a,
       (h) => {
         l != null && l.fields && h.forEach((V) => {
@@ -478,7 +480,7 @@ const me = (e, s, t, o) => z({
         });
       },
       { deep: !0 }
-    ), I(
+    ), A(
       () => new Map(f.value),
       (h, V) => {
         l != null && l.errors && (Array.from(V.keys()).forEach((m) => {
@@ -491,7 +493,7 @@ const me = (e, s, t, o) => z({
       { deep: !0 }
     );
     const c = k(() => r != null && r.invalid.value ? f.value.size > 0 : !1);
-    return I(c, () => {
+    return A(c, () => {
       c.value ? u("invalid") : u("valid");
     }), {
       formData: r == null ? void 0 : r.formData,
@@ -550,23 +552,23 @@ const me = (e, s, t, o) => z({
               vvChildren: y,
               vvIf: g,
               vvElseIf: p,
-              vvType: A,
+              vvType: E,
               vvDefaultValue: W,
               vvShowValid: i,
-              vvContent: _,
-              ...$
+              vvContent: N,
+              ..._
             } = V;
             if (g !== void 0) {
-              if (typeof g == "string" ? a = !!L(
+              if (typeof g == "string" ? a = !!G(
                 Object(r.formData.value),
                 g
-              ) : typeof g == "function" ? a = B(g(r)) : a = B(g), !a)
+              ) : typeof g == "function" ? a = $(g(r)) : a = $(g), !a)
                 return c;
             } else if (p !== void 0 && a !== void 0) {
-              if (a || (typeof p == "string" ? a = !!L(
+              if (a || (typeof p == "string" ? a = !!G(
                 Object(r.formData.value),
                 p
-              ) : typeof p == "function" ? a = B(p(r)) : a = B(p), !a))
+              ) : typeof p == "function" ? a = $(p(r)) : a = $(p), !a))
                 return c;
             } else
               a = void 0;
@@ -579,18 +581,18 @@ const me = (e, s, t, o) => z({
                 {
                   name: v,
                   is: m,
-                  type: A,
+                  type: E,
                   defaultValue: W,
                   showValid: i,
-                  props: $
+                  props: _
                 },
-                b ?? Z ?? _
+                b ?? Z ?? N
               )
             ), c) : m ? (c.push(
               w(
                 m,
-                $,
-                b ?? Z ?? _
+                _,
+                b ?? Z ?? N
               )
             ), c) : (y && c.push(Z), c);
           }, []);
@@ -608,7 +610,7 @@ const me = (e, s, t, o) => z({
     }
   });
   return t;
-}, N = (e, s = {}) => {
+}, L = (e, s = {}) => {
   const t = Symbol(), o = Symbol(), u = Symbol(), r = be(
     t,
     o
@@ -647,23 +649,23 @@ const me = (e, s, t, o) => z({
   };
 }, T = Symbol(), xe = (e) => {
   let s = {};
-  return e.schema && (s = N(e.schema, e)), {
+  return e.schema && (s = L(e.schema, e)), {
     ...s,
     install(t, { global: o = !1 } = {}) {
       t.provide(T, e), o && (t.config.globalProperties.$vvForm = e, s != null && s.VvForm && t.component("VvForm", s.VvForm), s != null && s.VvFormWrapper && t.component("VvFormWrapper", s.VvFormWrapper), s != null && s.VvFormField && t.component("VvFormField", s.VvFormField), s != null && s.VvFormTemplate && t.component("VvFormTemplate", s.VvFormTemplate));
     }
   };
-}, ke = (e, s = {}) => te() ? N(
+}, ke = (e, s = {}) => te() ? L(
   e,
   {
     ...U(T, {}),
     ...s
   }
-) : N(e, s), we = (e, s = {}) => N(e, s);
+) : L(e, s), we = (e, s = {}) => L(e, s);
 export {
   d as FormFieldType,
   xe as createForm,
-  J as defaultObjectBySchema,
+  R as defaultObjectBySchema,
   we as formFactory,
   T as pluginInjectionKey,
   ke as useForm

package/dist/index.umd.js

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

package/package.json

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

package/src/VvForm.ts

@@ -111,6 +111,14 @@ export const defineForm = <Schema extends FormSchema>(
 						const original = isProxy(newValue)
 							? toRaw(newValue)
 							: newValue
+
+						if (
+							JSON.stringify(original) ===
+							JSON.stringify(toRaw(formData.value))
+						) {
+							return
+						}
+
 						formData.value =
 							typeof original?.clone === 'function'
 								? original.clone()