useUnionLayout

useUnionLayout(...) permet d'activer une seule branche parmi plusieurs FormField.

Signature

ts

useUnionLayout(
	[
		["kindA", fieldA],
		["kindB", fieldB],
	],
	{
		defaultKind,
		class?: string,
		template?: Templates["union"],
	},
);

Paramètres

• formFieldUnionElements: tableau de tuples [kind, formField].
• defaultKind: branche active au démarrage.
• class: classe CSS ajoutée au template union.
• template: surcharge locale du template union.

Valeur produite

Valeur courante

ts

{
	kind: string;
	value: unknown;
	updateKind(kind: string, value?: unknown): void;
}

Valeur validée

ts

{
	kind: string;
	value: unknown;
}

Contrat du template union

Props

ts

{
	fieldKey: string;
	kinds: string[];
	getCurrentValue(): unknown;
	getCurrentKind(): string;
}

Emits

ts

{
	changeKind: [kind: string];
}

Slots

ts

{
	formField(): any;
}

Petit exemple de template

vue

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

defineProps<UnionTemplateProperties["props"]>();
defineSlots<UnionTemplateProperties["slots"]>();
defineEmits<UnionTemplateProperties["emits"]>();
</script>

<template>
	<div>
		<select @change="$emit('changeKind', ($event.target as HTMLSelectElement).value)">
			<option
				v-for="kind in kinds"
				:key="kind"
				:selected="kind === getCurrentKind()"
				:value="kind"
			>
				{{ kind }}
			</option>
		</select>

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

ts

import { createTemplate } from "@duplojs/form/vue";
import MyUnionTemplate from "./unionTemplate.vue";

export const useMyUnionTemplate = createTemplate(
	"union",
	MyUnionTemplate,
);

Exemple

ts

import { useUnionLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";

export const preferredChannel = useUnionLayout(
	[
		["email", useTextInput({ label: "Email" })],
		["phone", useTextInput({ label: "Phone" })],
	],
	{ defaultKind: "email" },
);

Cas d'usage

• email ou téléphone ;
• personne physique ou entreprise ;
• carte bancaire ou virement.