@cnamts/synapse 1.0.25 → 1.0.27

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -275,6 +275,13 @@
 		return 'rgba(0, 0, 0, 1)'
 	})
 
+	const clearButtonColorClass = computed(() => {
+		if (hasError.value) return 'error-field'
+		if (hasWarning.value) return 'warning-field'
+		if (hasSuccess.value) return 'success-field'
+		return 'text-iconBase'
+	})
+
 	const handlePrependIconClick = () => {
 		emit('prepend-icon-click')
 	}
@@ -346,7 +353,7 @@
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
-		if (hasSuccess.value && props.showSuccessMessages) return ICONS['success']
+		if (hasSuccess.value) return ICONS['success']
 		return null
 	})
 
@@ -361,7 +368,7 @@
 	// Détermine s'il y a des messages d'erreur ou d'état
 	const hasMessages = computed(() => {
 		if (props.disableErrorHandling) return false
-		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || hasSuccess.value
+		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && props.showSuccessMessages)
 	})
 
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
@@ -634,7 +641,7 @@
 			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : messages))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? (props.showSuccessMessages ? successes : []) : messages))"
 			:min-width="props.minWidth"
 			:name="props.name"
 			:persistent-clear="props.displayPersistentClear"
@@ -778,7 +785,8 @@
 					<!-- Keyboard-focusable clear button -->
 					<VBtn
 						v-if="showClear"
-						class="v-btn v-btn--density-compact mr-1 text-iconBase"
+						class="v-btn v-btn--density-compact mr-1"
+						:class="clearButtonColorClass"
 						:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
 						:title="props.label ? `Vider ${props.label}` : 'Vider'"
 						:icon="mdiClose"
@@ -843,14 +851,22 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textWarning)) !important;
+		fill: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
-	:deep(.v-field) {
+	:deep(.v-label.v-field-label) {
 		color: rgb(var(--v-theme-borderWarning)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
+
+		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 
@@ -858,11 +874,18 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderWarning)) !important;
+			color: rgb(var(--v-theme-onWarningVariant)) !important;
 		}
 	}
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.text-iconBase {
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-primary)) !important;
+	}
+}
+
 .error-field {
 	:deep(.v-input__details > .v-icon),
 	:deep(.v-input__prepend > .v-icon),
@@ -870,11 +893,17 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-error)) !important;
+	}
+
 	:deep(.v-field) {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderError)) !important;
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 
@@ -882,7 +911,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderError)) !important;
+			color: rgb(var(--v-theme-error)) !important;
 		}
 	}
 }
