@cnamts/synapse 1.0.25 → 1.0.26

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -7,7 +7,7 @@
 	import { useValidation, type ValidationResult, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
-	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
+	import { useDateInitialization, type DateModelValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
 	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDateValidation, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation, useDatePickerFocusTrap } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
@@ -40,7 +40,8 @@
 	const props = withDefaults(defineProps<{
 		autoClamp?: boolean
 		bgColor?: string
-		birthDate?: boolean // Alias pour isBirthDate pour compatibilité avec l'attribut kebab-case birth-date
+		/** @deprecated Utilisez isBirthDate à la place */
+		birthDate?: boolean
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customRules?: { type: string, options: any }[]
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,12 +242,12 @@
 	}
 
 	const emit = defineEmits<{
-		(e: 'update:modelValue', value: DateValue): void
+		(e: 'update:modelValue', value: DateModelValue): void
 		(e: 'closed'): void
 		(e: 'focus'): void
 		(e: 'blur'): void
-		(e: 'input', value: DateValue): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'input', value: DateModelValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	const validation = useValidation({
@@ -309,7 +310,8 @@
 
 	const errorMessages = errors
 	const warningMessages = warnings
-	const successMessages = successes
+	const successMessages = validation.displaySuccesses
+	const isOnSuccess = computed(() => successes.value.length > 0 && errors.value.length === 0 && warnings.value.length === 0)
 
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
@@ -392,7 +394,7 @@
 	}
 
 	// Fonction centralisée pour mettre à jour le modèle
-	const updateModel = async (value: DateValue) => {
+	const updateModel = async (value: DateModelValue) => {
 		// Éviter les mises à jour inutiles
 		if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return
 
@@ -434,7 +436,7 @@
 				if (Array.isArray(newValue) && props.displayRange && newValue.length >= 2 && props.noCalendar) {
 					// Cas spécifique noCalendar + displayRange : conserver la chaîne de plage complète
 					const start = newValue[0]
-					const end = newValue[1]
+					const end = newValue[newValue.length - 1]
 					if (start && end) {
 						textInputValue.value = `${formatDate(start, props.format)} - ${formatDate(end, props.format)}`
 					}
@@ -465,7 +467,7 @@
 	})
 
 	// Utilisation du composable pour gérer la sélection de dates
-	const { updateSelectedDates, rangeBoundaryDates, resetRange } = useDateSelection(
+	const { updateSelectedDates, rangeBoundaryDates, generateDateRange, resetRange } = useDateSelection(
 		parseDate,
 		selectedDates,
 		props.format,
@@ -490,10 +492,11 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange,
 	})
 
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
-	const handleDateTextInputUpdate = async (value: DateValue) => {
+	const handleDateTextInputUpdate = async (value: DateModelValue) => {
 		if (isUpdatingFromInternal.value) return
 
 		try {
@@ -514,7 +517,7 @@
 				const endDate = parseDate(endDateStr, props.dateFormatReturn || props.format)
 
 				if (startDate && endDate) {
-					selectedDates.value = [startDate, endDate]
+					selectedDates.value = generateDateRange(startDate, endDate)
 					displayFormattedDate.value = `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
 				}
 			}
@@ -535,7 +538,7 @@
 	}
 
 	// Gestionnaire pour les événements date-selected du DateTextInput
-	const handleDateTextInputSelection = async (value: DateValue) => {
+	const handleDateTextInputSelection = async (value: DateModelValue) => {
 		if (isUpdatingFromInternal.value) return
 
 		// Mettre à jour le modèle avec la valeur sélectionnée
@@ -774,7 +777,6 @@
 
 	// 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,
 		// Fonction qui retourne l'état de la date sélectionnée
 		() => selectedDates.value,
@@ -1061,7 +1063,8 @@
 							:class="[getMessageClasses(), 'label-hidden-on-focus']"
 							:error-messages="errorMessages"
 							:warning-messages="warningMessages"
-							:success-messages="props.showSuccessMessages ? successMessages : []"
+							:success-messages="successMessages"
+							:has-success="isOnSuccess"
 							:disabled="props.disabled"
 							:disable-click-button="false"
 							:readonly="true"

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

@@ -309,7 +309,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'useCombinedMode': {

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

@@ -12,7 +12,7 @@
 	import {
 		useDateInitialization,
 		type DateInput,
-		type DateValue,
+		type DateModelValue,
 	} from '@/composables/date/useDateInitializationDayjs'
 	import {
 		useAsteriskDisplay,
@@ -130,6 +130,7 @@
 		defineProps<{
 			autoClamp?: boolean
 			bgColor?: string
+			/** @deprecated Utilisez isBirthDate à la place */
 			birthDate?: boolean
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			customRules?: { type: string, options: any }[]
@@ -212,12 +213,12 @@
 	)
 
 	const emit = defineEmits<{
-		(e: 'update:modelValue', value: DateValue): void
+		(e: 'update:modelValue', value: DateModelValue): void
 		(e: 'closed'): void
 		(e: 'focus'): void
 		(e: 'blur'): void
 		(e: 'input', value: string): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	/**
@@ -313,14 +314,14 @@
 		emitFocus: () => emit('focus'),
 	})
 
-	const updateModel = (value: DateValue) => {
+	const updateModel = (value: DateModelValue) => {
 		// Prevent redundant emits
 		if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return
 		withInternalUpdate(() => emit('update:modelValue', value))
 	}
 
 	// Keep and expose this so consumers can listen to `date-selected`
-	const handleDateSelected = (value: DateValue) => {
+	const handleDateSelected = (value: DateModelValue) => {
 		if (props.readonly) return
 
 		// 1) Update v-model
@@ -709,7 +710,7 @@
 		validateField: (value, rules, warningRules) =>
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 			validateField(value, rules as any[], warningRules as any[]),
-		updateModel: value => updateModel(value as DateValue),
+		updateModel: value => updateModel(value as DateModelValue),
 		emitInput: value => emit('input', value),
 		inputRef: dateCalendarTextInputRef as Ref<ComponentPublicInstance | null>,
 	})
@@ -848,7 +849,7 @@
 	/**
 	 * Gère les mises à jour de DateTextInput avec contrôle
 	 */
-	const handleDateTextInputUpdate = (value: DateValue) => {
+	const handleDateTextInputUpdate = (value: DateModelValue) => {
 		// Ne pas traiter les mises à jour internes pour éviter les boucles
 		if (isUpdatingFromInternal.value) return
 

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

@@ -157,7 +157,7 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.selectedDates).not.toBeNull()
 
 		const input = wrapper.find('input')
-		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - ')
+		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - 10/01/2025')
 	})
 
 	it('generates all intermediate dates when selecting a range in range mode', async () => {

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

@@ -76,7 +76,7 @@ ValidationExamples.parameters = {
 			<script setup>
 import { computed, ref, watch } from 'vue';vue'
 import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
-import { useDateFormat } from '@/composables/date/useDateFormat';vue'
+import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 
 				// Exemple 1: Validation de base (required)
 				const date1 = ref('')

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

@@ -16,7 +16,7 @@
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
-	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+	import type { DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 	import type { DateObjectValue } from '../types'
 
 	dayjs.extend(customParseFormat)
@@ -40,7 +40,7 @@
 		isOutlined?: boolean
 		isValidateOnBlur?: boolean
 		label: string
-		modelValue?: DateValue
+		modelValue?: DateModelValue
 		noIcon?: boolean
 		persistentHint?: boolean
 		placeholder?: string
@@ -77,11 +77,11 @@
 	})
 
 	const emit = defineEmits<{
-		(e: 'update:model-value', value: DateValue): void
+		(e: 'update:model-value', value: DateModelValue): void
 		(e: 'focus'): void
 		(e: 'blur'): void
 		(e: 'input', value: string): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	/**
@@ -111,6 +111,7 @@
 		errors: ref<string[]>([]),
 		warnings: ref<string[]>([]),
 		successes: ref<string[]>([]),
+		displaySuccesses: computed(() => []),
 		hasError: ref(false),
 		clearValidation: () => {},
 		validateField: () => ({
@@ -153,7 +154,8 @@
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])
 	const warningMessages = warnings
-	const successMessages = successes
+	const displaySuccesses = computed(() => (validationApi.value as typeof baseValidation).displaySuccesses?.value ?? [])
+	const successMessages = displaySuccesses
 
 	/**
 	 * Safe validate utility
@@ -576,7 +578,7 @@
 		return formatDate(date, returnFormat.value)
 	}
 
-	function emitModel(val: DateValue) {
+	function emitModel(val: DateModelValue) {
 		emit('update:model-value', val)
 	}
 
@@ -688,12 +690,31 @@
 
 			if (formatValidationResult.isValid && !customRulesValidationResult.hasError && !isRange.value) {
 				const parsedDate = dayjs(inputValue.value, displayFormat.value, true).toDate()
+				// Guard isFormatting to prevent the modelValue watcher from
+				// rewriting inputValue in reaction to our own emit.
+				isFormatting.value = true
 				emitModel(returnFormat.value !== displayFormat.value ? dayjs(parsedDate).format(returnFormat.value) : inputValue.value)
 			}
 			else if (formatValidationResult.isValid && !customRulesValidationResult.hasError && isRange.value) {
 				if (typeof inputValue.value === 'string' && inputValue.value.includes(' - ')) {
 					const dateRangeParts = inputValue.value.split(' - ')
-					if (dateRangeParts.length === 2) emitModel([dateRangeParts[0]!, dateRangeParts[1]!])
+					if (dateRangeParts.length === 2) {
+						const sd = dayjs(dateRangeParts[0]!, displayFormat.value, true)
+						const ed = dayjs(dateRangeParts[1]!, displayFormat.value, true)
+						// Guard isFormatting to prevent the modelValue watcher from
+						// rewriting inputValue in reaction to our own emit.
+						isFormatting.value = true
+						if (sd.isValid() && ed.isValid()) {
+							const emittedRange: [string, string] = [
+								returnFormat.value !== displayFormat.value ? sd.format(returnFormat.value) : dateRangeParts[0]!,
+								returnFormat.value !== displayFormat.value ? ed.format(returnFormat.value) : dateRangeParts[1]!,
+							]
+							emitModel(emittedRange)
+						}
+						else {
+							emitModel([dateRangeParts[0]!, dateRangeParts[1]!])
+						}
+					}
 					else emitModel(inputValue.value)
 				}
 				else emitModel(inputValue.value)
@@ -701,29 +722,40 @@
 			else {
 				runRules(inputValue.value)
 				if (!props.disableErrorHandling && formatValidationResult.message) errors.value.push(formatValidationResult.message)
-				// Only emit null for format errors, not for custom rule errors
-				if (!formatValidationResult.isValid) {
-					emitModel(null)
-				}
-				// For custom rule errors with valid format, keep the current value
+				// Keep the invalid input visible so the user can correct it.
+				// Do NOT emit null — that would trigger the modelValue watcher
+				// which clears inputValue and hides the error message.
+				return
 			}
 		}
 
 		// autoClamp au blur
-		if (props.autoClamp) inputValue.value = clampIfNeeded(inputValue.value)
+		if (props.autoClamp) {
+			const clamped = clampIfNeeded(inputValue.value)
+			if (clamped !== inputValue.value) {
+				inputValue.value = clamped
 
-		// Sync model après clamp
-		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))
+				// 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
+		// the modelValue watcher (triggered synchronously by emitModel)
+		// stays blocked, but future external changes are allowed.
+		await nextTick()
+		isFormatting.value = false
 	}
 
 	/**
@@ -1092,7 +1124,9 @@
 		:readonly="props.readonly"
 		:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
 		:warning-messages="warningMessages"
-		:success-messages="props.showSuccessMessages ? successMessages : []"
+		:success-messages="successMessages"
+		:has-success="isOnSuccess"
+		:show-success-messages="props.showSuccessMessages"
 		:bg-color="props.bgColor"
 		color="primary"
 		:is-clearable="!props.readonly"

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

@@ -196,7 +196,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'isBirthDate': {

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

@@ -1,5 +1,6 @@
 import { computed, ref, watch, type Ref, type ComputedRef } from 'vue'
-import type { DateInput, DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateInput, DateModelValue } from '@/composables/date/useDateInitializationDayjs'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 export interface UseDatePickerStateOptions {
 	selectedDates: Ref<Date | (Date | null)[] | null>
@@ -11,7 +12,7 @@ export interface UseDatePickerStateOptions {
 	formatDate: (date: Date | null, format: string) => string
 	initializeSelectedDates: (value: DateInput | null, format: string, dateFormatReturn?: string) => Date | (Date | null)[] | null
 	validateDates: (forceValidation?: boolean) => void
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
 	generateDateRange?: (start: Date, end: Date) => Date[]
 }
 
@@ -20,7 +21,7 @@ export interface UseDatePickerStateResult {
 	rangeBoundaryDates?: Ref<[Date | null, Date | null] | null>
 	textInputValue: Ref<string>
 	displayFormattedDate: Ref<string>
-	formattedDate: Ref<DateValue>
+	formattedDate: Ref<DateModelValue>
 	displayFormattedFromSelectedDates: ComputedRef<string | null>
 	syncFromModelValue: (newValue: DateInput | undefined) => void
 	syncTextInputFromSelection: () => void
@@ -44,7 +45,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 	const textInputValue = ref('')
 	const displayFormattedDate = ref('')
 
-	const formattedDate = computed<DateValue>(() => {
+	const formattedDate = computed<DateModelValue>(() => {
 		if (!selectedDates.value) return ''
 		const rf = dateFormatReturn || format
 
@@ -73,7 +74,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 
 		if (Array.isArray(selectedDates.value)) {
 			if (selectedDates.value.length >= 2) {
-				return `${formatDate(selectedDates.value[0]!, format)} - ${formatDate(
+				return `${formatDate(selectedDates.value[0]!, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(
 					selectedDates.value[selectedDates.value.length - 1]!,
 					format,
 				)}`
@@ -91,7 +92,17 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 				textInputValue.value = ''
 				return
 			}
-			if (typeof newValue === 'string') {
+			if (Array.isArray(newValue) && newValue.length === 2) {
+				// Mode plage : afficher "startDate - endDate" dans l'input
+				const startStr = dateFormatReturn
+					? formatDate(parseDate(newValue[0]!, dateFormatReturn), format)
+					: newValue[0]!
+				const endStr = dateFormatReturn
+					? formatDate(parseDate(newValue[1]!, dateFormatReturn), format)
+					: newValue[1]!
+				textInputValue.value = `${startStr}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${endStr}`
+			}
+			else if (typeof newValue === 'string') {
 				if (dateFormatReturn) {
 					const date = parseDate(newValue, dateFormatReturn)
 					if (date) {
@@ -128,16 +139,24 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		}
 
 		if (selectedDates.value) {
-			const firstDate = Array.isArray(selectedDates.value)
-				? selectedDates.value[0]
-				: selectedDates.value
-			if (firstDate) {
-				const formattedForInput = formatDate(firstDate, format)
-				textInputValue.value = formattedForInput
+			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
+				const startDate = selectedDates.value[0]
+				const endDate = selectedDates.value[selectedDates.value.length - 1]
+				if (startDate && endDate) {
+					textInputValue.value = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
+				}
+			}
+			else {
+				const firstDate = Array.isArray(selectedDates.value)
+					? selectedDates.value[0]
+					: selectedDates.value
+				if (firstDate) {
+					textInputValue.value = formatDate(firstDate, format)
+				}
 			}
 			if (Array.isArray(formattedDate.value)) {
 				// Pour les plages, formater avec le séparateur standard " - "
-				displayFormattedDate.value = formattedDate.value.join(' - ')
+				displayFormattedDate.value = formattedDate.value.join(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			}
 			else {
 				displayFormattedDate.value = (formattedDate.value as string) || ''
@@ -157,7 +176,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 			const startDate = value[0]
 			const endDate = value[value.length - 1]
 			if (startDate && endDate) {
-				const formattedForInput = `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
+				const formattedForInput = `${formatDate(startDate, format)}${DATE_PICKER_MESSAGES.RANGE_SEPARATOR}${formatDate(endDate, format)}`
 				if (textInputValue.value !== formattedForInput) {
 					textInputValue.value = formattedForInput
 				}

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

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { extractRangeParts as extractRangePartsUtil, hasRangeSeparator as hasRangeSeparatorUtil, isValidDateRange } from '../utils/dateFormattingUtils'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 // Initialiser les plugins dayjs
 dayjs.extend(customParseFormat)
@@ -23,7 +24,7 @@ export function useDateRangeInput(
 	// Stockage temporaire pour la deuxième date saisie
 	const secondDate = ref<Date | null>(null)
 	// Séparateur de plage
-	const rangeSeparator = ' - '
+	const rangeSeparator = DATE_PICKER_MESSAGES.RANGE_SEPARATOR
 
 	/**
 	 * Vérifie si une chaîne de caractères contient un séparateur de plage

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

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 /**
  * Composable pour gérer la sélection de dates dans les composants CalendarMode
@@ -101,7 +102,7 @@ export function useDateSelection(
 		}
 		else if (typeof input === 'string') {
 			// Mode plage de dates
-			const dates = input.split(' - ')
+			const dates = input.split(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			if (dates.length === 2) {
 				const startDate = parseDate(dates[0]!, format)
 				const endDate = parseDate(dates[1]!, format)

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

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ValidationResult } from '@/composables/validation/useValidation'
-import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { useManualDateValidation } from './useManualDateValidation'
 
 export interface UseDateTextFieldManualValidationOptions {
@@ -37,7 +37,7 @@ export interface UseDateTextFieldResetOptions {
 	inputValue: Ref<string>
 	selectedDates: Ref<unknown>
 	resetState: () => void
-	emitModel: (value: DateValue) => void
+	emitModel: (value: DateModelValue) => void
 }
 
 export interface UseDateTextFieldOptions {

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

@@ -1,5 +1,5 @@
 import { type Ref, ref } from 'vue'
-import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
+import { type DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { type DateObjectValue } from '../types'
 import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
@@ -27,7 +27,7 @@ export const useInputBlurHandler = (options: {
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
 	parseDate: (dateStr: string, format: string) => Date | null
 	formatDate: (date: Date, format: string) => string
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
 	validateManualInput: (value: string) => boolean | Promise<boolean>
 
 	// Émetteurs d'événements

package/src/components/DatePicker/types.ts

@@ -9,7 +9,6 @@
 export type DateObjectValue = Date | (Date | null)[] | null
 
 /**
- * Alias pour maintenir la compatibilité avec le code existant
- * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateValue depuis useDateInitializationDayjs pour les chaînes
+ * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateModelValue depuis useDateInitializationDayjs pour les chaînes
  */
 export type DateValue = DateObjectValue

package/src/components/DialogBox/DialogBox.stories.ts

@@ -730,7 +730,7 @@ export const VuetifyOptions: Story = {
 				rounded: 'xl',
 			},
 			cardTitle: {
-				class: 'pa-5 mb-4 accent--text',
+				class: 'pa-5 mb-4 secondary--text',
 			},
 			closeBtn: {
 				class: {
@@ -738,14 +738,14 @@ export const VuetifyOptions: Story = {
 				},
 			},
 			icon: {
-				color: 'accent',
+				color: 'secondary',
 			},
 			cancelBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: false,
 			},
 			confirmBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: true,
 			},
 		},
@@ -813,7 +813,7 @@ export const VuetifyOptions: Story = {
 							rounded: 'xl',
 						},
 						cardTitle: {
-							class: 'pa-5 mb-4 accent--text',
+							class: 'pa-5 mb-4 secondary--text',
 						},
 						closeBtn: {
 							class: {
@@ -821,14 +821,14 @@ export const VuetifyOptions: Story = {
 							},
 						},
 						icon: {
-							color: 'accent',
+							color: 'secondary',
 						},
 						cancelBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: false,
 						},
 						confirmBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: true,
 						},
 					}