@cnamts/synapse 1.0.26 → 1.0.27

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

@@ -4,12 +4,11 @@
 	import DateTextInput from '../DateTextInput/DateTextInput.vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
 	import { VDatePicker } from 'vuetify/components'
-	import { useValidation, type ValidationResult, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { useDateInitialization, type DateModelValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
-	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDateValidation, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation, useDatePickerFocusTrap } from '../composables'
+	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation, useDatePickerFocusTrap, useDatePickerValidationBridge } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
@@ -250,69 +249,6 @@
 		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
-	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: 'Date',
-		disableErrorHandling: props.disableErrorHandling,
-	})
-	const { errors, warnings, successes, validateField: baseValidateField, clearValidation: baseClearValidation } = validation
-
-	const clearValidation = () => baseClearValidation()
-
-	watch(() => props.readonly, () => {
-		// When toggling readonly, reset validation state to avoid stale success/errors
-		errors.value = []
-		warnings.value = []
-		successes.value = []
-	})
-
-	const validateField = (
-		value: unknown,
-		rules: ValidationRule[] = [],
-		warningRules: ValidationRule[] = [],
-		successRules: ValidationRule[] = [],
-	): Promise<ValidationResult> | ValidationResult => {
-		if (props.readonly) {
-			return {
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: { errors: [], warnings: [], successes: [] },
-			}
-		}
-
-		return baseValidateField(value, rules, warningRules, successRules)
-	}
-
-	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 = validation.displaySuccesses
-	const isOnSuccess = computed(() => successes.value.length > 0 && errors.value.length === 0 && warnings.value.length === 0)
-
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
 	const preventCloseOnKeyboardNavigation = ref(false)
@@ -320,78 +256,37 @@
 	const currentRangeIsValid = ref(true)
 	const getRangeValidationError = ref('')
 
-	const { validateDates: coreValidateDates } = useDateValidation({
+	const {
+		validation,
+		errors,
+		warnings,
+		successes,
+		clearValidation,
+		validateDates,
+	} = useDatePickerValidationBridge({
+		showSuccessMessages: props.showSuccessMessages,
+		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: props.noCalendar,
-		// On garde la logique "required" spécifique à CalendarMode
-		required: false,
+		required: props.required,
 		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,
+		readonly: computed(() => props.readonly),
+		skipValidationWhenReadonly: true,
+		useCalendarModeRequiredFlow: true,
+		isInitialValidation,
+		isValidateOnBlur: computed(() => props.isValidateOnBlur),
+		onblur,
 	})
 
-	// Fonction pour valider les dates
-	const validateDates = async (forceValidation = false) => {
-		if (props.noCalendar) {
-			// En mode no-calendar, on délègue la validation au DateTextInput
-			return
-		}
-
-		// Réinitialiser la validation
-		clearValidation()
-
-		// Si la gestion des erreurs est désactivée, on effectue la validation interne
-		// mais on n'ajoute pas les messages d'erreur
-		const shouldDisplayErrors = !props.disableErrorHandling
-
-		// Vérifier si le champ est requis et vide
-		if ((forceValidation || !isUpdatingFromInternal.value) && props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
-			if (props.readonly) {
-				return
-			}
-			// Ne pas afficher d'erreur si on est sur une perte de focus et si isValidateOnBlur est false
-			if (onblur.value && !props.isValidateOnBlur) {
-				return
-			}
-			// Ne pas afficher d'erreur si on est dans le contexte du mounted initial
-			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
-			}
-			return
-		}
-		// Permettre aux custom rules de s'exécuter même sur des champs vides
-		if (!selectedDates.value) {
-			if (!props.customRules || props.customRules.length === 0) return
-
-			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-				// Comportement historique : exécuter directement les règles personnalisées même si la valeur est vide
-				await validateField(
-					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
-		}
-
-		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
-		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-			await coreValidateDates(forceValidation)
-		}
-	}
+	const errorMessages = errors
+	const warningMessages = warnings
+	const successMessages = validation.displaySuccesses
+	const isOnSuccess = computed(() => successes.value.length > 0 && errors.value.length === 0 && warnings.value.length === 0)
 
 	// Fonction centralisée pour mettre à jour le modèle
 	const updateModel = async (value: DateModelValue) => {
@@ -409,9 +304,9 @@
 		}
 		finally {
 			// S'assurer que le flag est toujours réinitialisé
-			setTimeout(() => {
+			queueMicrotask(() => {
 				isUpdatingFromInternal.value = false
-			}, 0)
+			})
 		}
 	}
 
