@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+	<script lang="ts" setup>
 	import {
 		ref,
 		computed,
@@ -16,13 +16,14 @@
 	} from '@/composables/date/useDateInitializationDayjs'
 	import {
 		useAsteriskDisplay,
-		useDateFormatValidation,
+		useDatePickerFocusTrap,
 		useDatePickerState,
+		useDateFormatValidation,
+		useDateValidation,
 		useDatePickerViewMode,
 		useDatePickerVisibility,
 		useDateRangeValidation,
 		useDateSelection,
-		useDateValidation,
 		useDisplayedDateString,
 		useInputBlurHandler,
 		useManualDateValidation,
@@ -125,92 +126,88 @@
 		})
 	}
 
-	/**
-	 * Props / Emits
-	 */
 	const props = withDefaults(
 		defineProps<{
-			modelValue?: DateInput
-			label: string
-			placeholder?: string
-			format?: string
-			dateFormatReturn?: string
-			isBirthDate?: boolean
+			autoClamp?: boolean
+			bgColor?: string
 			birthDate?: boolean
-			showWeekNumber?: boolean
-			required?: boolean
-			displayRange?: boolean
-			displayIcon?: boolean
-			displayAppendIcon?: boolean
-			displayPrependIcon?: boolean
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			customRules?: { type: string, options: any }[]
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			customWarningRules?: { type: string, options: any }[]
-			disabled?: boolean
-			noIcon?: boolean
-			noCalendar?: boolean
-			isOutlined?: boolean
-			readonly?: boolean
-			title?: string | false
-			width?: string
+			dateFormatReturn?: string
+			density?: 'default' | 'comfortable' | 'compact'
 			disableErrorHandling?: boolean
-			showSuccessMessages?: boolean
-			bgColor?: string
-			textFieldActivator?: boolean
+			disabled?: boolean
+			displayAppendIcon?: boolean
+			displayAsterisk?: boolean
+			displayHolidayDays?: boolean
+			displayIcon?: boolean
+			displayPrependIcon?: boolean
+			displayRange?: boolean
 			displayTodayButton?: boolean
 			displayWeekendDays?: boolean
-			displayHolidayDays?: boolean
-			displayAsterisk?: boolean
+			format?: string
+			headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+			hint?: string
+			isBirthDate?: boolean
+			isOutlined?: boolean
+			isValidateOnBlur?: boolean
+			label: string
+			modelValue?: DateInput
+			noCalendar?: boolean
+			noIcon?: boolean
 			period?: {
-				min?: string
 				max?: string
+				min?: string
 			}
-			autoClamp?: boolean
-			isValidateOnBlur?: boolean
-			density?: 'default' | 'comfortable' | 'compact'
-			hint?: string
 			persistentHint?: boolean
-			headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-
+			placeholder?: string
+			readonly?: boolean
+			required?: boolean
+			showSuccessMessages?: boolean
+			showWeekNumber?: boolean
+			textFieldActivator?: boolean
+			title?: string | false
+			width?: string
 		}>(),
 		{
-			modelValue: undefined,
-			placeholder: undefined,
-			format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
-			dateFormatReturn: '',
-			isBirthDate: false,
+			autoClamp: false,
+			bgColor: 'white',
 			birthDate: false,
-			showWeekNumber: false,
-			required: false,
-			displayRange: false,
-			displayIcon: true,
-			displayAppendIcon: false,
-			displayPrependIcon: true,
 			customRules: () => [],
 			customWarningRules: () => [],
-			disabled: false,
-			noIcon: false,
-			noCalendar: false,
-			isOutlined: true,
-			readonly: false,
-			title: false,
-			width: '100%',
+			dateFormatReturn: '',
+			density: 'default',
 			disableErrorHandling: false,
-			showSuccessMessages: true,
-			bgColor: 'white',
-			textFieldActivator: false,
+			disabled: false,
+			displayAppendIcon: false,
+			displayAsterisk: false,
+			displayHolidayDays: true,
+			displayIcon: true,
+			displayPrependIcon: true,
+			displayRange: false,
 			displayTodayButton: true,
 			displayWeekendDays: true,
-			displayHolidayDays: true,
-			displayAsterisk: false,
-			period: () => ({ min: '', max: '' }),
-			autoClamp: false,
-			isValidateOnBlur: true,
-			density: 'default',
+			format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
+			headingLevel: 3,
 			hint: undefined,
+			isBirthDate: false,
+			isOutlined: true,
+			isValidateOnBlur: true,
+			modelValue: undefined,
+			noCalendar: false,
+			noIcon: false,
+			period: () => ({ min: '', max: '' }),
 			persistentHint: false,
-			headingLevel: 3,
+			placeholder: undefined,
+			readonly: false,
+			required: false,
+			showSuccessMessages: true,
+			showWeekNumber: false,
+			textFieldActivator: false,
+			title: false,
+			width: '100%',
 		},
 	)
 
