GridRepeatTemplate

Template grid par défaut pour le type repeat.

Props système

• fieldKey
• max
• min
• getFormFieldsQuantity()
• getCurrentValue()
• getFormFields()

Props grid

• columns?: number
• maxColumns?: number
• gap?: number

Props spécifiques

• repeatElementColumn?: number
• repeatElementMaxColumn?: number
• removeButton
• removeLabel?: string
• addButton
• addLabel?: string
• resetButton
• resetLabel?: string

Emits

• addElement
• removeElement(index)
• resetElement(index)

Slots

• formField

Exemple

vue

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

type Props = (
	& RepeatTemplateProperties["props"]
	& GridTemplateLayoutContainerProps
	& {
		repeatElementColumn?: number;
		repeatElementMaxColumn?: number;
		removeButton: FunctionButtonComponent;
		removeLabel?: string;
		addButton: FunctionButtonComponent;
		addLabel?: string;
		resetButton: FunctionButtonComponent;
		resetLabel?: string;
	}
);

const props = defineProps<Props>();
defineSlots<RepeatTemplateProperties["slots"]>();
defineEmits<RepeatTemplateProperties["emits"]>();

const selfStyles = computed(() => ({
	"--DFV-grid-columns": props.columns,
}));
</script>

<template>
	<div
		class="DFV-grid-element"
		:style="selfStyles"
	>
		<slot name="formField" />
	</div>
</template>

Ce que fait ce template

• rend chaque élément répété dans son propre bloc ;
• affiche des actions de reset/suppression par élément ;
• affiche une action globale d'ajout.