useSectionLayout

useSectionLayout(...) encapsule un FormField dans une section de rendu.

Signature

ts

useSectionLayout(formField, {
	title?: string,
	class?: string,
	template?: Templates["section"],
});

Paramètres

• formField: champ enfant à envelopper.
• title: titre facultatif de la section.
• class: classe CSS ajoutée au template section.
• template: surcharge locale du template section.

Valeur produite

• currentValue: identique à celle du champ enfant.
• check(): identique à celui du champ enfant.

Contrat du template section

Props

ts

{
	fieldKey: string;
	getCurrentValue(): unknown;
	title?: string;
}

Slots

ts

{
	formField(): any;
}

Petit exemple de template

vue

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

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

<template>
	<section>
		<h2 v-if="title">
			{{ title }}
		</h2>

		<slot name="formField" />
	</section>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MySectionTemplate from "./sectionTemplate.vue";

export const useMySectionTemplate = createTemplate(
	"section",
	MySectionTemplate,
);

Exemple

ts

import { useMultiLayout, useSectionLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";

export const identity = useSectionLayout(
	useMultiLayout({
		firstName: useTextInput({ label: "First name" }),
		lastName: useTextInput({ label: "Last name" }),
	}),
	{ title: "Identity" },
);

Cas d'usage

• regroupement visuel ;
• séparation logique d'un formulaire ;
• ajout d'un titre à un bloc.