@cnamts/synapse 1.0.14 → 1.0.16

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance } from 'vue'
+	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance, type Ref } from 'vue'
 	import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from '../DateTextInput/DateTextInput.vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
 	import { VDatePicker } from 'vuetify/components'
-	import { useValidation } from '@/composables/validation/useValidation'
+	import { useValidation, type ValidationResult } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
-	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay } from '../composables'
+	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDateValidation, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
 	import { mdiCalendar } from '@mdi/js'
-	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+	import type { DateObjectValue } from '../types'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -31,7 +31,7 @@
 
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
-		label?: string
+		label: string
 		placeholder?: string
 		format?: string
 		dateFormatReturn?: string
@@ -43,9 +43,9 @@
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
 		displayPrependIcon?: boolean
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customRules?: { type: string, options: any }[]
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customWarningRules?: { type: string, options: any }[]
 		disabled?: boolean
 		noIcon?: boolean
@@ -75,8 +75,7 @@
 		persistentHint?: boolean
 	}>(), {
 		modelValue: undefined,
-		label: DATE_PICKER_MESSAGES.LABEL_DEFAULT,
-		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
+		placeholder: undefined,
 		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		dateFormatReturn: '',
 		isBirthDate: false,
@@ -121,7 +120,7 @@
 	const { todayInString, headerDate } = useTodayButton(props)
 	const { labelWithAsterisk } = useAsteriskDisplay(props)
 
-	const selectedDates = ref<Date | Date[] | null>(
+	const selectedDates = ref<Date | (Date | null)[] | null>(
 		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
 	)
 
@@ -198,16 +197,59 @@
 			clearValidation: () => {},
 		}
 
+	const validateFieldForDateValidation = (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		value: any,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		rules: any[] = [],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		warningRules: any[] = [],
+	): ValidationResult => {
+		if (props.readonly) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		return validateField(value, rules, warningRules, []) as ValidationResult
+	}
+
 	const errorMessages = errors
 	const warningMessages = warnings
 	const successMessages = successes
-	const displayFormattedDate = ref('')
-
-	const textInputValue = ref<string>('')
 
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
+	const preventCloseOnKeyboardNavigation = ref(false)
 	const isInitialValidation = ref(true)
+	const currentRangeIsValid = ref(true)
+	const getRangeValidationError = ref('')
+
+	const { validateDates: coreValidateDates } = useDateValidation({
+		noCalendar: props.noCalendar,
+		// On garde la logique "required" spécifique à CalendarMode
+		required: false,
+		displayRange: props.displayRange,
+		disableErrorHandling: props.disableErrorHandling,
+		customRules: computed(() => props.customRules),
+		customWarningRules: computed(() => props.customWarningRules),
+		selectedDates: selectedDates as Ref<DateObjectValue>,
+		isUpdatingFromInternal,
+		currentRangeIsValid,
+		getRangeValidationError,
+		clearValidation,
+		validateField: validateFieldForDateValidation,
+		errors,
+		warnings,
+		successes,
+	})
 
 	// Fonction pour valider les dates
 	const validateDates = (forceValidation = false) => {
@@ -239,28 +281,27 @@
 			return
 		}
 		// Permettre aux custom rules de s'exécuter même sur des champs vides
-		if (!selectedDates.value && (!props.customRules || props.customRules.length === 0)) return
-
-		// Préparer les dates à valider
-		const datesToValidate = Array.isArray(selectedDates.value)
-			? selectedDates.value
-			: [selectedDates.value]
+		if (!selectedDates.value) {
+			if (!props.customRules || props.customRules.length === 0) return
 
-		// Valider chaque date
-		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
-		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-			datesToValidate.forEach((date) => {
+			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
+				// Comportement historique : exécuter directement les règles personnalisées même si la valeur est vide
 				validateField(
-					date,
+					selectedDates.value,
 					props.customRules,
 					props.customWarningRules,
 				)
-			})
+				// Dédoublonner les messages comme auparavant
+				errors.value = [...new Set(errors.value)]
+				warnings.value = [...new Set(warnings.value)]
+				successes.value = [...new Set(successes.value)]
+			}
+			return
+		}
 
-			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
-			errors.value = [...new Set(errors.value)]
-			warnings.value = [...new Set(warnings.value)]
-			successes.value = [...new Set(successes.value)]
+		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
+		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
+			coreValidateDates(forceValidation)
 		}
 	}
 
