useSlotLayout

useSlotLayout(...) délègue le rendu d'un bloc à un slot Vue nommé.

Il existe deux modes d'utilisation.

Mode 1 : slot autour d'un FormField

Signature

ts

useSlotLayout(name, formField);

Paramètres

• name: nom du slot Vue attendu.
• formField: champ à réinjecter dans le slot.

Valeur produite

• currentValue: identique à celle du champ enfant.
• check(): valeur validée du champ enfant, ou undefined si le slot ne réinjecte pas le champ selon le flux choisi.

Paramètres de slot

ts

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

Mode 2 : slot autonome avec valeur propre

Signature

ts

useSlotLayout(name, {
	defaultValue,
});

Paramètres

• name: nom du slot Vue attendu.
• defaultValue: valeur par défaut du slot.

Paramètres de slot

ts

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

Exemple

ts

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

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

Cas d'usage

• reprise manuelle d'un rendu ;
• insertion d'actions intermédiaires ;
• intégration dans une structure Vue déjà existante.

Template

useSlotLayout(...) n'a pas de template dédié.

Le rendu passe directement par le slot nommé que vous fournissez sur le composant de formulaire.

Petit exemple d'implémentation dans un formulaire

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>