GridStepByStepTemplate

Template grid par défaut pour le type step.

Props système

• fieldKey
• stepQuantity
• isLastStep()
• getFormFields()
• getCurrentValue()
• getCurrentStep()
• getErrorMessageNotAtLastStep()

Props spécifiques

• nextButton
• nextLabel?: string
• previousButton
• previousLabel?: string
• resetButton
• resetLabel?: string
• hideEmptyMessageError?: boolean

Emits

• nextStep
• previousStep
• resetStep

Slots

• formField

Exemple

vue

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

type Props = (
	& StepTemplateProperties["props"]
	& {
		nextButton: FunctionButtonComponent;
		nextLabel?: string;
		previousButton: FunctionButtonComponent;
		previousLabel?: string;
		resetButton: FunctionButtonComponent;
		resetLabel?: string;
		hideEmptyMessageError?: boolean;
	}
);

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

<template>
	<div class="DFV-step-root">
		<div class="DFV-step-content">
			<slot name="formField" />
		</div>

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

Ce que fait ce template

• rend uniquement l'étape courante ;
• affiche un message d'erreur si la dernière étape n'est pas atteinte ;
• expose une zone d'actions de navigation.