@volverjs/form-vue 1.0.0-beta.25 → 1.0.0-beta.27

package/README.md

@@ -58,6 +58,10 @@ const form = createForm({
     // updateThrottle: number - default 500
     // continuousValidation: boolean - default false
     // sideEffects?: (data: any) => void
+    // scope?: string - Defines a unique scope for the form instance (singletons)
+    // class?: new (data?: any) => Type - Type constructor for form data
+    // Example:
+    // class: class User { constructor(data?: any) { Object.assign(this, data) } }
 })
 
 app.use(form)
@@ -161,6 +165,8 @@ const { VvForm, VvFormWrapper, VvFormField } = useForm(schema, {
     // updateThrottle: number - default 500
     // continuousValidation: boolean - default false
     // sideEffects?: (formData: any) => void
+    // scope?: string
+    // class?: new (data?: any) => Type
 })
 </script>
 
@@ -193,7 +199,8 @@ const {
     VvFormTemplate,
     formData,
     status,
-    errors
+    errors,
+    wrappers
 } = useForm(schema, {
     lazyLoad: true
 })
@@ -206,7 +213,8 @@ export default {
     VvFormTemplate,
     formData,
     status,
-    errors
+    errors,
+    wrappers
 }
 ```
 
@@ -218,13 +226,13 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 ```vue
 <template>
     <VvForm>
-        <VvFormWrapper v-slot="{ invalid }">
+        <VvFormWrapper v-slot="{ invalid }" name="firstSection">
             <div class="form-section-1">
                 <span v-if="invalid">There is a validation error</span>
                 <!-- form fields of section 1 -->
             </div>
         </VvFormWrapper>
-        <VvFormWrapper v-slot="{ invalid }">
+        <VvFormWrapper v-slot="{ invalid }" name="secondSection">
             <div class="form-section-2">
                 <span v-if="invalid">There is a validation error</span>
                 <!-- form fields of the section 2 -->
@@ -240,7 +248,7 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 <template>
     <VvForm>
         <!-- main VvFormWrapper -->
-        <VvFormWrapper v-slot="{ invalid }">
+        <VvFormWrapper v-slot="{ invalid }" name="firstSection">
             <!-- add VvFormFields to wrapper -->
             <div class="form-section">
                 <span v-if="invalid">There is a validation error</span>
