GridRepeatTemplate

Default grid template for the repeat type.

System props

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

Grid props

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

Specific props

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

Emits

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

Slots

• formField

Example

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>

What this template does

• renders each repeated element in its own block;
• displays reset and remove actions for each element;
• displays a global add action.