@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/PeriodField/PeriodField.vue

@@ -11,51 +11,51 @@
 	type PeriodValue = { from: DateInput, to: DateInput }
 
 	const props = withDefaults(defineProps<{
+		bgColor?: string
+		customRules?: ValidationRule[]
+		customWarningRules?: ValidationRule[]
+		dateFormatReturn?: string
+		density?: 'default' | 'comfortable' | 'compact'
+		disableErrorHandling?: boolean
+		disabled?: boolean
+		displayAppendIcon?: boolean
+		displayIcon?: boolean
+		format?: string
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		hideDetails?: boolean | 'auto'
+		isOutlined?: boolean
 		modelValue?: PeriodValue
+		noCalendar?: boolean
+		noIcon?: boolean
 		placeholderFrom?: string
 		placeholderTo?: string
-		format?: string
-		dateFormatReturn?: string
-		showWeekNumber?: boolean
+		readonly?: boolean
 		required?: boolean
-		displayIcon?: boolean
-		displayAppendIcon?: boolean
-		disabled?: boolean
-		noIcon?: boolean
-		noCalendar?: boolean
-		isOutlined?: boolean
 		showSuccessMessages?: boolean
-		customRules?: ValidationRule[]
-		customWarningRules?: ValidationRule[]
-		disableErrorHandling?: boolean
-		readonly?: boolean
-		bgColor?: string
-		density?: 'default' | 'comfortable' | 'compact'
-		hideDetails?: boolean | 'auto'
-		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		showWeekNumber?: boolean
 	}>(), {
+		bgColor: 'white',
+		customRules: () => [],
+		customWarningRules: () => [],
+		dateFormatReturn: '',
+		density: 'default',
+		disableErrorHandling: false,
+		disabled: false,
+		displayAppendIcon: false,
+		displayIcon: true,
+		format: 'DD/MM/YYYY',
+		headingLevel: 2,
+		hideDetails: false,
+		isOutlined: true,
 		modelValue: () => ({ from: null, to: null }),
+		noCalendar: false,
+		noIcon: false,
 		placeholderFrom: 'Début',
 		placeholderTo: 'Fin',
-		format: 'DD/MM/YYYY',
-		dateFormatReturn: '',
-		showWeekNumber: false,
+		readonly: false,
 		required: false,
-		displayIcon: true,
-		displayAppendIcon: false,
-		disabled: false,
-		noIcon: false,
-		noCalendar: false,
-		isOutlined: true,
 		showSuccessMessages: true,
-		customRules: () => [],
-		customWarningRules: () => [],
-		disableErrorHandling: false,
-		readonly: false,
-		bgColor: 'white',
-		density: 'default',
-		hideDetails: false,
-		headingLevel: 2,
+		showWeekNumber: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -230,42 +230,42 @@
 	})
 
 	// Synchronisation lorsque l'une des dates change
