@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/PasswordField/PasswordField.vue

@@ -20,7 +20,7 @@
 		modelValue?: string | null
 		variantStyle?: 'outlined' | 'underlined'
 		color?: ColorType
-		label?: string
+		label: string
 		required?: boolean
 		errorMessages?: string[] | null
 		warningMessages?: string[] | null
@@ -41,7 +41,6 @@
 		modelValue: null,
 		variantStyle: 'outlined',
 		color: 'primary',
-		label: undefined,
 		required: false,
 		errorMessages: null,
 		warningMessages: null,
@@ -96,25 +95,12 @@
 			})
 		}
 
-		// Règle pour le message de succès
-		// rules.push({
-		// 	type: 'custom',
-		// 	options: {
-		// 		validate: (value: string) => value ? true : 'Ce champ est requis',
-		// 		successMessage: 'Mot de passe fort',
-		// 		fieldIdentifier: props.label || 'password',
-		// 	},
-		// })
-
 		return rules
 	})
 
 	// Initialisation du composable de validation
 	const { errors, warnings, successes, validateField } = !props.readonly
 		? useValidation({
-			customRules: defaultRules.value,
-			warningRules: props.customWarningRules || [],
-			successRules: props.customSuccessRules || [],
 			showSuccessMessages: props.showSuccessMessages,
 			fieldIdentifier: props.label || 'password',
 			disableErrorHandling: props.disableErrorHandling,
@@ -123,7 +109,7 @@
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
-			validateField: () => {},
+			validateField: () => ({ hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }),
 		}
 
 	const hasError = computed(() => errors.value.length > 0)
@@ -199,15 +185,15 @@
 		})
 	}
 
-	function handleKeydown(event: KeyboardEvent): void {
+	async function handleKeydown(event: KeyboardEvent): Promise<void> {
 		if (event.key === 'Enter') {
-			validateOnSubmit()
+			await validateOnSubmit()
 		}
 	}
 
-	const validateOnSubmit = (): boolean => {
+	const validateOnSubmit = async (): Promise<boolean> => {
 		if (props.readonly) return true // Retourner true au lieu de undefined
-		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
+		await validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
 		const isValid = errors.value.length === 0
 		if (isValid) {
 			emit('submit')
@@ -280,7 +266,16 @@
 		:autocomplete="props.autocompleteType"
 		class="vd-password"
 		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"
-		@blur="props.isValidateOnBlur && !props.readonly ? validateField(password, [...defaultRules, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || []) : () => {}"
+		@blur="async () => {
+			if (props.isValidateOnBlur && !props.readonly) {
+				await validateField(
+					password,
+					[...defaultRules, ...(props.customRules || [])],
+					props.customWarningRules || [],
+					props.customSuccessRules || []
+				)
+			}
+		}"
 		@keydown="handleKeydown"
 	>
 		<template #append-inner>
@@ -293,8 +288,7 @@
 					decorative
 					class="mr-2"
 				/>
-				<!-- Utiliser un vrai élément button plutôt qu'une icône avec role="button" -->
-				<v-button
+				<VBtn
 					type="button"
 					class="password-toggle-button"
 					:aria-label="btnLabel"
@@ -311,7 +305,7 @@
 						:aria-hidden="true"
 						decorative
 					/>
-				</v-button>
+				</VBtn>
 			</div>
 			<div
 				:id="`${passwordFieldId}-status`"

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

@@ -6,7 +6,7 @@ import { describe, it, expect } from 'vitest'
 interface PasswordFieldVM {
 	showEyeIcon: boolean
 	errors: string[]
-	validateOnSubmit: () => boolean
+	validateOnSubmit: () => Promise<boolean>
 	hasError: boolean
 	hasWarning: boolean
 	hasSuccess: boolean
@@ -65,12 +65,12 @@ describe('PasswordField.vue', () => {
 		})
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
-		const result = vm.validateOnSubmit()
+		const result = await vm.validateOnSubmit()
 		expect(result).toBe(false)
 		expect(vm.errors).toContain('Le mot de passe est requis')
 
 		await wrapper.setProps({ modelValue: 'valid-password' })
-		const validResult = vm.validateOnSubmit()
+		const validResult = await vm.validateOnSubmit()
 		expect(validResult).toBe(true)
 		expect(wrapper.emitted().submit).toBeTruthy()
 	})
@@ -78,6 +78,7 @@ describe('PasswordField.vue', () => {
 	it('displays warning and success messages', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				warningMessages: ['Attention: mot de passe court'],
 				successMessages: ['Mot de passe valide'],
@@ -97,6 +98,7 @@ describe('PasswordField.vue', () => {
 	it('handles custom validation rules', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				customRules: [{
 					type: 'custom',
@@ -141,6 +143,7 @@ describe('PasswordField.vue', () => {
 	it('displays validation states based on validation rules', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				customRules: [{
 					type: 'custom',

package/src/components/PeriodField/PeriodField.stories.ts

@@ -995,9 +995,9 @@ export const FormValidation: Story = {
 				]
 				
 				// Soumission du formulaire
-				const submitForm = () => {
+				const submitForm = async (): Promise<void> => {
 				if (periodFieldRef.value) {
-					const isValid = periodFieldRef.value.validateOnSubmit()
+					const isValid = await periodFieldRef.value.validateOnSubmit()
 					if (isValid) {
 						formStatus.value = 'Formulaire soumis avec succès !'
 						isFormSubmitted.value = true
@@ -1035,9 +1035,9 @@ export const FormValidation: Story = {
 			]
 
 			// Soumission du formulaire
-			const submitForm = () => {
+			const submitForm = async (): Promise<void> => {
 				if (periodFieldRef.value) {
-					const isValid = periodFieldRef.value.validateOnSubmit()
+					const isValid = await periodFieldRef.value.validateOnSubmit()
 					if (isValid) {
 						formStatus.value = 'Formulaire soumis avec succès !'
 						isFormSubmitted.value = true

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.`)

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>