@@ -272,8 +313,10 @@
 		try {
 			isUpdatingFromInternal.value = true
 			emit('update:modelValue', value)
-			isDatePickerVisible.value = false
-			emit('closed')
+			if (!preventCloseOnKeyboardNavigation.value) {
+				isDatePickerVisible.value = false
+				emit('closed')
+			}
 			validateDates()
 		}
 		finally {
@@ -298,20 +341,17 @@
 			// Mettre à jour textInputValue pour le DateTextInput
 			try {
 				isUpdatingFromInternal.value = true
-				if (Array.isArray(newValue)) {
-					// Pour les plages de dates, formater correctement la plage complète
-					if (props.displayRange && newValue.length >= 2) {
-						// Formater la plage complète pour l'affichage
-						textInputValue.value = `${formatDate(newValue[0], props.format)} - ${formatDate(newValue[1], props.format)}`
-					}
-					else if (newValue.length > 0) {
-						// Si on n'a qu'une date ou mode non-range, utiliser la première date
-						textInputValue.value = formatDate(newValue[0], props.format)
+				if (Array.isArray(newValue) && props.displayRange && newValue.length >= 2 && props.noCalendar) {
+					// Cas spécifique noCalendar + displayRange : conserver la chaîne de plage complète
+					const start = newValue[0]
+					const end = newValue[1]
+					if (start && end) {
+						textInputValue.value = `${formatDate(start, props.format)} - ${formatDate(end, props.format)}`
 					}
 				}
 				else {
-					// Pour une date unique
-					textInputValue.value = formatDate(newValue, props.format)
+					// Cas générique : déléguer au composable pour synchroniser l'input
+					syncTextInputFromSelection()
 				}
 			}
 			finally {
@@ -342,50 +382,26 @@
 		props.displayRange,
 	)
 
-	// Date(s) formatée(s) en chaîne de caractères pour la valeur de retour
-	const formattedDate = computed<DateValue>(() => {
-		if (!selectedDates.value) return ''
-
-		const returnFormat = props.dateFormatReturn || props.format
-
-		// Pour les plages de dates, utiliser rangeBoundaryDates s'il est disponible
-		if (props.displayRange && rangeBoundaryDates.value) {
-			return [
-				formatDate(rangeBoundaryDates.value[0], returnFormat),
-				formatDate(rangeBoundaryDates.value[1], returnFormat),
-			] as [string, string]
-		}
-		else if (Array.isArray(selectedDates.value)) {
-			if (selectedDates.value.length >= 2) {
-				return [
-					formatDate(selectedDates.value[0], returnFormat),
-					formatDate(selectedDates.value[selectedDates.value.length - 1], returnFormat),
-				] as [string, string]
-			}
-			return ''
-		}
-
-		return formatDate(selectedDates.value, returnFormat)
+	const {
+		textInputValue,
+		displayFormattedDate,
+		formattedDate,
+		displayFormattedFromSelectedDates,
+		syncFromModelValue,
+		syncTextInputFromSelection,
+	} = useDatePickerState({
+		selectedDates,
+		rangeBoundaryDates,
+		format: props.format,
+		dateFormatReturn: props.dateFormatReturn,
+		displayRange: props.displayRange,
+		parseDate,
+		formatDate,
+		initializeSelectedDates,
+		validateDates,
+		updateModel,
 	})
 
-	watch(formattedDate, (newValue) => {
-		if (!newValue || newValue === '') {
-			textInputValue.value = ''
-		}
-		else if (typeof newValue === 'string') {
-			// Si on a un format de retour différent, on doit convertir la date
-			if (props.dateFormatReturn) {
-				const date = parseDate(newValue, props.dateFormatReturn)
-				if (date) {
-					textInputValue.value = formatDate(date, props.format)
-				}
-			}
-			else {
-				textInputValue.value = newValue
-			}
-		}
-	}, { immediate: true })
-
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
 	const handleDateTextInputUpdate = (value: DateValue) => {
 		if (isUpdatingFromInternal.value) return
@@ -493,22 +509,8 @@
 		}
 	})
 
-	// Date(s) formatée(s) en chaîne de caractères pour l'affichage
-	const displayFormattedDateComputed = computed(() => {
-		if (!selectedDates.value) return null
-
-		if (Array.isArray(selectedDates.value)) {
-			if (selectedDates.value.length >= 2) {
-				return `${formatDate(selectedDates.value[0], props.format)} - ${formatDate(
-					selectedDates.value[selectedDates.value.length - 1],
-					props.format,
-				)}`
-			}
-			return formatDate(selectedDates.value[0], props.format)
-		}
-
-		return formatDate(selectedDates.value, props.format)
-	})
+	// Date(s) formatée(s) en chaîne de caractères pour l'affichage (centralisée dans useDatePickerState)
+	const displayFormattedDateComputed = displayFormattedFromSelectedDates
 
 	watch(displayFormattedDateComputed, (newValue) => {
 		if (!props.noCalendar && newValue) {
@@ -589,6 +591,28 @@
 		document.removeEventListener('click', handleClickOutside)
 	})
 
+	useCalendarKeyboardNavigation({
+		isDatePickerVisible,
+		datePickerRef: datePickerRef as unknown as Ref<ComponentPublicInstance | null>,
+		getCurrentDate: () => {
+			const value = selectedDates.value
+			if (!value) return null
+
+			if (Array.isArray(value)) {
+				return value[0] ?? null
+			}
+
+			return value
+		},
+		setCurrentDate: (date: Date) => {
+			preventCloseOnKeyboardNavigation.value = true
+			updateSelectedDates([date])
+			queueMicrotask(() => {
+				preventCloseOnKeyboardNavigation.value = false
+			})
+		},
+	})
+
 	const validateOnSubmit = () => {
 		// Si le mode noCalendar est activé, on délègue la validation au DateTextInput
 		if (props.noCalendar) {
@@ -642,59 +666,16 @@
 		})
 	}
 
-	// Propriété calculée pour récupérer les jours fériés de l'année courante
-	const holidays = computed(() => {
-		// Utiliser le composable useHolidayDay pour récupérer les jours fériés
-		const { getJoursFeries } = useHolidayDay()
-
-		// Convertir l'année en nombre, utiliser l'année courante comme valeur par défaut
-		const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
-
-		// Récupérer les jours fériés au format DD/MM/YYYY
-		const joursFeries = getJoursFeries(year)
-
-		// Tableau pour stocker les jours fériés
-		const holidayDates: Date[] = []
-
-		// Convertir les dates du format string en objets Date
-		joursFeries.forEach((dateStr) => {
-			const [day, month, yearStr] = dateStr.split('/')
-			// Mois -1 car les mois dans Date sont indexés à partir de 0
-			holidayDates.push(new Date(parseInt(yearStr), parseInt(month) - 1, parseInt(day)))
-		})
-
-		// Retourner le tableau des jours fériés
-		return holidayDates
+	// Marquage des jours fériés partagé via le composable dédié
+	const { markHolidayDays } = useHolidayHighlighting({
+		currentMonth,
+		currentYear,
+		isDisplayHolidayDays: () => props.displayHolidayDays,
+		rootElement: computed(
+			() => datePickerRef.value?.$el as HTMLElement | null,
+		),
 	})
 
-	// Fonction pour marquer les jours fériés dans le calendrier
-	const markHolidayDays = () => {
-		if (!props.displayHolidayDays) return
-		// Attendre que le DOM soit mis à jour
-		nextTick(() => {
-			// Récupérer l'année et le mois courants
-			const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
-			// Utiliser currentMonth.value !== null pour vérifier si la valeur est définie, même si c'est 0
-			const month = parseInt(currentMonth.value !== null ? currentMonth.value : new Date().getMonth().toString(), 10)
-
-			// Récupérer les jours fériés pour ce mois
-			const monthHolidays = holidays.value.filter((holiday) => {
-				// La comparaison doit tenir compte du fait que getMonth() retourne 0-11
-				return holiday.getMonth() === month
-			})
-
-			// Pour chaque jour férié, trouver l'élément DOM correspondant et ajouter la classe
-			monthHolidays.forEach((holiday) => {
-				const day = holiday.getDate()
-				const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-				const dayElements = document.querySelectorAll(`[data-v-date="${dateStr}"]`)
-				dayElements.forEach((element) => {
-					element.classList.add('holiday-day')
-				})
-			})
-		})
-	}
-
 	// Utilisation du composable pour gérer le mode d'affichage du CalendarMode
 	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
 		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
@@ -717,6 +698,7 @@
 			resetViewMode()
 			// Marquer les jours fériés lorsque le calendrier devient visible
 			markHolidayDays()
+			customizeMonthButton()
 		}
 		if (!isVisible && props.isBirthDate) {
 			// Réinitialiser le mode d'affichage au type birthdate
@@ -754,29 +736,6 @@
 		}
 	}
 
-	const syncFromModelValue = (newValue: DateInput | undefined) => {
-		if (!newValue || newValue === '') {
-			selectedDates.value = null
-			textInputValue.value = ''
-			displayFormattedDate.value = ''
-			validateDates()
-			return
-		}
-
-		selectedDates.value = initializeSelectedDates(newValue, props.format, props.dateFormatReturn)
-
-		if (selectedDates.value) {
-			const firstDate = Array.isArray(selectedDates.value)
-				? selectedDates.value[0]
-				: selectedDates.value
-
-			textInputValue.value = formatDate(firstDate, props.format)
-			displayFormattedDate.value = displayFormattedDateComputed.value || ''
-		}
-
-		validateDates()
-	}
-
 	watch(() => props.modelValue, (newValue) => {
 		if (isUpdatingFromInternal.value) {
 			if (props.displayRange) {
@@ -894,6 +853,8 @@
 		initializeSelectedDates,
 		updateAccessibility,
 		openDatePicker,
+		updateSelectedDates,
+		handleSelectToday,
 	})
 </script>
 
@@ -969,7 +930,7 @@
 				:show-week-number="props.showWeekNumber"
 				:is-birth-date="props.isBirthDate || props.birthDate"
 				:text-field-activator="props.textFieldActivator"
-				:title="props.title || props.placeholder || undefined"
+				:title="props.title"
 				:period="period"
 				:auto-clamp="props.autoClamp"
 				:label="props.label"
@@ -1011,9 +972,8 @@
 						:disabled="props.disabled"
 						:disable-click-button="false"
 						:readonly="true"
-						:label="labelWithAsterisk || ''"
+						:label="labelWithAsterisk"
 						:placeholder="props.placeholder"
-						:display-persistent-placeholder="true"
 						:no-icon="props.noIcon"
 						:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 						:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
@@ -1025,7 +985,7 @@
 						:display-asterisk="props.displayAsterisk"
 						:is-clearable="!props.readonly"
 						:auto-clamp="props.autoClamp"
-						:title="props.title || props.placeholder || undefined"
+						:title="props.title"
 						:hint="props.hint"
 						:persistent-hint="props.persistentHint"
 						@click="openDatePickerOnClick"
@@ -1242,4 +1202,23 @@
 	padding: 13px;
 }
 
+/* Style de base du ::after */
+:deep(.custom-year-btn::after) {
+	background-color: #afb1b1;
+	padding: 10px 40px;
+	text-decoration: none;
+	display: inline-block;
+	margin-left: -22px !important;
+	cursor: pointer;
+	border-radius: 9999px;
+}
+
+:deep(.custom-month-btn::after) {
+	background-color: #afb1b1;
+	text-decoration: none;
+	display: inline-block;
+	cursor: pointer;
+	border-radius: 9999px;
+}
+
 </style>

package/src/components/DatePicker/CalendarMode/tests/DatePicker.events.spec.ts

@@ -9,6 +9,7 @@ describe('CalendarMode.vue - Events', () => {
 	beforeEach(() => {
 		wrapper = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 			},
@@ -55,6 +56,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Créer un composant avec disablePickerInteraction à true
 		const wrapperWithDisabledPicker = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 				disablePickerInteraction: true,
@@ -112,6 +114,7 @@ describe('CalendarMode.vue - Events', () => {
 	it('accepte différents formats de date', async () => {
 		const wrapperWithDashFormat = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'YYYY-MM-DD',
 			},
@@ -133,6 +136,7 @@ describe('CalendarMode.vue - Events', () => {
 	it('accepte les plages de dates en entrée', async () => {
 		const wrapperWithRange = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: ['01/01/2023', '05/01/2023'],
 				format: 'DD/MM/YYYY',
 				displayRange: true,
@@ -156,6 +160,7 @@ describe('CalendarMode.vue - Events', () => {
 
 		const wrapperWithRules = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 				customRules: [customRule],