@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/components/UploadWorkflow/useFileUploadJourney.ts

@@ -0,0 +1,18 @@
+import { computed, ref, type Ref } from 'vue'
+import type { UploadItem } from './types'
+
+export default function useFileUploadJourney(
+	fileListItems: Ref<UploadItem[]>,
+) {
+	const selectItems = computed(() => fileListItems.value.map(item => ({
+		value: item.id,
+		text: item.title,
+	})))
+
+	const selectedItem = ref<string>()
+
+	return ({
+		selectItems,
+		selectedItem,
+	})
+}

package/src/components/Usages/tests/Usages.spec.ts

@@ -0,0 +1,183 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import Usages from '../Usages.vue'
+
+describe('Usages.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier que le composant est rendu
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les colonnes sont rendues
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+
+		// Vérifier que les icônes sont rendues
+		expect(wrapper.findAll('.v-icon').length).toBe(2)
+
+		// Vérifier les titres des colonnes
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+
+		// Vérifier qu'il n'y a pas d'éléments de liste par défaut
+		expect(wrapper.findAll('li').length).toBe(0)
+	})
+
+	it('renders items in both columns when provided', () => {
+		const items1 = ['Item 1', 'Item 2', 'Item 3']
+		const items2 = ['Item A', 'Item B']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+				items2,
+			},
+		})
+
+		// Vérifier que tous les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+		items1.forEach((item, index) => {
+			expect(firstColumnItems[index].text()).toContain(item)
+		})
+
+		// Vérifier que tous les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+		items2.forEach((item, index) => {
+			expect(secondColumnItems[index].text()).toContain(item)
+		})
+	})
+
+	it('renders only the first column items when only items1 is provided', () => {
+		const items1 = ['Item 1', 'Item 2']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1,
+			},
+		})
+
+		// Vérifier que les éléments de la première liste sont rendus
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(items1.length)
+
+		// Vérifier qu'il n'y a pas d'éléments dans la deuxième liste
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(0)
+	})
+
+	it('renders only the second column items when only items2 is provided', () => {
+		const items2 = ['Item A', 'Item B', 'Item C']
+
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items2,
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments dans la première liste
+		const firstColumnItems = wrapper.findAll('.check li')
+		expect(firstColumnItems.length).toBe(0)
+
+		// Vérifier que les éléments de la deuxième liste sont rendus
+		const secondColumnItems = wrapper.findAll('.not-check li')
+		expect(secondColumnItems.length).toBe(items2.length)
+	})
+
+	it('uses the correct icons', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const icons = wrapper.findAll('.v-icon')
+
+		// Vérifier que les icônes sont correctement définies
+		// Note: Nous ne pouvons pas vérifier directement les propriétés des icônes,
+		// mais nous pouvons vérifier que les icônes sont présentes dans le bon ordre
+		expect(icons.length).toBe(2)
+
+		// Vérifier que les classes CSS sont correctement appliquées
+		expect(wrapper.find('.check')).toBeTruthy()
+		expect(wrapper.find('.not-check')).toBeTruthy()
+	})
+
+	it('applies the correct styling to columns', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Vérifier les classes CSS pour la première colonne
+		const checkColumn = wrapper.find('.check')
+		expect(checkColumn.exists()).toBe(true)
+
+		// Vérifier les classes CSS pour la deuxième colonne
+		const notCheckColumn = wrapper.find('.not-check')
+		expect(notCheckColumn.exists()).toBe(true)
+
+		// Vérifier que les styles sont appliqués (indirectement via les classes)
+		expect(checkColumn.classes()).toContain('check')
+		expect(notCheckColumn.classes()).toContain('not-check')
+	})
+
+	it('handles empty arrays for both item lists', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items1: [],
+				items2: [],
+			},
+		})
+
+		// Vérifier qu'il n'y a pas d'éléments de liste
+		expect(wrapper.findAll('li').length).toBe(0)
+
+		// Mais les colonnes et titres doivent toujours être présents
+		expect(wrapper.findAll('.v-col-auto').length).toBe(2)
+		expect(wrapper.text()).toContain('À faire')
+		expect(wrapper.text()).toContain('À ne pas faire')
+	})
+
+	it('renders with custom props from CustomizableOptions', () => {
+		const wrapper = mount(Usages, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				color: 'primary',
+				disabled: true,
+				readonly: true,
+				dense: true,
+				items1: ['Item 1'],
+				items2: ['Item A'],
+			},
+		})
+
+		// Vérifier que le composant est rendu malgré les props supplémentaires
+		expect(wrapper.exists()).toBe(true)
+
+		// Vérifier que les éléments de liste sont toujours rendus correctement
+		expect(wrapper.findAll('.check li').length).toBe(1)
+		expect(wrapper.findAll('.not-check li').length).toBe(1)
+	})
+})

