@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/DatePicker/composables/tests/useInputBlurHandler.spec.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { ref } from 'vue'
 import { useInputBlurHandler } from '../useInputBlurHandler'
+import { DATE_PICKER_MESSAGES } from '../../constants/messages'
 
 describe('useInputBlurHandler', () => {
 	// Mocks et setup
@@ -15,6 +16,7 @@ describe('useInputBlurHandler', () => {
 	const isManualInputActive = ref(true)
 	const isUpdatingFromInternal = ref(false)
 	const selectedDates = ref<Date | Date[] | null>(null)
+	const errors = ref<string[]>([])
 
 	beforeEach(() => {
 		// Réinitialiser les mocks et les refs avant chaque test
@@ -29,6 +31,7 @@ describe('useInputBlurHandler', () => {
 		isManualInputActive.value = true
 		isUpdatingFromInternal.value = false
 		selectedDates.value = null
+		errors.value = []
 
 		// Configuration par défaut des mocks
 		mockValidateDateFormat.mockReturnValue({ isValid: true, message: '' })
@@ -229,8 +232,15 @@ describe('useInputBlurHandler', () => {
 			expect(mockUpdateModel).not.toHaveBeenCalled()
 		})
 
-		it('devrait appeler validateManualInput avec la valeur actuelle', () => {
+		it('devrait valider la date et mettre à jour le modèle avec la valeur formatée', () => {
 			displayFormattedDate.value = '01/01/2023'
+			// Simuler une date valide
+			mockValidateDateFormat.mockReturnValue({ isValid: true, message: '' })
+			const parsedDate = new Date('2023-01-01')
+			mockParseDate.mockReturnValue(parsedDate)
+			// Simuler le formatage de la date
+			const formattedDate = '01/01/2023'
+			mockFormatDate.mockReturnValue(formattedDate)
 
 			const { handleInputBlur } = useInputBlurHandler({
 				format: 'DD/MM/YYYY',
@@ -239,6 +249,7 @@ describe('useInputBlurHandler', () => {
 				isManualInputActive,
 				isUpdatingFromInternal,
 				selectedDates,
+				errors,
 				validateDateFormat: mockValidateDateFormat,
 				parseDate: mockParseDate,
 				formatDate: mockFormatDate,
@@ -249,10 +260,13 @@ describe('useInputBlurHandler', () => {
 
 			handleInputBlur()
 
-			expect(mockValidateManualInput).toHaveBeenCalledWith('01/01/2023')
+			// Avec nos modifications, on valide d'abord le format de la date
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('01/01/2023')
+			// Puis on met à jour le modèle avec la date formatée (pas l'objet Date)
+			expect(mockUpdateModel).toHaveBeenCalledWith(formattedDate)
 		})
 
-		it('devrait appeler validateManualInput avec une chaîne vide si displayFormattedDate est vide', () => {
+		it('devrait mettre à jour le modèle avec null si displayFormattedDate est vide', () => {
 			displayFormattedDate.value = ''
 
 			const { handleInputBlur } = useInputBlurHandler({
@@ -262,6 +276,168 @@ describe('useInputBlurHandler', () => {
 				isManualInputActive,
 				isUpdatingFromInternal,
 				selectedDates,
+				errors,
+				validateDateFormat: mockValidateDateFormat,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				updateModel: mockUpdateModel,
+				validateManualInput: mockValidateManualInput,
+				emitBlur: mockEmitBlur,
+			})
+
+			handleInputBlur()
+
+			// Avec nos modifications, on met à jour directement le modèle avec null
+			// au lieu d'appeler validateManualInput
+			expect(mockUpdateModel).toHaveBeenCalledWith(null)
+		})
+	})
+
+	// Nouveaux tests pour les plages de dates
+	describe('handleInputBlur avec plages de dates', () => {
+		it('devrait mettre à jour le modèle avec un tableau de dates si la plage est valide', () => {
+			displayFormattedDate.value = '01/01/2023 - 10/01/2023'
+			const startDate = new Date('2023-01-01')
+			const endDate = new Date('2023-01-10')
+
+			mockValidateDateFormat
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de début
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de fin
+
+			mockParseDate
+				.mockReturnValueOnce(startDate) // Pour la date de début
+				.mockReturnValueOnce(endDate) // Pour la date de fin
+
+			mockFormatDate
+				.mockReturnValueOnce('01/01/2023') // Pour la date de début
+				.mockReturnValueOnce('10/01/2023') // Pour la date de fin
+
+			const { handleInputBlur } = useInputBlurHandler({
+				format: 'DD/MM/YYYY',
+				displayFormattedDate,
+				hasInteracted,
+				isManualInputActive,
+				isUpdatingFromInternal,
+				selectedDates,
+				errors,
+				validateDateFormat: mockValidateDateFormat,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				updateModel: mockUpdateModel,
+				validateManualInput: mockValidateManualInput,
+				emitBlur: mockEmitBlur,
+			})
+
+			handleInputBlur()
+
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('01/01/2023')
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('10/01/2023')
+			expect(mockParseDate).toHaveBeenCalledWith('01/01/2023', 'DD/MM/YYYY')
+			expect(mockParseDate).toHaveBeenCalledWith('10/01/2023', 'DD/MM/YYYY')
+			expect(mockFormatDate).toHaveBeenCalledWith(startDate, 'DD/MM/YYYY')
+			expect(mockFormatDate).toHaveBeenCalledWith(endDate, 'DD/MM/YYYY')
+			expect(selectedDates.value).toEqual([startDate, endDate])
+			expect(mockUpdateModel).toHaveBeenCalledWith(['01/01/2023', '10/01/2023'])
+			expect(isUpdatingFromInternal.value).toBe(true) // Sera réinitialisé par le setTimeout
+		})
+
+		it('devrait utiliser le format de retour pour les plages de dates si spécifié', () => {
+			displayFormattedDate.value = '01/01/2023 - 10/01/2023'
+			const startDate = new Date('2023-01-01')
+			const endDate = new Date('2023-01-10')
+
+			mockValidateDateFormat
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de début
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de fin
+
+			mockParseDate
+				.mockReturnValueOnce(startDate) // Pour la date de début
+				.mockReturnValueOnce(endDate) // Pour la date de fin
+
+			mockFormatDate
+				.mockReturnValueOnce('2023-01-01') // Pour la date de début avec format de retour
+				.mockReturnValueOnce('2023-01-10') // Pour la date de fin avec format de retour
+
+			const { handleInputBlur } = useInputBlurHandler({
+				format: 'DD/MM/YYYY',
+				dateFormatReturn: 'YYYY-MM-DD',
+				displayFormattedDate,
+				hasInteracted,
+				isManualInputActive,
+				isUpdatingFromInternal,
+				selectedDates,
+				errors,
+				validateDateFormat: mockValidateDateFormat,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				updateModel: mockUpdateModel,
+				validateManualInput: mockValidateManualInput,
+				emitBlur: mockEmitBlur,
+			})
+
+			handleInputBlur()
+
+			expect(mockFormatDate).toHaveBeenCalledWith(startDate, 'YYYY-MM-DD')
+			expect(mockFormatDate).toHaveBeenCalledWith(endDate, 'YYYY-MM-DD')
+			expect(mockUpdateModel).toHaveBeenCalledWith(['2023-01-01', '2023-01-10'])
+		})
+
+		it('devrait ajouter une erreur si la date de fin est antérieure à la date de début', () => {
+			displayFormattedDate.value = '10/01/2023 - 01/01/2023' // Date de fin avant date de début
+			const startDate = new Date('2023-01-10')
+			const endDate = new Date('2023-01-01')
+
+			mockValidateDateFormat
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de début
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de fin
+
+			mockParseDate
+				.mockReturnValueOnce(startDate) // Pour la date de début
+				.mockReturnValueOnce(endDate) // Pour la date de fin
+
+			// Utiliser la constante importée au début du fichier
+
+			const { handleInputBlur } = useInputBlurHandler({
+				format: 'DD/MM/YYYY',
+				displayFormattedDate,
+				hasInteracted,
+				isManualInputActive,
+				isUpdatingFromInternal,
+				selectedDates,
+				errors,
+				validateDateFormat: mockValidateDateFormat,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				updateModel: mockUpdateModel,
+				validateManualInput: mockValidateManualInput,
+				emitBlur: mockEmitBlur,
+			})
+
+			handleInputBlur()
+
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('10/01/2023')
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('01/01/2023')
+			expect(mockParseDate).toHaveBeenCalledWith('10/01/2023', 'DD/MM/YYYY')
+			expect(mockParseDate).toHaveBeenCalledWith('01/01/2023', 'DD/MM/YYYY')
+			expect(errors.value).toContain(DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START)
+			expect(mockUpdateModel).not.toHaveBeenCalled()
+		})
+
+		it('ne devrait pas mettre à jour le modèle si une des dates de la plage est invalide', () => {
+			displayFormattedDate.value = '01/01/2023 - 32/01/2023' // Date de fin invalide
+
+			mockValidateDateFormat
+				.mockReturnValueOnce({ isValid: true, message: '' }) // Pour la date de début
+				.mockReturnValueOnce({ isValid: false, message: 'Date invalide' }) // Pour la date de fin
+
+			const { handleInputBlur } = useInputBlurHandler({
+				format: 'DD/MM/YYYY',
+				displayFormattedDate,
+				hasInteracted,
+				isManualInputActive,
+				isUpdatingFromInternal,
+				selectedDates,
+				errors,
 				validateDateFormat: mockValidateDateFormat,
 				parseDate: mockParseDate,
 				formatDate: mockFormatDate,
@@ -272,7 +448,9 @@ describe('useInputBlurHandler', () => {
 
 			handleInputBlur()
 
-			expect(mockValidateManualInput).toHaveBeenCalledWith('')
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('01/01/2023')
+			expect(mockValidateDateFormat).toHaveBeenCalledWith('32/01/2023')
+			expect(mockUpdateModel).not.toHaveBeenCalled()
 		})
 	})
 })

package/src/components/DatePicker/composables/tests/useMonthButtonCustomization.spec.ts

@@ -1,100 +1,125 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { ref, nextTick, type Ref } from 'vue'
 import { useMonthButtonCustomization } from '../useMonthButtonCustomization'
-import { nextTick } from 'vue'
-
-// Mock pour nextTick
-vi.mock('vue', async () => {
-	const actual = await vi.importActual('vue')
-	return {
-		...actual as object,
-		nextTick: vi.fn((callback) => {
-			if (callback) callback()
-			return Promise.resolve()
-		}),
-	}
-})
 
 describe('useMonthButtonCustomization', () => {
-	// Mock pour document.querySelector
-	const mockMonthBtn = {
-		textContent: 'Janvier 2025',
-		innerHTML: '',
-	}
-
-	const mockYearBtn = {
-		innerHTML: '',
-	}
+	let isPickerVisibleGetter: () => boolean
+	// Définir explicitement le type pour éviter les erreurs de compatibilité
+	let monthName: Ref<string | null>
+	let yearName: Ref<string | null>
 
 	beforeEach(() => {
-		vi.clearAllMocks()
-
-		// Réinitialiser les mocks pour chaque test
-		mockMonthBtn.textContent = 'Janvier 2025'
-		mockMonthBtn.innerHTML = ''
-		mockYearBtn.innerHTML = ''
-		// Mock pour document.querySelector
-		document.querySelector = vi.fn((selector) => {
-			if (selector === '.v-date-picker-controls__month-btn') {
-				return mockMonthBtn
-			}
-			if (selector === '.v-date-picker-controls__mode-btn') {
-				return mockYearBtn
-			}
-			if (selector === '.v-date-picker-controls') {
-				return { childList: true, subtree: true }
-			}
-			return null
-		})
-
-		// Mock pour MutationObserver
-		global.MutationObserver = vi.fn().mockImplementation(function (this: { observe: () => void, disconnect: () => void, callback: (mutations: MutationRecord[], observer: MutationObserver) => void }, callback) {
-			this.observe = vi.fn()
-			this.disconnect = vi.fn()
-			// Stocker le callback pour pouvoir le déclencher dans les tests
-			this.callback = callback
-		})
+		// Réinitialiser les refs pour chaque test avec le type exact attendu par le composable
+		monthName = ref<string | null>(null)
+		yearName = ref<string | null>(null)
+
+		document.body.innerHTML = `
+			<div class="v-date-picker-controls">
+				<button class="v-date-picker-controls__month-btn">janvier 2023</button>
+				<button class="v-date-picker-controls__mode-btn">2023</button>
+			</div>
+		`
+		isPickerVisibleGetter = () => true
 	})
 
-	it('devrait initialiser correctement', () => {
-		const isPickerVisible = () => true
-		const { customizeMonthButton, setupMonthButtonObserver } = useMonthButtonCustomization(isPickerVisible)
-		expect(customizeMonthButton).toBeDefined()
-		expect(setupMonthButtonObserver).toBeDefined()
+	afterEach(() => {
+		document.body.innerHTML = ''
 	})
 
-	it('ne devrait pas appeler nextTick si le picker n\'est pas visible', () => {
-		const isPickerVisible = () => false
-		const { customizeMonthButton } = useMonthButtonCustomization(isPickerVisible)
-		customizeMonthButton()
-		expect(nextTick).not.toHaveBeenCalled()
+	// Test de l'affichage des mois personnalisés via les noms de mois fournis
+	it('personnalise correctement les noms de mois (janvier -> Janv.)', async () => {
+		monthName.value = 'janvier'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Janv.')
 	})
 
-	it('devrait personnaliser le bouton du mois quand le picker est visible', () => {
-		const isPickerVisible = () => true
-		const { customizeMonthButton } = useMonthButtonCustomization(isPickerVisible)
+	it('personnalise correctement les noms de mois (février -> Févr.)', async () => {
+		monthName.value = 'février'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
 
-		customizeMonthButton()
-		expect(nextTick).toHaveBeenCalled()
-		// Vérifier que le contenu du bouton a été modifié
-		expect(mockMonthBtn.innerHTML).not.toBe('')
-		expect(mockMonthBtn.innerHTML).toContain('Janvier')
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Févr.')
 	})
 
-	it('devrait configurer un observateur pour le bouton du mois', () => {
-		const isPickerVisible = () => true
-		const { setupMonthButtonObserver } = useMonthButtonCustomization(isPickerVisible)
+	it('capitalise le premier caractère si le mois n\'est pas reconnu', async () => {
+		monthName.value = 'pluviose'
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+		)
 
-		setupMonthButtonObserver()
-		expect(nextTick).toHaveBeenCalled()
-		// Vérifier que MutationObserver a été appelé
-		expect(global.MutationObserver).toHaveBeenCalled()
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		expect(monthBtn.textContent).toContain('Pluviose')
 	})
 
-	it('devrait extraire correctement le mois et l\'année du texte du bouton', () => {
-		const isPickerVisible = () => true
-		const { monthButtonText, customizeMonthButton } = useMonthButtonCustomization(isPickerVisible)
+	it('customise les boutons du mois et de l’année', async () => {
+		// S'assurer que monthName est null pour ce test
+		monthName.value = null
+
+		const { customizeMonthButton, monthButtonText } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+			yearName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		const yearBtn = document.querySelector('.v-date-picker-controls__mode-btn')!
+
+		expect(monthBtn.innerHTML).toContain('<svg') // icône ajoutée
+		expect(monthBtn.textContent).toContain('Janv.') // mois transformé
+		expect(monthButtonText.value).toBe('janvier 2023')
+
+		expect(yearBtn.innerHTML).toContain('2023')
+		expect(yearBtn.innerHTML).toContain('<svg')
+	})
+
+	it('utilise monthName et yearName si fournis', async () => {
+		monthName.value = 'mars'
+		yearName.value = '2030'
+
+		const { customizeMonthButton } = useMonthButtonCustomization(
+			isPickerVisibleGetter,
+			monthName,
+			yearName,
+		)
+
+		await customizeMonthButton()
+		await nextTick()
+
+		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
+		const yearBtn = document.querySelector('.v-date-picker-controls__mode-btn')!
+
+		expect(monthBtn.textContent).toContain('Mars')
+		expect(yearBtn.textContent).toContain('2030')
+	})
+
+	it('observe les changements du DOM et personnalise automatiquement', async () => {
+		const { setupMonthButtonObserver } = useMonthButtonCustomization(() => true)
+		const spy = vi.spyOn(document, 'querySelectorAll')
+
+		setupMonthButtonObserver()
+		await nextTick()
 
-		customizeMonthButton()
-		expect(monthButtonText.value).toBe('Janvier 2025')
+		expect(spy).toHaveBeenCalledWith('.v-date-picker-controls')
 	})
 })

package/src/components/DatePicker/composables/useAsteriskDisplay.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue'
+
+/**
+ * Composable pour gérer l'affichage d'un astérisque à côté du label
+ * @param props - Les propriétés du composant contenant displayAsterisk et required
+ * @param labelProp - Le nom de la propriété contenant le label (par défaut: 'label')
+ * @returns Un objet contenant isShouldDisplayAsterisk et labelWithAsterisk
+ */
+export const useAsteriskDisplay = (
+	props: { displayAsterisk?: boolean, required?: boolean, [key: string]: unknown },
+	labelProp = 'label',
+) => {
+	// Détermine si l'astérisque doit être affiché
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	// Ajoute l'astérisque au label si nécessaire
+	const labelWithAsterisk = computed(() => {
+		// Assertion de type pour indiquer que props[labelProp] est de type string | undefined
+		const label = props[labelProp] as string | undefined
+		return isShouldDisplayAsterisk.value && label
+			? `${label} *`
+			: label
+	})
+
+	return {
+		isShouldDisplayAsterisk,
+		labelWithAsterisk,
+	}
+}

package/src/components/DatePicker/composables/useDateAutoClamp.ts

@@ -0,0 +1,136 @@
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+// Initialiser les plugins dayjs
+dayjs.extend(customParseFormat)
+
+/**
+ * Composable pour gérer l'auto-clamping des dates invalides
+ * Cette fonctionnalité permet de ramener automatiquement les dates invalides
+ * (comme le 29/02 sur une année non bissextile ou 33/12) au dernier jour valide du mois
+ */
+export const useDateAutoClamp = () => {
+	/**
+	 * Ajuste une date pour qu'elle soit valide en ramenant les jours invalides
+	 * au dernier jour du mois correspondant
+	 *
+	 * @param day - Le jour à ajuster
+	 * @param month - Le mois (0-11)
+	 * @param year - L'année
+	 * @returns Un objet contenant le jour ajusté et un booléen indiquant si un ajustement a été fait
+	 */
+	const clampDayToValidDate = (day: number, month: number, year: number): { day: number, adjusted: boolean } => {
+		// Vérifier si le jour est valide pour ce mois et cette année
+		// Créer une date pour le premier jour du mois et obtenir le nombre de jours dans ce mois
+		const dateObj = dayjs(`${year}-${month + 1}-01`)
+		const daysInMonth = dateObj.daysInMonth()
+
+		// Si le jour est supérieur au nombre de jours dans le mois, le ramener au dernier jour du mois
+		if (day > daysInMonth) {
+			return { day: daysInMonth, adjusted: true }
+		}
+
+		return { day, adjusted: false }
+	}
+
+	/**
+	 * Ajuste une date complète pour qu'elle soit valide
+	 *
+	 * @param dateStr - La chaîne de date à ajuster
+	 * @param format - Le format de la date (ex: 'DD/MM/YYYY')
+	 * @returns Un objet contenant la date ajustée et un booléen indiquant si un ajustement a été fait
+	 */
+	const autoClampDate = (dateStr: string, format: string): { clampedDate: string, adjusted: boolean } => {
+		// Si la chaîne est vide, retourner telle quelle
+		if (!dateStr) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Déterminer le séparateur utilisé dans le format
+		const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+		// Extraire les parties du format pour déterminer l'ordre (jour, mois, année)
+		const formatParts = format.split(separator)
+		const dateParts = dateStr.split(separator)
+
+		// Si le nombre de parties ne correspond pas, retourner la chaîne originale
+		if (formatParts.length !== dateParts.length) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		let day = -1
+		let month = -1
+		let year = -1
+
+		// Extraire les valeurs de jour, mois et année selon le format
+		for (let i = 0; i < formatParts.length; i++) {
+			const formatPart = formatParts[i].toUpperCase()
+			const value = parseInt(dateParts[i], 10)
+
+			if (isNaN(value)) {
+				return { clampedDate: dateStr, adjusted: false }
+			}
+
+			if (formatPart.startsWith('D')) {
+				day = value
+			}
+			else if (formatPart.startsWith('M')) {
+				month = value - 1 // Convertir en index de mois (0-11)
+			}
+			else if (formatPart.startsWith('Y')) {
+				year = value
+			}
+		}
+
+		// Vérifier si toutes les parties nécessaires ont été trouvées
+		if (day === -1 || month === -1 || year === -1) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Vérifier si nous avons une date valide
+		if (month < 0 || month > 11 || year < 0 || day < 1) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Calculer directement le nombre de jours dans le mois
+		const daysInMonth = dayjs(new Date(year, month, 1)).daysInMonth()
+
+		// Ajuster le jour si nécessaire
+		let adjusted = false
+		let clampedDay = day
+
+		if (day > daysInMonth) {
+			clampedDay = daysInMonth
+			adjusted = true
+		}
+
+		// Si aucun ajustement n'a été fait, retourner la chaîne originale
+		if (!adjusted) {
+			return { clampedDate: dateStr, adjusted: false }
+		}
+
+		// Reconstruire la chaîne de date avec le jour ajusté
+		const newDateParts = [...dateParts]
+		for (let i = 0; i < formatParts.length; i++) {
+			const formatPart = formatParts[i].toUpperCase()
+			if (formatPart.startsWith('D')) {
+				// Formater le jour avec le bon nombre de chiffres (01 ou 1 selon le format)
+				newDateParts[i] = formatPart.length > 1
+					? clampedDay.toString().padStart(2, '0')
+					: clampedDay.toString()
+			}
+		}
+
+		return {
+			clampedDate: newDateParts.join(separator),
+			adjusted: true,
+		}
+	}
+
+	return {
+		autoClampDate,
+		clampDayToValidDate,
+	}
+}
+
+export default useDateAutoClamp