useSlotLayout

useSlotLayout(...) delegates the rendering of a block to a named Vue slot.

There are two usage modes.

Mode 1: slot around a FormField

Signature

ts

useSlotLayout(name, formField);

Parameters

• name: name of the expected Vue slot.
• formField: field to re-inject into the slot.

Produced value

• currentValue: same as the child field value.
• check(): validated child field value, or undefined if the slot does not re-inject the field depending on the chosen flow.

Slot parameters

ts

{
	fieldKey: string;
	value: unknown;
	update(value: unknown): void;
	formField(): any;
}

Mode 2: standalone slot with its own value

Signature

ts

useSlotLayout(name, {
	defaultValue,
});

Parameters

• name: name of the expected Vue slot.
• defaultValue: default value of the slot.

Slot parameters

ts

{
	fieldKey: string;
	value: unknown;
	update(value: unknown): void;
}

Example

ts

import { useSlotLayout } from "@duplojs/form/vue";
import { useTextareaInput } from "@duplojs/form/vueDesignSystem";

export const message = useSlotLayout(
	"customMessage",
	useTextareaInput({ label: "Message" }),
);

Use cases

• manual takeover of a rendering block;
• insertion of intermediate actions;
• integration inside an existing Vue structure.

Template

useSlotLayout(...) does not have a dedicated template.

Rendering goes directly through the named slot you provide on the form component.

Small implementation example inside a form

ts

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

export function useSlotForm() {
	const { component, check } = useForm(
		useMultiLayout({
			message: useSlotLayout(
				"customMessage",
				useTextareaInput({ label: "Message" }),
			),
			nickname: useSlotLayout(
				"customNickname",
				{ defaultValue: "" },
			),
			email: useTextInput({ label: "Email" }),
		}),
	);

	return {
		SlotForm: component,
		checkSlotForm: check,
	};
}

vue

<script setup lang="ts">
import { PrimaryButton } from "@duplojs/form/vueDesignSystem";
import { useSlotForm } from "./slotForm";

const { SlotForm, checkSlotForm } = useSlotForm();
</script>

<template>
	<SlotForm @submit="console.log(checkSlotForm())">
		<PrimaryButton
			type="submit"
			label="Submit"
		/>

		<template #customMessage="params">
			Custom message
			<component :is="params.formField" />
		</template>

		<template #customNickname="{ value, update }">
			<input
				type="text"
				:model-value="value"
				@update:model-value="(value: string) => update(value)"
			/>
		</template>
	</SlotForm>
</template>