@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -260,7 +260,7 @@ const meta = {
 		'showSuccessMessages': {
 			control: 'boolean',
 			description: 'Affiche les messages de succès quand la validation est passée avec succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		'bgColor': {
 			control: 'text',

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

@@ -1,43 +1,42 @@
 	<script lang="ts" setup>
 	import {
-		ref,
+		type ComponentPublicInstance,
 		computed,
-		watch,
-		onMounted,
-		onBeforeUnmount,
 		nextTick,
-		type ComponentPublicInstance,
+		onBeforeUnmount,
+		onMounted,
+		ref,
 		type Ref,
+		watch,
 	} from 'vue'
 	import {
-		useDateInitialization,
 		type DateInput,
 		type DateModelValue,
+		useDateInitialization,
 	} from '@/composables/date/useDateInitializationDayjs'
 	import {
 		useAsteriskDisplay,
+		useCalendarKeyboardNavigation,
+		useDateFormatValidation,
 		useDatePickerFocusTrap,
 		useDatePickerState,
-		useDateFormatValidation,
-		useDateValidation,
+		useDatePickerValidationBridge,
 		useDatePickerViewMode,
 		useDatePickerVisibility,
 		useDateRangeValidation,
 		useDateSelection,
 		useDisplayedDateString,
+		useHolidayHighlighting,
 		useInputBlurHandler,
 		useManualDateValidation,
 		useMonthButtonCustomization,
 		useTodayButton,
-		useHolidayHighlighting,
-		useCalendarKeyboardNavigation,
 	} from '../composables'
 	import dayjs from 'dayjs'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from '../DateTextInput/DateTextInput.vue'
 	import { VDatePicker } from 'vuetify/components'
 	import { useInputHandler } from '../composables/useInputHandler'
-	import { useValidation } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import type { DateObjectValue } from '../types'
@@ -204,7 +203,7 @@
 			placeholder: undefined,
 			readonly: false,
 			required: false,
-			showSuccessMessages: true,
+			showSuccessMessages: false,
 			showWeekNumber: false,
 			textFieldActivator: false,
 			title: false,
@@ -232,22 +231,6 @@
 	 * Validation + messages
 	 */
 	const isDatePickerVisible = ref(false)
-	const validation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: 'Date',
-		disableErrorHandling: props.disableErrorHandling,
-	})
-	const { errors, warnings, successes, validateField, clearValidation } = validation
-	const errorMessages = computed(() => errors.value)
-	const warningMessages = computed(() => warnings.value)
-	const successMessages = computed(() => successes.value)
-
-	const getMessageClasses = () => ({
-		'dp-width': true,
-		'v-messages__message--error': errorMessages.value.length > 0,
-		'v-messages__message--warning': warningMessages.value.length > 0 && errorMessages.value.length === 0,
-		'v-messages__message--success': successMessages.value.length > 0 && errorMessages.value.length === 0 && warningMessages.value.length === 0,
-	})
 
 	/**
 	 * Selection state
@@ -275,22 +258,36 @@
 		disableErrorHandling: props.disableErrorHandling,
 	})
 
-	const { validateDates } = useDateValidation({
+	const {
+		errors,
+		warnings,
+		successes,
+		validateField,
+		clearValidation,
+		validateDates,
+	} = useDatePickerValidationBridge({
+		showSuccessMessages: true,
+		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: props.noCalendar,
 		required: props.required,
 		displayRange: props.displayRange,
-		disableErrorHandling: props.disableErrorHandling,
 		customRules: computed(() => props.customRules),
 		customWarningRules: computed(() => props.customWarningRules),
 		selectedDates,
 		isUpdatingFromInternal,
 		currentRangeIsValid,
 		getRangeValidationError,
-		clearValidation,
-		validateField,
-		errors,
-		warnings,
-		successes,
+		revalidateOnCustomRulesChange: true,
+	})
+	const errorMessages = computed(() => errors.value)
+	const warningMessages = computed(() => warnings.value)
+	const successMessages = computed(() => successes.value)
+
+	const getMessageClasses = () => ({
+		'dp-width': true,
+		'v-messages__message--error': errorMessages.value.length > 0,
+		'v-messages__message--warning': warningMessages.value.length > 0 && errorMessages.value.length === 0,
+		'v-messages__message--success': successMessages.value.length > 0 && errorMessages.value.length === 0 && warningMessages.value.length === 0,
 	})
 
 	const {
@@ -343,30 +340,12 @@
 			}
 		}
 		else {
-			const dateObject = parseDate(value, returnFormat.value)
-			selectedDates.value = dateObject
+			selectedDates.value = parseDate(value, returnFormat.value)
 		}
 
 		// 3) Re-emit upward
 		emit('date-selected', value)
 	}
-	// Watcher pour re-valider quand les customRules changent
-	watch(() => props.customRules, () => {
-		if (selectedDates.value !== null) {
-			// Retarder légèrement pour s'assurer que les computed sont mis à jour
-			setTimeout(async () => {
-				clearValidation()
-				const datesToValidate = Array.isArray(selectedDates.value) ? selectedDates.value : [selectedDates.value]
-				for (const date of datesToValidate) {
-					await Promise.resolve(validateField(
-						date,
-						props.customRules,
-						props.customWarningRules,
-					))
-				}
-			}, 5)
-		}
-	}, { deep: true })
 	// Range handling
 	const rangeBoundaryDates = ref<[Date | null, Date | null] | null>(null)
 	const dateSelectionResult = useDateSelection(parseDate, selectedDates, props.format, props.displayRange)
@@ -728,8 +707,7 @@
 
 			if (!charBeforeCursor || !/\d/.test(charBeforeCursor)) {
 				event.preventDefault()
-				const newValue = input.value.substring(0, cursorPos - 2) + input.value.substring(cursorPos)
-				displayFormattedDate.value = newValue
+				displayFormattedDate.value = input.value.substring(0, cursorPos - 2) + input.value.substring(cursorPos)
 				queueMicrotask(() => {
 					const newCursorPos = cursorPos - 2
 					input.setSelectionRange(newCursorPos, newCursorPos)
@@ -901,9 +879,9 @@
 			}
 		}
 		finally {
-			setTimeout(() => {
+			queueMicrotask(() => {
 				isUpdatingFromInternal.value = false
-			}, 0)
+			})
 		}
 	}
 
@@ -1073,6 +1051,7 @@
 				:title="props.title"
 				:hint="props.hint"
 				:persistent-hint="props.persistentHint"
+				:skip-internal-validation="true"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
 			/>
@@ -1106,6 +1085,7 @@
 							ref="dateCalendarTextInputRef"
 							:key="fieldKey"
 							:model-value="textInputValue"
+							:skip-internal-validation="true"
 							:label="labelWithAsterisk"
 							:placeholder="props.placeholder"
 							:format="props.format"
@@ -1273,40 +1253,40 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textSuccess)) !important;
+		color: rgb(var(--v-theme-success)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-success)) !important;
 	}
 }
 
 .v-messages__message--error {
 	:deep(.v-input__control),
 	: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-warning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-warning)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-warning)) !important;
 	}
 }
 
@@ -1342,7 +1322,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) {
@@ -1350,16 +1330,16 @@
 }
 
 :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;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 /* day before weekend */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1377,7 +1357,7 @@
 
 /* Style de base du ::after */
 :deep(.custom-year-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	padding: 10px 40px;
 	text-decoration: none;
 	display: inline-block;
@@ -1387,7 +1367,7 @@
 }
 
 :deep(.custom-month-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;

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

@@ -59,6 +59,24 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.currentMonthName).toBeTruthy()
 	})
 