@@ -257,6 +265,18 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 </template>
 ```
 
+The  `wrappers` map provides access to form wrapper data.
+This allows for better control over form validation state and data management.
+
+```vue
+<script setup>
+const { wrappers } = useForm(schema)
+
+// Access wrapper data
+const isFirstSectionInvalid = computed(() => wrappers.get('firstSection').invalid)
+</script>
+```
+
 ### VvFormField
 
 `VvFormField` allow you to render a form field or a [`@volverjs/ui-vue`](https://github.com/volverjs/ui-vue) input component inside a form.

package/dist/VvForm.d.ts

@@ -1,19 +1,20 @@
 import { Component, InjectionKey, PropType, SlotsType } from 'vue';
 import { z } from 'zod';
-import { FormComponentOptions, FormSchema, FormTemplate, InjectedFormData } from './types';
+import { FormComponentOptions, FormSchema, FormTemplate, InjectedFormData, InjectedFormWrapperData } from './types';
 import { FormStatus } from './enums';
-export declare function defineForm<Schema extends FormSchema>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema>>, options?: FormComponentOptions<Schema>, VvFormTemplate?: Component): {
+export declare function defineForm<Schema extends FormSchema, Type, FormTemplateComponent extends Component>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema, Type>>, options: FormComponentOptions<Schema, Type>, VvFormTemplate: FormTemplateComponent, wrappers: Map<string, InjectedFormWrapperData<Schema>>): {
     clear: () => void;
     errors: import('vue').Ref<z.inferFormattedError<Schema, string> | undefined, z.inferFormattedError<Schema, string> | undefined>;
-    formData: import('vue').Ref<Partial<z.TypeOf<Schema> | undefined>, Partial<z.TypeOf<Schema> | undefined>>;
+    formData: import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>;
     ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
     invalid: import('vue').ComputedRef<boolean>;
     readonly: import('vue').Ref<boolean, boolean>;
     reset: () => void;
     status: import('vue').Ref<FormStatus | undefined, FormStatus | undefined>;
+    wrappers: Map<string, InjectedFormWrapperData<Schema>>;
     stopUpdatesWatch: import('vue').WatchStopHandle;
     submit: () => Promise<boolean>;
-    validate: (value?: Partial<z.TypeOf<Schema> | undefined>, fields?: Set<string>) => Promise<boolean>;
+    validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
     VvForm: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         continuousValidation: {
             type: BooleanConstructor;
@@ -32,13 +33,13 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
             default: string;
         };
         template: {
-            type: PropType<FormTemplate<Schema>>;
+            type: PropType<FormTemplate<Schema, Type>>;
             default: undefined;
         };
     }>, {
         clear: () => void;
         errors: Readonly<import('vue').Ref<import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>;
-        formData: import('vue').Ref<Partial<z.TypeOf<Schema> | undefined>, Partial<z.TypeOf<Schema> | undefined>>;
+        formData: import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>;
         ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
         invalid: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').Ref<boolean, boolean>;
@@ -46,7 +47,8 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
         status: Readonly<import('vue').Ref<FormStatus | undefined, FormStatus | undefined>>;
         stopUpdatesWatch: import('vue').WatchStopHandle;
         submit: () => Promise<boolean>;
-        validate: (value?: Partial<z.TypeOf<Schema> | undefined>, fields?: Set<string>) => Promise<boolean>;
+        validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
+        wrappers: Map<string, InjectedFormWrapperData<Schema>>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid" | "reset" | "submit" | "update:modelValue" | "update:readonly")[], "invalid" | "valid" | "reset" | "submit" | "update:modelValue" | "update:readonly", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         continuousValidation: {
             type: BooleanConstructor;
@@ -65,7 +67,7 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
             default: string;
         };
         template: {
-            type: PropType<FormTemplate<Schema>>;
+            type: PropType<FormTemplate<Schema, Type>>;
             default: undefined;
         };
     }>> & Readonly<{
@@ -78,22 +80,23 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
     }>, {
         readonly: boolean;
         tag: string;
-        template: FormTemplate<Schema>;
+        template: FormTemplate<Schema, Type>;
         continuousValidation: boolean;
         modelValue: Record<string, any>;
     }, SlotsType<{
         default: {
             errors: Readonly<import('vue').Ref<import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>;
-            formData: import('vue').Ref<Partial<z.TypeOf<Schema> | undefined>, Partial<z.TypeOf<Schema> | undefined>>;
+            formData: import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>;
             ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
             invalid: import('vue').ComputedRef<boolean>;
             readonly: import('vue').Ref<boolean, boolean>;
             status: Readonly<import('vue').Ref<FormStatus | undefined, FormStatus | undefined>>;
             stopUpdatesWatch: import('vue').WatchStopHandle;
             submit: () => Promise<boolean>;
-            validate: (value?: Partial<z.TypeOf<Schema> | undefined>, fields?: Set<string>) => Promise<boolean>;
+            validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
             clear: () => void;
             reset: () => void;
+            wrappers: typeof wrappers;
         };
     }>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
 };

package/dist/VvFormField.d.ts

@@ -1,8 +1,8 @@
 import { Component, ConcreteComponent, DeepReadonly, InjectionKey, PropType, Ref, SlotsType } from 'vue';
-import { inferFormattedError, TypeOf, z } from 'zod';
+import { inferFormattedError, z } from 'zod';
 import { FormFieldType } from './enums';
 import { FormFieldComponentOptions, FormSchema, InjectedFormData, InjectedFormFieldData, InjectedFormWrapperData, Path } from './types';
-export declare function defineFormField<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>, options?: FormFieldComponentOptions): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare function defineFormField<Schema extends FormSchema, Type>(formProvideKey: InjectionKey<InjectedFormData<Schema, Type>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldInjectionKey: InjectionKey<InjectedFormFieldData<Schema>>, options?: FormFieldComponentOptions): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     type: {
         type: PropType<`${FormFieldType}`>;
         validator: (value: FormFieldType) => boolean;
@@ -117,14 +117,14 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
     [key: string]: any;
     default: {
         errors: z.inferFormattedError<Schema>;
-        formData?: Partial<TypeOf<Schema>>;
+        formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
         formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
         invalid: boolean;
         invalidLabel?: string[];
         modelValue: any;
         onUpdate: (value: unknown) => void;
         readonly: boolean;
-        submit?: InjectedFormData<Schema>["submit"];
-        validate?: InjectedFormData<Schema>["validate"];
+        submit?: InjectedFormData<Schema, Type>["submit"];
+        validate?: InjectedFormData<Schema, Type>["validate"];
     };
 }>, {}, {}, "invalid" | "type" | "errors" | "component" | "hasProps" | "invalidLabel" | "is", import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VvFormFieldsGroup.d.ts

@@ -1,7 +1,7 @@
 import { Component, DeepReadonly, InjectionKey, PropType, Ref, SlotsType } from 'vue';
-import { inferFormattedError, TypeOf, z } from 'zod';
+import { inferFormattedError, z } from 'zod';
 import { FormSchema, InjectedFormData, InjectedFormFieldsGroupData, InjectedFormWrapperData, Path } from './types';
-export declare function defineFormFieldsGroup<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldsGroupInjectionKey: InjectionKey<InjectedFormFieldsGroupData<Schema>>): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare function defineFormFieldsGroup<Schema extends FormSchema, Type>(formProvideKey: InjectionKey<InjectedFormData<Schema, Type>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>, formFieldsGroupInjectionKey: InjectionKey<InjectedFormFieldsGroupData<Schema>>): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     is: {
         type: PropType<Component | string>;
         default: undefined;
@@ -94,7 +94,7 @@ export declare function defineFormFieldsGroup<Schema extends FormSchema>(formPro
     [key: string]: any;
     default: {
         errors?: Record<Path<z.infer<Schema>>, z.inferFormattedError<Schema>>;
-        formData?: Partial<TypeOf<Schema>>;
+        formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
         formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
         invalid: boolean;
         invalids: Record<string, boolean>;
@@ -103,7 +103,7 @@ export declare function defineFormFieldsGroup<Schema extends FormSchema>(formPro
         onUpdate: (value: Record<string, any>) => void;
         onUpdateField: (name: string, value: any) => void;
         readonly: boolean;
-        submit?: InjectedFormData<Schema>["submit"];
-        validate?: InjectedFormData<Schema>["validate"];
+        submit?: InjectedFormData<Schema, Type>["submit"];
+        validate?: InjectedFormData<Schema, Type>["validate"];
     };
 }>, {}, {}, "invalid" | "errors" | "component" | "hasProps" | "is" | "invalidLabels", import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VvFormTemplate.d.ts

@@ -1,10 +1,10 @@
 import { Component, DeepReadonly, InjectionKey, PropType, SlotsType, VNode } from 'vue';
 import { FormSchema, InjectedFormData, FormTemplate } from './types';
-import { inferFormattedError, TypeOf } from 'zod';
+import { z, inferFormattedError } from 'zod';
 import { FormStatus } from './enums';
-export declare function defineFormTemplate<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, VvFormField: Component): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare function defineFormTemplate<Schema extends FormSchema, Type>(formProvideKey: InjectionKey<InjectedFormData<Schema, Type>>, VvFormField: Component): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     schema: {
-        type: PropType<FormTemplate<Schema>>;
+        type: PropType<FormTemplate<Schema, Type>>;
         required: true;
     };
     scope: {
@@ -17,7 +17,7 @@ export declare function defineFormTemplate<Schema extends FormSchema>(formProvid
     [key: string]: any;
 }>[] | undefined)[]) | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     schema: {
-        type: PropType<FormTemplate<Schema>>;
+        type: PropType<FormTemplate<Schema, Type>>;
         required: true;
     };
     scope: {
@@ -29,12 +29,12 @@ export declare function defineFormTemplate<Schema extends FormSchema>(formProvid
 }, SlotsType<{
     default: {
         errors?: DeepReadonly<inferFormattedError<Schema, string>>;
-        formData?: Partial<TypeOf<Schema>>;
+        formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
         invalid: boolean;
         status?: FormStatus;
-        submit?: InjectedFormData<Schema>["submit"];
-        validate?: InjectedFormData<Schema>["validate"];
-        clear?: InjectedFormData<Schema>["clear"];
-        reset?: InjectedFormData<Schema>["reset"];
+        submit?: InjectedFormData<Schema, Type>["submit"];
+        validate?: InjectedFormData<Schema, Type>["validate"];
+        clear?: InjectedFormData<Schema, Type>["clear"];
+        reset?: InjectedFormData<Schema, Type>["reset"];
     };
 }>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VvFormWrapper.d.ts

@@ -1,7 +1,7 @@
 import { DeepReadonly, InjectionKey, Ref, SlotsType } from 'vue';
-import { inferFormattedError, TypeOf, z } from 'zod';
+import { inferFormattedError, z } from 'zod';
 import { FormSchema, InjectedFormData, InjectedFormWrapperData } from './types';
-export declare function defineFormWrapper<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare function defineFormWrapper<Schema extends FormSchema, Type>(formProvideKey: InjectionKey<InjectedFormData<Schema, Type>>, wrapperProvideKey: InjectionKey<InjectedFormWrapperData<Schema>>): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     name: {
         type: StringConstructor;
         required: true;
@@ -13,13 +13,13 @@ export declare function defineFormWrapper<Schema extends FormSchema>(formProvide
 }>, {
     clear: (() => void) | undefined;
     errors: Readonly<Ref<DeepReadonly<inferFormattedError<Schema, string>> | undefined, DeepReadonly<inferFormattedError<Schema, string>> | undefined>> | undefined;
-    fields: Ref<Set<string> & Omit<Set<string>, keyof Set<any>>, Set<string> | (Set<string> & Omit<Set<string>, keyof Set<any>>)>;
+    fields: Ref<Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>, Map<string, string> | (Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>)>;
     fieldsErrors: Ref<Map<string, inferFormattedError<Schema, string>>, Map<string, inferFormattedError<Schema, string>>>;
-    formData: Ref<Partial<TypeOf<Schema>> | undefined, Partial<TypeOf<Schema>> | undefined> | undefined;
+    formData: Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined> | undefined;
     invalid: import('vue').ComputedRef<boolean>;
     reset: (() => void) | undefined;
     submit: (() => Promise<boolean>) | undefined;
-    validate: ((formData?: Partial<TypeOf<Schema>> | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
+    validate: ((formData?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
     validateWrapper: () => Promise<boolean>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid")[], "invalid" | "valid", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     name: {
@@ -38,14 +38,14 @@ export declare function defineFormWrapper<Schema extends FormSchema>(formProvide
 }, SlotsType<{
     default: {
         errors?: DeepReadonly<z.inferFormattedError<Schema>>;
-        formData?: Partial<TypeOf<Schema>>;
+        formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
         formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
         invalid: boolean;
-        submit?: InjectedFormData<Schema>["submit"];
-        validate?: InjectedFormData<Schema>["validate"];
+        submit?: InjectedFormData<Schema, Type>["submit"];
+        validate?: InjectedFormData<Schema, Type>["validate"];
         validateWrapper?: () => Promise<boolean>;
         fieldsErrors: Map<string, inferFormattedError<Schema, string>>;
-        clear?: InjectedFormData<Schema>["clear"];
-        reset?: InjectedFormData<Schema>["reset"];
+        clear?: InjectedFormData<Schema, Type>["clear"];
+        reset?: InjectedFormData<Schema, Type>["reset"];
     };
 }>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;