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

package/README.md

@@ -33,11 +33,11 @@ npm install @volverjs/form-vue --save
 
 ## Usage
 
-`@volverjs/form-vue` allow you to create a Vue 3 form with [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) components from a [Zod Object](https://zod.dev/?id=objects) schema. It provides three functions: `createForm`, `useForm` and `formFactory`.
+`@volverjs/form-vue` allow you to create a Vue 3 form with [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) components from a [Zod Object](https://zod.dev/?id=objects) schema. It provides two functions: `createForm()` and `useForm()`.
 
 ## Plugin
 
-`createForm` defines globally three components `VvForm`, `VvFormWrapper`, and `VvFormField` through a [Vue 3 Plugin](https://vuejs.org/guide/reusability/plugins.html).
+`createForm()` defines globally three components `VvForm`, `VvFormWrapper`, and `VvFormField` through a [Vue 3 Plugin](https://vuejs.org/guide/reusability/plugins.html).
 
 ```typescript
 import { createApp } from 'vue'
@@ -62,7 +62,7 @@ app.use(form)
 app.mount('#app')
 ```
 
-By default [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) components must be defined globally but can be lazy loaded with `lazyLoad` option. If the schema is omitted, the plugin only share the options to the forms created with the [composable](https://github.com/volverjs/form-vue/#composable).
+If the schema is omitted, the plugin only share the options to the forms created with the [composable](https://github.com/volverjs/form-vue/#composable).
 
 ### VvForm
 
@@ -137,8 +137,8 @@ To activate **continuos validation** use the `continuosValidation` option or pro
 
 ## Composable
 
-`useForm` can be used to create a form programmatically inside a Vue 3 Component.
-The **default settings** are **inherited** from the plugin (if it was defined).
+`useForm()` can be used to create a form programmatically inside a Vue 3 Component.
+The **default settings** are **inherited** from the plugin (if it's installed).
 
 ```vue
 <script lang="ts" setup>
@@ -166,6 +166,42 @@ The **default settings** are **inherited** from the plugin (if it was defined).
 </template>
 ```
 
+### Outside a Vue 3 Component
+
+`useForm()` can create a form also outside a Vue 3 Component, plugin settings are **not inherited**.
+
+```ts
+import { formFactory } from '@volverjs/form-vue'
+import { z } from 'zod'
+
+const schema = z.object({
+  name: z.string(),
+  surname: z.string()
+})
+
+const {
+  VvForm,
+  VvFormWrapper,
+  VvFormField,
+  VvFormTemplate,
+  formData,
+  status,
+  errors
+} = formFactory(schema, {
+  lazyLoad: true
+})
+
+export default {
+  VvForm,
+  VvFormWrapper,
+  VvFormField,
+  VvFormTemplate,
+  formData,
+  status,
+  errors
+}
+```
+
 ### VvFormWrapper
 
 `VvFormWrapper` gives you the validation status of a part of your form.
@@ -243,19 +279,20 @@ It automatically bind the form data through the `name` attribute. For nested obj
 ```
 
 To render a [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) input component, use the `type` attribute.
+By default UI components must be installed globally, they can be lazy-loaded with `lazyLoad` option or prop.
 
 ```vue
 <template>
   <VvForm>
-    <VvFormField type="text" name="username" label="Username" />
-    <VvFormField type="password" name="password" label="Password" />
+    <VvFormField type="text" name="username" label="Username" lazy-load />
+    <VvFormField type="password" name="password" label="Password" lazy-load />
   </VvForm>
 </template>
 ```
 
 Check the [`VvFormField`](./docs/VvFormField.md) documentation to learn more about form fields.
 
-## Form Template
+## VvFormTemplate
 
 Forms can also be created using a template. A template is an **array of objects** that describes the form fields. All properties that are **not listed** below are passed to the component **as props**.
 
@@ -329,15 +366,10 @@ Forms can also be created using a template. A template is an **array of objects*
 Template items, by default, are rendered as a `VvFormField` component but this can be changed using the `vvIs` property. The `vvIs` property can be a string or a component.
 
 `vvName` refers to the name of the field in the schema and can be a nested property using **dot notation**.
-
 `vvType` refers to the type of the field and can be any of the supported types.
-
 `vvDefaultValue` can be used to set default values for the form item.
-
 `vvShowValid` can be used to show the valid state of the form item.
-
 `vvSlots` can be used to pass a slots to the template item.
-
 `vvChildren` is an array of template items which will be wrapped in the parent item.
 
 Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties.
@@ -412,7 +444,7 @@ Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties
 
 `vvElseIf` can be used multiple times. `vvElseIf: true` is like an `else` statement and will be rendered if all previous `vvIf` and `vvElseIf` conditions are false.
 
-`vvIf` and `vvElseIf` can be a string or a function. If it is a string it will be evaluated as a **property** of the form data. If it is a function it will be called with the **form context** as the **first argument**.
+`vvIf` and `vvElseIf` can be a string or a function. If it is a string it will be evaluated as a **property** of the form data. If it is a function it will be called with the **form context** as the **first argument** and must return a boolean.
 
 ```ts
 {
@@ -423,7 +455,8 @@ Conditional rendering can be achieved using the `vvIf` and `vvElseIf` properties
 }
 ```
 
-The template schema and all template items can be a function. The function will be called with the form context as the first argument.
+Also the template schema and all template items can be a function.
+The function will be called with the **form context** as the **first argument**.
 
 ```ts
 const templateSchema = (ctx) => [
@@ -450,46 +483,6 @@ const templateSchema = [
 ]
 ```
 
-## Outside a Vue 3 Component
-
-`formFactory` can be used to create a form outside a Vue 3 Component.
-No settings are inherited.
-
-```ts
-import { formFactory } from '@volverjs/form-vue'
-import { z } from 'zod'
-
-const schema = z.object({
-  name: z.string(),
-  surname: z.string()
-})
-
-const {
-  VvForm,
-  VvFormWrapper,
-  VvFormField,
-  VvFormTemplate,
-  formData,
-  status,
-  errors
-} = formFactory(schema, {
-  // lazyLoad: boolean - default false
-  // updateThrottle: number - default 500
-  // continuosValidation: boolean - default false
-  // sideEffects?: (data: any) => void
-})
-
-export default {
-  VvForm,
-  VvFormWrapper,
-  VvFormField,
-  VvFormTemplate,
-  formData,
-  status,
-  errors
-}
-```
-
 ## Default Object by Zod Object Schema
 
 `defaultObjectBySchema` creates an object by a [Zod Object Schema](https://zod.dev/?id=objects).

package/dist/VvForm.d.ts

@@ -1,11 +1,8 @@
 import { type InjectionKey, type DeepReadonly, type Ref } from 'vue';
 import type { z, TypeOf } from 'zod';
-import type { FormSchema, InjectedFormData } from './types';
+import type { FormComponentOptions, FormSchema, InjectedFormData } from './types';
 import { FormStatus } from './enums';
-export declare const defineForm: <Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: {
-    updateThrottle?: number;
-    continuosValidation?: boolean;
-}) => {
+export declare const defineForm: <Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions) => {
     errors: Ref<z.ZodFormattedError<z.TypeOf<Schema>> | undefined>;
     status: Ref<FormStatus | undefined>;
     formData: Ref<Partial<z.TypeOf<Schema> | undefined>>;

package/dist/VvFormField.d.ts

@@ -1,8 +1,8 @@
 import { type Component, type InjectionKey, type PropType, type Ref, type ConcreteComponent } from 'vue';
 import type { z } from 'zod';
 import { FormFieldType } from './enums';
-import type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, Path, FormSchema } from './types';
-export declare const defineFormField: <Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>, options?: FormComposableOptions) => import("vue").DefineComponent<{
+import type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormFieldComponentOptions, Path, FormSchema } from './types';
+export declare const defineFormField: <Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>, options?: FormFieldComponentOptions) => import("vue").DefineComponent<{
     type: {
         type: PropType<"number" | "text" | "email" | "password" | "tel" | "url" | "search" | "date" | "time" | "datetimeLocal" | "month" | "week" | "color" | "select" | "checkbox" | "radio" | "textarea" | "radioGroup" | "checkboxGroup" | "combobox" | "custom">;
         validator: (value: FormFieldType) => boolean;
@@ -28,6 +28,10 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    lazyLoad: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     component: import("vue").ComputedRef<{
         new (...args: any[]): any;
@@ -63,6 +67,10 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    lazyLoad: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onInvalid?: ((...args: any[]) => any) | undefined;
     onValid?: ((...args: any[]) => any) | undefined;
@@ -80,4 +88,5 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
     is: Component;
     showValid: boolean;
     defaultValue: string | number | boolean | unknown[] | Record<string, any>;
+    lazyLoad: boolean;
 }>;

package/dist/index.d.ts

@@ -4,7 +4,9 @@ import { defineForm } from './VvForm';
 import { defineFormWrapper } from './VvFormWrapper';
 import { defineFormTemplate } from './VvFormTemplate';
 import type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormTemplateItem, Path, PathValue, FormSchema } from './types';
-export declare const formFactory: <Schema extends FormSchema>(schema: Schema, options?: FormComposableOptions) => {
+export declare const pluginInjectionKey: InjectionKey<FormPluginOptions>;
+export declare const createForm: (options: FormPluginOptions) => Plugin & Partial<ReturnType<typeof useForm>>;
+export declare const useForm: <Schema extends FormSchema>(schema: Schema, options?: FormComposableOptions) => {
     VvForm: {
         new (...args: any[]): {
             $: import("vue").ComponentInternalInstance;
@@ -318,6 +320,10 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
+        lazyLoad: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         component: import("vue").ComputedRef<{
             new (...args: any[]): any;
@@ -353,6 +359,10 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
+        lazyLoad: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onInvalid?: ((...args: any[]) => any) | undefined;
         onValid?: ((...args: any[]) => any) | undefined;
@@ -370,6 +380,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
         is: import("vue").Component;
         showValid: boolean;
         defaultValue: string | number | boolean | unknown[] | Record<string, any>;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;
@@ -394,9 +405,17 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
     status: import("vue").Ref<import("./enums").FormStatus | undefined>;
     formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
 };
-export declare const pluginInjectionKey: InjectionKey<FormPluginOptions>;
-export declare const createForm: (options: FormPluginOptions) => Plugin & Partial<ReturnType<typeof useForm>>;
-export declare const useForm: <Schema extends FormSchema>(schema: Schema, options?: FormComposableOptions) => {
+export { FormFieldType } from './enums';
+export { defaultObjectBySchema } from './utils';
+type FormComponent = ReturnType<typeof defineForm>;
+type FormWrapperComponent = ReturnType<typeof defineFormWrapper>;
+type FormFieldComponent = ReturnType<typeof defineFormField>;
+type FormTemplateComponent = ReturnType<typeof defineFormTemplate>;
+export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormComponent, FormWrapperComponent, FormFieldComponent, FormTemplateComponent, FormTemplateItem, Path, PathValue, };
+/**
+ * @deprecated Use `useForm()` instead
+ */
+export declare const formFactory: <Schema extends FormSchema>(schema: Schema, options?: FormComposableOptions) => {
     VvForm: {
         new (...args: any[]): {
             $: import("vue").ComponentInternalInstance;
@@ -710,6 +729,10 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
+        lazyLoad: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }, {
         component: import("vue").ComputedRef<{
             new (...args: any[]): any;
@@ -745,6 +768,10 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
+        lazyLoad: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & {
         onInvalid?: ((...args: any[]) => any) | undefined;
         onValid?: ((...args: any[]) => any) | undefined;
@@ -762,6 +789,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
         is: import("vue").Component;
         showValid: boolean;
         defaultValue: string | number | boolean | unknown[] | Record<string, any>;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;
@@ -786,10 +814,3 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
     status: import("vue").Ref<import("./enums").FormStatus | undefined>;
     formData: import("vue").Ref<Partial<import("zod").TypeOf<Schema> | undefined>>;
 };
-export { FormFieldType } from './enums';
-export { defaultObjectBySchema } from './utils';
-type FormComponent = ReturnType<typeof defineForm>;
-type FormWrapperComponent = ReturnType<typeof defineFormWrapper>;
-type FormFieldComponent = ReturnType<typeof defineFormField>;
-type FormTemplateComponent = ReturnType<typeof defineFormTemplate>;
-export type { InjectedFormData, InjectedFormWrapperData, InjectedFormFieldData, FormComposableOptions, FormPluginOptions, FormComponent, FormWrapperComponent, FormFieldComponent, FormTemplateComponent, FormTemplateItem, Path, PathValue, };

package/dist/index.es.js

@@ -1,71 +1,71 @@
-import { defineComponent as W, computed as V, onMounted as X, onBeforeUnmount as Y, inject as O, toRefs as Z, watch as w, provide as _, readonly as k, resolveComponent as g, defineAsyncComponent as R, h as x, ref as E, isProxy as T, toRaw as j, withModifiers as F, unref as $ } from "vue";
-import { watchThrottled as ee } from "@vueuse/core";
-import { ZodObject as z, ZodDefault as re, ZodNullable as te, ZodSchema as ne, ZodEffects as ae } from "zod";
-function L(e) {
+import { defineComponent as G, computed as V, onMounted as X, onBeforeUnmount as Y, inject as O, toRefs as J, watch as w, provide as z, readonly as k, resolveComponent as g, defineAsyncComponent as R, h as x, ref as E, isProxy as T, toRaw as j, withModifiers as F, unref as C, getCurrentInstance as ee } from "vue";
+import { watchThrottled as re } from "@vueuse/core";
+import { ZodObject as M, ZodDefault as te, ZodNullable as ne, ZodSchema as ae, ZodEffects as oe } from "zod";
+function _(e) {
   return Array.isArray(e);
 }
-function oe(e) {
+function se(e) {
   return typeof e < "u";
 }
-function M(e) {
+function Z(e) {
   return e === null;
 }
-function J(e) {
+function U(e) {
   return typeof e == "object";
 }
-function U(e) {
+function q(e) {
   return typeof e == "string";
 }
-function C(e) {
+function $(e) {
   return typeof e > "u";
 }
-const se = /^[0-9]+$/, ue = ["__proto__", "prototype", "constructor"];
-function G(e, o, i) {
-  const l = oe(i) ? i : void 0;
-  if (!J(e) || !U(o))
-    return l;
-  const a = P(o);
+const ue = /^[0-9]+$/, le = ["__proto__", "prototype", "constructor"];
+function N(e, n, i) {
+  const s = se(i) ? i : void 0;
+  if (!U(e) || !q(n))
+    return s;
+  const a = D(n);
   if (a.length !== 0) {
     for (const r of a) {
       if (r === "*")
         continue;
-      const u = function(n) {
-        return n.map((s) => C(s) || M(s) ? s : L(s) ? u(s) : s[r]);
+      const l = function(o) {
+        return o.map((u) => $(u) || Z(u) ? u : _(u) ? l(u) : u[r]);
       };
-      if (L(e) && !se.test(r) ? e = u(e) : e = e[r], C(e) || M(e))
+      if (_(e) && !ue.test(r) ? e = l(e) : e = e[r], $(e) || Z(e))
         break;
     }
-    return C(e) ? l : e;
+    return $(e) ? s : e;
   }
 }
-function q(e, o, i) {
-  if (!J(e) || !U(o))
+function P(e, n, i) {
+  if (!U(e) || !q(n))
     return;
-  const l = P(o);
-  if (l.length === 0)
+  const s = D(n);
+  if (s.length === 0)
     return;
-  const a = l.length;
+  const a = s.length;
   for (let r = 0; r < a; r++) {
-    const u = l[r];
+    const l = s[r];
     if (r === a - 1) {
-      e[u] = i;
+      e[l] = i;
       return;
     }
-    if (u === "*" && L(e)) {
-      const n = l.slice(r + 1).join(".");
-      for (const s of e)
-        q(s, n, i);
+    if (l === "*" && _(e)) {
+      const o = s.slice(r + 1).join(".");
+      for (const u of e)
+        P(u, o, i);
       return;
     }
-    C(e[u]) && (e[u] = {}), e = e[u];
+    $(e[l]) && (e[l] = {}), e = e[l];
   }
 }
-function P(e) {
-  const o = e.split(/[.]|(?:\[(\d|\*)\])/).filter((i) => !!i);
-  return o.some((i) => ue.indexOf(i) !== -1) ? [] : o;
+function D(e) {
+  const n = e.split(/[.]|(?:\[(\d|\*)\])/).filter((i) => !!i);
+  return n.some((i) => le.indexOf(i) !== -1) ? [] : n;
 }
-var f = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(f || {}), N = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(N || {});
-const ie = (e, o, i, l = {}) => W({
+var f = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(f || {}), L = /* @__PURE__ */ ((e) => (e.invalid = "invalid", e.valid = "valid", e))(L || {});
+const ie = (e, n, i, s) => G({
   name: "FieldComponent",
   props: {
     type: {
@@ -92,65 +92,69 @@ const ie = (e, o, i, l = {}) => W({
     defaultValue: {
       type: [String, Number, Boolean, Array, Object],
       default: void 0
+    },
+    lazyLoad: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["invalid", "valid", "update:formData", "update:modelValue"],
   expose: ["invalid", "invalidLabel", "errors"],
-  setup(a, { slots: r, emit: u }) {
-    const n = V({
+  setup(a, { slots: r, emit: l }) {
+    const o = V({
       get() {
         if (t != null && t.formData)
-          return G(
+          return N(
             Object(t.formData.value),
             String(a.name)
           );
       },
       set(c) {
-        t != null && t.formData && (q(
+        t != null && t.formData && (P(
           Object(t.formData.value),
           String(a.name),
           c
-        ), u("update:modelValue", {
-          newValue: n.value,
+        ), l("update:modelValue", {
+          newValue: o.value,
           formData: t == null ? void 0 : t.formData
         }));
       }
     });
     X(() => {
-      n.value === void 0 && a.defaultValue !== void 0 && (n.value = a.defaultValue);
+      o.value === void 0 && a.defaultValue !== void 0 && (o.value = a.defaultValue);
     }), Y(() => {
       S(), y();
     });
-    const s = O(o, void 0);
-    s && s.fields.value.add(a.name);
-    const t = O(e), { props: m, name: p } = Z(a), h = V(() => {
+    const u = O(n, void 0);
+    u && u.fields.value.add(a.name);
+    const t = O(e), { props: m, name: p } = J(a), h = V(() => {
       if (t != null && t.errors.value)
-        return G(t.errors.value, String(a.name));
+        return N(t.errors.value, String(a.name));
     }), d = V(() => {
       var c;
       return (c = h.value) == null ? void 0 : c._errors;
     }), v = V(() => h.value !== void 0), S = w(v, () => {
-      v.value ? (u("invalid", d.value), s && s.errors.value.set(
+      v.value ? (l("invalid", d.value), u && u.errors.value.set(
         a.name,
         {
           _errors: d.value
         }
-      )) : (u("valid", n.value), s && s.errors.value.delete(
+      )) : (l("valid", o.value), u && u.errors.value.delete(
         a.name
       ));
     }), y = w(
       () => t == null ? void 0 : t.formData,
       () => {
-        u("update:formData", t == null ? void 0 : t.formData);
+        l("update:formData", t == null ? void 0 : t.formData);
       },
       { deep: !0 }
     ), b = (c) => {
-      n.value = c;
-    }, I = V(() => typeof m.value == "function" ? m.value(t == null ? void 0 : t.formData) : m.value), A = V(() => ({
+      o.value = c;
+    }, I = V(() => typeof m.value == "function" ? m.value(t == null ? void 0 : t.formData) : m.value), W = V(() => ({
       ...I.value,
       name: I.value.name ?? a.name,
       invalid: v.value,
-      valid: a.showValid ? !!(!v.value && n.value) : void 0,
+      valid: a.showValid ? !!(!v.value && o.value) : void 0,
       type: ((c) => {
         if ([
           f.text,
@@ -170,10 +174,10 @@ const ie = (e, o, i, l = {}) => W({
           return c;
       })(a.type),
       invalidLabel: d.value,
-      modelValue: n.value,
+      modelValue: o.value,
       "onUpdate:modelValue": b
     }));
-    return _(i, {
+    return z(i, {
       name: k(p),
       errors: k(h)
     }), { component: V(() => {
@@ -182,7 +186,7 @@ const ie = (e, o, i, l = {}) => W({
           render() {
             var c;
             return ((c = r.default) == null ? void 0 : c.call(r, {
-              modelValue: n.value,
+              modelValue: o.value,
               onUpdate: b,
               invalid: v.value,
               invalidLabel: d.value,
@@ -192,7 +196,7 @@ const ie = (e, o, i, l = {}) => W({
             })) ?? r.defalut;
           }
         };
-      if (!l.lazyLoad) {
+      if (!((s == null ? void 0 : s.lazyLoad) ?? a.lazyLoad)) {
         let c;
         switch (a.type) {
           case f.select:
@@ -226,7 +230,7 @@ const ie = (e, o, i, l = {}) => W({
         );
       }
       return R(async () => {
-        switch (l.sideEffects && await Promise.resolve(l.sideEffects(a.type)), a.type) {
+        switch (s != null && s.sideEffects && await Promise.resolve(s.sideEffects(a.type)), a.type) {
           case f.textarea:
             return import("@volverjs/ui-vue/vv-textarea");
           case f.radio:
@@ -242,43 +246,43 @@ const ie = (e, o, i, l = {}) => W({
         }
         return import("@volverjs/ui-vue/vv-input-text");
       });
-    }), hasProps: A, invalid: v };
+    }), hasProps: W, invalid: v };
   },
   render() {
     return this.is ? x(this.is, this.hasProps, this.$slots) : this.type === f.custom ? x(this.component, null, this.$slots) : x(this.component, this.hasProps, this.$slots);
   }
-}), D = (e, o = {}) => {
+}), H = (e, n = {}) => {
   const i = (r) => {
-    let u = r;
-    for (; u instanceof ae; )
-      u = u.innerType();
-    return u;
-  }, l = i(e);
+    let l = r;
+    for (; l instanceof oe; )
+      l = l.innerType();
+    return l;
+  }, s = i(e);
   return {
-    ...(l instanceof z ? l._def.unknownKeys === "passthrough" : !1) ? o : {},
+    ...(s instanceof M ? s._def.unknownKeys === "passthrough" : !1) ? n : {},
     ...Object.fromEntries(
-      Object.entries(l.shape).map(([r, u]) => {
-        const n = o[r], s = i(u);
+      Object.entries(s.shape).map(([r, l]) => {
+        const o = n[r], u = i(l);
         let t;
-        if (s instanceof re && (t = s._def.defaultValue()), n === null && s instanceof te)
-          return [r, n];
-        if (s instanceof ne) {
-          const m = s.safeParse(o[r]);
+        if (u instanceof te && (t = u._def.defaultValue()), o === null && u instanceof ne)
+          return [r, o];
+        if (u instanceof ae) {
+          const m = u.safeParse(n[r]);
           if (m.success)
             return [r, m.data ?? t];
         }
-        return s instanceof z ? [
+        return u instanceof M ? [
           r,
-          D(
-            s,
-            n && typeof n == "object" ? n : {}
+          H(
+            u,
+            o && typeof o == "object" ? o : {}
           )
         ] : [r, t];
       })
     )
   };
-}, le = (e, o, i) => {
-  const l = E(), a = E(), r = E(), u = W({
+}, fe = (e, n, i) => {
+  const s = E(), a = E(), r = E(), l = G({
     name: "FormComponent",
     props: {
       modelValue: {
@@ -296,11 +300,11 @@ const ie = (e, o, i, l = {}) => W({
     },
     emits: ["invalid", "valid", "submit", "update:modelValue"],
     expose: ["submit", "errors", "status"],
-    setup(n, { emit: s }) {
-      r.value = D(e, n.modelValue);
-      const t = (i == null ? void 0 : i.continuosValidation) ?? n.continuosValidation;
+    setup(o, { emit: u }) {
+      r.value = H(e, o.modelValue);
+      const t = (i == null ? void 0 : i.continuosValidation) ?? o.continuosValidation;
       w(
-        () => n.modelValue,
+        () => o.modelValue,
         (d) => {
           if (d) {
             const v = T(d) ? j(d) : d;
@@ -308,30 +312,30 @@ const ie = (e, o, i, l = {}) => W({
           }
         },
         { deep: !0 }
-      ), ee(
+      ), re(
         r,
         (d) => {
-          (l.value || t) && m(), (!d || !n.modelValue || JSON.stringify(d) !== JSON.stringify(n.modelValue)) && s("update:modelValue", d);
+          (s.value || t) && m(), (!d || !o.modelValue || JSON.stringify(d) !== JSON.stringify(o.modelValue)) && u("update:modelValue", d);
         },
         {
           deep: !0,
-          throttle: (i == null ? void 0 : i.updateThrottle) ?? n.updateThrottle
+          throttle: (i == null ? void 0 : i.updateThrottle) ?? o.updateThrottle
         }
       );
       const m = (d = r.value) => {
         const v = e.safeParse(d);
-        return v.success ? (l.value = void 0, a.value = N.valid, r.value = v.data, s("update:modelValue", r.value), s("valid", v.data), !0) : (l.value = v.error.format(), a.value = N.invalid, s("invalid", l.value), !1);
-      }, p = () => m() ? (s("submit", r.value), !0) : !1, h = V(() => a.value === N.invalid);
-      return _(o, {
+        return v.success ? (s.value = void 0, a.value = L.valid, r.value = v.data, u("update:modelValue", r.value), u("valid", v.data), !0) : (s.value = v.error.format(), a.value = L.invalid, u("invalid", s.value), !1);
+      }, p = () => m() ? (u("submit", r.value), !0) : !1, h = V(() => a.value === L.invalid);
+      return z(n, {
         formData: r,
         submit: p,
-        errors: k(l),
+        errors: k(s),
         status: k(a),
         invalid: h
       }), {
         formData: r,
         submit: p,
-        errors: k(l),
+        errors: k(s),
         status: k(a),
         invalid: h
       };
@@ -344,8 +348,8 @@ const ie = (e, o, i, l = {}) => W({
         },
         {
           default: () => {
-            var n, s;
-            return ((s = (n = this.$slots) == null ? void 0 : n.default) == null ? void 0 : s.call(n, {
+            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,
@@ -358,15 +362,15 @@ const ie = (e, o, i, l = {}) => W({
     }
   });
   return {
-    errors: l,
+    errors: s,
     status: a,
     formData: r,
     /**
      * An hack to add types to the default slot
      */
-    VvForm: u
+    VvForm: l
   };
-}, fe = (e, o) => W({
+}, ce = (e, n) => G({
   name: "WrapperComponent",
   props: {
     name: {
@@ -380,79 +384,79 @@ const ie = (e, o, i, l = {}) => W({
   },
   emits: ["invalid", "valid"],
   expose: ["fields", "invalid"],
-  setup(l, { emit: a }) {
-    const r = O(e), u = O(o, void 0), n = E(/* @__PURE__ */ new Set()), s = E(/* @__PURE__ */ new Map()), { name: t } = Z(l);
-    _(o, {
+  setup(s, { emit: a }) {
+    const r = O(e), l = O(n, void 0), o = E(/* @__PURE__ */ new Set()), u = E(/* @__PURE__ */ new Map()), { name: t } = J(s);
+    z(n, {
       name: k(t),
-      errors: s,
-      fields: n
+      errors: u,
+      fields: o
     }), w(
-      n,
+      o,
       (p) => {
-        u != null && u.fields && p.forEach((h) => {
-          u == null || u.fields.value.add(h);
+        l != null && l.fields && p.forEach((h) => {
+          l == null || l.fields.value.add(h);
         });
       },
       { deep: !0 }
     ), w(
-      () => new Map(s.value),
+      () => new Map(u.value),
       (p, h) => {
-        u != null && u.errors && (Array.from(h.keys()).forEach((d) => {
-          u.errors.value.delete(d);
+        l != null && l.errors && (Array.from(h.keys()).forEach((d) => {
+          l.errors.value.delete(d);
         }), Array.from(p.keys()).forEach((d) => {
           const v = p.get(d);
-          v && u.errors.value.set(d, v);
+          v && l.errors.value.set(d, v);
         }));
       },
       { deep: !0 }
     );
-    const m = V(() => r != null && r.invalid.value ? s.value.size > 0 : !1);
+    const m = V(() => r != null && r.invalid.value ? u.value.size > 0 : !1);
     return w(m, () => {
       m.value ? a("invalid") : a("valid");
     }), {
       formData: r == null ? void 0 : r.formData,
       errors: r == null ? void 0 : r.errors,
       invalid: m,
-      fields: n,
-      fieldsErrors: s
+      fields: o,
+      fieldsErrors: u
     };
   },
   render() {
-    var l, a;
+    var s, a;
     return this.tag ? x(this.tag, null, {
       default: () => {
-        var r, u;
-        return ((u = (r = this.$slots).default) == null ? void 0 : u.call(r, {
+        var r, l;
+        return ((l = (r = this.$slots).default) == null ? void 0 : l.call(r, {
           invalid: this.invalid,
           formData: this.formData,
           errors: this.errors,
           fieldsErrors: this.fieldsErrors
         })) ?? this.$slots.defalut;
       }
-    }) : ((a = (l = this.$slots).default) == null ? void 0 : a.call(l, {
+    }) : ((a = (s = this.$slots).default) == null ? void 0 : a.call(s, {
       invalid: this.invalid,
       formData: this.formData,
       errors: this.errors,
       fieldsErrors: this.fieldsErrors
     })) ?? this.$slots.defalut;
   }
-}), ce = (e, o) => {
-  const i = W({
+}), de = (e, n) => {
+  const i = G({
     props: {
       schema: {
         type: [Array, Function],
         required: !0
       }
     },
-    setup(l, { slots: a }) {
+    setup(s, { slots: a }) {
       const r = O(e);
       if (!(r != null && r.formData))
         return;
-      const u = typeof l.schema == "function" ? l.schema(r) : l.schema;
-      let n;
+      const l = typeof s.schema == "function" ? s.schema(r) : s.schema;
+      let o;
       return () => {
-        var s;
-        return u.reduce(
+        var u;
+        return l.reduce(
           (t, m) => {
             const p = typeof m == "function" ? m(r) : m, {
               vvIs: h,
@@ -462,50 +466,50 @@ const ie = (e, o, i, l = {}) => W({
               vvIf: y,
               vvElseIf: b,
               vvType: I,
-              vvDefaultValue: A,
+              vvDefaultValue: W,
               vvShowValid: K,
               ...c
             } = p;
             if (y !== void 0) {
-              if (typeof y == "string" ? n = !!G(
+              if (typeof y == "string" ? o = !!N(
                 Object(r.formData.value),
                 y
-              ) : typeof y == "function" ? n = $(y(r)) : n = $(y), !n)
+              ) : typeof y == "function" ? o = C(y(r)) : o = C(y), !o)
                 return t;
-            } else if (b !== void 0 && n !== void 0) {
-              if (n || (typeof b == "string" ? n = !!G(
+            } else if (b !== void 0 && o !== void 0) {
+              if (o || (typeof b == "string" ? o = !!N(
                 Object(r.formData.value),
                 b
-              ) : typeof b == "function" ? n = $(b(r)) : n = $(b), !n))
+              ) : typeof b == "function" ? o = C(b(r)) : o = C(b), !o))
                 return t;
             } else
-              n = void 0;
-            const B = S ? x(i, {
+              o = void 0;
+            const A = S ? x(i, {
               schema: S
             }) : void 0;
             return d ? (t.push(
               x(
-                o,
+                n,
                 {
                   name: d,
                   is: h,
                   type: I,
-                  defaultValue: A,
+                  defaultValue: W,
                   showValid: K,
                   props: c
                 },
-                v ?? B
+                v ?? A
               )
             ), t) : h ? (t.push(
               x(
                 h,
                 c,
-                v ?? B
+                v ?? A
               )
-            ), t) : (S && t.push(B), t);
+            ), t) : (S && t.push(A), t);
           },
           [
-            (s = a == null ? void 0 : a.default) == null ? void 0 : s.call(a, {
+            (u = a == null ? void 0 : a.default) == null ? void 0 : u.call(a, {
               formData: r == null ? void 0 : r.formData.value,
               submit: r == null ? void 0 : r.submit,
               errors: r == null ? void 0 : r.errors.value,
@@ -518,49 +522,49 @@ const ie = (e, o, i, l = {}) => W({
     }
   });
   return i;
-}, H = (e, o = {}) => {
-  const i = Symbol(), l = Symbol(), a = Symbol(), { VvForm: r, errors: u, status: n, formData: s } = le(
+}, B = (e, n = {}) => {
+  const i = Symbol(), s = Symbol(), a = Symbol(), { VvForm: r, errors: l, status: o, formData: u } = fe(
     e,
     i,
-    o
-  ), t = fe(
+    n
+  ), t = ce(
     i,
-    l
+    s
   ), m = ie(
     i,
-    l,
+    s,
     a,
-    o
-  ), p = ce(i, m);
+    n
+  ), p = de(i, m);
   return {
     VvForm: r,
     VvFormWrapper: t,
     VvFormField: m,
     VvFormTemplate: p,
     formInjectionKey: i,
-    formWrapperInjectionKey: l,
+    formWrapperInjectionKey: s,
     formFieldInjectionKey: a,
-    errors: u,
-    status: n,
-    formData: s
+    errors: l,
+    status: o,
+    formData: u
   };
-}, Q = Symbol(), he = (e) => {
-  let o = {};
-  return e.schema && (o = H(e.schema, e)), {
-    ...o,
-    install(i, { global: l = !1 } = {}) {
-      i.provide(Q, e), l && (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));
+}, Q = Symbol(), pe = (e) => {
+  let n = {};
+  return e.schema && (n = B(e.schema, e)), {
+    ...n,
+    install(i, { global: s = !1 } = {}) {
+      i.provide(Q, e), s && (i.config.globalProperties.$vvForm = e, n != null && n.VvForm && i.component("VvForm", n.VvForm), n != null && n.VvFormWrapper && i.component("VvFormWrapper", n.VvFormWrapper), n != null && n.VvFormField && i.component("VvFormField", n.VvFormField), n != null && n.VvFormTemplate && i.component("VvFormTemplate", n.VvFormTemplate));
     }
   };
-}, pe = (e, o = {}) => {
-  const i = { ...O(Q, {}), ...o };
-  return H(e, i);
-};
+}, be = (e, n = {}) => ee() ? B(e, {
+  ...O(Q, {}),
+  ...n
+}) : B(e, n), Ve = (e, n = {}) => B(e, n);
 export {
   f as FormFieldType,
-  he as createForm,
-  D as defaultObjectBySchema,
-  H as formFactory,
+  pe as createForm,
+  H as defaultObjectBySchema,
+  Ve as formFactory,
   Q as pluginInjectionKey,
-  pe as useForm
+  be as useForm
 };

package/dist/index.umd.js

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

package/dist/types.d.ts

@@ -7,13 +7,19 @@ export type FormSchema =
 	| ZodEffects<AnyZodObject>
 	| ZodEffects<ZodEffects<AnyZodObject>>
 
-export type FormComposableOptions = {
+export type FormFieldComponentOptions = {
 	lazyLoad?: boolean
+	sideEffects?: (type: `${FormFieldType}`) => Promise | void
+}
+
+export type FormComponentOptions = {
 	updateThrottle?: number
 	continuosValidation?: boolean
-	sideEffects?: (type: `${FormFieldType}`) => Promise | void
 }
 
+export type FormComposableOptions = FormFieldComponentOptions &
+	FormComponentOptions
+
 export type FormPluginOptions = {
 	schema?: ZodSchema
 } & FormComposableOptions

package/package.json

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

package/src/VvForm.ts

@@ -15,17 +15,18 @@ import {
 } from 'vue'
 import { watchThrottled } from '@vueuse/core'
 import type { z, ZodFormattedError, TypeOf } from 'zod'
-import type { FormSchema, InjectedFormData } from './types'
+import type {
+	FormComponentOptions,
+	FormSchema,
+	InjectedFormData,
+} from './types'
 import { FormStatus } from './enums'
 import { defaultObjectBySchema } from './utils'
 
 export const defineForm = <Schema extends FormSchema>(
 	schema: Schema,
 	provideKey: InjectionKey<InjectedFormData<Schema>>,
-	options?: {
-		updateThrottle?: number
-		continuosValidation?: boolean
-	},
+	options?: FormComponentOptions,
 ) => {
 	const errors = ref<ZodFormattedError<z.infer<Schema>>>()
 	const status = ref<FormStatus | undefined>()

package/src/VvFormField.ts

@@ -24,7 +24,7 @@ import type {
 	InjectedFormData,
 	InjectedFormWrapperData,
 	InjectedFormFieldData,
-	FormComposableOptions,
+	FormFieldComponentOptions,
 	Path,
 	FormSchema,
 } from './types'
@@ -33,7 +33,7 @@ export const defineFormField = <Schema extends FormSchema>(
 	formProvideKey: InjectionKey<InjectedFormData<Schema>>,
 	wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>,
 	formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>,
-	options: FormComposableOptions = {},
+	options?: FormFieldComponentOptions,
 ) => {
 	// define component
 	return defineComponent({
@@ -76,6 +76,10 @@ export const defineFormField = <Schema extends FormSchema>(
 				type: [String, Number, Boolean, Array, Object],
 				default: undefined,
 			},
+			lazyLoad: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		emits: ['invalid', 'valid', 'update:formData', 'update:modelValue'],
 		expose: ['invalid', 'invalidLabel', 'errors'],
@@ -231,7 +235,7 @@ export const defineFormField = <Schema extends FormSchema>(
 						},
 					}
 				}
-				if (!options.lazyLoad) {
+				if (!(options?.lazyLoad ?? props.lazyLoad)) {
 					let component: string | ConcreteComponent
 					switch (props.type) {
 						case FormFieldType.select:
@@ -267,7 +271,7 @@ export const defineFormField = <Schema extends FormSchema>(
 					}
 				}
 				return defineAsyncComponent(async () => {
-					if (options.sideEffects) {
+					if (options?.sideEffects) {
 						await Promise.resolve(options.sideEffects(props.type))
 					}
 					switch (props.type) {

package/src/index.ts

@@ -1,4 +1,10 @@
-import { type App, inject, type InjectionKey, type Plugin } from 'vue'
+import {
+	getCurrentInstance,
+	type App,
+	inject,
+	type InjectionKey,
+	type Plugin,
+} from 'vue'
 import { defineFormField } from './VvFormField'
 import { defineForm } from './VvForm'
 import { defineFormWrapper } from './VvFormWrapper'
@@ -15,16 +21,15 @@ import type {
 	FormSchema,
 } from './types'
 
-export const formFactory = <Schema extends FormSchema>(
+const _formFactory = <Schema extends FormSchema>(
 	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
-	// create injection keys form provide/inject
+	// create injection keys
 	const formInjectionKey = Symbol() as InjectionKey<InjectedFormData<Schema>>
 	const formWrapperInjectionKey = Symbol() as InjectionKey<
 		InjectedFormWrapperData<Schema>
 	>
-
 	const formFieldInjectionKey = Symbol() as InjectionKey<
 		InjectedFormFieldData<Schema>
 	>
@@ -68,7 +73,7 @@ export const createForm = (
 ): Plugin & Partial<ReturnType<typeof useForm>> => {
 	let toReturn: Partial<ReturnType<typeof useForm>> = {}
 	if (options.schema) {
-		toReturn = formFactory(options.schema, options)
+		toReturn = _formFactory(options.schema, options)
 	}
 	return {
 		...toReturn,
@@ -99,8 +104,13 @@ export const useForm = <Schema extends FormSchema>(
 	schema: Schema,
 	options: FormComposableOptions = {},
 ) => {
-	const hasOptions = { ...inject(pluginInjectionKey, {}), ...options }
-	return formFactory(schema, hasOptions)
+	if (!getCurrentInstance()) {
+		return _formFactory(schema, options)
+	}
+	return _formFactory(schema, {
+		...inject(pluginInjectionKey, {}),
+		...options,
+	})
 }
 
 export { FormFieldType } from './enums'
@@ -125,3 +135,13 @@ export type {
 	Path,
 	PathValue,
 }
+
+/**
+ * @deprecated Use `useForm()` instead
+ */
+export const formFactory = <Schema extends FormSchema>(
+	schema: Schema,
+	options: FormComposableOptions = {},
+) => {
+	return _formFactory(schema, options)
+}

package/src/types.d.ts

@@ -7,13 +7,19 @@ export type FormSchema =
 	| ZodEffects<AnyZodObject>
 	| ZodEffects<ZodEffects<AnyZodObject>>
 
-export type FormComposableOptions = {
+export type FormFieldComponentOptions = {
 	lazyLoad?: boolean
+	sideEffects?: (type: `${FormFieldType}`) => Promise | void
+}
+
+export type FormComponentOptions = {
 	updateThrottle?: number
 	continuosValidation?: boolean
-	sideEffects?: (type: `${FormFieldType}`) => Promise | void
 }
 
+export type FormComposableOptions = FormFieldComponentOptions &
+	FormComponentOptions
+
 export type FormPluginOptions = {
 	schema?: ZodSchema
 } & FormComposableOptions