package/src/components/index.ts

@@ -5,6 +5,7 @@ export { useNotificationService } from '../services/NotificationService'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
+export * from './ChipList/types'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as ContextualMenu } from './ContextualMenu/ContextualMenu.vue'
 export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
@@ -27,6 +28,7 @@ export { default as FileList } from './FileList/FileList.vue'
 export { default as FilePreview } from './FilePreview/FilePreview.vue'
 export { default as FileUpload } from './FileUpload/FileUpload.vue'
 export { default as FilterInline } from './FilterInline/FilterInline.vue'
+export { default as FilterSideBar } from './FilterSideBar/FilterSideBar.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -55,9 +57,12 @@ export { default as PeriodField } from './PeriodField/PeriodField.vue'
 export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as RangeField } from './RangeField/RangeField.vue'
 export { default as RatingPicker } from './RatingPicker/RatingPicker.vue'
+export { default as SearchListField } from './SearchListField/SearchListField.vue'
 export { default as SelectBtnField } from './SelectBtnField/SelectBtnField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
+export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'

package/src/composables/date/tests/useDateFormat.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { formatDate, parseDate } from '../useDateFormat'
+
+describe('useDateFormat', () => {
+	describe('formatDate', () => {
+		it('formats a Date object to string according to the specified format', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('15/01/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-01-15')
+			expect(formatDate(date, 'MM.DD.YYYY')).toBe('01.15.2023')
+		})
+
+		it('returns empty string when date is null or undefined', () => {
+			expect(formatDate(null as unknown as Date, 'DD/MM/YYYY')).toBe('')
+			expect(formatDate(undefined as unknown as Date, 'DD/MM/YYYY')).toBe('')
+		})
+
+		it('handles different date formats correctly', () => {
+			const date = new Date(2023, 11, 31) // 31 décembre 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'D/M/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-12-31')
+			expect(formatDate(date, 'MM/DD/YYYY')).toBe('12/31/2023')
+		})
+
+		it('handles custom separators correctly', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD.MM.YYYY')).toBe('15.01.2023')
+			expect(formatDate(date, 'DD-MM-YYYY')).toBe('15-01-2023')
+			expect(formatDate(date, 'YYYY/MM/DD')).toBe('2023/01/15')
+		})
+	})
+
+	describe('parseDate', () => {
+		it('parses a date string to a Date object according to the specified format', () => {
+			const dateStr = '15/01/2023'
+			const date = parseDate(dateStr, 'DD/MM/YYYY')
+			expect(date).toBeInstanceOf(Date)
+			expect(date?.getFullYear()).toBe(2023)
+			expect(date?.getMonth()).toBe(0) // Janvier = 0
+			expect(date?.getDate()).toBe(15)
+		})
+
+		it('returns null for invalid date strings', () => {
+			expect(parseDate('invalid', 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('31/02/2023', 'DD/MM/YYYY')).toBeNull() // 31 février n'existe pas
+		})
+
+		it('handles different date formats correctly', () => {
+			expect(parseDate('2023-01-15', 'YYYY-MM-DD')?.getDate()).toBe(15)
+			expect(parseDate('01/15/2023', 'MM/DD/YYYY')?.getDate()).toBe(15)
+			expect(parseDate('15.01.2023', 'DD.MM.YYYY')?.getDate()).toBe(15)
+		})
+
+		it('returns null when input is null or empty', () => {
+			expect(parseDate(null as unknown as string, 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('', 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('handles leap years correctly', () => {
+			// 2020 était une année bissextile
+			expect(parseDate('29/02/2020', 'DD/MM/YYYY')).not.toBeNull()
+			// 2023 n'est pas une année bissextile
+			expect(parseDate('29/02/2023', 'DD/MM/YYYY')).toBeNull()
+		})
+	})
+})

package/src/composables/date/tests/useDateInitialization.spec.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
+
+describe('useDateInitialization', () => {
+	describe('initializeSelectedDates', () => {
+		it('returns null when modelValue is null or undefined', () => {
+			expect(initializeSelectedDates(null, 'DD/MM/YYYY')).toBeNull()
+			expect(initializeSelectedDates(null as unknown as DateInput, 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('parses a single date string correctly', () => {
+			const result = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY')
+			expect(result).toBeInstanceOf(Date)
+
+			const date = result as Date
+			expect(date.getFullYear()).toBe(2023)
+			expect(date.getMonth()).toBe(0) // Janvier = 0
+			expect(date.getDate()).toBe(15)
+		})
+
+		it('parses an array of date strings correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(2)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+
+			expect(dates[1].getFullYear()).toBe(2023)
+			expect(dates[1].getMonth()).toBe(0)
+			expect(dates[1].getDate()).toBe(20)
+		})
+
+		it('returns empty array when dates are invalid', () => {
+			const result = initializeSelectedDates(['invalid', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('returns empty array when first date is after second date', () => {
+			const result = initializeSelectedDates(['25/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles single element array correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(1)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+		})
+
+		it('returns empty array for empty array input', () => {
+			const result = initializeSelectedDates([], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles different display and return formats correctly', () => {
+			// Date au format de retour
+			const result1 = initializeSelectedDates('2023-01-15', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result1).toBeInstanceOf(Date)
+			expect((result1 as Date).getDate()).toBe(15)
+
+			// Date au format d'affichage quand le format de retour est différen
+			const result2 = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result2).toBeInstanceOf(Date)
+			expect((result2 as Date).getDate()).toBe(15)
+		})
+
+		it('returns null for object input', () => {
+			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+
+		it('handles invalid date strings correctly', () => {
+			const result = initializeSelectedDates('invalid', 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+	})
+})

package/src/composables/date/tests/useDatePickerAccessibility.spec.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
+
+describe('useDatePickerAccessibility', () => {
+	let { updateAccessibility } = useDatePickerAccessibility()
+
+	beforeEach(() => {
+		// Réinitialiser la fonction pour chaque tes
+		const { updateAccessibility: newUpdateAccessibility } = useDatePickerAccessibility()
+		updateAccessibility = newUpdateAccessibility
+
+		// Créer une structure DOM simulée pour les tests
+		document.body.innerHTML = `
+			<div class="v-date-picker">
+				<div class="v-date-picker-header">
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-chevron-left"></i>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<div>Janvier 2023</div>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-chevron-right"></i>
+						</span>
+					</button>
+				</div>
+			</div>
+		`
+	})
+
+	it('sets correct aria-label attributes on navigation buttons', async () => {
+		// Appeler la fonction updateAccessibility
+		await updateAccessibility()
+
+		// Récupérer les boutons
+		const buttons = document.querySelectorAll('.v-date-picker-header button')
+
+		// Vérifier que les attributs aria-label sont correctement définis
+		expect(buttons[0].getAttribute('aria-label')).toBe('Mois précédent')
+		expect(buttons[1].getAttribute('aria-label')).toBe(null) // Pas d'icône, donc pas d'attribu
+		expect(buttons[2].getAttribute('aria-label')).toBe('Mois suivant')
+	})
+
+	it('handles missing elements gracefully', async () => {
+		// Supprimer les éléments du DOM
+		document.body.innerHTML = ''
+
+		// La fonction ne devrait pas générer d'erreur même si les éléments n'existent pas
+		await expect(updateAccessibility()).resolves.not.toThrow()
+	})
+
+	it('handles different icons correctly', async () => {
+		// Modifier les icônes
+		document.body.innerHTML = `
+			<div class="v-date-picker">
+				<div class="v-date-picker-header">
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-arrow-left"></i>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<div>Janvier 2023</div>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-arrow-right"></i>
+						</span>
+					</button>
+				</div>
+			</div>
+		`
+
+		// Appeler la fonction updateAccessibility
+		await updateAccessibility()
+
+		// Récupérer les boutons
+		const buttons = document.querySelectorAll('.v-date-picker-header button')
+
+		// Vérifier que les attributs aria-label sont correctement définis
+		expect(buttons[0].getAttribute('aria-label')).toBe(null) // Pas de chevron-lef
+		expect(buttons[1].getAttribute('aria-label')).toBe(null) // Pas d'icône
+		expect(buttons[2].getAttribute('aria-label')).toBe(null) // Pas de chevron-righ
+	})
+
+	it('adds sr-only instructions to the DatePicker', async () => {
+		// Appeler updateAccessibility
+		await updateAccessibility()
+
+		// Vérifier que les instructions pour les lecteurs d'écran ont été ajoutées
+		const srOnlyEl = document.querySelector('.sr-only-instructions')
+		expect(srOnlyEl).not.toBeNull()
+		expect(srOnlyEl?.textContent).toBe('Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date')
+	})
+})

package/src/composables/date/useDateFormat.ts

@@ -0,0 +1,94 @@
+/**
+ * Composable pour le formatage et le parsing des dates
+ */
+
+/**
+ * Parse une chaîne de caractères en objet Date selon un format spécifié
+ * @param dateString - La chaîne de caractères à parser
+ * @param format - Le format de la date (ex: 'DD/MM/YYYY')
+ * @returns Un objet Date ou null si la chaîne n'est pas valide
+ */
+export const parseDate = (dateString: string, format: string): Date | null => {
+	if (!dateString) return null
+
+	// Créer un mapping des positions des éléments de date selon le format
+	const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
+	const parts = format.split(separator)
+	const dateParts = dateString.split(separator)
+
+	if (parts.length !== dateParts.length) return null
+
+	let day = 0, month = 0, year = 0
+
+	// Extraire les valeurs selon leur position dans le format
+	parts.forEach((part, index) => {
+		const value = parseInt(dateParts[index], 10)
+		if (isNaN(value)) return
+
+		if (part.includes('DD') || part.includes('D')) day = value
+		else if (part.includes('MM') || part.includes('M')) month = value - 1 // Les mois en JS sont 0-indexés
+		else if (part.includes('YYYY')) year = value
+		else if (part.includes('YY')) {
+			// Gestion intelligente des années à 2 chiffres
+			// Si l'année est < 50, on considère qu'elle est dans le 21ème siècle
+			// Sinon, elle est dans le 20ème siècle
+			year = value < 50 ? 2000 + value : 1900 + value
+		}
+	})
+
+	// Vérifier que nous avons toutes les parties nécessaires et qu'elles sont dans des plages valides
+	if (day < 1 || day > 31 || month < 0 || month > 11 || year < 1000 || year > 9999) return null
+
+	// Créer la date à midi (12:00) pour éviter les problèmes de décalage de fuseau horaire
+	// Cela garantit que la date reste la même lors de la conversion en UTC
+	const date = new Date(year, month, day, 12, 0, 0)
+
+	// Vérifier que la date est valide (par exemple, 31 février n'existe pas)
+	if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null
+
+	return date
+}
+
+/**
+ * Formate une date selon un format spécifié
+ * @param date - La date à formater
+ * @param format - Le format de sortie (ex: 'DD/MM/YYYY')
+ * @returns La date formatée en chaîne de caractères
+ */
+export const formatDate = (date: Date, format: string): string => {
+	if (!date) return ''
+
+	// Formats de base
+	const day = date.getDate().toString().padStart(2, '0')
+	const month = (date.getMonth() + 1).toString().padStart(2, '0')
+	const year = date.getFullYear().toString()
+	const shortYear = year.slice(-2)
+
+	// Formats sans padding
+	const dayNoPad = date.getDate().toString()
+	const monthNoPad = (date.getMonth() + 1).toString()
+
+	// Remplacer les tokens dans l'ordre correct (du plus spécifique au moins spécifique)
+	const result = format
+		.replace(/YYYY/g, year)
+		.replace(/YY/g, shortYear)
+		.replace(/MM/g, month)
+		.replace(/M/g, monthNoPad)
+		.replace(/DD/g, day)
+		.replace(/D/g, dayNoPad)
+
+	return result
+}
+
+/**
+ * Hook composable pour le formatage et le parsing des dates
+ * @returns Fonctions de formatage et parsing de dates
+ */
+export function useDateFormat() {
+	return {
+		parseDate,
+		formatDate,
+	}
+}
+
+export default useDateFormat

package/src/composables/date/useDateInitialization.ts

@@ -0,0 +1,92 @@
+/**
+ * Composable pour l'initialisation des dates dans le DatePicker
+ */
+import { parseDate } from './useDateFormat'
+
+// Types
+export type DateValue = string | [string, string] | null
+export type DateInput = string | string[] | null | object
+
+/**
+ * Initialise les dates sélectionnées à partir d'une valeur d'entrée
+ * @param modelValue - La valeur d'entrée (peut être une chaîne, un tableau, null ou un objet)
+ * @param displayFormat - Le format d'affichage des dates
+ * @param returnFormat - Le format de retour des dates (optionnel)
+ * @returns Une date, un tableau de dates ou null
+ */
+export const initializeSelectedDates = (
+	modelValue: DateInput | null,
+	displayFormat: string,
+	returnFormat: string = '',
+): Date | Date[] | null => {
+	if (!modelValue) return null
+
+	// Déterminer le format à utiliser pour l'analyse
+	const parseFormat = returnFormat || displayFormat
+
+	if (Array.isArray(modelValue)) {
+		if (modelValue.length >= 2) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let dates = [parseDate(modelValue[0], parseFormat), parseDate(modelValue[1], parseFormat)]
+
+			// Si l'une des dates est invalide avec le format de retour, essayer avec le format d'affichage
+			if (dates.some(date => date === null) && returnFormat) {
+				dates = [parseDate(modelValue[0], displayFormat), parseDate(modelValue[1], displayFormat)]
+			}
+
+			// Vérifie si l'une des dates est toujours invalide
+			if (dates.some(date => date === null)) {
+				return []
+			}
+
+			// Vérifie si la première date est après la seconde
+			if (dates[0] && dates[1] && dates[0] > dates[1]) {
+				return []
+			}
+
+			// Filtrer les dates nulles et convertir en tableau de Date
+			return dates.filter((date): date is Date => date !== null)
+		}
+
+		if (modelValue.length === 1) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let date = parseDate(modelValue[0], parseFormat)
+
+			// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+			if (date === null && returnFormat) {
+				date = parseDate(modelValue[0], displayFormat)
+			}
+
+			return date === null ? [] : [date]
+		}
+
+		return []
+	}
+
+	// Si modelValue est un objet, on le convertit en chaîne
+	if (typeof modelValue === 'object') {
+		return null
+	}
+
+	// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+	let date = parseDate(modelValue, parseFormat)
+
+	// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+	if (date === null && returnFormat) {
+		date = parseDate(modelValue, displayFormat)
+	}
+
+	return date === null ? null : date
+}
+
+/**
+ * Hook composable pour l'initialisation des dates
+ * @returns Fonction d'initialisation des dates
+ */
+export function useDateInitialization() {
+	return {
+		initializeSelectedDates,
+	}
+}
+
+export default useDateInitialization