@volverjs/form-vue 1.0.0-beta.26 → 1.0.0-beta.28

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,8 +1,8 @@
-import { Component, InjectionKey, PropType, SlotsType } from 'vue';
+import { Component, InjectionKey, PropType, SlotsType, UnwrapRef } 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, Type, FormTemplateComponent extends Component, FormWrapperComponent extends Component>(schema: Schema, provideKey: InjectionKey<InjectedFormData<Schema, Type>>, options: FormComponentOptions<Schema, Type>, VvFormTemplate: FormTemplateComponent, wrappers: Map<string, FormWrapperComponent>): {
+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<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>;
@@ -11,7 +11,7 @@ export declare function defineForm<Schema extends FormSchema, Type, FormTemplate
     readonly: import('vue').Ref<boolean, boolean>;
     reset: () => void;
     status: import('vue').Ref<FormStatus | undefined, FormStatus | undefined>;
-    wrappers: Map<string, FormWrapperComponent>;
+    wrappers: Map<string, InjectedFormWrapperData<Schema>>;
     stopUpdatesWatch: import('vue').WatchStopHandle;
     submit: () => Promise<boolean>;
     validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
@@ -48,7 +48,7 @@ export declare function defineForm<Schema extends FormSchema, Type, FormTemplate
         stopUpdatesWatch: import('vue').WatchStopHandle;
         submit: () => Promise<boolean>;
         validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
-        wrappers: Map<string, FormWrapperComponent>;
+        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;
@@ -85,18 +85,18 @@ export declare function defineForm<Schema extends FormSchema, Type, FormTemplate
         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<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>;
+            errors: UnwrapRef<Readonly<import('vue').Ref<import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>>;
+            formData: UnwrapRef<import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>>;
+            invalid: UnwrapRef<import('vue').ComputedRef<boolean>>;
+            readonly: UnwrapRef<import('vue').Ref<boolean, boolean>>;
+            status: UnwrapRef<Readonly<import('vue').Ref<FormStatus | undefined, FormStatus | undefined>>>;
+            wrappers: typeof wrappers;
+            clear: () => void;
             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>>;
+            reset: () => void;
             stopUpdatesWatch: import('vue').WatchStopHandle;
             submit: () => 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

@@ -122,8 +122,8 @@ export declare function defineFormField<Schema extends FormSchema, Type>(formPro
         invalid: boolean;
         invalidLabel?: string[];
         modelValue: any;
-        onUpdate: (value: unknown) => void;
         readonly: boolean;
+        onUpdate: (value: unknown) => void;
         submit?: InjectedFormData<Schema, Type>["submit"];
         validate?: InjectedFormData<Schema, Type>["validate"];
     };

package/dist/VvFormWrapper.d.ts

@@ -11,12 +11,12 @@ export declare function defineFormWrapper<Schema extends FormSchema, Type>(formP
         default: undefined;
     };
 }>, {
-    clear: (() => void) | undefined;
     errors: Readonly<Ref<DeepReadonly<inferFormattedError<Schema, string>> | undefined, DeepReadonly<inferFormattedError<Schema, string>> | undefined>> | undefined;
     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<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined> | undefined;
     invalid: import('vue').ComputedRef<boolean>;
+    clear: (() => void) | undefined;
     reset: (() => void) | undefined;
     submit: (() => Promise<boolean>) | undefined;
     validate: ((formData?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
@@ -38,14 +38,14 @@ export declare function defineFormWrapper<Schema extends FormSchema, Type>(formP
 }, SlotsType<{
     default: {
         errors?: DeepReadonly<z.inferFormattedError<Schema>>;
+        fieldsErrors: Map<string, inferFormattedError<Schema, string>>;
         formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
         formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
         invalid: boolean;
+        clear?: InjectedFormData<Schema, Type>["clear"];
+        reset?: InjectedFormData<Schema, Type>["reset"];
         submit?: InjectedFormData<Schema, Type>["submit"];
         validate?: InjectedFormData<Schema, Type>["validate"];
         validateWrapper?: () => Promise<boolean>;
-        fieldsErrors: Map<string, inferFormattedError<Schema, string>>;
-        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>;