@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/DatePicker/{DatePicker → CalendarMode}/tests/DatePicker.events.spec.ts

@@ -4,7 +4,7 @@ import { vuetify } from '@tests/unit/setup'
 import { nextTick } from 'vue'
 import DatePicker from '../DatePicker.vue'
 
-describe('DatePicker.vue - Events', () => {
+describe('CalendarMode.vue - Events', () => {
 	let wrapper
 
 	beforeEach(() => {

package/src/components/DatePicker/{DatePicker → CalendarMode}/tests/DatePicker.spec.ts

@@ -4,7 +4,7 @@ import { vuetify } from '@tests/unit/setup'
 import { nextTick } from 'vue'
 import DatePicker from '../DatePicker.vue'
 
-describe('DatePicker.vue', () => {
+describe('CalendarMode.vue', () => {
 	let wrapper
 
 	beforeEach(() => {
@@ -47,16 +47,16 @@ describe('DatePicker.vue', () => {
 	})
 
 	it('renders the date picker with proper structure', async () => {
-		// Ouvrir le DatePicker pour que les éléments soient dans le DOM
+		// Ouvrir le CalendarMode pour que les éléments soient dans le DOM
 		wrapper.vm.isDatePickerVisible = true
 		await nextTick()
-		// Simuler un clic pour s'assurer que le DatePicker est complètement initialisé
+		// Simuler un clic pour s'assurer que le CalendarMode est complètement initialisé
 		const input = wrapper.find('input')
 		await input.trigger('click')
 		await nextTick()
 		// Attendre un peu pour que le DOM soit mis à jour
 		await new Promise(resolve => setTimeout(resolve, 100))
-		// Vérifier que le DatePicker est visible
+		// Vérifier que le CalendarMode est visible
 		const datePickerEl = document.querySelector('.v-date-picker')
 		expect(datePickerEl).not.toBeNull()
 		// Vérifier qu'il y a des boutons de navigation

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.mdx

@@ -81,7 +81,7 @@ Le composant permet la sélection de plages de dates avec validation automatique
 
 Vous pouvez personnaliser la position de l'icône du calendrier (au début ou à la fin du champ).
 
-<Canvas of={DatePickerStories.WithCustomIcons}/>
+<Canvas of={DatePickerStories.AppendIcon}/>
 
 ## Activation par le champ de texte
 

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '../DatePicker/DatePicker.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
 import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, onMounted } from 'vue'
 import { fn } from '@storybook/test'
@@ -113,7 +113,7 @@ const meta = {
 		},
 		textFieldActivator: {
 			control: 'boolean',
-			description: 'Utilise le TextField comme activateur du DatePicker',
+			description: 'Utilise le TextField comme activateur du CalendarMode',
 		},
 		displayTodayButton: {
 			control: 'boolean',
@@ -884,7 +884,7 @@ export const ReadonlyMode: Story = {
 	},
 }
 
-export const WithCustomIcons: Story = {
+export const AppendIcon: Story = {
 	parameters: {
 		sourceCode: [
 			{

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

@@ -38,7 +38,7 @@
 	const { initializeSelectedDates } = useDateInitialization()
 	const { updateAccessibility } = useDatePickerAccessibility()
 
-	// Variables pour suivre le mois et l'année actuellement affichés dans le DatePicker
+	// Variables pour suivre le mois et l'année actuellement affichés dans le CalendarMode
 	const currentMonth = ref<string | null>(null)
 	const currentYear = ref<string | null>(null)
 	const currentMonthName = ref<string | null>(null)
@@ -480,7 +480,7 @@
 			// Mettre à jour l'affichage formaté pour qu'il corresponde à la date sélectionnée
 			let formattedValue = ''
 
-			// Gérer la fermeture du DatePicker en fonction du mode et de l'état de sélection
+			// Gérer la fermeture du CalendarMode en fonction du mode et de l'état de sélection
 			if (props.displayRange) {
 				// Priorité à rangeBoundaryDates pour les plages
 				if (rangeBoundaryDates.value && rangeBoundaryDates.value[0] && rangeBoundaryDates.value[1]) {
@@ -502,7 +502,7 @@
 					updateModel(formattedDates)
 					emit('date-selected', formattedDates)
 
-					// Les deux dates de la plage sont sélectionnées, fermer le DatePicker
+					// Les deux dates de la plage sont sélectionnées, fermer le CalendarMode
 					isDatePickerVisible.value = false
 					emit('closed')
 				}
@@ -522,7 +522,7 @@
 					updateModel(formattedDates)
 					emit('date-selected', formattedDates)
 
-					// Les deux dates de la plage sont sélectionnées, fermer le DatePicker
+					// Les deux dates de la plage sont sélectionnées, fermer le CalendarMode
 					isDatePickerVisible.value = false
 					emit('closed')
 				}
@@ -539,7 +539,7 @@
 				displayFormattedDate.value = formattedValue
 				textInputValue.value = formattedValue
 
-				// En mode date unique, fermer le DatePicker après sélection
+				// En mode date unique, fermer le CalendarMode après sélection
 				isDatePickerVisible.value = false
 				emit('closed')
 				emit('date-selected', formattedDate.value)
@@ -697,7 +697,7 @@
 		currentYearName,
 	)
 
-	// Utilisation du composable pour gérer le mode d'affichage du DatePicker
+	// Utilisation du composable pour gérer le mode d'affichage du CalendarMode
 	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
 		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
 		() => props.isBirthDate || props.birthDate,

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

@@ -273,15 +273,15 @@ describe('ComplexDatePicker', () => {
 		expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function))
 	})
 
-	it('devrait ouvrir le DatePicker quand openDatePicker est appelé', async () => {
+	it('devrait ouvrir le CalendarMode quand openDatePicker est appelé', async () => {
 		wrapper = createWrapper()
 		await wrapper.vm.toggleDatePicker()
 		expect(wrapper.vm.isDatePickerVisible).toBe(true)
 	})
 
-	it('devrait fermer le DatePicker quand toggleDatePicker est appelé et qu\'il est déjà ouvert', async () => {
+	it('devrait fermer le CalendarMode quand toggleDatePicker est appelé et qu\'il est déjà ouvert', async () => {
 		wrapper = createWrapper()
-		// D'abord ouvrir le DatePicker
+		// D'abord ouvrir le CalendarMode
 		await wrapper.vm.toggleDatePicker()
 		// Puis le fermer
 		await wrapper.vm.toggleDatePicker()

package/src/components/DatePicker/DatePickerOverview.mdx

@@ -22,7 +22,7 @@ Le DatePicker propose trois modes principaux, chacun adapté à des besoins spé
       transition: 'all 0.2s ease',
       backgroundColor: '#fff'
     }}
-    onClick={() => linkTo('Composants/Formulaires/DatePicker/DatePicker')()}
+    onClick={() => linkTo('Composants/Formulaires/DatePicker/CalendarMode')()}
   >
     <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#1976d2' }}>Mode Calendrier</h3>
     <div>Mode standard : calendrier interactif pour choisir manuellement une ou plusieurs dates.</div>

package/src/components/DatePicker/DatePickerValidationExample/DatePickerValidation.stories.ts

@@ -9,7 +9,7 @@ export default {
 	parameters: {
 		docs: {
 			description: {
-				component: 'Exemples de validation pour le composant DatePicker.',
+				component: 'Exemples de validation pour le composant CalendarMode.',
 			},
 		},
 	},

package/src/components/DatePicker/DateTextInput/DateRange.stories.ts

@@ -1,8 +1,56 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '../DatePicker/DatePicker.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'
 
+// Define the props interface for DatePicker component
+interface DatePickerProps {
+	'modelValue'?: string | string[] | null
+	'label'?: string
+	'placeholder'?: string
+	'format'?: string
+	'dateFormatReturn'?: string
+	'isBirthDate'?: boolean
+	'birthDate'?: boolean
+	'showWeekNumber'?: boolean
+	'required'?: boolean
+	'displayRange'?: boolean
+	'displayIcon'?: boolean
+	'displayAppendIcon'?: boolean
+	'displayPrependIcon'?: boolean
+	'customRules'?: { type: string, options: Record<string, unknown> }[]
+	'customWarningRules'?: { type: string, options: Record<string, unknown> }[]
+	'disabled'?: boolean
+	'noIcon'?: boolean
+	'noCalendar'?: boolean
+	'isOutlined'?: boolean
+	'readonly'?: boolean
+	'width'?: string
+	'disableErrorHandling'?: boolean
+	'showSuccessMessages'?: boolean
+	'bgColor'?: string
+	'density'?: 'default' | 'comfortable' | 'compact'
+	'hideDetails'?: boolean | 'auto'
+	'displayWeekendDays'?: boolean
+	'displayTodayButton'?: boolean
+	'displayHolidayDays'?: boolean
+	'useCombinedMode'?: boolean
+	'textFieldActivator'?: boolean
+	'displayAsterisk'?: boolean
+	'period'?: {
+		min?: string
+		max?: string
+	}
+	'autoClamp'?: boolean
+	// Event handlers
+	'onUpdate:modelValue'?: () => void
+	'onFocus'?: () => void
+	'onBlur'?: () => void
+	'onClosed'?: () => void
+	'onInput'?: () => void
+	'onDate-selected'?: () => void
+}
+
 const meta = {
 	title: 'Composants/Formulaires/DatePicker/DateInput/DateRange',
 	component: DatePicker,
@@ -91,26 +139,51 @@ const meta = {
 			control: 'boolean',
 			description: 'Sélection de plage de dates',
 		},
+		noCalendar: {
+			control: 'boolean',
+			description: 'Masque le calendrier',
+		},
 	},
-} as Meta<typeof DatePicker>
+} as Meta<DatePickerProps>
 
 export default meta
 
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<DatePicker
+						v-model="dateRange"
+						format="DD/MM/YYYY"
+						placeholder="JJ/MM/AAAA - JJ/MM/AAAA"
+						label="Période"
+						display-range
+						no-calendar
+					/>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
-		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA - JJ/MM/AAAA',
 		'label': 'Période',
 		'displayRange': true,
 		'displayIcon': true,
 		'isOutlined': true,
+		'noCalendar': true,
 		'onUpdate:modelValue': fn(),
 		'onFocus': fn(),
 		'onBlur': fn(),
 		'onClosed': fn(),
+		'onInput': fn(),
+		'onDate-selected': fn(),
 	},
 	render(args) {
 		const dateRange = ref<string | null>(null)

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

@@ -727,7 +727,9 @@
 		// Vérifier si la valeur est vide
 		if (inputValue.value) {
 			const validation = validateDateFormat(inputValue.value)
-			if (validation.isValid) {
+			// check si pas d'erreur des rules
+			const checkRules = validateField(inputValue.value, props.customRules, props.customWarningRules)
+			if (validation.isValid && !checkRules.hasError) {
 				// Si le format est valide, la date est également valide grâce à notre correction dans useDateFormatValidation
 				const formattedDate = props.dateFormatReturn
 					? dayjs(inputValue.value, props.format).format(props.dateFormatReturn)

package/src/components/DatePicker/DateTextInput/NoCalendar.mdx

@@ -54,7 +54,7 @@ Propriétés applicables pour le mode saisie manuelle uniquement :
 ### Avec icône à la fin du champ
 
 <Canvas>
-  <Story of={NoCalendarStories.NoCalendarWithAppendIcon} />
+  <Story of={NoCalendarStories.WithAppendIcon} />
 </Canvas>
 
 ### Avec gestion d'erreurs désactivée et autres options

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '../DatePicker/DatePicker.vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'
 

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

@@ -1,4 +1,4 @@
-// Export all composables from DatePicker/composables
+// Export all composables from CalendarMode/composables
 
 // Date input and editing
 export { useDateInputEditing } from './useDateInputEditing'
@@ -12,7 +12,7 @@ export { useDateFormatValidation } from './useDateFormatValidation'
 export { useDateRangeValidation } from './useDateRangeValidation'
 export { useManualDateValidation } from './useManualDateValidation'
 
-// DatePicker UI and interaction
+// CalendarMode UI and interaction
 export { useDatePickerViewMode } from './useDatePickerViewMode'
 export { useDatePickerVisibility } from './useDatePickerVisibility'
 export { useDisplayedDateString } from './useDisplayedDateString'

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

@@ -51,7 +51,7 @@ describe('useDatePickerVisibility', () => {
 		document.removeEventListener = originalRemoveEventListener
 	})
 
-	it('devrait enregistrer un écouteur d\'événement pour les clics en dehors du DatePicker', () => {
+	it('devrait enregistrer un écouteur d\'événement pour les clics en dehors du CalendarMode', () => {
 		useDatePickerVisibility({
 			isDatePickerVisible,
 			isManualInputActive,
@@ -66,7 +66,7 @@ describe('useDatePickerVisibility', () => {
 	})
 
 	describe('toggleDatePicker', () => {
-		it('ne devrait pas basculer le DatePicker si disabled=true', () => {
+		it('ne devrait pas basculer le CalendarMode si disabled=true', () => {
 			const { toggleDatePicker } = useDatePickerVisibility({
 				disabled: true,
 				isDatePickerVisible,
@@ -83,7 +83,7 @@ describe('useDatePickerVisibility', () => {
 			expect(isDatePickerVisible.value).toBe(false)
 		})
 
-		it('ne devrait pas basculer le DatePicker si readonly=true', () => {
+		it('ne devrait pas basculer le CalendarMode si readonly=true', () => {
 			const { toggleDatePicker } = useDatePickerVisibility({
 				readonly: true,
 				isDatePickerVisible,
@@ -100,7 +100,7 @@ describe('useDatePickerVisibility', () => {
 			expect(isDatePickerVisible.value).toBe(false)
 		})
 
-		it('devrait basculer le DatePicker de fermé à ouvert', () => {
+		it('devrait basculer le CalendarMode de fermé à ouvert', () => {
 			const { toggleDatePicker } = useDatePickerVisibility({
 				isDatePickerVisible,
 				isManualInputActive,
@@ -117,7 +117,7 @@ describe('useDatePickerVisibility', () => {
 			expect(mockUpdateAccessibility).toHaveBeenCalledTimes(1)
 		})
 
-		it('devrait basculer le DatePicker d\'ouvert à fermé', () => {
+		it('devrait basculer le CalendarMode d\'ouvert à fermé', () => {
 			isDatePickerVisible.value = true
 
 			const { toggleDatePicker } = useDatePickerVisibility({
@@ -139,7 +139,7 @@ describe('useDatePickerVisibility', () => {
 	})
 
 	describe('openDatePicker', () => {
-		it('devrait ouvrir le DatePicker s\'il est fermé', () => {
+		it('devrait ouvrir le CalendarMode s\'il est fermé', () => {
 			const { openDatePicker } = useDatePickerVisibility({
 				isDatePickerVisible,
 				isManualInputActive,
@@ -155,7 +155,7 @@ describe('useDatePickerVisibility', () => {
 			expect(isDatePickerVisible.value).toBe(true)
 		})
 
-		it('ne devrait pas modifier l\'état si le DatePicker est déjà ouvert', () => {
+		it('ne devrait pas modifier l\'état si le CalendarMode est déjà ouvert', () => {
 			isDatePickerVisible.value = true
 
 			const { openDatePicker } = useDatePickerVisibility({
@@ -177,7 +177,7 @@ describe('useDatePickerVisibility', () => {
 	})
 
 	describe('openDatePickerOnClick', () => {
-		it('devrait ouvrir le DatePicker si textFieldActivator=true', () => {
+		it('devrait ouvrir le CalendarMode si textFieldActivator=true', () => {
 			const { openDatePickerOnClick } = useDatePickerVisibility({
 				textFieldActivator: true,
 				isDatePickerVisible,
@@ -194,7 +194,7 @@ describe('useDatePickerVisibility', () => {
 			expect(isDatePickerVisible.value).toBe(true)
 		})
 
-		it('ne devrait pas ouvrir le DatePicker si textFieldActivator=false', () => {
+		it('ne devrait pas ouvrir le CalendarMode si textFieldActivator=false', () => {
 			const { openDatePickerOnClick } = useDatePickerVisibility({
 				textFieldActivator: false,
 				isDatePickerVisible,
@@ -213,7 +213,7 @@ describe('useDatePickerVisibility', () => {
 	})
 
 	describe('openDatePickerOnFocus', () => {
-		it('devrait ouvrir le DatePicker si textFieldActivator=true', () => {
+		it('devrait ouvrir le CalendarMode si textFieldActivator=true', () => {
 			const { openDatePickerOnFocus } = useDatePickerVisibility({
 				textFieldActivator: true,
 				isDatePickerVisible,
@@ -233,7 +233,7 @@ describe('useDatePickerVisibility', () => {
 			expect(hasInteracted.value).toBe(true)
 		})
 
-		it('ne devrait pas ouvrir le DatePicker si textFieldActivator=false', () => {
+		it('ne devrait pas ouvrir le CalendarMode si textFieldActivator=false', () => {
 			const { openDatePickerOnFocus } = useDatePickerVisibility({
 				textFieldActivator: false,
 				isDatePickerVisible,
@@ -255,7 +255,7 @@ describe('useDatePickerVisibility', () => {
 	})
 
 	describe('handleClickOutside', () => {
-		it('ne devrait rien faire si le DatePicker est fermé', () => {
+		it('ne devrait rien faire si le CalendarMode est fermé', () => {
 			const { handleClickOutside } = useDatePickerVisibility({
 				isDatePickerVisible,
 				isManualInputActive,
@@ -275,7 +275,7 @@ describe('useDatePickerVisibility', () => {
 			expect(mockValidateDates).not.toHaveBeenCalled()
 		})
 
-		it('ne devrait rien faire si le clic est à l\'intérieur du DatePicker', () => {
+		it('ne devrait rien faire si le clic est à l\'intérieur du CalendarMode', () => {
 			isDatePickerVisible.value = true
 
 			const { handleClickOutside } = useDatePickerVisibility({
@@ -308,7 +308,7 @@ describe('useDatePickerVisibility', () => {
 			expect(mockValidateDates).not.toHaveBeenCalled()
 		})
 
-		it('devrait fermer le DatePicker si le clic est à l\'extérieur', () => {
+		it('devrait fermer le CalendarMode si le clic est à l\'extérieur', () => {
 			isDatePickerVisible.value = true
 
 			const { handleClickOutside } = useDatePickerVisibility({

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

@@ -11,13 +11,13 @@ export interface ViewModeReturn {
 }
 
 /**
- * Composable pour gérer le mode d'affichage du DatePicker (année, mois, jour)
- * Utilisé pour contrôler le comportement du DatePicker, notamment pour les dates de naissance
+ * Composable pour gérer le mode d'affichage du CalendarMode (année, mois, jour)
+ * Utilisé pour contrôler le comportement du CalendarMode, notamment pour les dates de naissance
  *
  * @param isBirthDateGetter - Une fonction qui retourne la valeur actuelle de isBirthDate
  */
 export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewModeReturn {
-	// Variable pour suivre le mode d'affichage actuel du DatePicker
+	// Variable pour suivre le mode d'affichage actuel du CalendarMode
 	const currentViewMode = ref<ViewMode>(isBirthDateGetter() ? 'year' : 'month')
 
 	// Mettre à jour le mode d'affichage quand isBirthDate change
@@ -46,7 +46,7 @@ export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewMod
 		}
 	}
 
-	// Fonction pour réinitialiser le mode d'affichage (utile lors de la fermeture du DatePicker)
+	// Fonction pour réinitialiser le mode d'affichage (utile lors de la fermeture du CalendarMode)
 	const resetViewMode = () => {
 		currentViewMode.value = isBirthDateGetter() ? 'year' : 'month'
 	}

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

@@ -1,10 +1,10 @@
 import { type Ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
 
 /**
- * Composable pour gérer la visibilité et les interactions avec le DatePicker
+ * Composable pour gérer la visibilité et les interactions avec le CalendarMode
  *
  * @param options - Options de configuration
- * @returns Fonctions pour gérer la visibilité du DatePicker
+ * @returns Fonctions pour gérer la visibilité du CalendarMode
  */
 export const useDatePickerVisibility = (options: {
 	// Propriétés de configuration
@@ -39,7 +39,7 @@ export const useDatePickerVisibility = (options: {
 	} = options
 
 	/**
-	 * Bascule l'affichage du DatePicker
+	 * Bascule l'affichage du CalendarMode
 	 */
 	const toggleDatePicker = () => {
 		if (disabled || readonly) return
@@ -47,7 +47,7 @@ export const useDatePickerVisibility = (options: {
 		isDatePickerVisible.value = !isDatePickerVisible.value
 
 		if (isDatePickerVisible.value) {
-			// Mettre à jour l'accessibilité après l'ouverture du DatePicker
+			// Mettre à jour l'accessibilité après l'ouverture du CalendarMode
 			nextTick(() => {
 				updateAccessibility()
 			})
@@ -59,7 +59,7 @@ export const useDatePickerVisibility = (options: {
 	}
 
 	/**
-	 * Ouvre le DatePicker s'il n'est pas déjà visible
+	 * Ouvre le CalendarMode s'il n'est pas déjà visible
 	 */
 	const openDatePicker = () => {
 		if (!isDatePickerVisible.value) {
@@ -68,7 +68,7 @@ export const useDatePickerVisibility = (options: {
 	}
 
 	/**
-	 * Ouvre le DatePicker lors d'un clic sur le champ de texte
+	 * Ouvre le CalendarMode lors d'un clic sur le champ de texte
 	 */
 	const openDatePickerOnClick = () => {
 		if (textFieldActivator) {
@@ -80,7 +80,7 @@ export const useDatePickerVisibility = (options: {
 	 * Gère le focus sur le champ de texte
 	 */
 	const openDatePickerOnFocus = () => {
-		// Only open the DatePicker if textFieldActivator is true
+		// Only open the CalendarMode if textFieldActivator is true
 		if (textFieldActivator) {
 			openDatePicker()
 		}
@@ -91,14 +91,14 @@ export const useDatePickerVisibility = (options: {
 	}
 
 	/**
-	 * Gère le clic sur l'icône du DatePicker
+	 * Gère le clic sur l'icône du CalendarMode
 	 */
 	const openDatePickerOnIconClick = () => {
 		toggleDatePicker()
 	}
 
 	/**
-	 * Gère les clics en dehors du DatePicker pour le fermer
+	 * Gère les clics en dehors du CalendarMode pour le fermer
 	 */
 	const handleClickOutside = (event: MouseEvent) => {
 		if (!isDatePickerVisible.value) return
@@ -106,14 +106,14 @@ export const useDatePickerVisibility = (options: {
 		const target = event.target as HTMLElement
 		const container = target.closest('.date-picker-container')
 
-		// Si on clique dans le conteneur du DatePicker, on ne fait rien
+		// Si on clique dans le conteneur du CalendarMode, on ne fait rien
 		if (container) return
 		emitClosed()
 		// Déclencher la validation à la fermeture
 		validateDates()
 	}
 
-	// Gestion des événements de clic en dehors du DatePicker
+	// Gestion des événements de clic en dehors du CalendarMode
 	onMounted(() => {
 		document.addEventListener('click', handleClickOutside)
 	})
@@ -123,7 +123,7 @@ export const useDatePickerVisibility = (options: {
 	})
 
 	/**
-	 * Gère l'ouverture du DatePicker lors de l'appui sur Entrée ou Espace
+	 * Gère l'ouverture du CalendarMode lors de l'appui sur Entrée ou Espace
 	 */
 	const handleKeyboardNavigation = (event: KeyboardEvent) => {
 		if ((event.key === 'Enter' || event.key === ' ') && !disabled && !readonly) {

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

@@ -2,7 +2,7 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 
 /**
- * Composable pour gérer la sélection de dates dans les composants DatePicker
+ * Composable pour gérer la sélection de dates dans les composants CalendarMode
  * Gère les plages de dates et la génération des dates intermédiaires
  */
 export function useDateSelection(

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

@@ -1,8 +1,8 @@
 import { ref, nextTick, type Ref } from 'vue'
 
 /**
- * Composable pour personnaliser les boutons du mois et de l'année dans les composants DatePicker
- * @param isPickerVisibleGetter - Fonction qui retourne l'état de visibilité du DatePicker
+ * Composable pour personnaliser les boutons du mois et de l'année dans les composants CalendarMode
+ * @param isPickerVisibleGetter - Fonction qui retourne l'état de visibilité du CalendarMode
  * @param monthName - Référence au nom du mois à utiliser
  * @param yearName - Référence au nom de l'année à utiliser
  */
@@ -95,12 +95,12 @@ export function useMonthButtonCustomization(
 
 						// Créer un bouton stylisé comme un VBtn avec une icône Material Design
 						const buttonHTML = `
-							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary); margin-left: -12px;" data-ripple="false">
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary); margin-left: -12px;" data-ripple="false" aria-label="${monthText}">
 								<span class="v-btn__overlay"></span>
 								<span class="v-btn__underlay"></span>
 								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
 									<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-label="chevron-down"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 								</div>
 							</button>
 						`
@@ -112,7 +112,7 @@ export function useMonthButtonCustomization(
 					// Personnalisation des boutons d'année pour tous les DatePickers
 					const yearBtns = document.querySelectorAll('.v-date-picker-controls__mode-btn')
 					yearBtns.forEach((yearBtn) => {
-						// Trouver le parent DatePicker-controls pour ce bouton d'année
+						// Trouver le parent CalendarMode-controls pour ce bouton d'année
 						const parentControl = yearBtn.closest('.v-date-picker-controls')
 						if (!parentControl) return
 
@@ -142,12 +142,12 @@ export function useMonthButtonCustomization(
 
 						// Créer un bouton stylisé pour l'année
 						const yearButtonHTML = `
-							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary);" data-ripple="false">
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary);" data-ripple="false" aria-label="${displayedYear}">
 								<span class="v-btn__overlay"></span>
 								<span class="v-btn__underlay"></span>
 								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
 									<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
-									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-label="chevron-down"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 								</div>
 							</button>
 						`

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

@@ -13,7 +13,7 @@ export interface TodayButtonReturn {
 }
 
 /**
- * Composable pour gérer le bouton "Aujourd'hui" dans le DatePicker
+ * Composable pour gérer le bouton "Aujourd'hui" dans le CalendarMode
  */
 export function useTodayButton(props: TodayButtonProps): TodayButtonReturn {
 	// Computed pour le format de la date du jour

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

@@ -9,7 +9,7 @@ export interface WeekendDaysReturn {
 }
 
 /**
- * Composable pour gérer l'affichage des jours de weekend dans le DatePicker
+ * Composable pour gérer l'affichage des jours de weekend dans le CalendarMode
  */
 export function useWeekendDays(props: WeekendDaysProps): WeekendDaysReturn {
 	// Computed pour l'affichage des jours de weekend