useMultiLayout

useMultiLayout(...) compose plusieurs FormField sous des clés connues.

Signature

ts

useMultiLayout(formFields, {
	class?: string,
	template?: Templates["multi"],
});

formFields peut être :

• un objet Record<string, FormField> ;
• ou un tableau de tuples [key, formField].

Paramètres

• formFields: structure des sous-champs.
• class: classe CSS ajoutée au template multi.
• template: surcharge locale du template multi.

Valeur produite

• currentValue: objet avec les mêmes clés que formFields.
• check(): objet validé avec les mêmes clés.

Contrat du template multi

Props

ts

{
	fieldKey: string;
	getCurrentValue(): unknown;
	getFormFields(): VNode[];
}

Slots

ts

{
	formField(): any;
}

Petit exemple de template

vue

<script setup lang="ts">
import { type MultiTemplateProperties } from "@duplojs/form/vue";

defineProps<MultiTemplateProperties["props"]>();
defineSlots<MultiTemplateProperties["slots"]>();
</script>

<template>
	<div class="multi-layout">
		<slot name="formField" />
	</div>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyMultiTemplate from "./multiTemplate.vue";

export const useMyMultiTemplate = createTemplate(
	"multi",
	MyMultiTemplate,
);

Exemple

ts

import { useMultiLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";
import { useForm } from "./init";

export function useProfileForm() {
	const { component, check } = useForm(
		useMultiLayout({
			firstName: useTextInput({ label: "First name" }),
			lastName: useTextInput({ label: "Last name" }),
		}),
	);

	return {
		ProfileForm: component,
		checkProfileForm: check,
	};
}

Cas d'usage

• structurer un objet stable ;
• composer plusieurs blocs imbriqués ;
• créer la racine d'un formulaire lisible.