@volverjs/form-vue 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/index.es.js

@@ -1,328 +1,380 @@
-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 { 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 { defineComponent as M, inject as C, toRefs as j, computed as W, onMounted as F, watch as _, onBeforeUnmount as ue, unref as G, provide as P, readonly as U, resolveComponent as B, defineAsyncComponent as le, h as A, ref as R, toRaw as N, isProxy as se, withModifiers as Q, getCurrentInstance as ie } from "vue";
+import { watchIgnorable as fe, throttleFilter as oe } from "@vueuse/core";
+import { ZodObject as K, ZodDefault as de, ZodNullable as ve, ZodSchema as ce, ZodArray as me, ZodRecord as ye, ZodEffects as X, ZodOptional as Y, ZodError as he } from "zod";
+function q(e) {
   return Array.isArray(e);
 }
-function de(e) {
+function be(e) {
   return typeof e < "u";
 }
-function q(e) {
+function D(e) {
   return e === null;
 }
-function H(e) {
+function ee(e) {
   return typeof e == "object";
 }
-function Q(e) {
+function re(e) {
   return typeof e == "string";
 }
-function G(e) {
+function Z(e) {
   return typeof e > "u";
 }
-const ve = /^[0-9]+$/, ce = ["__proto__", "prototype", "constructor"];
-function L(e, l, t) {
-  const o = de(t) ? t : void 0;
-  if (!H(e) || !Q(l))
-    return o;
-  const u = Y(l);
-  if (u.length !== 0) {
-    for (const r of u) {
-      if (r === "*")
+const Ve = /^[0-9]+$/, ge = ["__proto__", "prototype", "constructor"];
+function z(e, l, r) {
+  const f = be(r) ? r : void 0;
+  if (!ee(e) || !re(l))
+    return f;
+  const a = ae(l);
+  if (a.length !== 0) {
+    for (const n of a) {
+      if (n === "*")
         continue;
-      const a = function(s) {
-        return s.map((f) => G(f) || q(f) ? f : R(f) ? a(f) : f[r]);
+      const i = function(u) {
+        return u.map((t) => Z(t) || D(t) ? t : q(t) ? i(t) : t[n]);
       };
-      if (R(e) && !ve.test(r) ? e = a(e) : e = e[r], G(e) || q(e))
+      if (q(e) && !Ve.test(n) ? e = i(e) : e = e[n], Z(e) || D(e))
         break;
     }
-    return G(e) ? o : e;
+    return Z(e) ? f : e;
   }
 }
-function X(e, l, t) {
-  if (!H(e) || !Q(l))
+function te(e, l, r) {
+  if (!ee(e) || !re(l))
     return;
-  const o = Y(l);
-  if (o.length === 0)
+  const f = ae(l);
+  if (f.length === 0)
     return;
-  const u = o.length;
-  for (let r = 0; r < u; r++) {
-    const a = o[r];
-    if (r === u - 1) {
-      e[a] = t;
+  const a = f.length;
+  for (let n = 0; n < a; n++) {
+    const i = f[n];
+    if (n === a - 1) {
+      e[i] = r;
       return;
     }
-    if (a === "*" && R(e)) {
-      const s = o.slice(r + 1).join(".");
-      for (const f of e)
-        X(f, s, t);
+    if (i === "*" && q(e)) {
+      const u = f.slice(n + 1).join(".");
+      for (const t of e)
+        te(t, u, r);
       return;
     }
-    G(e[a]) && (e[a] = {}), e = e[a];
+    Z(e[i]) && (e[i] = {}), e = e[i];
   }
 }
-function Y(e) {
-  const l = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
-  return l.some((t) => ce.indexOf(t) !== -1) ? [] : l;
+function ae(e) {
+  const l = e.split(/[.]|(?:\[(\d|\*)\])/).filter((r) => !!r);
+  return l.some((r) => ge.indexOf(r) !== -1) ? [] : l;
 }
-var d = /* @__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 = "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))(d || {}), x = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e.submitting = "submitting", e.updated = "updated", e.unknown = "unknown", e))(x || {});
-const me = (e, l, t, o) => z({
-  name: "VvFormField",
-  props: {
-    type: {
-      type: String,
-      validator: (u) => Object.values(d).includes(u),
-      default: d.custom
-    },
-    is: {
-      type: [Object, String],
-      default: void 0
-    },
-    name: {
-      type: [String, Number, Boolean, Symbol],
-      required: !0
-    },
+var d = /* @__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 = "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))(d || {}), k = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e.submitting = "submitting", e.reset = "reset", e.updated = "updated", e.unknown = "unknown", e))(k || {});
+function xe(e, l, r, f) {
+  return M({
+    name: "VvFormField",
     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(u, { slots: r, emit: a }) {
-    const s = k({
-      get() {
-        if (n != null && n.formData)
-          return L(
-            Object(n.formData.value),
-            String(u.name)
-          );
+      type: {
+        type: String,
+        validator: (a) => Object.values(d).includes(a),
+        default: d.custom
+      },
+      is: {
+        type: [Object, String],
+        default: void 0
+      },
+      name: {
+        type: [String, Number, Boolean, Symbol],
+        required: !0
+      },
+      props: {
+        type: [Object, Function],
+        default: () => ({})
       },
-      set(i) {
-        n != null && n.formData && (X(
-          Object(n.formData.value),
-          String(u.name),
-          i
-        ), a("update:modelValue", {
-          newValue: s.value,
-          formData: n == null ? void 0 : n.formData
-        }));
+      showValid: {
+        type: Boolean,
+        default: !1
+      },
+      defaultValue: {
+        type: [String, Number, Boolean, Array, Object],
+        default: void 0
+      },
+      lazyLoad: {
+        type: Boolean,
+        default: !1
+      },
+      readonly: {
+        type: Boolean,
+        default: void 0
       }
-    });
-    D(() => {
-      s.value === void 0 && u.defaultValue !== void 0 && (s.value = u.defaultValue);
-    }), j(() => {
-      y(), V();
-    });
-    const f = U(l, void 0);
-    f && f.fields.value.add(u.name);
-    const n = U(e), { props: c, name: b } = P(u), m = k(() => {
-      if (n != null && n.errors.value)
-        return L(n.errors.value, String(u.name));
-    }), v = k(() => {
-      var i;
-      return (i = m.value) == null ? void 0 : i._errors;
-    }), h = k(() => m.value !== void 0), y = I(h, () => {
-      h.value ? (a("invalid", v.value), f && f.errors.value.set(
-        u.name,
-        {
-          _errors: v.value
+    },
+    emits: [
+      "invalid",
+      "update:formData",
+      "update:modelValue",
+      "valid"
+    ],
+    expose: [
+      "component",
+      "errors",
+      "hasProps",
+      "invalid",
+      "invalidLabel",
+      "is",
+      "type"
+    ],
+    slots: Object,
+    setup(a, { slots: n, emit: i }) {
+      const u = C(l, void 0);
+      u && u.fields.value.add(a.name);
+      const t = C(e), { props: g, name: o } = j(a), v = W({
+        get() {
+          if (t != null && t.formData)
+            return z(
+              new Object(t.formData.value),
+              String(a.name)
+            );
+        },
+        set(s) {
+          t != null && t.formData && (te(
+            new Object(t.formData.value),
+            String(a.name),
+            s
+          ), i("update:modelValue", {
+            newValue: v.value,
+            formData: t == null ? void 0 : t.formData
+          }));
         }
-      )) : (a("valid", s.value), f && f.errors.value.delete(
-        u.name
-      ));
-    }), V = I(
-      () => n == null ? void 0 : n.formData,
-      () => {
-        a("update:formData", n == null ? void 0 : n.formData);
-      },
-      { deep: !0 }
-    ), g = (i) => {
-      s.value = i;
-    }, p = k(() => {
-      let i = c.value;
-      return typeof i == "function" && (i = i(n == null ? void 0 : n.formData)), Object.keys(i).reduce(
-        (_, $) => (_[$] = B(i[$]), _),
-        {}
-      );
-    }), A = k(() => ({
-      ...p.value,
-      name: p.value.name ?? u.name,
-      invalid: h.value,
-      valid: u.showValid ? !!(!h.value && s.value) : void 0,
-      type: ((i) => {
-        if ([
-          d.text,
-          d.number,
-          d.email,
-          d.password,
-          d.tel,
-          d.url,
-          d.search,
-          d.date,
-          d.time,
-          d.datetimeLocal,
-          d.month,
-          d.week,
-          d.color
-        ].includes(i))
-          return i;
-      })(u.type),
-      invalidLabel: v.value,
-      modelValue: s.value,
-      "onUpdate:modelValue": g
-    }));
-    return M(t, {
-      name: S(b),
-      errors: S(m)
-    }), { component: k(() => {
-      if (u.type === d.custom)
-        return {
-          render() {
-            var i;
-            return ((i = r.default) == null ? void 0 : i.call(r, {
-              modelValue: s.value,
-              onUpdate: g,
-              submit: n == null ? void 0 : n.submit,
-              validate: n == null ? void 0 : n.validate,
-              invalid: h.value,
-              invalidLabel: v.value,
-              formData: n == null ? void 0 : n.formData.value,
-              formErrors: n == null ? void 0 : n.errors.value,
-              errors: m.value
-            })) ?? r.defalut;
+      });
+      F(() => {
+        v.value === void 0 && a.defaultValue !== void 0 && (v.value = a.defaultValue);
+      });
+      const m = W(() => {
+        if (t != null && t.errors.value)
+          return z(t.errors.value, String(a.name));
+      }), c = W(() => {
+        var s;
+        return (s = m.value) == null ? void 0 : s._errors;
+      }), h = W(() => m.value !== void 0), S = _(h, () => {
+        h.value ? (i("invalid", c.value), u && u.errors.value.set(
+          a.name,
+          {
+            _errors: c.value
           }
-        };
-      if (!((o == null ? void 0 : o.lazyLoad) ?? u.lazyLoad)) {
-        let i;
-        switch (u.type) {
-          case d.select:
-            i = O("VvSelect");
-            break;
-          case d.checkbox:
-            i = O("VvCheckbox");
-            break;
-          case d.radio:
-            i = O("VvRadio");
-            break;
-          case d.textarea:
-            i = O("VvTextarea");
-            break;
-          case d.radioGroup:
-            i = O("VvRadioGroup");
-            break;
-          case d.checkboxGroup:
-            i = O("VvCheckboxGroup");
-            break;
-          case d.combobox:
-            i = O("VvCombobox");
-            break;
-          default:
-            i = O("VvInputText");
-        }
-        if (typeof i != "string")
-          return i;
-        console.warn(
-          `[form-vue warn]: ${i} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
+        )) : (i("valid", v.value), u && u.errors.value.delete(
+          a.name
+        ));
+      }), I = _(
+        () => t == null ? void 0 : t.formData,
+        () => {
+          i("update:formData", t == null ? void 0 : t.formData);
+        },
+        { deep: !0 }
+      );
+      ue(() => {
+        S(), I();
+      });
+      const O = (s) => {
+        v.value = s;
+      }, w = W(() => {
+        let s = g.value;
+        return typeof s == "function" && (s = s(t == null ? void 0 : t.formData)), Object.keys(s).reduce(
+          (E, p) => (E[p] = G(s[p]), E),
+          {}
         );
-      }
-      return F(async () => {
-        switch (o != null && o.sideEffects && await Promise.resolve(o.sideEffects(u.type)), u.type) {
-          case d.textarea:
-            return import("@volverjs/ui-vue/vv-textarea");
-          case d.radio:
-            return import("@volverjs/ui-vue/vv-radio");
-          case d.radioGroup:
-            return import("@volverjs/ui-vue/vv-radio-group");
-          case d.checkbox:
-            return import("@volverjs/ui-vue/vv-checkbox");
-          case d.checkboxGroup:
-            return import("@volverjs/ui-vue/vv-checkbox-group");
-          case d.select:
-            return import("@volverjs/ui-vue/vv-select");
-          case d.combobox:
-            return import("@volverjs/ui-vue/vv-combobox");
+      }), b = W(() => t != null && t.readonly.value ? !0 : w.value.readonly ?? a.readonly), V = W(() => ({
+        ...w.value,
+        name: w.value.name ?? a.name,
+        invalid: h.value,
+        valid: a.showValid ? !!(!h.value && v.value) : void 0,
+        type: ((s) => {
+          if ([
+            d.color,
+            d.date,
+            d.datetimeLocal,
+            d.email,
+            d.month,
+            d.number,
+            d.password,
+            d.search,
+            d.tel,
+            d.text,
+            d.time,
+            d.url,
+            d.week
+          ].includes(s))
+            return s;
+        })(a.type),
+        invalidLabel: c.value,
+        modelValue: v.value,
+        readonly: b.value,
+        "onUpdate:modelValue": O
+      }));
+      return P(r, {
+        name: U(o),
+        errors: U(m)
+      }), { component: W(() => {
+        if (a.type === d.custom)
+          return {
+            render() {
+              var s;
+              return ((s = n.default) == null ? void 0 : s.call(n, {
+                errors: m.value,
+                formData: t == null ? void 0 : t.formData.value,
+                formErrors: t == null ? void 0 : t.errors.value,
+                invalid: h.value,
+                invalidLabel: c.value,
+                modelValue: v.value,
+                onUpdate: O,
+                readonly: b.value,
+                submit: t == null ? void 0 : t.submit,
+                validate: t == null ? void 0 : t.validate
+              })) ?? n.default;
+            }
+          };
+        if (!((f == null ? void 0 : f.lazyLoad) ?? a.lazyLoad)) {
+          let s;
+          switch (a.type) {
+            case d.select:
+              s = B("VvSelect");
+              break;
+            case d.checkbox:
+              s = B("VvCheckbox");
+              break;
+            case d.radio:
+              s = B("VvRadio");
+              break;
+            case d.textarea:
+              s = B("VvTextarea");
+              break;
+            case d.radioGroup:
+              s = B("VvRadioGroup");
+              break;
+            case d.checkboxGroup:
+              s = B("VvCheckboxGroup");
+              break;
+            case d.combobox:
+              s = B("VvCombobox");
+              break;
+            default:
+              s = B("VvInputText");
+          }
+          if (typeof s != "string")
+            return s;
+          console.warn(
+            `[form-vue warn]: ${s} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
+          );
         }
-        return import("@volverjs/ui-vue/vv-input-text");
-      });
-    }), hasProps: A, invalid: h };
-  },
-  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, l = {}) => {
-  const t = (r) => {
-    let a = r;
-    for (; a instanceof fe; )
-      a = a.innerType();
-    return a instanceof oe && (a = a._def.innerType), a;
-  }, o = t(e);
+        return le(async () => {
+          switch (f != null && f.sideEffects && await Promise.resolve(f.sideEffects(a.type)), a.type) {
+            case d.textarea:
+              return import("@volverjs/ui-vue/vv-textarea");
+            case d.radio:
+              return import("@volverjs/ui-vue/vv-radio");
+            case d.radioGroup:
+              return import("@volverjs/ui-vue/vv-radio-group");
+            case d.checkbox:
+              return import("@volverjs/ui-vue/vv-checkbox");
+            case d.checkboxGroup:
+              return import("@volverjs/ui-vue/vv-checkbox-group");
+            case d.select:
+              return import("@volverjs/ui-vue/vv-select");
+            case d.combobox:
+              return import("@volverjs/ui-vue/vv-combobox");
+          }
+          return import("@volverjs/ui-vue/vv-input-text");
+        });
+      }), hasProps: V, invalid: h };
+    },
+    render() {
+      return this.is ? A(this.is, this.hasProps, this.$slots) : this.type === d.custom ? A(this.component, null, this.$slots) : A(this.component, this.hasProps, this.$slots);
+    }
+  });
+}
+function L(e, l = {}) {
+  const r = (i) => {
+    let u = i;
+    for (; u instanceof X; )
+      u = u.innerType();
+    return u instanceof Y && (u = u._def.innerType), u;
+  }, f = (i) => {
+    let u = i;
+    for (; u instanceof X; )
+      u = u.innerType();
+    return u instanceof Y;
+  }, a = r(e);
   return {
-    ...(o instanceof K ? o._def.unknownKeys === "passthrough" : !1) ? l : {},
+    ...(a instanceof K ? a._def.unknownKeys === "passthrough" : !1) ? l : {},
     ...Object.fromEntries(
-      Object.entries(o.shape).map(
-        ([r, a]) => {
-          const s = l[r];
-          let f = t(a), n;
-          if (f instanceof ue && (n = f._def.defaultValue(), f = f._def.innerType), s === null && f instanceof le)
-            return [r, s];
-          if (f instanceof se) {
-            const c = a.safeParse(s);
-            if (c.success)
-              return [r, c.data ?? n];
+      Object.entries(a.shape).map(
+        ([i, u]) => {
+          const t = l[i], g = f(u);
+          let o = r(u), v;
+          if (o instanceof de && (v = o._def.defaultValue(), o = o._def.innerType), t === null && o instanceof ve)
+            return [i, t];
+          if (t == null && g)
+            return [i, v];
+          if (o instanceof ce) {
+            const m = u.safeParse(t);
+            if (m.success)
+              return [i, m.data ?? v];
           }
-          if (f instanceof ie && Array.isArray(s) && s.length) {
-            const c = t(f._def.type);
-            if (c instanceof K)
+          if (o instanceof me && Array.isArray(t) && t.length) {
+            const m = r(o._def.type);
+            if (m instanceof K)
               return [
-                r,
-                s.map(
-                  (b) => J(
-                    c,
-                    b && typeof b == "object" ? b : void 0
+                i,
+                t.map(
+                  (c) => L(
+                    m,
+                    c && typeof c == "object" ? c : void 0
                   )
-                ) ?? n
+                )
               ];
           }
-          return f instanceof K ? [
-            r,
-            J(
-              f,
-              s && typeof s == "object" ? s : n
+          if (o instanceof ye && t) {
+            const m = r(o._def.valueType);
+            if (m instanceof K)
+              return [i, Object.keys(t).reduce((c, h) => (c[h] = L(m, t[h]), c), {})];
+          }
+          return o instanceof K ? [
+            i,
+            L(
+              o,
+              t && typeof t == "object" ? t : v
             )
-          ] : [r, n];
+          ] : [i, v];
         }
       )
     )
   };
-}, he = (e, l, t, o) => {
-  const u = C(), r = C(), a = C(), s = 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);
-  }, f = async () => await s() ? (r.value = x.submitting, !0) : !1, { ignoreUpdates: n, stop: c } = ae(
-    a,
+}
+function Oe(e, l, r, f) {
+  const a = R(), n = R(), i = W(() => n.value === k.invalid), u = R(), t = R(!1);
+  let g;
+  const o = async (b = u.value, V) => {
+    if (g = V, t.value)
+      return !0;
+    const y = await e.safeParseAsync(b);
+    if (!y.success) {
+      if (n.value = k.invalid, !V)
+        return a.value = y.error.format(), !1;
+      const s = y.error.issues.filter((E) => V.has(E.path.join(".")));
+      return s.length ? (a.value = new he(s).format(), !1) : (a.value = void 0, !0);
+    }
+    return a.value = void 0, n.value = k.valid, u.value = y.data, !0;
+  }, v = () => {
+    a.value = void 0, n.value = void 0, g = void 0;
+  }, m = () => {
+    u.value = L(e), v(), n.value = k.reset;
+  }, c = async () => t.value || !await o() ? !1 : (n.value = k.submitting, !0), { ignoreUpdates: h, stop: S } = fe(
+    u,
     () => {
-      r.value = x.updated;
+      n.value = k.updated;
     },
     {
       deep: !0,
-      eventFilter: ne((t == null ? void 0 : t.updateThrottle) ?? 500)
+      eventFilter: oe((r == null ? void 0 : r.updateThrottle) ?? 500)
     }
-  ), b = z({
+  ), I = U(a), O = U(n), w = M({
     name: "VvForm",
     props: {
-      continuosValidation: {
+      continuousValidation: {
         type: Boolean,
         default: !1
       },
@@ -330,6 +382,10 @@ const me = (e, l, t, o) => z({
         type: Object,
         default: () => ({})
       },
+      readonly: {
+        type: Boolean,
+        default: (r == null ? void 0 : r.readonly) ?? !1
+      },
       tag: {
         type: String,
         default: "form"
@@ -339,331 +395,426 @@ const me = (e, l, t, o) => z({
         default: void 0
       }
     },
-    emits: ["invalid", "valid", "submit", "update:modelValue"],
-    expose: ["submit", "validate", "errors", "status", "valid", "invalid"],
-    setup(m, { emit: v }) {
-      a.value = J(
+    emits: [
+      "invalid",
+      "submit",
+      "update:modelValue",
+      "update:readonly",
+      "valid",
+      "reset"
+    ],
+    expose: [
+      "errors",
+      "invalid",
+      "readonly",
+      "status",
+      "submit",
+      "tag",
+      "template",
+      "valid",
+      "validate",
+      "clear",
+      "reset"
+    ],
+    slots: Object,
+    setup(b, { emit: V }) {
+      return u.value = L(
         e,
-        E(m.modelValue)
-      ), I(
-        () => m.modelValue,
+        N(b.modelValue)
+      ), _(
+        () => b.modelValue,
         (y) => {
           if (y) {
-            const V = ee(y) ? E(y) : y;
-            a.value = typeof (V == null ? void 0 : V.clone) == "function" ? V.clone() : JSON.parse(JSON.stringify(V));
+            const s = se(y) ? N(y) : y;
+            if (JSON.stringify(s) === JSON.stringify(N(u.value)))
+              return;
+            u.value = typeof (s == null ? void 0 : s.clone) == "function" ? s.clone() : JSON.parse(JSON.stringify(s));
           }
         },
         { deep: !0 }
-      ), I(r, async (y) => {
-        var V, g, p, A, W;
-        if (y === x.invalid) {
-          const i = E(
-            u.value
+      ), _(n, async (y) => {
+        var s, E, p, $, T, H;
+        if (y === k.invalid) {
+          const x = N(a.value);
+          V("invalid", x), (s = r == null ? void 0 : r.onInvalid) == null || s.call(
+            r,
+            x
           );
-          v("invalid", i), (V = t == null ? void 0 : t.onInvalid) == null || V.call(t, i);
           return;
         }
-        if (y === x.valid) {
-          const i = E(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);
+        if (y === k.valid) {
+          const x = N(u.value);
+          V("valid", x), (E = r == null ? void 0 : r.onValid) == null || E.call(r, x), V("update:modelValue", x), (p = r == null ? void 0 : r.onUpdate) == null || p.call(r, x);
           return;
         }
-        if (y === x.submitting) {
-          const i = E(a.value);
-          v("submit", i), (A = t == null ? void 0 : t.onSubmit) == null || A.call(t, i);
+        if (y === k.submitting) {
+          const x = N(u.value);
+          V("submit", x), ($ = r == null ? void 0 : r.onSubmit) == null || $.call(r, x);
+          return;
         }
-        if (y === x.updated) {
-          if ((u.value || t != null && t.continuosValidation || m.continuosValidation) && await s(), !a.value || !m.modelValue || JSON.stringify(a.value) !== JSON.stringify(m.modelValue)) {
-            const i = E(
-              a.value
-            );
-            v("update:modelValue", i), (W = t == null ? void 0 : t.onUpdate) == null || W.call(t, i);
+        if (y === k.reset) {
+          const x = N(u.value);
+          V("reset", x), (T = r == null ? void 0 : r.onReset) == null || T.call(r, x);
+          return;
+        }
+        if (y === k.updated) {
+          if ((a.value || r != null && r.continuousValidation || b.continuousValidation) && await o(void 0, g), !u.value || !b.modelValue || JSON.stringify(u.value) !== JSON.stringify(b.modelValue)) {
+            const x = N(u.value);
+            V("update:modelValue", x), (H = r == null ? void 0 : r.onUpdate) == null || H.call(r, x);
           }
-          r.value === x.updated && (r.value = x.unknown);
+          n.value === k.updated && (n.value = k.unknown);
         }
-      });
-      const h = k(() => r.value === x.invalid);
-      return M(l, {
-        formData: a,
-        submit: f,
-        validate: s,
-        ignoreUpdates: n,
-        stopUpdatesWatch: c,
-        errors: S(u),
-        status: S(r),
-        invalid: h
+      }), F(() => {
+        t.value = b.readonly;
+      }), _(
+        () => b.readonly,
+        (y) => {
+          t.value = y;
+        }
+      ), _(t, (y) => {
+        y !== b.readonly && V("update:readonly", t.value);
+      }), P(l, {
+        clear: v,
+        errors: I,
+        formData: u,
+        ignoreUpdates: h,
+        invalid: i,
+        readonly: t,
+        reset: m,
+        status: O,
+        stopUpdatesWatch: S,
+        submit: c,
+        validate: o
       }), {
-        formData: a,
-        submit: f,
-        validate: s,
-        ignoreUpdates: n,
-        stopUpdatesWatch: c,
-        errors: S(u),
-        status: S(r),
-        invalid: h
+        clear: v,
+        errors: I,
+        formData: u,
+        ignoreUpdates: h,
+        invalid: i,
+        isReadonly: t,
+        reset: m,
+        status: O,
+        stopUpdatesWatch: S,
+        submit: c,
+        validate: o
       };
     },
     render() {
-      const m = () => {
-        var v, h;
-        return ((h = (v = this.$slots) == null ? void 0 : v.default) == null ? void 0 : h.call(v, {
-          formData: this.formData,
-          submit: this.submit,
-          validate: this.validate,
-          ignoreUpdates: this.ignoreUpdates,
-          stopUpdatesWatch: this.stopUpdatesWatch,
-          errors: this.errors,
-          status: this.status,
-          invalid: this.invalid
+      const b = () => {
+        var V, y;
+        return ((y = (V = this.$slots) == null ? void 0 : V.default) == null ? void 0 : y.call(V, {
+          clear: v,
+          errors: I,
+          formData: u,
+          ignoreUpdates: h,
+          invalid: i,
+          readonly: t,
+          reset: m,
+          status: O,
+          stopUpdatesWatch: S,
+          submit: c,
+          validate: o
         })) ?? this.$slots.default;
       };
-      return w(
+      return A(
         this.tag,
         {
-          onSubmit: re(this.submit, ["prevent"])
+          onSubmit: Q(this.submit, ["prevent"]),
+          onReset: Q(this.reset, ["prevent"])
         },
-        (this.template ?? (t == null ? void 0 : t.template)) && o ? [
-          w(
-            o,
+        (this.template ?? (r == null ? void 0 : r.template)) && f ? [
+          A(
+            f,
             {
-              schema: this.template ?? (t == null ? void 0 : t.template)
+              schema: this.template ?? (r == null ? void 0 : r.template)
             },
             {
-              default: m
+              default: b
             }
           )
         ] : {
-          default: m
+          default: b
         }
       );
     }
   });
   return {
-    errors: u,
-    status: r,
-    formData: a,
-    validate: s,
-    submit: f,
-    ignoreUpdates: n,
-    stopUpdatesWatch: c,
-    /**
-     * An hack to add types to the default slot
-     */
-    VvForm: b
+    clear: v,
+    errors: a,
+    formData: u,
+    ignoreUpdates: h,
+    invalid: i,
+    readonly: t,
+    reset: m,
+    status: n,
+    stopUpdatesWatch: S,
+    submit: c,
+    validate: o,
+    VvForm: w
   };
-}, be = (e, l) => z({
-  name: "VvFormWrapper",
-  props: {
-    name: {
-      type: String,
-      required: !0
-    },
-    tag: {
-      type: String,
-      default: void 0
-    }
-  },
-  emits: ["invalid", "valid"],
-  expose: ["fields", "invalid"],
-  setup(o, { emit: u }) {
-    const r = U(e), a = U(l, void 0), s = C(/* @__PURE__ */ new Set()), f = C(/* @__PURE__ */ new Map()), { name: n } = P(o);
-    M(l, {
-      name: S(n),
-      errors: f,
-      fields: s
-    }), I(
-      s,
-      (b) => {
-        a != null && a.fields && b.forEach((m) => {
-          a == null || a.fields.value.add(m);
-        });
-      },
-      { deep: !0 }
-    ), I(
-      () => new Map(f.value),
-      (b, m) => {
-        a != null && a.errors && (Array.from(m.keys()).forEach((v) => {
-          a.errors.value.delete(v);
-        }), Array.from(b.keys()).forEach((v) => {
-          const h = b.get(v);
-          h && a.errors.value.set(v, h);
-        }));
+}
+function we(e, l) {
+  return M({
+    name: "VvFormWrapper",
+    props: {
+      name: {
+        type: String,
+        required: !0
       },
-      { deep: !0 }
-    );
-    const c = k(() => r != null && r.invalid.value ? f.value.size > 0 : !1);
-    return I(c, () => {
-      c.value ? u("invalid") : u("valid");
-    }), {
-      formData: r == null ? void 0 : r.formData,
-      errors: r == null ? void 0 : r.errors,
-      submit: r == null ? void 0 : r.submit,
-      validate: r == null ? void 0 : r.validate,
-      invalid: c,
-      fields: s,
-      fieldsErrors: f
-    };
-  },
-  render() {
-    var o, u;
-    return this.tag ? w(this.tag, null, {
-      default: () => {
-        var r, a;
-        return ((a = (r = this.$slots).default) == null ? void 0 : a.call(r, {
-          invalid: this.invalid,
+      tag: {
+        type: String,
+        default: void 0
+      }
+    },
+    emits: ["invalid", "valid"],
+    expose: [
+      "clear",
+      "errors",
+      "fields",
+      "fieldsErrors",
+      "formData",
+      "invalid",
+      "reset",
+      "submit",
+      "tag",
+      "validate",
+      "validateWrapper"
+    ],
+    slots: Object,
+    setup(r, { emit: f }) {
+      const a = C(e), n = C(l, void 0), i = R(/* @__PURE__ */ new Set()), u = R(/* @__PURE__ */ new Map()), { name: t } = j(r);
+      P(l, {
+        name: U(t),
+        errors: u,
+        fields: i
+      }), _(
+        i,
+        (v) => {
+          n != null && n.fields && v.forEach((m) => {
+            n == null || n.fields.value.add(m);
+          });
+        },
+        { deep: !0 }
+      ), _(
+        () => new Map(u.value),
+        (v, m) => {
+          n != null && n.errors && (Array.from(m.keys()).forEach((c) => {
+            n.errors.value.delete(c);
+          }), Array.from(v.keys()).forEach((c) => {
+            const h = v.get(c);
+            h && n.errors.value.set(c, h);
+          }));
+        },
+        { deep: !0 }
+      );
+      const g = W(() => a != null && a.invalid.value ? u.value.size > 0 : !1);
+      _(g, () => {
+        g.value ? f("invalid") : f("valid");
+      });
+      const o = () => (a == null ? void 0 : a.validate(void 0, i.value)) ?? Promise.resolve(!0);
+      return {
+        clear: a == null ? void 0 : a.clear,
+        errors: a == null ? void 0 : a.errors,
+        fields: i,
+        fieldsErrors: u,
+        formData: a == null ? void 0 : a.formData,
+        invalid: g,
+        reset: a == null ? void 0 : a.reset,
+        submit: a == null ? void 0 : a.submit,
+        validate: a == null ? void 0 : a.validate,
+        validateWrapper: o
+      };
+    },
+    render() {
+      const r = () => {
+        var f, a;
+        return (a = (f = this.$slots).default) == null ? void 0 : a.call(f, {
+          clear: this.clear,
+          errors: this.errors,
+          fieldsErrors: this.fieldsErrors,
           formData: this.formData,
+          invalid: this.invalid,
+          reset: this.reset,
           submit: this.submit,
           validate: this.validate,
-          errors: this.errors,
-          fieldsErrors: this.fieldsErrors
-        })) ?? this.$slots.defalut;
-      }
-    }) : ((u = (o = this.$slots).default) == null ? void 0 : u.call(o, {
-      invalid: this.invalid,
-      formData: this.formData,
-      submit: this.submit,
-      validate: this.validate,
-      errors: this.errors,
-      fieldsErrors: this.fieldsErrors
-    })) ?? this.$slots.defalut;
-  }
-}), ye = (e, l) => {
-  const t = z({
+          validateWrapper: this.validateWrapper
+        });
+      };
+      return this.tag ? A(this.tag, null, {
+        default: r
+      }) : r();
+    }
+  });
+}
+function pe(e, l) {
+  const r = M({
     name: "VvFormTemplate",
     props: {
       schema: {
         type: [Array, Function],
         required: !0
+      },
+      scope: {
+        type: Object,
+        default: () => ({})
       }
     },
-    setup(o, { slots: u }) {
-      const r = U(e);
-      if (r != null && r.formData)
+    slots: Object,
+    setup(f, { slots: a }) {
+      const n = C(e);
+      if (n != null && n.formData)
         return () => {
-          var n;
-          const a = typeof o.schema == "function" ? o.schema(r) : o.schema;
-          let s;
-          const f = a.reduce((c, b) => {
-            const m = typeof b == "function" ? b(r) : b, {
-              vvIs: v,
+          var g;
+          const i = typeof f.schema == "function" ? f.schema(
+            n,
+            f.scope
+          ) : f.schema;
+          let u;
+          const t = i.reduce((o, v) => {
+            const m = typeof v == "function" ? v(n, f.scope) : v, {
+              vvIs: c,
               vvName: h,
-              vvSlots: y,
-              vvChildren: V,
-              vvIf: g,
-              vvElseIf: p,
-              vvType: A,
-              vvDefaultValue: W,
-              vvShowValid: i,
-              vvContent: _,
-              ...$
+              vvSlots: S,
+              vvChildren: I,
+              vvIf: O,
+              vvElseIf: w,
+              vvType: b,
+              vvDefaultValue: V,
+              vvShowValid: y,
+              vvContent: s,
+              ...E
             } = m;
-            if (g !== void 0) {
-              if (typeof g == "string" ? s = !!L(
-                Object(r.formData.value),
-                g
-              ) : typeof g == "function" ? s = B(g(r)) : s = B(g), !s)
-                return c;
-            } else if (p !== void 0 && s !== void 0) {
-              if (s || (typeof p == "string" ? s = !!L(
-                Object(r.formData.value),
-                p
-              ) : typeof p == "function" ? s = B(p(r)) : s = B(p), !s))
-                return c;
+            if (O !== void 0) {
+              if (typeof O == "string" ? u = !!z(
+                new Object(n.formData.value),
+                O
+              ) : typeof O == "function" ? u = G(O(n)) : u = G(O), !u)
+                return o;
+            } else if (w !== void 0 && u !== void 0) {
+              if (u || (typeof w == "string" ? u = !!z(
+                new Object(n.formData.value),
+                w
+              ) : typeof w == "function" ? u = G(w(n)) : u = G(w), !u))
+                return o;
             } else
-              s = void 0;
-            const Z = V ? w(t, {
-              schema: V
-            }) : void 0;
-            return h ? (c.push(
-              w(
+              u = void 0;
+            let p;
+            return I && (typeof c == "string" ? p = A(r, {
+              schema: I
+            }) : p = {
+              default: ($) => A(r, {
+                schema: I,
+                scope: $
+              })
+            }), h ? (o.push(
+              A(
                 l,
                 {
                   name: h,
-                  is: v,
-                  type: A,
-                  defaultValue: W,
-                  showValid: i,
-                  props: $
+                  is: c,
+                  type: b,
+                  defaultValue: V,
+                  showValid: y,
+                  props: E
                 },
-                y ?? Z ?? _
+                S ?? p ?? s
               )
-            ), c) : v ? (c.push(
-              w(
-                v,
-                $,
-                y ?? Z ?? _
+            ), o) : c ? (o.push(
+              A(
+                c,
+                E,
+                S ?? p ?? s
               )
-            ), c) : (V && c.push(Z), c);
+            ), o) : (p && ("default" in p ? o.push(p.default(f.scope)) : o.push(p)), o);
           }, []);
-          return f.push(
-            (n = u == null ? void 0 : u.default) == null ? void 0 : n.call(u, {
-              formData: r == null ? void 0 : r.formData.value,
-              submit: r == null ? void 0 : r.submit,
-              validate: r == null ? void 0 : r.validate,
-              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 t.push(
+            (g = a == null ? void 0 : a.default) == null ? void 0 : g.call(a, {
+              errors: n == null ? void 0 : n.errors.value,
+              formData: n == null ? void 0 : n.formData.value,
+              invalid: n == null ? void 0 : n.invalid.value,
+              status: n == null ? void 0 : n.status.value,
+              submit: n == null ? void 0 : n.submit,
+              validate: n == null ? void 0 : n.validate,
+              clear: n == null ? void 0 : n.clear,
+              reset: n == null ? void 0 : n.reset
             })
-          ), f;
+          ), t;
         };
     }
   });
-  return t;
-}, N = (e, l = {}) => {
-  const t = Symbol(), o = Symbol(), u = Symbol(), r = be(
-    t,
-    o
-  ), a = me(
-    t,
-    o,
-    u,
+  return r;
+}
+function J(e, l = {}) {
+  const r = Symbol("formInjectionKey"), f = Symbol("formWrapperInjectionKey"), a = Symbol("formFieldInjectionKey"), n = we(
+    r,
+    f
+  ), i = xe(
+    r,
+    f,
+    a,
     l
-  ), s = ye(t, a), {
-    VvForm: f,
-    errors: n,
-    status: c,
-    formData: b,
-    validate: m,
-    submit: v,
-    ignoreUpdates: h,
-    stopUpdatesWatch: y
-  } = he(e, t, l, s);
+  ), u = pe(r, i), {
+    clear: t,
+    errors: g,
+    formData: o,
+    ignoreUpdates: v,
+    invalid: m,
+    readonly: c,
+    reset: h,
+    status: S,
+    stopUpdatesWatch: I,
+    submit: O,
+    validate: w,
+    VvForm: b
+  } = Oe(e, r, l, u);
   return {
-    VvForm: f,
-    VvFormWrapper: r,
-    VvFormField: a,
-    VvFormTemplate: s,
-    formInjectionKey: t,
-    formWrapperInjectionKey: o,
-    formFieldInjectionKey: u,
-    errors: n,
-    status: c,
-    formData: b,
-    validate: m,
-    submit: v,
-    ignoreUpdates: h,
-    stopUpdatesWatch: y
+    clear: t,
+    errors: g,
+    formData: o,
+    formFieldInjectionKey: a,
+    formInjectionKey: r,
+    formWrapperInjectionKey: f,
+    ignoreUpdates: v,
+    invalid: m,
+    readonly: c,
+    reset: h,
+    status: S,
+    stopUpdatesWatch: I,
+    submit: O,
+    validate: w,
+    VvForm: b,
+    VvFormField: i,
+    VvFormTemplate: u,
+    VvFormWrapper: n
   };
-}, T = Symbol(), xe = (e) => {
+}
+const ne = Symbol("pluginInjectionKey");
+function Ee(e) {
   let l = {};
-  return e.schema && (l = N(e.schema, e)), {
+  return e.schema && (l = J(e.schema, e)), {
     ...l,
-    install(t, { global: o = !1 } = {}) {
-      t.provide(T, e), o && (t.config.globalProperties.$vvForm = e, l != null && l.VvForm && t.component("VvForm", l.VvForm), l != null && l.VvFormWrapper && t.component("VvFormWrapper", l.VvFormWrapper), l != null && l.VvFormField && t.component("VvFormField", l.VvFormField), l != null && l.VvFormTemplate && t.component("VvFormTemplate", l.VvFormTemplate));
+    install(r, { global: f = !1 } = {}) {
+      r.provide(ne, e), f && (r.config.globalProperties.$vvForm = e, l != null && l.VvForm && r.component("VvForm", l.VvForm), l != null && l.VvFormWrapper && r.component("VvFormWrapper", l.VvFormWrapper), l != null && l.VvFormField && r.component("VvFormField", l.VvFormField), l != null && l.VvFormTemplate && r.component("VvFormTemplate", l.VvFormTemplate));
     }
   };
-}, ke = (e, l = {}) => te() ? N(
-  e,
-  {
-    ...U(T, {}),
-    ...l
-  }
-) : N(e, l), we = (e, l = {}) => N(e, l);
+}
+function We(e, l = {}) {
+  return ie() ? J(
+    e,
+    {
+      ...C(ne, {}),
+      ...l
+    }
+  ) : J(e, l);
+}
+function Ae(e, l = {}) {
+  return J(e, l);
+}
 export {
   d as FormFieldType,
-  xe as createForm,
-  J as defaultObjectBySchema,
-  we as formFactory,
-  T as pluginInjectionKey,
-  ke as useForm
+  Ee as createForm,
+  L as defaultObjectBySchema,
+  Ae as formFactory,
+  ne as pluginInjectionKey,
+  We as useForm
 };