useRepeatLayout

useRepeatLayout(...) répète un FormField dans un tableau dynamique.

Signature

ts

useRepeatLayout(formField, {
	max: number,
	min?: number,
	class?: string,
	template?: Templates["repeat"],
});

Paramètres

• formField: champ répété.
• max: nombre maximum d'éléments.
• min: nombre minimum d'éléments. Par défaut 0.
• class: classe CSS ajoutée au template repeat.
• template: surcharge locale du template repeat.

Valeur produite

• currentValue: tableau de valeurs.
• check(): tableau de valeurs validées.

Le defaultValue du layout est initialisé avec min occurrences du defaultValue du champ enfant.

Contrat du template repeat

Props

ts

{
	fieldKey: string;
	max: number;
	min: number;
	getFormFieldsQuantity(): number;
	getCurrentValue(): unknown;
	getFormFields(): VNode[];
}

Emits

ts

{
	addElement: [];
	removeElement: [index: number];
	resetElement: [index: number];
}

Slots

ts

{
	formField(): any;
}

Petit exemple de template

vue

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

type Props = (
	& RepeatTemplateProperties["props"]
	& {
		addLabel?: string;
		removeLabel?: string;
		resetLabel?: string;
	}
);

defineProps<Props>();
defineSlots<RepeatTemplateProperties["slots"]>();
defineEmits<RepeatTemplateProperties["emits"]>();
</script>

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

		<button type="button" @click="$emit('addElement')">
			Add
		</button>
	</div>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyRepeatTemplate from "./repeatTemplate.vue";

export const useMyRepeatTemplate = createTemplate(
	"repeat",
	MyRepeatTemplate,
	{
		props: {
			addLabel: "Add",
			removeLabel: "Remove",
			resetLabel: "Reset",
		},
	},
);

Exemple

ts

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

export const contacts = useRepeatLayout(
	useTextInput({ label: "Email" }),
	{
		min: 1,
		max: 3,
	},
);

Cas d'usage

• liste d'emails ;
• liste d'adresses ;
• répétition d'un sous-formulaire homogène.