@volverjs/form-vue 0.0.10-beta.10 → 0.0.10-beta.12

package/README.md

@@ -171,7 +171,7 @@ The **default settings** are **inherited** from the plugin (if it's installed).
 `useForm()` can create a form also outside a Vue 3 Component, plugin settings are **not inherited**.
 
 ```ts
-import { formFactory } from '@volverjs/form-vue'
+import { useForm } from '@volverjs/form-vue'
 import { z } from 'zod'
 
 const schema = z.object({
@@ -187,7 +187,7 @@ const {
   formData,
   status,
   errors
-} = formFactory(schema, {
+} = useForm(schema, {
   lazyLoad: true
 })
 

package/dist/VvForm.d.ts

@@ -70,6 +70,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
             }, {
                 formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
                 submit: () => boolean;
+                validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
                 errors: Readonly<Ref<DeepReadonly<z.ZodFormattedError<z.TypeOf<Schema>>> | undefined>>;
                 status: Readonly<Ref<FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -118,6 +119,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
         } & import("vue").ShallowUnwrapRef<{
             formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
             submit: () => boolean;
+            validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
             errors: Readonly<Ref<DeepReadonly<z.ZodFormattedError<z.TypeOf<Schema>>> | undefined>>;
             status: Readonly<Ref<FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -146,6 +148,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
     }, {
         formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;
         submit: () => boolean;
+        validate: (value?: Partial<z.TypeOf<Schema> | undefined>) => boolean;
         errors: Readonly<Ref<DeepReadonly<z.ZodFormattedError<z.TypeOf<Schema>>> | undefined>>;
         status: Readonly<Ref<FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -158,6 +161,7 @@ export declare const defineForm: <Schema extends FormSchema>(schema: Schema, pro
             default: (_: {
                 formData: unknown extends Partial<z.TypeOf<Schema>> | undefined ? undefined : Partial<z.TypeOf<Schema>> | undefined;
                 submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
                 status: Ref<DeepReadonly<`${FormStatus}` | undefined>>;
                 invalid: Ref<DeepReadonly<boolean>>;

package/dist/VvFormTemplate.d.ts

@@ -12,6 +12,7 @@ export declare const defineFormTemplate: <Schema extends FormSchema>(formProvide
         default: (_: {
             formData: unknown extends Partial<TypeOf<Schema>> | undefined ? undefined : Partial<TypeOf<Schema>> | undefined;
             submit: () => boolean;
+            validate: () => boolean;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
             status: Ref<DeepReadonly<`${FormStatus}` | undefined>>;
             invalid: Ref<DeepReadonly<boolean>>;

package/dist/VvFormWrapper.d.ts

@@ -48,6 +48,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
         }, {
             formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema_1, string>>>> | undefined;
+            submit: (() => boolean) | undefined;
+            validate: (() => boolean) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: Ref<Set<string>>;
             fieldsErrors: Ref<Map<string, Record<string, {
@@ -90,6 +92,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
     } & import("vue").ShallowUnwrapRef<{
         formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema_1, string>>>> | undefined;
+        submit: (() => boolean) | undefined;
+        validate: (() => boolean) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: Ref<Set<string>>;
         fieldsErrors: Ref<Map<string, Record<string, {
@@ -114,6 +118,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
 }, {
     formData: Ref<Partial<TypeOf<Schema>> | undefined> | undefined;
     errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema_1, string>>>> | undefined;
+    submit: (() => boolean) | undefined;
+    validate: (() => boolean) | undefined;
     invalid: import("vue").ComputedRef<boolean>;
     fields: Ref<Set<string>>;
     fieldsErrors: Ref<Map<string, Record<string, {
@@ -126,6 +132,8 @@ export declare const defineFormWrapper: <Schema extends FormSchema>(formProvideK
         default: (_: {
             invalid: boolean;
             formData: unknown extends Partial<TypeOf<Schema>> | undefined ? undefined : Partial<TypeOf<Schema>> | undefined;
+            submit: () => boolean;
+            validate: () => boolean;
             errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema, string>>>>;
             fieldsErrors: Map<string, Record<string, {
                 _errors: string[];

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
                 submit: () => boolean;
+                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
                 status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -116,6 +117,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
             submit: () => boolean;
+            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
             status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -144,6 +146,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
         submit: () => boolean;
+        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
         status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -156,6 +159,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
                 submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -209,6 +213,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
                 errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+                submit: (() => boolean) | undefined;
+                validate: (() => boolean) | undefined;
                 invalid: import("vue").ComputedRef<boolean>;
                 fields: import("vue").Ref<Set<string>>;
                 fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -251,6 +257,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+            submit: (() => boolean) | undefined;
+            validate: (() => boolean) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: import("vue").Ref<Set<string>>;
             fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -275,6 +283,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+        submit: (() => boolean) | undefined;
+        validate: (() => boolean) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -287,6 +297,8 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             default: (_: {
                 invalid: boolean;
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
+                submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 fieldsErrors: Map<string, Record<string, {
                     _errors: string[];
@@ -392,6 +404,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
                 submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -477,6 +490,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
                 submit: () => boolean;
+                validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
                 status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
                 invalid: import("vue").ComputedRef<boolean>;
@@ -525,6 +539,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
             submit: () => boolean;
+            validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
             errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
             status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
             invalid: import("vue").ComputedRef<boolean>;
@@ -553,6 +568,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
         submit: () => boolean;
+        validate: (value?: Partial<import("zod").TypeOf<Schema> | undefined>) => boolean;
         errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").ZodFormattedError<import("zod").TypeOf<Schema>>> | undefined>>;
         status: Readonly<import("vue").Ref<import("./enums").FormStatus | undefined>>;
         invalid: import("vue").ComputedRef<boolean>;
@@ -565,6 +581,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
                 submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;
@@ -618,6 +635,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             }, {
                 formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
                 errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+                submit: (() => boolean) | undefined;
+                validate: (() => boolean) | undefined;
                 invalid: import("vue").ComputedRef<boolean>;
                 fields: import("vue").Ref<Set<string>>;
                 fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -660,6 +679,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         } & import("vue").ShallowUnwrapRef<{
             formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
             errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+            submit: (() => boolean) | undefined;
+            validate: (() => boolean) | undefined;
             invalid: import("vue").ComputedRef<boolean>;
             fields: import("vue").Ref<Set<string>>;
             fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -684,6 +705,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
     }, {
         formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema>> | undefined> | undefined;
         errors: Readonly<import("vue").Ref<DeepReadonly<import("zod").inferFormattedError<Schema_1, string>>>> | undefined;
+        submit: (() => boolean) | undefined;
+        validate: (() => boolean) | undefined;
         invalid: import("vue").ComputedRef<boolean>;
         fields: import("vue").Ref<Set<string>>;
         fieldsErrors: import("vue").Ref<Map<string, Record<string, {
@@ -696,6 +719,8 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             default: (_: {
                 invalid: boolean;
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
+                submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 fieldsErrors: Map<string, Record<string, {
                     _errors: string[];
@@ -801,6 +826,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             default: (_: {
                 formData: unknown extends Partial<import("zod").TypeOf<Schema>> | undefined ? undefined : Partial<import("zod").TypeOf<Schema>> | undefined;
                 submit: () => boolean;
+                validate: () => boolean;
                 errors: Readonly<import("vue").Ref<import("vue").DeepReadonly<import("zod").inferFormattedError<Schema, string>>>>;
                 status: import("vue").Ref<import("vue").DeepReadonly<"invalid" | "valid" | undefined>>;
                 invalid: import("vue").Ref<import("vue").DeepReadonly<boolean>>;

package/dist/index.es.js

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

package/dist/index.umd.js

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

package/dist/types.d.ts

@@ -28,6 +28,7 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	formData: Ref<Partial<z.infer<Schema>> | undefined>
 	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 	submit: () => boolean
+	validate: () => boolean
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
 }

package/package.json

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

package/src/VvForm.ts

@@ -48,16 +48,14 @@ export const defineForm = <Schema extends FormSchema>(
 			},
 		},
 		emits: ['invalid', 'valid', 'submit', 'update:modelValue'],
-		expose: ['submit', 'errors', 'status'],
+		expose: ['submit', 'validate', 'errors', 'status', 'valid', 'invalid'],
 		setup(props, { emit }) {
 			formData.value = defaultObjectBySchema(
 				schema,
 				toRaw(props.modelValue),
 			)
 
-			const keepValidation =
-				options?.continuosValidation ?? props.continuosValidation
-
+			// clone modelValue and update formData
 			watch(
 				() => props.modelValue,
 				(newValue) => {
@@ -73,12 +71,16 @@ export const defineForm = <Schema extends FormSchema>(
 				},
 				{ deep: true },
 			)
-			// v-model
+
+			// emit update:modelValue on formData change
 			watchThrottled(
 				formData,
 				(newValue) => {
-					if (errors.value || keepValidation) {
-						parseModelValue()
+					if (
+						(errors.value || options?.continuosValidation) ??
+						props.continuosValidation
+					) {
+						validate()
 					}
 					if (
 						!newValue ||
@@ -95,7 +97,8 @@ export const defineForm = <Schema extends FormSchema>(
 				},
 			)
 
-			const parseModelValue = (value = formData.value) => {
+			// validate formData with safeParse
+			const validate = (value = formData.value) => {
 				const parseResult = schema.safeParse(value)
 				if (!parseResult.success) {
 					errors.value =
@@ -114,9 +117,9 @@ export const defineForm = <Schema extends FormSchema>(
 				return true
 			}
 
-			// submit
+			// emit submit event if form is valid
 			const submit = () => {
-				if (!parseModelValue()) {
+				if (!validate()) {
 					return false
 				}
 				emit('submit', formData.value)
@@ -125,10 +128,11 @@ export const defineForm = <Schema extends FormSchema>(
 
 			const invalid = computed(() => status.value === FormStatus.invalid)
 
-			// provide
+			// provide data to children
 			provide(provideKey, {
 				formData,
 				submit,
+				validate,
 				errors: readonly(errors),
 				status: readonly(status),
 				invalid,
@@ -137,6 +141,7 @@ export const defineForm = <Schema extends FormSchema>(
 			return {
 				formData,
 				submit,
+				validate,
 				errors: readonly(errors),
 				status: readonly(status),
 				invalid,
@@ -153,6 +158,7 @@ export const defineForm = <Schema extends FormSchema>(
 						this.$slots?.default?.({
 							formData: this.formData,
 							submit: this.submit,
+							validate: this.validate,
 							errors: this.errors,
 							status: this.status,
 							invalid: this.invalid,
@@ -178,6 +184,7 @@ export const defineForm = <Schema extends FormSchema>(
 							? undefined
 							: Partial<TypeOf<Schema>> | undefined
 						submit: () => boolean
+						validate: () => boolean
 						errors: Readonly<
 							Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 						>

package/src/VvFormField.ts

@@ -225,6 +225,8 @@ export const defineFormField = <Schema extends FormSchema>(
 								slots.default?.({
 									modelValue: modelValue.value,
 									onUpdate,
+									submit: injectedFormData?.submit,
+									validate: injectedFormData?.validate,
 									invalid: invalid.value,
 									invalidLabel: invalidLabel.value,
 									formData: injectedFormData?.formData.value,

package/src/VvFormTemplate.ts

@@ -144,6 +144,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						templateSlots?.default?.({
 							formData: injectedFormData?.formData.value,
 							submit: injectedFormData?.submit,
+							validate: injectedFormData?.validate,
 							errors: injectedFormData?.errors.value,
 							status: injectedFormData?.status.value,
 							invalid: injectedFormData?.invalid.value,
@@ -166,6 +167,7 @@ export const defineFormTemplate = <Schema extends FormSchema>(
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
 					submit: () => boolean
+					validate: () => boolean
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 					>

package/src/VvFormWrapper.ts

@@ -103,6 +103,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 			return {
 				formData: injectedFormData?.formData,
 				errors: injectedFormData?.errors,
+				submit: injectedFormData?.submit,
+				validate: injectedFormData?.validate,
 				invalid,
 				fields,
 				fieldsErrors,
@@ -115,6 +117,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 						this.$slots.default?.({
 							invalid: this.invalid,
 							formData: this.formData,
+							submit: this.submit,
+							validate: this.validate,
 							errors: this.errors,
 							fieldsErrors: this.fieldsErrors,
 						}) ?? this.$slots.defalut,
@@ -124,6 +128,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 				this.$slots.default?.({
 					invalid: this.invalid,
 					formData: this.formData,
+					submit: this.submit,
+					validate: this.validate,
 					errors: this.errors,
 					fieldsErrors: this.fieldsErrors,
 				}) ?? this.$slots.defalut
@@ -143,6 +149,8 @@ export const defineFormWrapper = <Schema extends FormSchema>(
 						| undefined
 						? undefined
 						: Partial<TypeOf<Schema>> | undefined
+					submit: () => boolean
+					validate: () => boolean
 					errors: Readonly<
 						Ref<DeepReadonly<z.inferFormattedError<Schema>>>
 					>

package/src/types.d.ts

@@ -28,6 +28,7 @@ export type InjectedFormData<Schema extends FormSchema> = {
 	formData: Ref<Partial<z.infer<Schema>> | undefined>
 	errors: Readonly<Ref<DeepReadonly<z.inferFormattedError<Schema>>>>
 	submit: () => boolean
+	validate: () => boolean
 	status: Readonly<Ref<FormStatus | undefined>>
 	invalid: Readonly<Ref<boolean>>
 }