@volverjs/form-vue 1.0.0-beta.22 → 1.0.0-beta.24

package/README.md

@@ -181,14 +181,15 @@ import { useForm } from '@volverjs/form-vue'
 import { z } from 'zod'
 
 const schema = z.object({
-    name: z.string(),
-    surname: z.string()
+    firstName: z.string(),
+    lastName: z.string()
 })
 
 const {
     VvForm,
     VvFormWrapper,
     VvFormField,
+    VvFormFieldsGroup,
     VvFormTemplate,
     formData,
     status,
@@ -201,6 +202,7 @@ export default {
     VvForm,
     VvFormWrapper,
     VvFormField,
+    VvFormFieldsGroup,
     VvFormTemplate,
     formData,
     status,
@@ -237,14 +239,16 @@ The wrapper status is invalid if at least one of the fields inside it is invalid
 ```vue
 <template>
     <VvForm>
+        <!-- main VvFormWrapper -->
         <VvFormWrapper v-slot="{ invalid }">
+            <!-- add VvFormFields to wrapper -->
             <div class="form-section">
                 <span v-if="invalid">There is a validation error</span>
-                <!-- form fields of section -->
+                <!-- nested VvFormWrapper -->
                 <VvFormWrapper v-slot="{ invalid: groupInvalid }">
                     <div class="form-section__group">
                         <span v-if="groupInvalid">There is a validation error</span>
-                        <!-- form fields of the group -->
+                        <!-- add VvFormFields to nested wrapper -->
                     </div>
                 </VvFormWrapper>
             </div>
@@ -298,6 +302,141 @@ By default UI components must be installed globally, they can be lazy-loaded wit
 
 Check the [`VvFormField` documentation](./docs/VvFormField.md) to learn more about form fields.
 
+### VvFormFieldsGroup
+
+`VvFormFieldsGroup` allow you to render a group of form fields inside a form.
+
+It automatically bind the form data through the `names` attribute. For nested objects, use the `names` attribute with **dot notation**.
+
+```vue
+<template>
+    <VvForm>
+        <VvFormFieldsGroup
+            v-slot="{ modelValue, invalids, invalidLabels, onUpdateField }"
+            :names="['firstName', 'lastName']"
+        >
+            <fieldset>
+                <p>
+                    <label for="firstName">First Name</label>
+                    <input
+                        id="firstName"
+                        type="text"
+                        name="firstName"
+                        :value="modelValue.firstName"
+                        :aria-invalid="invalids.firstName"
+                        :aria-errormessage="invalids.firstName ? 'first-name-alert' : undefined"
+                        @input="onUpdateField('firstName', $event)"
+                    >
+                    <small v-if="invalids.firstName" id="first-name-alert" role="alert">
+                        {{ invalidLabels?.firstName }}
+                    </small>
+                </p>
+                <p>
+                    <label for="lastName">Last Name</label>
+                    <input
+                        id="lastName"
+                        type="text"
+                        name="lastName"
+                        :value="modelValue.lastName"
+                        :aria-invalid="invalids.lastName"
+                        :aria-errormessage="invalids.lastName ? 'last-name-alert' : undefined"
+                        @input="onUpdateField('lastName', $event)"
+                    >
+                    <small v-if="invalids.lastName" id="last-name-alert" role="alert">
+                        {{ invalidLabels?.lastName }}
+                    </small>
+                </p>
+            </fieldset>
+        </VvFormFieldsGroup>
+    </VvForm>
+</template>
+```
+
+Alternatively, you can create a custom component to render the group of form fields.
+
+```vue
+// MyFieldsGroup.vue
+<script lang="ts" setup>
+defineProps<{
+    invalids: Record<string, boolean>
+    invalidLabels?: Record<string, string[]>
+}>()
+// v-model:first-name
+const firstName = defineModel<string>('firstName', { default: '' })
+// v-model:last-name
+const lastName = defineModel<string>('lastName', { default: '' })
+</script>
+
+<template>
+    <fieldset>
+        <p>
+            <label for="firstName">First Name</label>
+            <input
+                id="firstName"
+                v-model="firstName"
+                type="text"
+                name="firstName"
+                :aria-invalid="invalids.firstName"
+                :aria-errormessage="invalids.firstName ? 'first-name-alert' : undefined"
+            >
+            <small v-if="invalids.firstName" id="first-name-alert" role="alert">
+                {{ invalidLabels?.firstName }}
+            </small>
+        </p>
+        <p>
+            <label for="lastName">Last Name</label>
+            <input
+                id="lastName"
+                v-model="lastName"
+                type="text"
+                name="lastName"
+                :aria-invalid="invalids.lastName"
+                :aria-errormessage="invalids.lastName ? 'last-name-alert' : undefined"
+            >
+            <small v-if="invalids.lastName" id="last-name-alert" role="alert">
+                {{ invalidLabels?.lastName }}
+            </small>
+        </p>
+    </fieldset>
+</template>
+```
+
+An than use it inside the `VvFormFieldsGroup` with the `:is` attribute.
+
+```vue
+<script>
+import MyFieldsGroup from './MyFieldsGroup.vue'
+</script>
+
+<template>
+    <VvForm>
+        <VvFormFieldsGroup
+            :is="MyFieldsGroup"
+            :names="['firstName', 'lastName']"
+        />
+    </VvForm>
+</template>
+```
+
+You can also map the form fields to the components v-models. The `:names` attribute can be an object with the component v-models as keys and the form fields names as values.
+
+```vue
+<script>
+import MyCustomComponent from './MyCustomComponent.vue'
+</script>
+
+<template>
+    <VvForm>
+        <VvFormFieldsGroup
+            :is="MyCustomComponent"
+            :names="{
+                myCustomComponentVModel: 'path.to.form.field',
+            }"
+        />
+    </VvForm>
+</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**.
@@ -503,15 +642,15 @@ import { z } from 'zod'
 import { defaultObjectBySchema } from '@volverjs/form-vue'
 
 const schema = z.object({
-    name: z.string().default('John'),
-    surname: z.string().default('Doe')
+    firstName: z.string().default('John'),
+    lastName: z.string().default('Doe')
 })
 
 const defaultObject = defaultObjectBySchema(schema)
-// defaultObject = { name: 'John', surname: 'Doe' }
+// defaultObject = { firstName: 'John', lastName: 'Doe' }
 
 const defaultObject = defaultObjectBySchema(schema, { name: 'Jane' })
-// defaultObject = { name: 'Jane', surname: 'Doe' }
+// defaultObject = { firstName: 'Jane', lastName: 'Doe' }
 ```
 
 `defaultObjectBySchema` can be used with nested objects.
@@ -521,8 +660,8 @@ import { z } from 'zod'
 import { defaultObjectBySchema } from '@volverjs/form-vue'
 
 const schema = z.object({
-    name: z.string().default('John'),
-    surname: z.string().default('Doe'),
+    firstName: z.string().default('John'),
+    lastName: z.string().default('Doe'),
     address: z.object({
         street: z.string().default('Main Street'),
         number: z.number().default(1)
@@ -530,7 +669,7 @@ const schema = z.object({
 })
 
 const defaultObject = defaultObjectBySchema(schema)
-// defaultObject = { name: 'John', surname: 'Doe', address: { street: 'Main Street', number: 1 } }
+// defaultObject = { firstName: 'John', lastName: 'Doe', address: { street: 'Main Street', number: 1 } }
 ```
 
 Other Zod methods are also supported: [`z.nullable()`](https://github.com/colinhacks/zod#nullable), [`z.coerce`](https://github.com/colinhacks/zod#coercion-for-primitives) and [`z.passthrough()`](https://github.com/colinhacks/zod#passthrough).
@@ -541,8 +680,8 @@ import { defaultObjectBySchema } from '@volverjs/form-vue'
 
 const schema = z
     .object({
-        name: z.string().default('John'),
-        surname: z.string().default('Doe'),
+        firstName: z.string().default('John'),
+        lastName: z.string().default('Doe'),
         address: z.object({
             street: z.string().default('Main Street'),
             number: z.number().default(1)
@@ -557,7 +696,7 @@ const defaultObject = defaultObjectBySchema(schema, {
     height: '1.9',
     email: 'john.doe@test.com'
 })
-// defaultObject = { name: 'John', surname: 'Doe', address: { street: 'Main Street', number: 1 }, age: null, height: 1.9, weight: 80, email: 'john.doe@test.com' }
+// defaultObject = { firstName: 'John', lastName: 'Doe', address: { street: 'Main Street', number: 1 }, age: null, height: 1.9, weight: 80, email: 'john.doe@test.com' }
 ```
 
 ## License

package/dist/VvForm.d.ts

@@ -47,7 +47,7 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
         stopUpdatesWatch: import('vue').WatchStopHandle;
         submit: () => Promise<boolean>;
         validate: (value?: Partial<z.TypeOf<Schema> | undefined>, fields?: Set<string>) => Promise<boolean>;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid" | "reset" | "update:modelValue" | "submit" | "update:readonly")[], "invalid" | "valid" | "reset" | "update:modelValue" | "submit" | "update:readonly", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    }, {}, {}, {}, 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;
             default: boolean;
@@ -71,16 +71,16 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
     }>> & Readonly<{
         onInvalid?: ((...args: any[]) => any) | undefined;
         onValid?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         onReset?: ((...args: any[]) => any) | undefined;
         onSubmit?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         "onUpdate:readonly"?: ((...args: any[]) => any) | undefined;
     }>, {
         readonly: boolean;
-        template: FormTemplate<Schema>;
-        modelValue: Record<string, any>;
         tag: string;
+        template: FormTemplate<Schema>;
         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>>;
@@ -95,5 +95,5 @@ export declare function defineForm<Schema extends FormSchema>(schema: Schema, pr
             clear: () => void;
             reset: () => void;
         };
-    }>, {}, {}, "invalid" | "valid" | "reset" | "status" | "clear" | "errors" | "submit" | "validate" | "readonly" | "template" | "tag", import('vue').ComponentProvideOptions, true, {}, any>;
+    }>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
 };

package/dist/VvFormField.d.ts

@@ -25,7 +25,7 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
         default: boolean;
     };
     defaultValue: {
-        type: (StringConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     lazyLoad: {
@@ -60,7 +60,7 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
         'onUpdate:modelValue': (value: unknown) => void;
     }>;
     invalid: import('vue').ComputedRef<boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid" | "update:formData" | "update:modelValue")[], "invalid" | "valid" | "update:formData" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "update:formData")[], "invalid" | "valid" | "update:modelValue" | "update:formData", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     type: {
         type: PropType<`${FormFieldType}`>;
         validator: (value: FormFieldType) => boolean;
@@ -83,7 +83,7 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
         default: boolean;
     };
     defaultValue: {
-        type: (StringConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     lazyLoad: {
@@ -97,10 +97,11 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
 }>> & Readonly<{
     onInvalid?: ((...args: any[]) => any) | undefined;
     onValid?: ((...args: any[]) => any) | undefined;
-    "onUpdate:formData"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:formData"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: "number" | "text" | "email" | "password" | "tel" | "url" | "search" | "date" | "time" | "datetime-local" | "month" | "week" | "color" | "select" | "checkbox" | "radio" | "textarea" | "radioGroup" | "checkboxGroup" | "combobox" | "custom";
+    readonly: boolean;
     props: [{
         type: PropType<Partial<z.infer<Schema> | undefined | ((formData?: Ref<ObjectConstructor>) => Partial<z.infer<Schema>> | undefined)>>;
         default: () => {};
@@ -112,7 +113,6 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
     showValid: boolean;
     defaultValue: string | number | boolean | unknown[] | Record<string, any>;
     lazyLoad: boolean;
-    readonly: boolean;
 }, SlotsType<{
     [key: string]: any;
     default: {
@@ -120,11 +120,11 @@ export declare function defineFormField<Schema extends FormSchema>(formProvideKe
         formData?: Partial<TypeOf<Schema>>;
         formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
         invalid: boolean;
-        invalidLabel: string;
-        modelValue: unknown;
+        invalidLabel?: string[];
+        modelValue: any;
         onUpdate: (value: unknown) => void;
         readonly: boolean;
         submit?: InjectedFormData<Schema>["submit"];
         validate?: InjectedFormData<Schema>["validate"];
     };
-}>, {}, {}, "invalid" | "type" | "component" | "errors" | "hasProps" | "invalidLabel" | "is", import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, "invalid" | "type" | "errors" | "component" | "hasProps" | "invalidLabel" | "is", import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VvFormFieldsGroup.d.ts

@@ -0,0 +1,109 @@
+import { Component, DeepReadonly, InjectionKey, PropType, Ref, SlotsType } from 'vue';
+import { inferFormattedError, TypeOf, 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<{
+    is: {
+        type: PropType<Component | string>;
+        default: undefined;
+    };
+    names: {
+        type: PropType<Path<z.infer<Schema>>[] | Record<string, Path<z.infer<Schema>>>>;
+        required: true;
+    };
+    props: {
+        type: PropType<Partial<z.infer<Schema> | undefined | ((formData?: Ref<ObjectConstructor>) => Partial<z.infer<Schema>> | undefined)>>;
+        default: () => {};
+    };
+    showValid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultValues: {
+        type: PropType<Record<Path<z.infer<Schema>>, any>>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, {
+    component: import('vue').ComputedRef<{
+        render(): import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+            [key: string]: any;
+        }>[];
+    }>;
+    hasProps: import('vue').ComputedRef<{
+        names: {};
+        invalid: boolean;
+        invalids: Record<string, boolean>;
+        valid: boolean | undefined;
+        invalidLabels: Record<string, string[]> | undefined;
+        modelValue: Record<string, any>;
+        readonly: boolean;
+    }>;
+    invalid: import('vue').ComputedRef<boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("invalid" | "valid" | "update:modelValue" | "update:formData")[], "invalid" | "valid" | "update:modelValue" | "update:formData", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    is: {
+        type: PropType<Component | string>;
+        default: undefined;
+    };
+    names: {
+        type: PropType<Path<z.infer<Schema>>[] | Record<string, Path<z.infer<Schema>>>>;
+        required: true;
+    };
+    props: {
+        type: PropType<Partial<z.infer<Schema> | undefined | ((formData?: Ref<ObjectConstructor>) => Partial<z.infer<Schema>> | undefined)>>;
+        default: () => {};
+    };
+    showValid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    defaultValues: {
+        type: PropType<Record<Path<z.infer<Schema>>, any>>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onInvalid?: ((...args: any[]) => any) | undefined;
+    onValid?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:formData"?: ((...args: any[]) => any) | undefined;
+}>, {
+    readonly: boolean;
+    props: [{
+        type: PropType<Partial<z.infer<Schema> | undefined | ((formData?: Ref<ObjectConstructor>) => Partial<z.infer<Schema>> | undefined)>>;
+        default: () => {};
+    }] extends [import('vue').Prop<infer V, infer D>] ? unknown extends V ? keyof V extends never ? import('@vue/shared').IfAny<V, V, D> : V : V : {
+        type: PropType<Partial<z.infer<Schema> | undefined | ((formData?: Ref<ObjectConstructor>) => Partial<z.infer<Schema>> | undefined)>>;
+        default: () => {};
+    };
+    is: string | Component;
+    showValid: boolean;
+    defaultValues: [{
+        type: PropType<Record<Path<z.infer<Schema>>, any>>;
+        default: undefined;
+    }] extends [import('vue').Prop<infer V, infer D>] ? unknown extends V ? keyof V extends never ? import('@vue/shared').IfAny<V, V, D> : V : V : {
+        type: PropType<Record<Path<z.infer<Schema>>, any>>;
+        default: undefined;
+    };
+}, SlotsType<{
+    [key: string]: any;
+    default: {
+        errors?: Record<Path<z.infer<Schema>>, z.inferFormattedError<Schema>>;
+        formData?: Partial<TypeOf<Schema>>;
+        formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
+        invalid: boolean;
+        invalids: Record<string, boolean>;
+        invalidLabels?: Record<string, string[]>;
+        modelValue: Record<string, any>;
+        onUpdate: (value: Record<string, any>) => void;
+        onUpdateField: (name: string, value: any) => void;
+        readonly: boolean;
+        submit?: InjectedFormData<Schema>["submit"];
+        validate?: InjectedFormData<Schema>["validate"];
+    };
+}>, {}, {}, "invalid" | "errors" | "component" | "hasProps" | "is" | "invalidLabels", import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/VvFormWrapper.d.ts

@@ -48,4 +48,4 @@ export declare function defineFormWrapper<Schema extends FormSchema>(formProvide
         clear?: InjectedFormData<Schema>["clear"];
         reset?: InjectedFormData<Schema>["reset"];
     };
-}>, {}, {}, "invalid" | "reset" | "clear" | "errors" | "submit" | "validate" | "formData" | "tag" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;