@volverjs/form-vue 1.0.0-beta.26 → 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,8 +1,8 @@
 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, 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;