@cnamts/synapse 1.0.26 → 1.0.27

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -7,12 +7,13 @@
 		useDateInputEditing,
 		useDateAutoClamp,
 		useDateTextField,
+		useDatePickerValidationBridge,
 	} from '../composables'
 	import { ref, computed, watch, nextTick, onMounted, toRefs } from 'vue'
 	import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
-	import { useValidation, type ValidationRule, type ValidationResult } from '@/composables/validation/useValidation'
+	import type { ValidationRule, ValidationResult } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
@@ -48,8 +49,10 @@
 		required?: boolean
 		showSuccessMessages?: boolean
 		title?: string | false
+		/** @internal Désactive la validation interne quand utilisé dans un parent avec validation */
+		skipInternalValidation?: boolean
 	}>(), {
-		autoClamp: true,
+		autoClamp: false,
 		bgColor: 'white',
 		customRules: () => [],
 		customWarningRules: () => [],
@@ -74,6 +77,7 @@
 		required: false,
 		showSuccessMessages: true,
 		title: false,
+		skipInternalValidation: false,
 	})
 
 	const emit = defineEmits<{
@@ -98,13 +102,35 @@
 
 	/**
 	 * =====================
-	 * Validation setup (safe wrapper for readonly, reactive to toggles)
+	 * Validation setup (using DatePickerValidationBridge)
 	 * =====================
 	 */
-	const baseValidation = useValidation({
+	const selectedDates = ref<DateObjectValue>(null)
+	const currentRangeIsValid = ref(true)
+	const getRangeValidationError = ref('')
+	const isUpdatingFromInternal = ref(false)
+
+	// Quand skipInternalValidation est true, on utilise le readonlyValidation (pas de validation active)
+	// pour éviter la double validation avec le parent
+	const shouldUseInternalValidation = computed(() => !props.skipInternalValidation && !readonly.value)
+
+	const bridgeValidation = useDatePickerValidationBridge({
 		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label || props.placeholder,
 		disableErrorHandling: props.disableErrorHandling,
+		noCalendar: true,
+		required: props.required,
+		displayRange: props.displayRange,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility with legacy rule format
+		customRules: computed(() => shouldUseInternalValidation.value ? props.customRules as any : []),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility with legacy rule format
+		customWarningRules: computed(() => shouldUseInternalValidation.value ? props.customWarningRules as any : []),
+		selectedDates,
+		isUpdatingFromInternal,
+		currentRangeIsValid,
+		getRangeValidationError,
+		skipValidationWhenReadonly: true,
+		readonly: readonly,
+		fieldIdentifier: props.label || props.placeholder || 'Date',
 	})
 
 	const readonlyValidation = {
@@ -122,39 +148,56 @@
 		} as ValidationResult),
 	}
 
-	const validationApi = computed(() => (readonly.value ? readonlyValidation : baseValidation))
-
 	const errors = computed({
-		get: () => validationApi.value.errors.value,
-		set: (value) => { validationApi.value.errors.value = value },
+		get: () => readonly.value ? readonlyValidation.errors.value : bridgeValidation.errors.value,
+		set: (value) => {
+			if (!readonly.value) bridgeValidation.errors.value = value
+		},
 	})
 	const warnings = computed({
-		get: () => validationApi.value.warnings.value,
-		set: (value) => { validationApi.value.warnings.value = value },
+		get: () => readonly.value ? readonlyValidation.warnings.value : bridgeValidation.warnings.value,
+		set: (value) => {
+			if (!readonly.value) bridgeValidation.warnings.value = value
+		},
 	})
 	const successes = computed({
-		get: () => validationApi.value.successes.value,
-		set: (value) => { validationApi.value.successes.value = value },
+		get: () => readonly.value ? readonlyValidation.successes.value : bridgeValidation.successes.value,
+		set: (value) => {
+			if (!readonly.value) bridgeValidation.successes.value = value
+		},
 	})
 	const hasError = computed(() => {
-		const api = validationApi.value
-		// baseValidation exposes a computed hasError, readonly stub exposes a ref
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- computed/ref dual shape
-		return (api as any).hasError?.value ?? api.errors.value.length > 0
+		if (readonly.value) return false
+		return bridgeValidation.errors.value.length > 0
 	})
 
-	const clearValidation = () => validationApi.value.clearValidation()
+	const clearValidation = () => {
+		if (readonly.value) {
+			readonlyValidation.clearValidation()
+		}
+		else {
+			bridgeValidation.clearValidation()
+		}
+	}
 
 	const validateField = async (
 		value: unknown,
 		rules?: ValidationRule[],
 		warningRules?: ValidationRule[],
-	): Promise<ValidationResult> => await validationApi.value.validateField(value, rules, warningRules)
+	): Promise<ValidationResult> => {
+		if (readonly.value) {
+			return readonlyValidation.validateField()
+		}
+		return await bridgeValidation.validateField(value, rules, warningRules)
+	}
 
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])
 	const warningMessages = warnings