@@ -895,16 +924,22 @@
 	}
 
 	:deep(.v-icon__svg) {
-		fill: rgb(var(--v-theme-textSuccess)) !important;
+		fill: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 
-	:deep(.v-field) {
+	:deep(.v-label.v-field-label) {
 		color: rgb(var(--v-theme-borderSuccess)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 
@@ -912,7 +947,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: rgb(var(--v-theme-borderSuccess)) !important;
+			color: rgb(var(--v-theme-onSuccessVariant)) !important;
 		}
 	}
 }
@@ -923,13 +958,13 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		color: rgb(var(--v-theme-primary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
+		outline: 2px solid rgb(var(--v-theme-primary));
 		outline-offset: 2px;
 		opacity: 1;
 	}

package/src/components/DataList/DataList.stories.ts

@@ -561,7 +561,7 @@ export const Chips: Story = {
 				chip: true,
 				options: {
 					chip: {
-						color: 'success',
+						color: 'onSuccessVariant',
 					},
 				},
 			},

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 
 import DataListItem from '../DataListItem.vue'
 
@@ -59,6 +59,7 @@ describe('DataListItem', () => {
 	})
 
 	it('renders correctly a value as plain HTML', () => {
+		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
 		const wrapper = mount(DataListItem, {
 			props: {
 				label: 'Test',
@@ -66,6 +67,7 @@ describe('DataListItem', () => {
 				renderHtmlValue: true,
 			},
 		})
+		warnSpy.mockRestore()
 
 		const elValue = wrapper.find('.sy-data-list-item-value span')
 

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

@@ -172,7 +172,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,
 		},
 		'isOutlined': {

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

@@ -4,12 +4,11 @@
 	import DateTextInput from '../DateTextInput/DateTextInput.vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
 	import { VDatePicker } from 'vuetify/components'
-	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 { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation, useDatePickerFocusTrap, useDatePickerValidationBridge } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
@@ -40,7 +39,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,76 +241,14 @@
 	}
 
 	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({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: 'Date',
-		disableErrorHandling: props.disableErrorHandling,
-	})
-	const { errors, warnings, successes, validateField: baseValidateField, clearValidation: baseClearValidation } = validation
-
-	const clearValidation = () => baseClearValidation()
-
-	watch(() => props.readonly, () => {
-		// When toggling readonly, reset validation state to avoid stale success/errors
-		errors.value = []
-		warnings.value = []
-		successes.value = []
-	})
-
-	const validateField = (
-		value: unknown,
-		rules: ValidationRule[] = [],
-		warningRules: ValidationRule[] = [],
-		successRules: ValidationRule[] = [],
-	): Promise<ValidationResult> | ValidationResult => {
-		if (props.readonly) {
-			return {
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: { errors: [], warnings: [], successes: [] },
-			}
-		}
-
-		return baseValidateField(value, rules, warningRules, successRules)
-	}
-
-	const validateFieldForDateValidation = (
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
-		value: any,
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
-		rules: any[] = [],
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
-		warningRules: any[] = [],
-	): ValidationResult => {
-		if (props.readonly) {
-			return {
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: {
-					errors: [],
-					warnings: [],
-					successes: [],
-				},
-			}
-		}
-
-		return validateField(value, rules, warningRules, []) as ValidationResult
-	}
-
-	const errorMessages = errors
-	const warningMessages = warnings
-	const successMessages = successes
-
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
 	const preventCloseOnKeyboardNavigation = ref(false)
@@ -318,81 +256,40 @@
 	const currentRangeIsValid = ref(true)
 	const getRangeValidationError = ref('')
 
-	const { validateDates: coreValidateDates } = useDateValidation({
+	const {
+		validation,
+		errors,
+		warnings,
+		successes,
+		clearValidation,
+		validateDates,
+	} = useDatePickerValidationBridge({
+		showSuccessMessages: props.showSuccessMessages,
+		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: props.noCalendar,
-		// On garde la logique "required" spécifique à CalendarMode
-		required: false,
+		required: props.required,
 		displayRange: props.displayRange,
-		disableErrorHandling: props.disableErrorHandling,
 		customRules: computed(() => props.customRules),
 		customWarningRules: computed(() => props.customWarningRules),
 		selectedDates: selectedDates as Ref<DateObjectValue>,
 		isUpdatingFromInternal,
 		currentRangeIsValid,
 		getRangeValidationError,
-		clearValidation,
-		validateField: validateFieldForDateValidation,
-		errors,
-		warnings,
-		successes,
+		readonly: computed(() => props.readonly),
+		skipValidationWhenReadonly: true,
+		useCalendarModeRequiredFlow: true,
+		isInitialValidation,
+		isValidateOnBlur: computed(() => props.isValidateOnBlur),
+		onblur,
 	})
 
-	// Fonction pour valider les dates
-	const validateDates = async (forceValidation = false) => {
-		if (props.noCalendar) {
-			// En mode no-calendar, on délègue la validation au DateTextInput
-			return
-		}
-
-		// Réinitialiser la validation
-		clearValidation()
-
-		// Si la gestion des erreurs est désactivée, on effectue la validation interne
-		// mais on n'ajoute pas les messages d'erreur
-		const shouldDisplayErrors = !props.disableErrorHandling
-
-		// Vérifier si le champ est requis et vide
-		if ((forceValidation || !isUpdatingFromInternal.value) && props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
-			if (props.readonly) {
-				return
-			}
-			// Ne pas afficher d'erreur si on est sur une perte de focus et si isValidateOnBlur est false
-			if (onblur.value && !props.isValidateOnBlur) {
-				return
-			}
-			// Ne pas afficher d'erreur si on est dans le contexte du mounted initial
-			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
-			}
-			return
-		}
-		// Permettre aux custom rules de s'exécuter même sur des champs vides
-		if (!selectedDates.value) {
-			if (!props.customRules || props.customRules.length === 0) return
-
-			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-				// Comportement historique : exécuter directement les règles personnalisées même si la valeur est vide
-				await validateField(
-					selectedDates.value,
-					props.customRules,
-					props.customWarningRules,
-				)
-				// Dédoublonner les messages comme auparavant
-				errors.value = [...new Set(errors.value)]
-				warnings.value = [...new Set(warnings.value)]
-				successes.value = [...new Set(successes.value)]
-			}
-			return
-		}
-
-		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
-		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-			await coreValidateDates(forceValidation)
-		}
-	}
+	const errorMessages = errors
+	const warningMessages = warnings
+	const successMessages = validation.displaySuccesses
+	const isOnSuccess = computed(() => successes.value.length > 0 && errors.value.length === 0 && warnings.value.length === 0)
 
 	// 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
 
@@ -407,9 +304,9 @@
 		}
 		finally {
 			// S'assurer que le flag est toujours réinitialisé
-			setTimeout(() => {
+			queueMicrotask(() => {
 				isUpdatingFromInternal.value = false
-			}, 0)
+			})
 		}
 	}
 
@@ -434,7 +331,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)}`
 					}
@@ -445,9 +342,9 @@
 				}
 			}
 			finally {
-				setTimeout(() => {
+				queueMicrotask(() => {
 					isUpdatingFromInternal.value = false
-				}, 0)
+				})
 			}
 		}
 		else {
@@ -465,7 +362,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,11 +387,12 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange,
 	})
 
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
-	const handleDateTextInputUpdate = async (value: DateValue) => {
-		if (isUpdatingFromInternal.value) return
+	const handleDateTextInputUpdate = async (value: DateModelValue) => {
+		if (isUpdatingFromInternal.value && !props.noCalendar) return
 
 		try {
 			isUpdatingFromInternal.value = true
@@ -514,7 +412,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 +433,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 +672,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 +958,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"
@@ -1214,13 +1112,13 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderSuccess)) !important;
+		color: rgb(var(--v-theme-onSuccessVariant)) !important;
 	}
 }
 
@@ -1238,33 +1136,33 @@
 
 .v-messages__message--error {
 	:deep(.v-input__control) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-borderError)) !important;
+		color: rgb(var(--v-theme-error)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 
 	.v-field--active & {
-		color: rgb(var(--v-theme-textWarning)) !important;
+		color: rgb(var(--v-theme-onWarningVariant)) !important;
 	}
 }
 
@@ -1305,7 +1203,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: rgb(var(--v-theme-backgroundMain));
+	background-color: rgb(var(--v-theme-background));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1313,7 +1211,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
+	background-color: rgb(var(--v-theme-primaryVariant)) !important;
 }
 
 .fade-enter-active,