useSectionLayout

useSectionLayout(...) wraps a FormField in a rendering section.

Signature

ts

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

Parameters

• formField: child field to wrap.
• title: optional section title.
• class: CSS class added to the section template.
• template: local override of the section template.

Produced value

• currentValue: same as the child field value.
• check(): same as the child field result.

section template contract

Props

ts

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

Slots

ts

{
	formField(): any;
}

Small template example

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,
);

Example

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" },
);

Use cases

• visual grouping;
• logical separation inside a form;
• adding a title to a block.