GridCheckTemplate

Template grid par défaut pour le type check.

Props système

• fieldKey
• getCurrentValue()
• getErrorMessage()

Props grid

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

Props spécifiques

• hideEmptyMessageError?: boolean

Slots

• formField

Exemple

vue

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

type Props = (
	& CheckTemplateProperties["props"]
	& GridTemplateLayoutContainerProps
	& {
		hideEmptyMessageError?: boolean;
	}
);

const props = defineProps<Props>();
defineSlots<CheckTemplateProperties["slots"]>();

const selfStyles = computed(() => ({
	"--DFV-grid-columns": props.columns,
	"--DFV-grid-gap": props.gap !== undefined ? `${props.gap}px` : undefined,
}));

const containerStyles = computed(() => ({
	"--DFV-grid-max-columns": props.maxColumns,
	"--DFV-grid-gap": props.gap !== undefined ? `${props.gap}px` : undefined,
}));
</script>

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

		<small v-if="props.getErrorMessage() !== null || props.hideEmptyMessageError !== true">
			{{ props.getErrorMessage() }}
		</small>
	</div>
</template>

Ce que fait ce template

• encapsule le champ validé dans une grille ;
• affiche l'erreur de validation sous le bloc.