@cnamts/synapse 1.0.26 → 1.1.0

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/DataList/tests/DataList.visual.cy.ts

@@ -0,0 +1,85 @@
+import DataList from '../DataList.vue'
+import { mdiAccount, mdiEmail, mdiBriefcase } from '@mdi/js'
+
+const defaultItems = [
+	{ key: 'Nom', value: 'Dupont' },
+	{ key: 'Prénom', value: 'Jean' },
+	{ key: 'Date de naissance', value: '01/01/1980' },
+]
+
+const itemsWithIcons = [
+	{ key: 'Nom', value: 'Dupont', icon: 'person' },
+	{ key: 'Email', value: 'jean.dupont@example.com', icon: 'email' },
+	{ key: 'Profession', value: 'Développeur', icon: 'job' },
+]
+
+const iconsMap = {
+	person: mdiAccount,
+	email: mdiEmail,
+	job: mdiBriefcase,
+}
+
+describe('DataList - Visual regression tests', () => {
+	it('displays the data list by default', () => {
+		cy.mountWithVuetify(DataList, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-default', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list with a title', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				listTitle: 'Informations personnelles',
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-with-title', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list in loading state', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				loading: true,
+			},
+		})
+
+		cy.get('.sy-data-list-loading').should('be.visible')
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('data-list-loading', cy.get('.sy-data-list-loading'))
+	})
+
+	it('displays the data list in row layout', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				row: true,
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-row', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list with icons', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: itemsWithIcons,
+				icons: iconsMap,
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.get('.sy-data-list-item .v-icon').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-with-icons', cy.get('.sy-data-list'))
+	})
+})

package/src/components/DataListGroup/tests/DataListGroup.visual.cy.ts

@@ -0,0 +1,51 @@
+import DataListGroup from '../DataListGroup.vue'
+import { mdiAccount, mdiCalendar, mdiEmail, mdiPhone } from '@mdi/js'
+
+const defaultItems = [
+	{
+		title: 'Identité',
+		items: [
+			{ key: 'Nom', value: 'Dupont', icon: 'person' },
+			{ key: 'Prénom', value: 'Jean', icon: 'person' },
+			{ key: 'Date de naissance', value: '01/01/1980', icon: 'calendar' },
+		],
+	},
+	{
+		title: 'Contact',
+		items: [
+			{ key: 'Email', value: 'jean.dupont@example.com', icon: 'email' },
+			{ key: 'Téléphone', value: '0102030405', icon: 'phone' },
+		],
+	},
+]
+
+const iconsMap = {
+	person: mdiAccount,
+	calendar: mdiCalendar,
+	email: mdiEmail,
+	phone: mdiPhone,
+}
+
+describe('DataListGroup - Visual regression tests', () => {
+	it('displays the data list group by default', () => {
+		cy.mountWithVuetify(DataListGroup, {
+			props: { items: defaultItems, icons: iconsMap },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-group-default', cy.get('.v-application'))
+	})
+
+	it('displays the data list group in loading state', () => {
+		cy.mountWithVuetify(DataListGroup, {
+			props: {
+				items: defaultItems,
+				icons: iconsMap,
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-group-loading', cy.get('.v-application'))
+	})
+})

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/DataListItem/tests/DataListItem.visual.cy.ts

@@ -0,0 +1,53 @@
+import DataListItem from '../DataListItem.vue'
+
+describe('DataListItem - Visual regression tests', () => {
+	it('displays the item with label and value', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Nom',
+				value: 'Dupont',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-default', cy.get('.v-application'))
+	})
+
+	it('displays the item as a chip', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Statut',
+				value: 'Actif',
+				chip: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-chip', cy.get('.v-application'))
+	})
+
+	it('displays the item in row layout', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Date',
+				value: '01/01/2025',
+				row: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-row', cy.get('.v-application'))
+	})
+
+	it('displays the item with placeholder when value is empty', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Remarque',
+				value: undefined,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-placeholder', cy.get('.v-application'))
+	})
+})

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

@@ -256,7 +256,7 @@ const meta = {
 		'showSuccessMessages': {
 			control: 'boolean',
 			description: 'Affiche les messages de succès quand la validation est passée avec succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		'bgColor': {
 			control: 'text',

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 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'
@@ -116,7 +115,7 @@
 		placeholder: undefined,
 		readonly: false,
 		required: false,
-		showSuccessMessages: true,
+		showSuccessMessages: false,
 		showWeekNumber: false,
 		textFieldActivator: false,
 		title: false,
@@ -250,69 +249,6 @@
 		(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 = 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)
 	const preventCloseOnKeyboardNavigation = ref(false)
@@ -320,78 +256,37 @@
 	const currentRangeIsValid = ref(true)
 	const getRangeValidationError = ref('')
 
-	const { validateDates: coreValidateDates } = useDateValidation({
+	const {
+		validation,
+		errors,
+		warnings,
+		successes,
+		clearValidation,
+		validateDates,
+	} = useDatePickerValidationBridge({
+		showSuccessMessages: true,
+		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: DateModelValue) => {
@@ -409,9 +304,9 @@
 		}
 		finally {
 			// S'assurer que le flag est toujours réinitialisé
-			setTimeout(() => {
+			queueMicrotask(() => {
 				isUpdatingFromInternal.value = false
-			}, 0)
+			})
 		}
 	}
 
@@ -447,9 +342,9 @@
 				}
 			}
 			finally {
-				setTimeout(() => {
+				queueMicrotask(() => {
 					isUpdatingFromInternal.value = false
-				}, 0)
+				})
 			}
 		}
 		else {
@@ -497,7 +392,7 @@
 
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
 	const handleDateTextInputUpdate = async (value: DateModelValue) => {
-		if (isUpdatingFromInternal.value) return
+		if (isUpdatingFromInternal.value && !props.noCalendar) return
 
 		try {
 			isUpdatingFromInternal.value = true
@@ -1063,7 +958,7 @@
 							:class="[getMessageClasses(), 'label-hidden-on-focus']"
 							:error-messages="errorMessages"
 							:warning-messages="warningMessages"
-							:success-messages="successMessages"
+							:success-messages="props.showSuccessMessages ? successMessages : []"
 							:has-success="isOnSuccess"
 							:disabled="props.disabled"
 							:disable-click-button="false"
@@ -1217,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;
 	}
 }
 
@@ -1241,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;
 	}
 }
 
@@ -1308,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) {
@@ -1316,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,
@@ -1330,12 +1225,12 @@
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 /* div avant la class .v-date-picker-month__day--week-end */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1352,7 +1247,7 @@
 }
 
 :deep(.custom-year-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	padding: 10px 40px;
 	text-decoration: none;
 	display: inline-block;
@@ -1362,7 +1257,7 @@
 }
 
 :deep(.custom-month-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;