+	it('preserves autoClamp in text input mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('31/04/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(input.element.value).toBe('30/04/2025')
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[emitted.length - 1]?.[0]).toBe('30/04/2025')
+	})
+
 	it('respects disabled and readonly props when opening the calendar', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
@@ -319,6 +337,29 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
+	it('surfaces custom warning rules without blocking submit in calendar mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			customWarningRules: [
+				{
+					type: 'custom',
+					options: {
+						validate: () => false,
+						warningMessage: 'Warning de contrat ComplexDatePicker',
+					},
+				},
+			],
+		})
+
+		wrapper.vm.selectedDates = new Date(2025, 0, 1)
+		const result = await wrapper.vm.validateOnSubmit()
+
+		expect(result).toBe(true)
+		expect(wrapper.vm.errorMessages).toEqual([])
+		expect(wrapper.vm.warningMessages).toContain('Warning de contrat ComplexDatePicker')
+	})
+
 	it('validateDates flags an error when end date is before start date in range mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
@@ -379,4 +420,169 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.errorMessages.length).toBe(0)
 		expect(wrapper.vm.isDatePickerVisible).toBe(false)
 	})
+
+	it('handleDateSelected avec value null efface la sélection', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		wrapper.vm.selectedDates = new Date(2025, 0, 1)
+		await wrapper.vm.handleDateSelected(null)
+		await flushPromises()
+		expect(wrapper.vm.selectedDates).toBeNull()
+	})
+
+	it('handleDateSelected avec tableau range met à jour selectedDates', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', displayRange: true })
+		await wrapper.vm.handleDateSelected(['01/01/2025', '10/01/2025'])
+		await flushPromises()
+		expect(wrapper.vm.selectedDates).not.toBeNull()
+	})
+
+	it('watcher selectedDates null remet les dates à aujourd hui', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		wrapper.vm.selectedDates = new Date(2025, 0, 1)
+		await nextTick()
+		wrapper.vm.selectedDates = null
+		await flushPromises()
+		// currentYear doit être une année valide (reset vers today)
+		const year = Number(wrapper.vm.currentYear)
+		expect(year).toBeGreaterThanOrEqual(2025)
+	})
+
+	it('syncFromModelValue initialise depuis un array range', async () => {
+		const wrapper = mountComponent({
+			label: 'Test',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			modelValue: ['01/01/2025', '10/01/2025'],
+		})
+		await flushPromises()
+		expect(wrapper.vm.selectedDates).not.toBeNull()
+		expect(wrapper.vm.displayFormattedDate).toContain('01/01/2025')
+	})
+
+	it('syncFromModelValue initialise depuis une string', async () => {
+		const wrapper = mountComponent({
+			label: 'Test',
+			format: 'DD/MM/YYYY',
+			modelValue: '15/06/2025',
+		})
+		await flushPromises()
+		expect(wrapper.vm.displayFormattedDate).toBe('15/06/2025')
+	})
+
+	it('reset avec disabled incrémente fieldKey', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', disabled: true })
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const before = (wrapper.vm as any).fieldKey
+		wrapper.vm.reset()
+		await flushPromises()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).fieldKey).toBe(before + 1)
+	})
+
+	it('navigation année : bridge Dec→Jan quand currentMonth=11 et année monte', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		wrapper.vm.isDatePickerVisible = true
+		// Simuler mois=11 (décembre) et année qui monte
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).currentMonth = '11'
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).currentYear = '2024'
+		await nextTick()
+		// Émettre update:year avec une année supérieure
+		const dp = wrapper.findComponent({ name: 'VDatePicker' })
+		if (dp.exists()) {
+			await dp.vm.$emit('update:year', '2025')
+			await nextTick()
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			expect((wrapper.vm as any).currentMonth).toBe('0')
+		}
+		else {
+			// VDatePicker non rendu sans le calendrier ouvert – appel direct
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			;(wrapper.vm as any).handleYearUpdate?.()
+		}
+	})
+
+	const makeKeydownEvent = (key: string, inputProps: Partial<HTMLInputElement> = {}) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const fakeInput = Object.assign(document.createElement('input'), inputProps) as any
+		fakeInput.setSelectionRange = () => {}
+		const event = new KeyboardEvent('keydown', { key, bubbles: true })
+		Object.defineProperty(event, 'target', { value: fakeInput, writable: false })
+		return event
+	}
+
+	it('handleKeydown Backspace sur séparateur supprime le séparateur', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		const event = makeKeydownEvent('Backspace', { value: '01/', selectionStart: 3, selectionEnd: 3 })
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).handleKeydown(event)
+		await nextTick()
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('handleKeydown ArrowLeft saute le séparateur', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		const event = makeKeydownEvent('ArrowLeft', { value: '01/01/2025', selectionStart: 3, selectionEnd: 3 })
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).handleKeydown(event)
+		await nextTick()
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('handleKeydown ArrowRight saute le séparateur', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY' })
+		const event = makeKeydownEvent('ArrowRight', { value: '01/01/2025', selectionStart: 2, selectionEnd: 2 })
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).handleKeydown(event)
+		await nextTick()
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('handleDateTextInputUpdate en mode noCalendar met à jour le modèle depuis une string', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', noCalendar: true })
+		const input = wrapper.find('input')
+		await input.setValue('15/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+	})
+
+	it('handleDateTextInputUpdate avec valeur null efface selectedDates via reset', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', noCalendar: true })
+		wrapper.vm.selectedDates = new Date(2025, 0, 1)
+		wrapper.vm.reset()
+		await flushPromises()
+		expect(wrapper.vm.selectedDates).toBeNull()
+	})
+
+	it('handleDateTextInputUpdate avec array range startDate only via noCalendar', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', noCalendar: true, displayRange: true })
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2025 - ')
+		await input.trigger('blur')
+		await flushPromises()
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('handleKeydown readonly ne fait rien', async () => {
+		const wrapper = mountComponent({ label: 'Test', format: 'DD/MM/YYYY', readonly: true })
+		const event = makeKeydownEvent('Backspace', { value: '01/01/2025', selectionStart: 3, selectionEnd: 3 })
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		;(wrapper.vm as any).handleKeydown(event)
+		await nextTick()
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('keeps deprecated birthDate prop as an alias for birth date mode', () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			birthDate: true,
+			format: 'DD/MM/YYYY',
+		})
+
+		expect(wrapper.props('birthDate')).toBe(true)
+		expect(wrapper.vm.currentViewMode).toBe('year')
+	})
 })