@@ -237,8 +234,6 @@
 	const validation = useValidation({
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: 'Date',
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
 		disableErrorHandling: props.disableErrorHandling,
 	})
 	const { errors, warnings, successes, validateField, clearValidation } = validation
@@ -353,16 +348,16 @@
 	watch(() => props.customRules, () => {
 		if (selectedDates.value !== null) {
 			// Retarder légèrement pour s'assurer que les computed sont mis à jour
-			setTimeout(() => {
+			setTimeout(async () => {
 				clearValidation()
 				const datesToValidate = Array.isArray(selectedDates.value) ? selectedDates.value : [selectedDates.value]
-				datesToValidate.forEach((date) => {
-					validateField(
+				for (const date of datesToValidate) {
+					await Promise.resolve(validateField(
 						date,
 						props.customRules,
 						props.customWarningRules,
-					)
-				})
+					))
+				}
 			}, 5)
 		}
 	}, { deep: true })
@@ -404,9 +399,9 @@
 		if (!props.noCalendar && newValue) displayFormattedDate.value = newValue
 	})
 
-	const updateSelectedDates = (date: Date | null) => {
+	const updateSelectedDates = async (date: Date | null) => {
 		if (date !== null) {
-			const validationResult = validateField(date, props.customRules, props.customWarningRules)
+			const validationResult = await Promise.resolve(validateField(date, props.customRules, props.customWarningRules))
 			if (validationResult.hasError) {
 				errors.value = validationResult.state.errors
 				return
@@ -599,6 +594,25 @@
 	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
 	const datePickerContentId = `date-picker-${Math.random().toString(36).slice(2)}`
 
+	// Aria props for activator: only declare aria-controls when panel exists
+	const menuActivatorProps = computed(() => ({
+		'aria-controls': isDatePickerVisible.value ? datePickerContentId : undefined,
+		'aria-expanded': isDatePickerVisible.value,
+		'aria-haspopup': 'dialog' as const,
+		'aria-disabled': props.disabled || undefined,
+		'aria-readonly': props.readonly || undefined,
+		'aria-label': labelWithAsterisk.value || props.placeholder || props.title || undefined,
+		'tabindex': props.disabled ? -1 : 0,
+		'aria-owns': undefined,
+	}))
+
+	const { handleMenuKeydown } = useDatePickerFocusTrap({
+		isDatePickerVisible,
+		datePickerRef: datePickerRef as unknown as Ref<ComponentPublicInstance | null>,
+		onClose: () => emit('closed'),
+		restoreFocus: () => queueMicrotask(() => menuActivatorRef.value?.querySelector?.('input')?.focus({ preventScroll: true })),
+	})
+
 	/**
 	 * Holiday marking (partagé via useHolidayHighlighting)
 	 */
@@ -647,20 +661,24 @@
 		setCurrentDate: (date: Date) => {
 			preventCloseOnInternalUpdate.value = true
 			updateSelectedDates(date)
+
+			// S'assurer que le VDatePicker affiche le bon mois après navigation clavier
+			nextTick(() => {
+				if (datePickerRef.value) {
+					const newMonth = String(date.getMonth())
+					const newYear = String(date.getFullYear())
+					if (currentMonth.value !== newMonth || currentYear.value !== newYear) {
+						currentMonth.value = newMonth
+						currentYear.value = newYear
+						currentMonthName.value = dayjs(date).format('MMMM')
+						currentYearName.value = newYear
+					}
+				}
+			})
+
 			queueMicrotask(() => {
 				preventCloseOnInternalUpdate.value = false
 			})
-			// Synchroniser le mois et l'année visibles lorsque l'on franchit une limite de mois
-			const newMonth = String(date.getMonth())
-			const newYear = String(date.getFullYear())
-			if (currentMonth.value !== newMonth) {
-				currentMonth.value = newMonth
-				currentMonthName.value = dayjs().month(date.getMonth()).format('MMMM')
-			}
-			if (currentYear.value !== newYear) {
-				currentYear.value = newYear
-				currentYearName.value = newYear
-			}
 		},
 	})
 
@@ -943,12 +961,12 @@
 	/**
 	 * Public API
 	 */
-	const validateOnSubmit = (): boolean => {
+	const validateOnSubmit = async (): Promise<boolean> => {
 		if (props.noCalendar) {
-			return dateTextInputRef.value?.validateOnSubmit() || false
+			return await Promise.resolve(dateTextInputRef.value?.validateOnSubmit() || false)
 		}
-		const textInputValid = dateCalendarTextInputRef.value?.validateOnSubmit() || false
-		validateDates(true)
+		const textInputValid = await Promise.resolve(dateCalendarTextInputRef.value?.validateOnSubmit() || false)
+		await Promise.resolve(validateDates(true))
 		return textInputValid && errors.value.length === 0
 	}
 
@@ -1057,6 +1075,7 @@
 			<VMenu
 				v-model="isDatePickerVisible"
 				:activator="menuActivatorRef"
+				:activator-props="menuActivatorProps"
 				:min-width="0"
 				location="bottom"
 				:close-on-content-click="false"
@@ -1064,15 +1083,17 @@
 				scroll-strategy="none"
 				transition="fade-transition"
 				:offset="[0, 10]"
+				content-class="date-picker-overlay-content"
 			>
 				<template #activator>
 					<div
 						ref="menuActivatorRef"
 						class="date-text-input-activator"
 						role="combobox"
-						aria-haspopup="dialog"
+						v-bind="menuActivatorProps"
+						:aria-controls="isDatePickerVisible ? datePickerContentId : undefined"
 						:aria-expanded="isDatePickerVisible"
-						:aria-controls="datePickerContentId"
+						:title="props.placeholder || DATE_PICKER_MESSAGES.LABEL_DEFAULT"
 					>
 						<DateTextInput
 							ref="dateCalendarTextInputRef"
@@ -1118,77 +1139,83 @@
 					</div>
 				</template>
 
-				<VDatePicker
-					v-if="isDatePickerVisible"
-					:id="datePickerContentId"
-					ref="datePickerRef"
-					v-model="selectedDates"
-					control-variant="modal"
-					color="primary"
-					:class="props.displayWeekendDays ? 'weekend' : ''"
-					:first-day-of-week="1"
-					:multiple="props.displayRange ? 'range' : false"
-					:show-adjacent-months="true"
-					:show-week="props.showWeekNumber"
-					:view-mode="currentViewMode"
-					:month="currentMonth !== null ? Number(currentMonth) : undefined"
-					:year="currentYear !== null ? Number(currentYear) : undefined"
-					:max="maxDate"
-					:min="minDate"
-					:custom-rules="props.customRules"
-					:custom-warning-rules="props.customWarningRules"
-					:display-holiday-days="props.displayHolidayDays"
-					:display-asterisk="props.displayAsterisk"
-					:is-validate-on-blur="props.isValidateOnBlur"
-					:error-messages="errorMessages"
-					:density="props.density"
-					:hint="props.hint"
-					:persistent-hint="props.persistentHint"
-					@update:model-value="updateDisplayFormattedDate"
-					@update:view-mode="handleViewModeUpdate"
-					@update:month="onUpdateMonth"
-					@update:year="onUpdateYear"
-					@click:date="updateSelectedDates"
-					@focus="props.displayHolidayDays ? markHolidayDays : undefined"
-					@update:month-year="props.displayHolidayDays ? markHolidayDays : undefined"
+				<div
+					tabindex="-1"
+					role="presentation"
+					@keydown.capture="handleMenuKeydown"
 				>
-					<template #title>
-						<span class="date-picker-title">
-							Sélectionnez une date
-						</span>
-					</template>
-					<template #header>
-						<SyHeading
-							class="mx-auto my-auto ml-5 mb-4"
-							:level="headingLevel"
-						>
-							{{ selectedDates ? displayedDateString : headerDate }}
-						</SyHeading>
-					</template>
-					<template
-						v-if="props.displayTodayButton"
-						#actions
+					<VDatePicker
+						v-if="isDatePickerVisible"
+						:id="datePickerContentId"
+						ref="datePickerRef"
+						v-model="selectedDates"
+						control-variant="modal"
+						color="primary"
+						:class="props.displayWeekendDays ? 'weekend' : ''"
+						:first-day-of-week="1"
+						:multiple="props.displayRange ? 'range' : false"
+						:show-adjacent-months="true"
+						:show-week="props.showWeekNumber"
+						:view-mode="currentViewMode"
+						:month="currentMonth !== null ? Number(currentMonth) : undefined"
+						:year="currentYear !== null ? Number(currentYear) : undefined"
+						:max="maxDate"
+						:min="minDate"
+						:custom-rules="props.customRules"
+						:custom-warning-rules="props.customWarningRules"
+						:display-holiday-days="props.displayHolidayDays"
+						:display-asterisk="props.displayAsterisk"
+						:is-validate-on-blur="props.isValidateOnBlur"
+						:error-messages="errorMessages"
+						:density="props.density"
+						:hint="props.hint"
+						:persistent-hint="props.persistentHint"
+						@update:model-value="updateDisplayFormattedDate"
+						@update:view-mode="handleViewModeUpdate"
+						@update:month="onUpdateMonth"
+						@update:year="onUpdateYear"
+						@click:date="updateSelectedDates"
+						@focus="props.displayHolidayDays ? markHolidayDays : undefined"
+						@update:month-year="props.displayHolidayDays ? markHolidayDays : undefined"
 					>
-						<div class="d-flex justify-center align-center w-100">
-							<v-btn
-								v-if="props.displayTodayButton"
-								size="x-small"
-								color="primary"
-								:title="DATE_PICKER_MESSAGES.BUTTON_TODAY"
-								class="date-picker__today-button my-2 pa-2 mt-2"
-								:ripple="false"
-								@click="handleSelectToday"
+						<template #title>
+							<span class="date-picker-title">
+								Sélectionnez une date
+							</span>
+						</template>
+						<template #header>
+							<SyHeading
+								class="mx-auto my-auto ml-5 mb-4"
+								:level="headingLevel"
 							>
-								<SyIcon
-									size="16px"
-									decorative
-									:icon="mdiCalendarMonthOutline"
-								/>
-								{{ DATE_PICKER_MESSAGES.BUTTON_TODAY }}
-							</v-btn>
-						</div>
-					</template>
-				</VDatePicker>
+								{{ selectedDates ? displayedDateString : headerDate }}
+							</SyHeading>
+						</template>
+						<template
+							v-if="props.displayTodayButton"
+							#actions
+						>
+							<div class="d-flex justify-center align-center w-100">
+								<v-btn
+									v-if="props.displayTodayButton"
+									size="x-small"
+									color="primary"
+									:title="DATE_PICKER_MESSAGES.BUTTON_TODAY"
+									class="date-picker__today-button my-2 pa-2 mt-2"
+									:ripple="false"
+									@click="handleSelectToday"
+								>
+									<SyIcon
+										size="16px"
+										decorative
+										:icon="mdiCalendarMonthOutline"
+									/>
+									{{ DATE_PICKER_MESSAGES.BUTTON_TODAY }}
+								</v-btn>
+							</div>
+						</template>
+					</VDatePicker>
+				</div>
 			</VMenu>
 		</template>
 	</div>
@@ -1407,3 +1434,12 @@
 	opacity: 0;
 }
 </style>
+
+<style lang="scss">
+.date-picker-overlay-content .v-date-picker {
+	box-shadow:
+		0 5px 5px -3px rgb(0 0 0 / 20%),
+		0 8px 10px 1px rgb(0 0 0 / 14%),
+		0 3px 14px 2px rgb(0 0 0 / 12%) !important;
+}
+</style>

package/src/components/DatePicker/ComplexDatePicker/accessibilite/Accessibility.mdx

@@ -0,0 +1,76 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../ComplexDatePicker.stories.ts'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import '@/stories/styles/shared.css'
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
+
+<Meta of={Stories} />
+
+<AccessibilityGuideLayout
+	componentName="ComplexDatePicker (mode combiné)"
+	iconSrc={AccessibilityIcon}
+>
+
+<CriteriaSection>
+	<CriteriaCard title="Structure sémantique" icon="🔍">
+		<ul>
+			<li><strong>Champ</strong> : conteneur <code>role="combobox"</code> qui expose <code>aria-controls</code> et <code>aria-expanded</code>; champ de saisie interne en <code>textbox</code> avec libellé dynamique. À la différence du mode calendrier simple, ce mode permet la saisie libre, justifiant l'utilisation du pattern combobox.</li>
+			<li><strong>Panneau</strong> : calendrier dans un menu <code>role="presentation"</code>, grille de boutons natifs pour les jours.</li>
+			<li><strong>Relations</strong> : l’activateur référence le panneau via <code>aria-controls</code> quand ouvert; <code>aria-labelledby</code> et <code>aria-label</code> portés par l’input.</li>
+			<li><strong>États</strong> : <code>aria-expanded</code> synchronisé, <code>aria-disabled</code> / <code>aria-readonly</code> propagés aux champs et messages.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Ouverture et focus" icon="🧭">
+		<ul>
+			<li><strong>Ouverture</strong> : clic sur le champ ou l’icône; <kbd>Entrée</kbd> sur le champ ouvre; option <code>textFieldActivator</code> active toute la zone.</li>
+			<li><strong>Fermeture</strong> : <kbd>Échap</kbd> via le piège de focus; fermeture valide et émet <code>closed</code>.</li>
+			<li><strong>Piège de focus</strong> : <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd> circulent dans l’en-tête, la grille et le bouton « Aujourd’hui » tant que le panneau est ouvert.</li>
+			<li><strong>Lecture seule</strong> : aucun clear ni validation interactive, champs non éditables.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Navigation clavier dans le calendrier" icon="⌨️">
+		<ul>
+			<li><strong>Jours</strong> : flèches déplacent le focus; <code>PageUp/PageDown</code> changent de mois (<kbd>Shift</kbd> + touche change d’année).</li>
+			<li><strong>Home/End</strong> : premier/dernier jour du mois affiché.</li>
+			<li><strong>Activation</strong> : <kbd>Espace</kbd>/<kbd>Entrée</kbd> déclenchent les boutons de jour et de l’en-tête (mois/année/flèches).</li>
+			<li><strong>Dialogue mois/années</strong> : flèches et <kbd>Home</kbd>/<kbd>End</kbd>, <kbd>Espace</kbd>/<kbd>Entrée</kbd> sélectionnent l’option et conservent le focus.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Messages et annonces" icon="📣">
+		<ul>
+			<li><strong>Statuts</strong> : erreurs/avertissements/succès affichés sous le champ; bouton « Aujourd’hui » avec <code>title</code>.</li>
+			<li><strong>Formats attendus</strong> : placeholder + hint décrivent la saisie; autoClamp optionnel sur la saisie interne.</li>
+			<li><strong>Lecture/voix</strong> : libellé/placeholder alimentent <code>aria-label</code>; les messages sont reliés via <code>aria-describedby</code>.</li>
+		</ul>
+	</CriteriaCard>
+</CriteriaSection>
+
+<DemoSection title="Saisie + calendrier (mode combiné)">
+	<Story of={Stories.Default} />
+</DemoSection>
+
+<BestPracticesSection>
+- Fournir un libellé ou <code>aria-label</code> explicite, surtout si le label visuel est masqué ou tronqué.
+- Si <code>readonly</code>, laisser le calendrier fermé et désactiver l’effacement; ne pas surcharger les raccourcis.
+- En plage de dates, conserver la séparatrice <code>" - "</code> et préciser l’ordre début/fin dans le hint.
+- Ajuster <code>period</code> pour ne pas masquer des dates attendues; vérifier <code>min/max</code> cohérents avec la plage.
+- Avec <code>textFieldActivator</code>, s’assurer que le label reste lisible et que l’icône n’est pas le seul point d’entrée.
+</BestPracticesSection>
+
+<ResourcesSection>
+- Stories : <code>Default</code>, <code>DateRange</code>, <code>DisablePickerInteraction</code>, <code>AutoFormattingInput</code>, <code>WithTextFieldActivator</code>, <code>ReadonlyMode</code>.
+- Tests : <code>ComplexDatePicker.a11y.spec.ts</code> (axe) et <code>ComplexDatePicker.spec.ts</code> couvrent ouverture, focus et validation combinée.
+- Références : WAI-ARIA combobox + grid pour les schémas combobox + calendrier.
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/DatePicker/ComplexDatePicker/tests/ComplexDatePicker.spec.ts

@@ -247,7 +247,7 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.currentYearName).toBe('2030')
 	})
 
