useStepLayout

useStepLayout(...) découpe un formulaire en étapes successives.

Signature

ts

useStepLayout(
	[
		stepA,
		stepB,
		stepC,
	],
	{
		errorMessageNotAtLastStep: string,
		class?: string,
		template?: Templates["step"],
	},
);

Paramètres

• formFields: tuple de FormField, un par étape.
• errorMessageNotAtLastStep: message affiché si check() est appelé avant la dernière étape.
• class: classe CSS ajoutée au template step.
• template: surcharge locale du template step.

Valeur produite

Valeur courante

ts

{
	currentStep: number;
	steps: unknown[];
}

Valeur validée

ts

unknown[]

Si une erreur est détectée lors du check(), le layout repositionne automatiquement currentStep sur la première étape en erreur.

Contrat du template step

Props

ts

{
	fieldKey: string;
	stepQuantity: number;
	isLastStep(): boolean;
	getFormFields(): (() => VNode)[];
	getCurrentValue(): unknown;
	getCurrentStep(): number;
	getErrorMessageNotAtLastStep(): null | string;
}

Emits

ts

{
	nextStep: [];
	previousStep: [];
	resetStep: [];
}

Slots

ts

{
	formField(): any;
}

Petit exemple de template

vue

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

type Props = (
	& StepTemplateProperties["props"]
	& {
		nextLabel?: string;
		previousLabel?: string;
		resetLabel?: string;
	}
);

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

<template>
	<div>
		<slot name="formField" />

		<div>
			<button type="button" @click="$emit('previousStep')">
				Back
			</button>

			<button type="button" @click="$emit('resetStep')">
				Reset step
			</button>

			<button type="button" @click="$emit('nextStep')">
				Next
			</button>
		</div>
	</div>
</template>

ts

import { createTemplate } from "@duplojs/form/vue";
import MyStepTemplate from "./stepTemplate.vue";

export const useMyStepTemplate = createTemplate(
	"step",
	MyStepTemplate,
	{
		props: {
			nextLabel: "Next",
			previousLabel: "Back",
		},
	},
);

Exemple

ts

import { useMultiLayout, useStepLayout } from "@duplojs/form/vue";
import { useTextInput } from "@duplojs/form/vueDesignSystem";

export const onboarding = useStepLayout(
	[
		useMultiLayout({
			fullName: useTextInput({ label: "Full name" }),
		}),
		useMultiLayout({
			email: useTextInput({ label: "Email" }),
		}),
	],
	{
		errorMessageNotAtLastStep: "Complete all steps before submitting.",
	},
);

Cas d'usage

• onboarding ;
• tunnel de souscription ;
• formulaires longs à progression séquentielle.