-	const displaySuccesses = computed(() => (validationApi.value as typeof baseValidation).displaySuccesses?.value ?? [])
+	const displaySuccesses = computed(() => {
+		if (readonly.value) return []
+		return (bridgeValidation.validation as { displaySuccesses?: { value: string[] } }).displaySuccesses?.value ?? []
+	})
 	const successMessages = displaySuccesses
 
 	/**
@@ -176,7 +219,6 @@
 	 * Range input + validations
 	 * =====================
 	 */
-	const selectedDates = ref<DateObjectValue>(null)
 	const {
 		handleRangeInput,
 		resetState,
@@ -187,14 +229,22 @@
 		handlePaste: handlePasteRange,
 	} = useDateRangeInput(displayFormat.value, isRange.value, parseDate, formatDate)
 
-	const { currentRangeIsValid, getRangeValidationError } = useDateRangeValidation(selectedDates, isRange.value)
+	// Note: currentRangeIsValid et getRangeValidationError sont déjà définis pour le Bridge
+	// On met juste à jour les refs depuis useDateRangeValidation
+	const rangeValidation = useDateRangeValidation(selectedDates, isRange.value)
+	watch(() => rangeValidation.currentRangeIsValid.value, (v) => {
+		currentRangeIsValid.value = v
+	})
+	watch(() => rangeValidation.getRangeValidationError.value, (v) => {
+		getRangeValidationError.value = v
+	})
 
 	/**
 	 * =====================
 	 * Format + manual validation
 	 * =====================
 	 */
-	const isUpdatingFromInternal = ref(false)
+	// isUpdatingFromInternal est déjà déclaré plus haut pour le Bridge
 	const isFocused = ref(false)
 	const hasInteracted = ref(false)
 	const ariaLabel = ref(props.label || props.placeholder || DATE_PICKER_MESSAGES.LABEL_DEFAULT)
@@ -523,6 +573,19 @@
 				const nextCursorPosition = nextEditableIndex(dateFormat, editPosition + 1)
 				updateDateValue(updatedDateText, nextCursorPosition)
 			}
+			else if (isEditingLeftDate && separatorIndex !== -1) {
+				const rightStartPosition = nextEditableIndex(dateFormat, 0)
+				const updatedRightDateText = overwriteAt(rightDateText, rightStartPosition, keyboardEvent.key)
+				const nextCursorPosition = nextEditableIndex(dateFormat, rightStartPosition + 1)
+
+				isOverwriteEditing.value = true
+				inputValue.value = `${leftDateText}${rangeSeparator}${updatedRightDateText}`
+				requestAnimationFrame(() => {
+					const absoluteCursorPosition = separatorIndex + rangeSeparator.length + nextCursorPosition
+					inputElement.setSelectionRange(absoluteCursorPosition, absoluteCursorPosition)
+					isOverwriteEditing.value = false
+				})
+			}
 			return
 		}
 
@@ -659,6 +722,30 @@
 		else handlePasteSingle(evt)
 	}
 
+	function applyAutoClampOnCurrentInput(syncModel = true): boolean {
+		if (!props.autoClamp || !inputValue.value) return false
+
+		const clamped = clampIfNeeded(inputValue.value)
+		if (clamped === inputValue.value) return false
+
+		inputValue.value = clamped
+		if (!syncModel) return true
+
+		// Sync model après clamp uniquement si la valeur a changé.
+		isFormatting.value = true
+		if (isRange.value) {
+			const [startDate, endDate] = parseRangeInput(inputValue.value)
+			if (startDate && endDate) emitModel([toReturnFormat(startDate), toReturnFormat(endDate)])
+			else if (startDate) emit('date-selected', toReturnFormat(startDate))
+		}
+		else {
+			const parsedDate = parseDate(inputValue.value, displayFormat.value)
+			if (parsedDate) emitModel(returnFormat.value !== displayFormat.value ? toReturnFormat(parsedDate) : formatDate(parsedDate, displayFormat.value))
+		}
+
+		return true
+	}
+
 	async function onFocus() {
 		isFocused.value = true
 		// Si aucun chiffre n'a été saisi (champ vide ou squelette), bootstrap et place le caret au début
@@ -684,6 +771,14 @@
 			return
 		}
 