-	it('validateOnSubmit returns false when required and empty in text-only mode', () => {
+	it('validateOnSubmit returns false when required and empty in text-only mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			noCalendar: true,
@@ -255,7 +255,7 @@ describe('ComplexDatePicker.clean', () => {
 			format: 'DD/MM/YYYY',
 		})
 
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 	})
 
@@ -269,7 +269,7 @@ describe('ComplexDatePicker.clean', () => {
 		})
 
 		await nextTick()
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(true)
 	})
 
@@ -283,20 +283,20 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.exists()).toBe(true)
 	})
 
-	it('validateOnSubmit returns false when required and empty in calendar mode', () => {
+	it('validateOnSubmit returns false when required and empty in calendar mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			required: true,
 			format: 'DD/MM/YYYY',
 		})
 
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 		// Should surface at least one error message
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
-	it('validateDates flags an error when end date is before start date in range mode', () => {
+	it('validateDates flags an error when end date is before start date in range mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			format: 'DD/MM/YYYY',
@@ -309,12 +309,12 @@ describe('ComplexDatePicker.clean', () => {
 			new Date(2025, 0, 1),
 		]
 
-		const result = wrapper.vm.validateDates(true)
+		const result = await wrapper.vm.validateDates(true)
 		expect(result.hasError).toBe(true)
-		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
+		expect(result.state.errors.length).toBeGreaterThan(0)
 	})
 
-	it('validateDates does not flag an error for an incomplete range when not forced', () => {
+	it('validateDates does not flag an error for an incomplete range when not forced', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			format: 'DD/MM/YYYY',
@@ -341,7 +341,7 @@ describe('ComplexDatePicker.clean', () => {
 
 		// Simuler une erreur required
 		wrapper.vm.selectedDates = null
-		wrapper.vm.validateDates(true)
+		await wrapper.vm.validateDates(true)
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 
 		// Ouvrir le calendrier puis réinitialiser

package/src/components/DatePicker/DatePickerValidationExample/CalendarMode.stories.ts

@@ -51,8 +51,8 @@ export const Required: StoryObj = {
 					const datePicker1 = ref()
 					const date1 = ref('')
 
-					const handleSubmit = () => {
-						const isValid1 = datePicker1.value?.validateOnSubmit()
+					const handleSubmit = async () => {
+						const isValid1 = await datePicker1.value?.validateOnSubmit()
 						
 						if (!isValid1) {
 							alert('Corrigez les erreurs avant de soumettre !')
@@ -71,8 +71,8 @@ export const Required: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -151,8 +151,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
 					const datePicker1 = ref()
 					const date1 = ref('01/01/2100')
 
-					const handleSubmit = () => {
-						const isValid1 = datePicker1.value?.validateOnSubmit()
+					const handleSubmit = async () => {
+						const isValid1 = await datePicker1.value?.validateOnSubmit()
 						
 						if (!isValid1) {
 							alert('Corrigez les erreurs avant de soumettre !')
@@ -171,8 +171,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('01/01/2100')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')