GridStepByStepTemplate

Default grid template for the step type.

System props

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

Specific props

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

Emits

• nextStep
• previousStep
• resetStep

Slots

• formField

Example

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>

What this template does

• renders only the current step;
• displays an error message if the last step has not been reached;
• exposes an area for navigation actions.