@volverjs/form-vue 0.0.10-beta.1 → 0.0.10-beta.2

package/dist/index.es.js

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