@@ -447,9 +342,9 @@
 				}
 			}
 			finally {
-				setTimeout(() => {
+				queueMicrotask(() => {
 					isUpdatingFromInternal.value = false
-				}, 0)
+				})
 			}
 		}
 		else {
@@ -497,7 +392,7 @@
 
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
 	const handleDateTextInputUpdate = async (value: DateModelValue) => {
-		if (isUpdatingFromInternal.value) return
+		if (isUpdatingFromInternal.value && !props.noCalendar) return
 
 		try {
 			isUpdatingFromInternal.value = true
@@ -1217,13 +1112,13 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 }
 
@@ -1241,33 +1136,33 @@
 
 .v-messages__message--error {
 	:deep(.v-input__control) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 }
 
@@ -1308,7 +1203,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: rgb(var(--v-theme-backgroundMain));
+	background-color: rgb(var(--v-theme-background));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1316,7 +1211,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
+	background-color: rgb(var(--v-theme-primaryVariant)) !important;
 }
 
 .fade-enter-active,

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

@@ -0,0 +1,156 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { nextTick } from 'vue'
+import DatePicker from '../DatePicker.vue'
+
+describe('DatePicker.vue - coverage', () => {
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('handleDateTextInputUpdate null efface selectedDates (noCalendar)', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '01/01/2025', format: 'DD/MM/YYYY', noCalendar: true },
+		})
+		await flushPromises()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		await (w.vm as any).handleDateTextInputUpdate(null)
+		await flushPromises()
+		expect(w.vm.selectedDates).toBeNull()
+		w.unmount()
+	})
+
+	it('handleDateTextInputUpdate array range met à jour selectedDates (noCalendar)', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', noCalendar: true, displayRange: true },
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		await (w.vm as any).handleDateTextInputUpdate(['01/01/2025', '10/01/2025'])
+		await flushPromises()
+		expect(w.vm.selectedDates).not.toBeNull()
+		w.unmount()
+	})
+
+	it('handleDateTextInputSelection met à jour le modèle', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', noCalendar: true },
+		})
+		const input = w.find('input')
+		await input.setValue('01/01/2025')
+		await input.trigger('blur')
+		await flushPromises()
+		const emitted = w.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		w.unmount()
+	})
+
+	it('watcher modelValue array range met à jour textInputValue (noCalendar)', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', noCalendar: true, displayRange: true },
+		})
+		await w.setProps({ modelValue: ['01/01/2025', '10/01/2025'] })
+		await flushPromises()
+		expect(w.exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('watcher modelValue string execute le watcher noCalendar (valeur valide)', async () => {
+		vi.useFakeTimers()
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', noCalendar: true },
+		})
+		await w.setProps({ modelValue: '15/06/2025' })
+		await nextTick()
+		vi.runAllTimers()
+		await nextTick()
+		expect(w.exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('watcher modelValue string invalide execute le watcher noCalendar', async () => {
+		vi.useFakeTimers()
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', noCalendar: true },
+		})
+		await w.setProps({ modelValue: 'invalid-date' })
+		await nextTick()
+		vi.runAllTimers()
+		await nextTick()
+		expect(w.exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('watcher selectedDates null remet currentMonth/Year à today', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY' },
+		})
+		w.vm.selectedDates = new Date(2020, 5, 15)
+		await nextTick()
+		w.vm.selectedDates = null
+		await nextTick()
+		const today = new Date()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((w.vm as any).currentYear).toBe(today.getFullYear().toString())
+		w.unmount()
+	})
+
+	it('syncDisplayedMonthYearFromDate met à jour currentMonth et currentYear', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY' },
+		})
+		const date = new Date(2028, 3, 15) // Avril 2028
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(w.vm as any).syncDisplayedMonthYearFromDate(date)
+		await nextTick()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((w.vm as any).currentMonth).toBe('3')
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((w.vm as any).currentYear).toBe('2028')
+		w.unmount()
+	})
+
+	it('openDatePickerOnFocus émet focus', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY' },
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(w.vm as any).openDatePickerOnFocus()
+		await nextTick()
+		expect(w.emitted('focus')).toBeTruthy()
+		w.unmount()
+	})
+
+	it('openDatePickerOnIconClick ne fait rien si readonly', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', readonly: true },
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(w.vm as any).openDatePickerOnIconClick()
+		await nextTick()
+		expect(w.vm.isDatePickerVisible).toBe(false)
+		w.unmount()
+	})
+
+	it('watcher displayFormattedDate disabled sync depuis modelValue', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '01/01/2025', format: 'DD/MM/YYYY', disabled: true },
+		})
+		await flushPromises()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(w.vm as any).displayFormattedDate = ''
+		await nextTick()
+		expect(w.exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('handleSelectToday displayRange sélectionne les deux dates', async () => {
+		const w = mount(DatePicker, {
+			props: { label: 'Date', modelValue: '', format: 'DD/MM/YYYY', displayRange: true },
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(w.vm as any).handleSelectToday()
+		await flushPromises()
+		expect(w.emitted('update:modelValue')).toBeTruthy()
+		w.unmount()
+	})
+})