@cnamts/synapse 1.0.23 → 1.0.25

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
@@ -339,7 +334,12 @@
 			const dateObjects = value
 				.map(dateStr => parseDate(dateStr, returnFormat.value))
 				.filter(Boolean) as Date[]
-			selectedDates.value = dateObjects
+			if (props.displayRange && dateObjects.length >= 2) {
+				selectedDates.value = dateSelectionResult.generateDateRange(dateObjects[0]!, dateObjects[dateObjects.length - 1]!)
+			}
+			else {
+				selectedDates.value = dateObjects
+			}
 		}
 		else {
 			const dateObject = parseDate(value, returnFormat.value)
@@ -353,16 +353,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 })
@@ -395,6 +395,7 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange: dateSelectionResult.generateDateRange,
 	})
 
 	// Display helpers (centralised in useDatePickerState)
@@ -404,9 +405,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 +600,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 +667,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
-			}
 		},
 	})
 
@@ -754,7 +778,7 @@
 					const startDate = parseDate(startDateStr, props.format)
 					const endDate = parseDate(endDateStr, props.format)
 					if (startDate && endDate) {
-						selectedDates.value = [startDate, endDate]
+						selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 						validateDates()
 					}
 				}
@@ -848,7 +872,7 @@
 				const endDate = endStr ? parseDate(endStr, rf) || parseDate(endStr, props.format) : null
 
 				if (startDate && endDate) {
-					selectedDates.value = [startDate, endDate]
+					selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 					displayFormattedDate.value
 						= `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
 				}
@@ -943,12 +967,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 +1081,7 @@
 			<VMenu
 				v-model="isDatePickerVisible"
 				:activator="menuActivatorRef"
+				:activator-props="menuActivatorProps"
 				:min-width="0"
 				location="bottom"
 				:close-on-content-click="false"
@@ -1064,15 +1089,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,85 +1145,89 @@
 					</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>
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .date-picker-title {
 	display: block;
 	text-transform: lowercase;
@@ -1222,7 +1253,7 @@
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
-	border: 2px dotted tokens.$neutral-black;
+	border: 2px dotted rgb(var(--v-theme-grey-darken60));
 	border-radius: 50%;
 }
 
@@ -1241,45 +1272,45 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-success !important;
+		color: rgb(var(--v-theme-textSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 	}
 }
 
 .v-messages__message--error {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 }
 
 :deep(.v-btn__content) {
-	font-size: tokens.$font-size-body-text + 3;
+	font-size: var(--v-fontSize-corpsDeTexte) + 3;
 	font-weight: bold;
 }
 
@@ -1310,7 +1341,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: tokens.$colors-background-main;
+	background-color: rgb(var(--v-theme-backgroundMain));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1318,7 +1349,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-primary-contrasted !important;
+	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
@@ -1407,3 +1438,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>