+		// Le mode overwrite désactive le clamp pendant la frappe pour préserver le curseur.
+		// On l'applique donc avant la validation au blur, sinon une date comme 31/04
+		// sort en erreur avant d'atteindre la logique d'autoClamp.
+		// isFormatting bloque le watcher inputValue pour éviter une double émission du modèle.
+		isFormatting.value = true
+		applyAutoClampOnCurrentInput(false)
+		isFormatting.value = false
+
 		if (inputValue.value) {
 			const formatValidationResult = validateDateFormatForSingleOrRange(inputValue.value)
 			const customRulesValidationResult = await safeValidateField(inputValue.value, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
@@ -729,26 +824,6 @@
 			}
 		}
 
-		// autoClamp au blur
-		if (props.autoClamp) {
-			const clamped = clampIfNeeded(inputValue.value)
-			if (clamped !== inputValue.value) {
-				inputValue.value = clamped
-
-				// Sync model après clamp uniquement si la valeur a changé
-				isFormatting.value = true
-				if (isRange.value) {
-					const [startDate, endDate] = parseRangeInput(inputValue.value)
-					if (startDate && endDate) emitModel([toReturnFormat(startDate), toReturnFormat(endDate)])
-					else if (startDate) emit('date-selected', toReturnFormat(startDate))
-				}
-				else {
-					const parsedDate = parseDate(inputValue.value, displayFormat.value)
-					if (parsedDate) emitModel(returnFormat.value !== displayFormat.value ? toReturnFormat(parsedDate) : formatDate(parsedDate, displayFormat.value))
-				}
-			}
-		}
-
 		runRules(inputValue.value)
 
 		// Release isFormatting after the current microtask so that
@@ -906,7 +981,7 @@
 						})).validateDates()
 					}
 					finally {
-						setTimeout(() => (isUpdatingFromInternal.value = false), 0)
+						queueMicrotask(() => (isUpdatingFromInternal.value = false))
 					}
 
 					if (result.isComplete && result.dates[1]) {
@@ -924,7 +999,7 @@
 
 				emit('input', result.formattedValue)
 				if (result.cursorPosition !== undefined && !isHandlingBackspace.value) {
-					setTimeout(() => inputEl?.setSelectionRange(result.cursorPosition!, result.cursorPosition!), 0)
+					queueMicrotask(() => inputEl?.setSelectionRange(result.cursorPosition!, result.cursorPosition!))
 				}
 			}
 			else {
@@ -1024,7 +1099,7 @@
 							successes,
 						})).validateDates()
 					}
-					finally { setTimeout(() => (isUpdatingFromInternal.value = false), 0) }
+					finally { queueMicrotask(() => (isUpdatingFromInternal.value = false)) }
 					inputValue.value = formatRangeForDisplay(sd, ed)
 					runRules(inputValue.value)
 				}
@@ -1154,10 +1229,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderWarning)) !important;
+		color: rgb(var(--v-theme-warning)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 
@@ -1165,7 +1240,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-warning)) !important;
 		}
 	}
 }
@@ -1173,11 +1248,11 @@
 .error-field {
 	: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;
 	}
 }
 
@@ -1189,10 +1264,10 @@
 	}
 
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -1200,7 +1275,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }

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

@@ -8,6 +8,13 @@ describe('DateTextInput.clean', () => {
 		props: { label: 'Date', ...props },
 	})
 
