@volverjs/form-vue 0.0.10-beta.8 → 0.0.10

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
 })
 
@@ -279,21 +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 [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) components must be defined globally but can be lazy loaded with `lazyLoad` option or prop.
+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.
+Check the [`VvFormField` documentation](./docs/VvFormField.md) 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**.
 
@@ -309,7 +308,7 @@ Forms can also be created using a template. A template is an **array of objects*
       street: z.string(),
       number: z.string(),
       city: z.string(),
-      zip: z.string()
+      zip: z.number()
     })
   })
 
@@ -367,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.
@@ -450,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
 {
@@ -461,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) => [

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/VvFormField.d.ts

@@ -28,7 +28,7 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    lazyload: {
+    lazyLoad: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -67,7 +67,7 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    lazyload: {
+    lazyLoad: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -88,5 +88,5 @@ export declare const defineFormField: <Schema extends FormSchema>(formProvideKey
     is: Component;
     showValid: boolean;
     defaultValue: string | number | boolean | unknown[] | Record<string, any>;
-    lazyload: boolean;
+    lazyLoad: 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[];
@@ -320,7 +332,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -359,7 +371,7 @@ export declare const useForm: <Schema extends FormSchema>(schema: Schema, option
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -380,7 +392,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;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;
@@ -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[];
@@ -729,7 +754,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -768,7 +793,7 @@ export declare const formFactory: <Schema extends FormSchema>(schema: Schema, op
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | ArrayConstructor)[];
             default: undefined;
         };
-        lazyload: {
+        lazyLoad: {
             type: BooleanConstructor;
             default: boolean;
         };
@@ -789,7 +814,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;
+        lazyLoad: boolean;
     }>;
     VvFormTemplate: (import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | {
         new (...args: any[]): any;
@@ -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>>;