useMultiLayout

useMultiLayout(...) composes several FormField instances under known keys.

Signature

ts

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

formFields can be:

• a Record<string, FormField> object;
• or an array of [key, formField] tuples.

Parameters

• formFields: structure of the child fields.
• class: CSS class added to the multi template.
• template: local override of the multi template.

Produced value

• currentValue: object with the same keys as formFields.
• check(): validated object with the same keys.

multi template contract

Props

ts

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

Slots

ts

{
	formField(): any;
}

Small template example

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

Example

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

Use cases

• structuring a stable object;
• composing several nested blocks;
• creating a readable form root.