-	function validateBothDates() {
+	async function validateBothDates() {
 		if (fromDateRef.value) {
 			fromDateRef.value.validateOnSubmit()
 		}
 		if (toDateRef.value) {
-			toDateRef.value.validateOnSubmit()
+			await toDateRef.value.validateOnSubmit()
 		}
 	}
 
 	// Validation complète du PeriodField
-	function validateFields() {
-		fromDateValidation.validateField(parsedFromDate.value, fromDateRules.value, props.customWarningRules)
-		toDateValidation.validateField(parsedToDate.value, toDateRules.value, props.customWarningRules)
+	async function validateFields() {
+		await fromDateValidation.validateField(parsedFromDate.value, fromDateRules.value, props.customWarningRules)
+		await toDateValidation.validateField(parsedToDate.value, toDateRules.value, props.customWarningRules)
 	}
 
 	// Gestionnaires d'événements closed
-	function handleFromDateClosed() {
-		validateBothDates()
+	async function handleFromDateClosed() {
+		await validateBothDates()
 	}
 
-	function handleToDateClosed() {
-		validateBothDates()
+	async function handleToDateClosed() {
+		await validateBothDates()
 	}
 
 	// Watch pour les changements des dates - validation croisée
-	watch(formattedFromDate, () => {
-		validateFields()
+	watch(formattedFromDate, async () => {
+		await validateFields()
 		if (formattedToDate.value && toDateRef.value) {
-			toDateRef.value.validateOnSubmit()
+			await toDateRef.value.validateOnSubmit()
 		}
 	})
 
-	watch(formattedToDate, () => {
-		validateFields()
+	watch(formattedToDate, async () => {
+		await validateFields()
 		if (formattedFromDate.value && fromDateRef.value) {
-			fromDateRef.value.validateOnSubmit()
+			await fromDateRef.value.validateOnSubmit()
 		}
 	})
 
@@ -278,7 +278,7 @@
 	})
 
 	// Watch pour les changements externes - Synchronisation
-	watch(() => props.modelValue, (newValue) => {
+	watch(() => props.modelValue, async (newValue) => {
 		if (!newValue) return
 
 		const newFromDate = formatDateValue(newValue.from)
@@ -291,28 +291,28 @@
 			internalToDate.value = newToDate
 		}
 		// Valider les champs après la mise à jour des valeurs
-		validateFields()
+		await validateFields()
 	}, { deep: true, immediate: true })
 
 	// Fonction publique de validation
-	const validateOnSubmit = (): boolean => {
+	const validateOnSubmit = async (): Promise<boolean> => {
 		// Valider les deux CalendarMode
-		const fromDateValid = fromDateRef.value?.validateOnSubmit() ?? true
-		const toDateValid = toDateRef.value?.validateOnSubmit() ?? true
+		const fromDateValid = await fromDateRef.value?.validateOnSubmit() ?? true
+		const toDateValid = await toDateRef.value?.validateOnSubmit() ?? true
 
 		// Valider avec les règles personnalisées
-		validateFields()
+		await validateFields()
 
 		// Retourner true seulement si tout est valide
 		return fromDateValid && toDateValid && isValid.value
 	}
 
 	// Initialisation
-	onMounted(() => {
+	onMounted(async () => {
 		internalFromDate.value = formatDateValue(props.modelValue?.from)
 		internalToDate.value = formatDateValue(props.modelValue?.to)
 		// Validation initiale
-		validateFields()
+		await validateFields()
 	})
 
 	defineExpose({

package/src/components/PeriodField/__tests__/PeriodField.async.spec.ts

@@ -0,0 +1,32 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import PeriodField from '../PeriodField.vue'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+describe('PeriodField async validation', () => {
+	it('shows error when from date is after to date', async () => {
+		const wrapper = mount(PeriodField, {
+			props: {
+				modelValue: { from: '2024-01-01', to: '2024-01-31' },
+			},
+		})
+
+		// Find both DatePicker components
+		const datePickers = wrapper.findAllComponents({ name: 'DatePicker' })
+		expect(datePickers.length).toBe(2)
+
+		const fromInput = datePickers[0]!.find('input')
+		await fromInput.setValue('15/01/2024')
+		await fromInput.trigger('blur')
+		await flushPromises()
+
+		const toInput = datePickers[1]!.find('input')
+		await toInput.setValue('10/01/2024')
+		await toInput.trigger('blur')
+		await flushPromises()
+		await nextTick()
+
+		expect(datePickers[0]?.text()).toContain('date de début ne peut pas être supérieure à la date de fin')
+		expect(datePickers[1]?.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
+	})
+})

package/src/components/PeriodField/accessibilite/Accessibility.mdx

@@ -1,12 +1,72 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../PeriodField.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../PeriodField.stories.ts'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import '@/stories/styles/shared.css'
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="PeriodField"
+	iconSrc={AccessibilityIcon}
+>
+	<CriteriaSection>
+		<CriteriaCard title="Structure sémantique" icon="🔍">
+			<ul>
+				<li><strong>Rôles</strong> : Deux inputs avec <code>aria-required</code> synchronisé quand <code>required</code>.</li>
+				<li><strong>Association</strong> : Labels natifs pour chaque champ (date de début/fin) avec placeholders distinctifs "Début"/"Fin".</li>
+				<li><strong>Descriptions</strong> : <code>aria-describedby</code> relie aides contextuelles, messages de validation croisée (début ≤ fin).</li>
+				<li><strong>États</strong> : <code>aria-invalid</code>, <code>aria-disabled</code>, <code>aria-readonly</code> sur chaque champ indiquent validation et props.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard title="Saisie et clavier" icon="⌨️">
+			<ul>
+				<li><strong>Tab</strong> : Navigation séquentielle entre les deux champs sans piège de focus.</li>
+				<li><strong>Masque automatique</strong> : Formatage automatique des séparateurs sans bloquer la saisie ni les raccourcis clavier.</li>
+				<li><strong>Raccourcis</strong> : <kbd>Ctrl/C</kbd> fonctionnel sur chaque champ.</li>
+				<li><strong>Calendrier optionnel</strong> : Icône calendrier active un DatePicker accessible avec navigation clavier complète.</li>
+				<li><strong>Lecture seule</strong> : Désactive validation et effacement, icônes décoratives non interactives.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard title="Validation croisée" icon="📣">
+			<ul>
+				<li><strong>Cohérence période</strong> : Validation automatique que début ≤ fin avec messages d'erreur croisés.</li>
+				<li><strong>Champs requis</strong> : Si required, les deux champs doivent être remplis ou aucun (logique flexible).</li>
+				<li><strong>Messages contextualisés</strong> : Erreurs/avertissements/succès sous chaque champ (associés via <code>aria-describedby</code>).</li>
+				<li><strong>Validation personnalisée</strong> : <code>customRules</code> / <code>customWarningRules</code> par champ.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard title="Calendrier intégré" icon="📅">
+			<ul>
+				<li><strong>Icône accessible</strong> : Bouton avec <code>aria-label</code> explicite ("Ouvrir le calendrier"). Les attributs <code>aria-expanded</code> et <code>aria-haspopup</code> ne sont pas appliqués directement sur les champs textes pour respecter leur rôle natif.</li>
+				<li><strong>Navigation calendrier</strong> : Flèches, Home/End, PageUp/Down, Entrée/Espace pour sélectionner dates.</li>
+				<li><strong>Focus management</strong> : Retour automatique au champ après sélection dans calendrier.</li>
+				<li><strong>Format cohérent</strong> : Date sélectionnée respecte le format configuré (DD/MM/YYYY par défaut).</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection title="Période par défaut">
+		<Story of={Stories.Default} />
+	</DemoSection>
+
+	
+	<BestPracticesSection>
+		- Utiliser des placeholders distinctifs ("Début"/"Fin") et des labels clairs pour chaque champ.
+		- Afficher un hint persistant expliquant le format attendu et la logique de validation croisée.
+		- En mode requis, clarifier que les deux champs doivent être remplis ou aucun selon le cas d'usage.
+		- Conserver l'icône calendrier décorative mais non interactive en mode lecture seule ou désactivé.
+		- Avec validation personnalisée, synchroniser les messages entre les deux champs pour cohérence.
+		- Tester la navigation clavier entre les champs et l'interaction calendrier si activé.
+	</BestPracticesSection>
+</AccessibilityGuideLayout>

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

@@ -1,6 +1,6 @@
-import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils'
+import { DOMWrapper, flushPromises, mount, VueWrapper } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
-import type { ComponentPublicInstance } from 'vue'
+import { nextTick, type ComponentPublicInstance } from 'vue'
 
 import PeriodField from '../PeriodField.vue'
 import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
@@ -116,6 +116,32 @@ describe('PeriodField.vue', () => {
 			expect(wrapper.vm.isValid).toBe(false)
 		})
 
+		it('shows error when from date is after to date when updated', async () => {
+			const wrapper = mount(PeriodField, {
+				props: {
+					modelValue: { from: '2024-01-01', to: '2024-01-31' },
+				},
+			})
+
+			// Find both DatePicker components
+			const datePickers = wrapper.findAllComponents({ name: 'DatePicker' })
+			expect(datePickers.length).toBe(2)
+
+			const fromInput = datePickers[0]!.find('input')
+			await fromInput.setValue('15/01/2024')
+			await fromInput.trigger('blur')
+			await flushPromises()
+
+			const toInput = datePickers[1]!.find('input')
+			await toInput.setValue('10/01/2024')
+			await toInput.trigger('blur')
+			await flushPromises()
+			await nextTick()
+
+			expect(datePickers[0]?.text()).toContain('date de début ne peut pas être supérieure à la date de fin')
+			expect(datePickers[1]?.text()).toContain('La date de fin ne peut pas être inférieure à la date de début')
+		})
+
 		it('validates when required and both dates are missing', async () => {
 			const wrapper = mount(PeriodField, {
 				props: {

package/src/components/PhoneField/PhoneField.vue

@@ -300,7 +300,6 @@
 	})
 
 	const validation = useValidation({
-		customRules: validationRules.value,
 		showSuccessMessages: true,
 		disableErrorHandling: shouldDisableErrorHandling.value,
 	})
@@ -332,9 +331,9 @@
 
 	const showHelpTextBelow = computed(() => !!props.helpText?.trim())
 
-	const runValidation = (): void => {
+	const runValidation = async (): Promise<void> => {
 		const cleanedValue = phoneNumber.value.replace(/\s/g, '')
-		validation.validateField(cleanedValue, validationRules.value)
+		await validation.validateField(cleanedValue, validationRules.value)
 	}
 
 	function validateInputOnBlur() {
@@ -346,13 +345,13 @@
 		runValidation()
 	}
 
-	watch(phoneNumber, (newValue) => {
+	watch(phoneNumber, async (newValue) => {
 		if (shouldDisableErrorHandling.value) return
 
 		if (!props.isValidatedOnBlur) {
 			// Validation en temps réel (isValidatedOnBlur=false)
 			const cleanedValue = newValue.replace(/\s/g, '')
-			validation.validateField(cleanedValue, validationRules.value)
+			await validation.validateField(cleanedValue, validationRules.value)
 		}
 		else if (onBlur.value) {
 			// Après un premier blur, effacer les erreurs pendant la frappe —
@@ -377,7 +376,7 @@
 		}
 
 		onBlur.value = true
-		runValidation()
+		await runValidation()
 
 		if (props.withCountryCode && props.countryCodeRequired && !dialCode.value) {
 			validation.errors.value.push(`Le champ ${locales.indicatifLabel} est requis.`)
@@ -541,7 +540,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
+@use '@/assets/overrides/breakpoints' as bp;
 
 .phone-field-fieldset {
 	border: 1px solid #b9b9b9;
@@ -561,7 +560,7 @@
 }
 
 .required-asterisk {
-	color: #d32f2f;
+	color: rgb(var(--v-theme-error));
 	margin-left: 4px;
 }
 
@@ -582,7 +581,7 @@
 	width: 100%;
 }
 
-@media (width >= 600px) {
+@media #{bp.$up-sm} {
 	.phone-field-container {
 		flex-direction: row;
 		align-items: stretch;

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

@@ -310,6 +310,7 @@ describe('PhoneField', () => {
 		})
 
 		const result = await wrapper.vm.validateOnSubmit()
+		console.log('Validation result:', result)
 
 		expect(result).toBe(false)
 		expect(wrapper.vm.hasError).toBe(true)

package/src/components/RangeField/RangeField.vue

@@ -171,3 +171,9 @@
 		</div>
 	</component>
 </template>
+
+<style lang="scss">
+.sy-range-field .sy-textfield-container {
+	flex: 1;
+}
+</style>

package/src/components/RangeField/RangeSlider/RangeSlider.vue

@@ -254,8 +254,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 $virtual-thumb-size: 40px;
 
 .wrapper {

package/src/components/RangeField/RangeSlider/Tooltip/Tooltip.vue

@@ -57,7 +57,7 @@
 	position: absolute;
 	bottom: 0;
 	background-color: rgb(0 0 0 / 70%);
-	color: #fff;
+	color: rgb(var(--v-theme-textOnDark));
 	padding: 4px 8px;
 	border-radius: 4px;
 	will-change: transform;

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

@@ -0,0 +1,65 @@
+import RangeField from '../RangeField.vue'
+
+describe('RangeField - Visual regression tests', () => {
+	it('displays the component by default', () => {
+		cy.mountWithVuetify(RangeField)
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-default')
+	})
+
+	it('displays with custom min/max values', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 500,
+				'modelValue': [100, 400],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-range')
+	})
+
+	it('displays with custom step', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'min': 0,
+				'max': 100,
+				'step': 10,
+				'modelValue': [20, 80],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-step')
+	})
+
+	it('displays with fieldset label', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				'fieldsetLabel': 'Fourchette de prix (€)',
+				'min': 0,
+				'max': 1000,
+				'modelValue': [200, 800],
+				'onUpdate:modelValue': () => {},
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-with-label')
+	})
+
+	it('displays with custom background', () => {
+		cy.mountWithVuetify(RangeField, {
+			props: {
+				bgColor: '#f0f0f0',
+			},
+		})
+
+		cy.get('[data-cy-root]').children().should('exist')
+		cy.matchImageSnapshot('range-field-custom-bg')
+	})
+})

package/src/components/RatingPicker/EmotionPicker/EmotionPicker.vue

@@ -179,8 +179,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-emotion-picker {
 	display: flex;
 	border: 0;
@@ -201,15 +199,15 @@
 	flex-direction: column;
 
 	&.sad {
-		color: tokens.$orange-darken-20 !important;
+		color: rgb(var(--v-theme-orange-darken20)) !important;
 	}
 
 	&.neutral {
-		color: tokens.$yellow-darken-60 !important;
+		color: rgb(var(--v-theme-yellow-darken60)) !important;
 	}
 
 	&.happy {
-		color: tokens.$turquoise-darken-60 !important;
+		color: rgb(var(--v-theme-turquoise-darken60)) !important;
 	}
 
 	&--active.sy-emotion-picker__item--disabled .v-icon {
@@ -228,15 +226,15 @@
 	&:focus,
 	&:hover {
 		&.sad {
-			background: tokens.$orange-lighten-90;
+			background: rgb(var(--v-theme-orange-lighten90));
 		}
 
 		&.neutral {
-			background: tokens.$yellow-lighten-90;
+			background: rgb(var(--v-theme-yellow-lighten90));
 		}
 
 		&.happy {
-			background: tokens.$turquoise-lighten-90;
+			background: rgb(var(--v-theme-turquoise-lighten90));
 		}
 	}
 

package/src/components/RatingPicker/StarsPicker/StarsPicker.vue

@@ -125,8 +125,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-stars-picker {
 	border: 0;
 }
@@ -140,15 +138,15 @@
 	height: 36px !important;
 
 	&--disabled.text-primary {
-		color: tokens.$primary-base !important;
+		color: rgb(var(--v-theme-primary)) !important;
 	}
 
 	&.text-blue-lighten {
-		color: tokens.$blue-lighten-60 !important;
+		color: rgb(var(--v-theme-blue-lighten60)) !important;
 	}
 
 	&--disabled.text-blue-lighten {
-		color: tokens.$blue-lighten-60 !important;
+		color: rgb(var(--v-theme-blue-lighten60)) !important;
 	}
 }
 </style>

package/src/components/SearchListField/SearchListField.vue

@@ -178,8 +178,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-search-list fieldset {
 	border: 0;
 }

package/src/components/SkipLink/SkipLink.vue

@@ -37,8 +37,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '/src/assets/tokens';
-
 .sy-skip-link {
 	z-index: 150;
 	position: fixed;
@@ -46,8 +44,8 @@
 	right: 0;
 	transition: none;
 	width: 100%;
-	background: #fff;
+	background: rgb(var(--v-theme-surface));
 	outline: none; // Disable outline to use border
-	border: 2px solid tokens.$blue-darken-60;
+	border: 2px solid rgb(var(--v-theme-blue-darken60));
 }
 </style>