@cnamts/synapse 1.0.26 → 1.0.27

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'
@@ -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: props.showSuccessMessages,
+		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,8 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: rgb(var(--v-theme-backgroundMain));
+	// background-color: rgb(var(--v-theme-background));
+	background: green !important;
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1350,7 +1331,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;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {

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')
+	})
 })

package/src/components/DatePicker/ComplexDatePicker/tests/bridge-integration.regression.spec.ts

@@ -0,0 +1,210 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+import ComplexDatePicker from '../ComplexDatePicker.vue'
+import DateTextInput from '../../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests de régression pour l'intégration Bridge + validation
+ * Couvrent les cas critiques non testés précédemment
+ */
+describe('Bridge Integration Regression Tests', () => {
+	/**
+	 * Test 1: Réactivité des customRules
+	 * Bug potentiel : Si les règles ne sont pas réactives,
+	 * la validation croisée (dateA -> dateB) ne fonctionne pas
+	 */
+	it('réagit aux changements de customRules dynamiques', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				// Première règle qui passe toujours
+				customRules: [{ type: 'custom', options: { validate: () => true, message: 'Erreur' } }],
+			},
+		})
+
+		// Changer les règles via setProps (comme le ferait le parent)
+		await wrapper.setProps({
+			customRules: [{ type: 'custom', options: { validate: () => false, message: 'Nouvelle erreur' } }],
+		})
+		await nextTick()
+
+		// La nouvelle règle doit être prise en compte
+		const input = wrapper.find('input')
+		await input.setValue('15/05/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Avec la nouvelle règle qui retourne false, on doit avoir une erreur
+		const errors = wrapper.findAll('.v-messages__message--error')
+		expect(errors.length).toBeGreaterThan(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2: Mode readonly - pas de validation active
+	 * Bug potentiel : Validation qui s'exécute quand même en readonly
+	 */
+	it('ne valide pas quand readonly est true', async () => {
+		const validateSpy = vi.fn(() => true)
+
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				readonly: true,
+				showSuccessMessages: true,
+				customRules: [{ type: 'custom', options: { validate: validateSpy } }],
+			},
+		})
+
+		// Attendre un tick pour s'assurer que la validation ne s'est pas déclenchée
+		await nextTick()
+
+		// La règle ne doit pas avoir été appelée
+		expect(validateSpy).not.toHaveBeenCalled()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3: Coordonnation parent/enfant avec skipInternalValidation
+	 * Bug potentiel : DateTextInput valide en parallèle du parent
+	 */
+	it('ComplexDatePicker contrôle la validation quand DateTextInput a skipInternalValidation', async () => {
+		const parentValidate = vi.fn(() => ({ hasError: false, hasWarning: false, hasSuccess: true, state: { errors: [], warnings: [], successes: ['OK'] } }))
+
+		// Ce test vérifie que le parent gère la validation, pas l'enfant
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				modelValue: '',
+				label: 'Date parent',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				customRules: [{ type: 'custom', options: { validate: parentValidate } }],
+			},
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('20/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		// Vérifier qu'on a un message de succès (du parent)
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBeLessThanOrEqual(1)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 4: Pas de double validation avec queueMicrotask
+	 * Bug potentiel : queueMicrotask pourrait causer des validations en cascade
+	 */
+	it('ne déclenche pas de validation en cascade avec queueMicrotask', async () => {
+		let validationCount = 0
+		const validateRule = () => {
+			validationCount++
+			return true
+		}
+
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				customRules: [{ type: 'custom', options: { validate: validateRule } }],
+				showSuccessMessages: true,
+			},
+		})
+
+		// Attendre que les microtasks soient traitées
+		await nextTick()
+		await new Promise(resolve => queueMicrotask(() => resolve(undefined)))
+
+		// La validation ne doit pas avoir été déclenchée automatiquement
+		// (seulement au blur ou changement de valeur)
+		expect(validationCount).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 5: Clear reset correctement les messages
+	 * Bug potentiel : Messages qui restent après clear
+	 */
+	it('reset les messages de validation après clear', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '15/05/2025',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				showSuccessMessages: true,
+				required: true,
+			},
+		})
+
+		// D'abord s'assurer qu'on a un message de succès
+		await flushPromises()
+
+		// Puis clear
+		await wrapper.setProps({ modelValue: '' })
+		await flushPromises()
+		await nextTick()
+
+		// Plus de message de succès
+		const successMessages = wrapper.findAll('.v-messages__message--success')
+		expect(successMessages.length).toBe(0)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 6: useDatePickerValidationBridge expose les bonnes méthodes
+	 * Bug potentiel : Methods exposées qui ne fonctionnent pas
+	 */
+	it('expose validateOnSubmit qui retourne un booléen', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		// Appeler validateOnSubmit exposé
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Testing internal API
+		const result = await (wrapper.vm as any).validateOnSubmit?.()
+
+		// Doit retourner false car champ vide et required
+		expect(result).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 7: Pas de fuite mémoire avec les watchers
+	 * Bug potentiel : Watchers qui s'accumulent
+	 */
+	it('nettoie les watchers quand le composant est détruit', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		// Détruire le composant
+		wrapper.unmount()
+
+		// Aucune erreur ne doit être levée
+		// (les watchers sont nettoyés automatiquement par Vue)
+		expect(() => wrapper.vm).not.toThrow()
+	})
+})