+	const typeDigits = async (input: ReturnType<ReturnType<typeof mountComponent>['find']>, digits: string) => {
+		for (const digit of digits) {
+			await input.trigger('keydown', { key: digit })
+			await flushPromises()
+		}
+	}
+
 	it('renders a single-date text field by default', () => {
 		const wrapper = mountComponent({
 			label: 'Date',
@@ -32,6 +39,18 @@ describe('DateTextInput.clean', () => {
 		const emitted = wrapper.emitted('update:model-value')
 		expect(emitted).toBeTruthy()
 		expect(emitted && emitted[0]?.[0]).toBe('01/01/2025')
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+	})
+
+	it('forwards externalErrorMessages to the underlying text field', () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			externalErrorMessages: ['Erreur externe de contrat DateTextInput'],
+		})
+
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.props('errorMessages')).toEqual(['Erreur externe de contrat DateTextInput'])
 	})
 
 	it('formats modelValue according to dateFormatReturn in single mode', async () => {
@@ -51,6 +70,103 @@ describe('DateTextInput.clean', () => {
 		expect(emitted && emitted[0]?.[0]).toBe('2025-01-01')
 	})
 
+	it('auto-clamps invalid day on blur in single mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			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:model-value')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[emitted.length - 1]?.[0]).toBe('30/04/2025')
+	})
+
+	it('auto-clamps a masked keyboard input on blur in single mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await typeDigits(input, '31042025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(input.element.value).toBe('30/04/2025')
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[emitted.length - 1]?.[0]).toBe('30/04/2025')
+	})
+
+	it.each([
+		['DD-MM-YYYY', '31042025', '30-04-2025'],
+		['YYYY.MM.DD', '20250431', '2025.04.30'],
+	])('auto-clamps masked keyboard input with %s format', async (format, digits, expected) => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await typeDigits(input, digits)
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(input.element.value).toBe(expected)
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[emitted.length - 1]?.[0]).toBe(expected)
+	})
+
+	it('auto-clamps invalid days on blur in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Plage de dates',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('31/04/2025 - 29/02/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(input.element.value).toBe('30/04/2025 - 28/02/2025')
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+		const last = emitted && emitted[emitted.length - 1]?.[0]
+		expect(last).toEqual(['30/04/2025', '28/02/2025'])
+	})
+
+	it('auto-clamps a masked keyboard input on blur in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Plage de dates',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await typeDigits(input, '2902202531042025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(input.element.value).toBe('28/02/2025 - 30/04/2025')
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+		const last = emitted && emitted[emitted.length - 1]?.[0]
+		expect(last).toEqual(['28/02/2025', '30/04/2025'])
+	})
+
 	it('validates on submit for required single date', async () => {
 		const wrapper = mountComponent({
 			label: 'Date',
@@ -378,6 +494,210 @@ describe('DateTextInput.clean', () => {
 		expect((input.element as HTMLInputElement).value).toBe('01/01/2025')
 	})
 
+	it('keyboard Backspace efface le chiffre précédent en mode single (overwrite)', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY' })
+		const input = wrapper.find('input')
+		await typeDigits(input, '01')
+		await input.trigger('keydown', { key: 'Backspace' })
+		await flushPromises()
+		// Le masque de saisie doit avoir remplacé le dernier chiffre par '_'
+		expect(input.element.value).toContain('_')
+	})
+
+	it('keyboard digit avec sélection remplace la sélection en mode single', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY' })
+		const input = wrapper.find('input')
+		await typeDigits(input, '01012025')
+		await flushPromises()
+		// Simuler une sélection puis un chiffre
+		input.element.setSelectionRange(0, 2)
+		await input.trigger('keydown', { key: '2' })
+		await flushPromises()
+		expect(input.element.value).toBeTruthy()
+	})
+
+	it('keyboard Backspace avec sélection efface la sélection en mode single', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY' })
+		const input = wrapper.find('input')
+		await typeDigits(input, '01012025')
+		await flushPromises()
+		input.element.setSelectionRange(0, 2)
+		await input.trigger('keydown', { key: 'Backspace' })
+		await flushPromises()
+		expect(input.element.value).toContain('_')
+	})
+
+	it('readonly : validateField retourne un résultat sans erreur', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			readonly: true,
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const result = await (wrapper.vm as any).validateField('01/01/2025')
+		expect(result).toBeDefined()
+		expect(result.hasError).toBe(false)
+	})
+
+	it('watcher modelValue met à jour inputValue pour une plage de dates', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			modelValue: ['01/01/2025', '10/01/2025'],
+		})
+		await flushPromises()
+		const input = wrapper.find('input')
+		expect(input.element.value).toContain('01/01/2025')
+		expect(input.element.value).toContain('10/01/2025')
+	})
+
+	it('watcher modelValue met à jour inputValue pour une date unique', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			modelValue: '15/06/2025',
+		})
+		await flushPromises()
+		const input = wrapper.find('input')
+		expect(input.element.value).toBe('15/06/2025')
+	})
+
+	it('watcher modelValue efface inputValue si la nouvelle valeur est vide', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			modelValue: '15/06/2025',
+		})
+		await flushPromises()
+		await wrapper.setProps({ modelValue: '' })
+		await flushPromises()
+		const input = wrapper.find('input')
+		expect(input.element.value).toBe('')
+	})
+
+	it('keyboard Backspace en mode range efface un chiffre', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY', displayRange: true })
+		const input = wrapper.find('input')
+		await typeDigits(input, '01012025')
+		await input.trigger('keydown', { key: 'Backspace' })
+		await flushPromises()
+		expect(input.element.value).toContain('_')
+	})
+
+	it('keyboard digit en mode range saisit un chiffre', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY', displayRange: true })
+		const input = wrapper.find('input')
+		await typeDigits(input, '01012025')
+		await flushPromises()
+		expect(input.element.value).toContain('2025')
+	})
+
+	it('watcher modelValue initialise correctement une plage avec dateFormatReturn différent', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			dateFormatReturn: 'YYYY-MM-DD',
+			displayRange: true,
+			modelValue: ['2025-01-01', '2025-01-10'],
+		})
+		await flushPromises()
+		const input = wrapper.find('input')
+		expect(input.element.value).toContain('01/01/2025')
+		expect(input.element.value).toContain('10/01/2025')
+	})
+
+	it('watcher modelValue initialise une plage avec un seul élément sans crash', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			modelValue: ['01/01/2025'],
+		})
+		// Ne doit pas crasher ; la valeur peut être partiellement affichée
+		await flushPromises()
+		expect(wrapper.find('input').exists()).toBe(true)
+	})
+
+	it('autoClamp sync model en mode range (735-746)', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+		const input = wrapper.find('input')
+		await input.setValue('31/04/2025 - 29/02/2025')
+		await input.trigger('blur')
+		await flushPromises()
+		// Les dates doivent être clampées et le modèle émis
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+	})
+
+	it('isOverwriteEditing : émission correcte après saisie overwrite en mode range', async () => {
+		const wrapper = mountComponent({ format: 'DD/MM/YYYY', displayRange: true })
+		const input = wrapper.find('input')
+		await typeDigits(input, '0101202510012025')
+		await input.trigger('blur')
+		await flushPromises()
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+	})
+
+	it('autoClamp range blur : toutes les émissions tableau ont la valeur clampée (pas de double émission avec l\'ancienne valeur)', async () => {
+		const wrapper = mountComponent({
+			label: 'Plage de dates',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('31/04/2025 - 29/02/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const emitted = wrapper.emitted('update:model-value')
+		expect(emitted).toBeTruthy()
+		const rangeEmissions = emitted!.filter(e => Array.isArray(e[0]))
+		expect(rangeEmissions.length).toBeGreaterThanOrEqual(1)
+		// Toutes les émissions tableau doivent avoir la valeur clampée — aucune ne doit contenir l'ancienne valeur non-clampée
+		for (const emission of rangeEmissions) {
+			expect(emission[0]).toEqual(['30/04/2025', '28/02/2025'])
+		}
+	})
+
+	it('autoClamp range : le modèle émis pendant la frappe est un tableau même si une seule date est clampée', async () => {
+		const wrapper = mountComponent({
+			label: 'Plage de dates',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await typeDigits(input, '3104202501012025')
+		await flushPromises()
+
+		const emitted = wrapper.emitted('update:model-value')
+		if (emitted && emitted.length > 0) {
+			const last = emitted[emitted.length - 1]?.[0]
+			if (last !== null) {
+				expect(Array.isArray(last)).toBe(true)
+			}
+		}
+	})
+
+	it('autoClamp range blur : séparateur sans espaces est passé tel quel sans crash', async () => {
+		const wrapper = mountComponent({
+			label: 'Plage de dates',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+			autoClamp: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('31/04/2025-29/02/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.find('input').exists()).toBe(true)
+	})
+
 	it('restores range from modelValue when disabled and input is cleared', async () => {
 		const wrapper = mountComponent({
 			label: 'Plage de dates',