@cnamts/synapse 1.0.23 → 1.0.24

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>

package/src/components/SyTextArea/SyTextArea.stories.ts

@@ -9,11 +9,11 @@ const meta = {
 	parameters: {
 		docs: {
 			controls: {
-				exclude: ['rules', 'validateOn', 'update:modelValue', 'onUpdate:modelValue'],
+				exclude: ['validateOn', 'update:modelValue', 'onUpdate:modelValue'],
 			},
 		},
 		controls: {
-			exclude: ['rules', 'validateOn', 'onUpdate:modelValue'],
+			exclude: ['validateOn', 'onUpdate:modelValue'],
 		},
 	},
 	argTypes: {
@@ -89,6 +89,142 @@ const meta = {
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		rules: {
+			control: { type: 'object' },
+			description: 'Règles de validation Vuetify (mode useVuetifyValidation=true)',
+			table: {
+				type: { summary: 'Array<(value: string) => boolean | string>' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		useVuetifyValidation: {
+			control: { type: 'boolean' },
+			description: 'Active la validation Vuetify (sinon validation unifiée customRules)',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		isValidateOnBlur: {
+			control: { type: 'boolean' },
+			description: 'Déclenche la validation au blur (sinon à la saisie)',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'validation',
+			},
+		},
+		disableErrorHandling: {
+			control: { type: 'boolean' },
+			description: 'Désactive la gestion des messages d\'erreur/alerte/succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		showSuccessMessages: {
+			control: { type: 'boolean' },
+			description: 'Affiche les messages de succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'true' },
+				category: 'validation',
+			},
+		},
+		customRules: {
+			control: { type: 'object' },
+			description: 'Règles d\'erreur pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		customWarningRules: {
+			control: { type: 'object' },
+			description: 'Règles d\'alerte pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		customSuccessRules: {
+			control: { type: 'object' },
+			description: 'Règles de succès pour le mode validation unifiée',
+			table: {
+				type: { summary: 'ValidationRule[]' },
+				defaultValue: { summary: '[]' },
+				category: 'validation',
+			},
+		},
+		errorMessages: {
+			control: { type: 'object' },
+			description: 'Messages d\'erreur externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		warningMessages: {
+			control: { type: 'object' },
+			description: 'Messages d\'alerte externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		successMessages: {
+			control: { type: 'object' },
+			description: 'Messages de succès externes ajoutés au résultat de validation',
+			table: {
+				type: { summary: 'string[] | null' },
+				defaultValue: { summary: 'null' },
+				category: 'validation',
+			},
+		},
+		hasError: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état erreur',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasWarning: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état alerte',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		hasSuccess: {
+			control: { type: 'boolean' },
+			description: 'Force l\'état succès',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'validation',
+			},
+		},
+		maxErrors: {
+			control: { type: 'number' },
+			description: 'Nombre maximum de messages d\'erreur affichés',
+			table: {
+				type: { summary: 'number' },
+				defaultValue: { summary: '1' },
+				category: 'validation',
 			},
 		},
 	},

package/src/components/SyTextArea/SyTextArea.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 	import { computed, ref, toRef, watch } from 'vue'
 	import type { VTextarea } from 'vuetify/components'
-	import { locales } from './locales'
 	import useTextActions from './useTextActions'
-
-	type Rule = (value: string) => boolean | string
+	import { useDefaultValidationRules, type TextareaRule as Rule } from './useDefaultValidationRules'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+	import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string
@@ -20,12 +20,11 @@
 		color?: string
 		label: string
 		bgColor?: string
-	}>(), {
+	} & FieldValidationProps>(), {
 		modelValue: '',
 		trim: false,
 		replaceTabs: undefined,
 		rules: () => [],
-		required: false,
 		maxLines: undefined,
 		autoWrap: undefined,
 		normalize: false,
@@ -33,6 +32,7 @@
 		variant: 'outlined',
 		color: 'primary',
 		bgColor: 'white',
+		...validationPropsDefaults,
 	})
 
 	const emits = defineEmits<{
@@ -41,6 +41,7 @@
 
 	const textAreaRef = ref<VTextarea | null>(null)
 	const hasInteracted = ref(false)
+	const focused = ref(false)
 
 	const internalValue = ref(props.modelValue)
 	watch(
@@ -87,25 +88,48 @@
 		internalValue.value = value
 	}
 
-	const internalRules = computed<Rule[]>(() => {
-		const internalRules: Rule[] = []
+	const { vuetifyRules: defaultVuetifyRules, customRules: defaultCustomRules } = useDefaultValidationRules({
+		required: toRef(props, 'required'),
+		maxLines: toRef(props, 'maxLines'),
+		hasInteracted,
+	})
 
-		internalRules.push((value: string) => {
-			if (props.required && hasInteracted.value && !value) {
-				return locales.required
-			}
-			return true
-		})
+	const mergedCustomRules = computed<SyValidationRule[]>(() => [
+		...defaultCustomRules.value,
+		...(props.customRules || []),
+	])
 
-		internalRules.push((value: string) => {
-			const lines = value.split('\n').length
-			if (lines > (props.maxLines as number)) {
-				return locales.maxLines(props.maxLines as number)
-			}
-			return true
-		})
+	const mergedVuetifyRules = computed<Rule[]>(() => [
+		...(props.rules || []),
+		...defaultVuetifyRules.value,
+	])
+
+	const { validate, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: internalValue,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: mergedVuetifyRules,
+		customRules: mergedCustomRules,
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused,
+	})
 
-		return internalRules
+	defineExpose({
+		validateOnSubmit: validate,
 	})
 
 </script>
@@ -117,13 +141,19 @@
 		:variant="variant"
 		:color="color"
 		:bg-color="props.bgColor"
+		:error="hasError"
+		:error-messages="errors"
+		:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+		:max-errors="props.maxErrors"
+		:disabled="props.disabled"
+		:readonly="props.readonly"
 		:validate-on="validateOn"
-		:rules="[...props.rules, ...internalRules]"
+		:rules="props.useVuetifyValidation ? mergedVuetifyRules : undefined"
 		:label="label"
 		:aria-label="label"
 		:required="required"
 		:aria-required="required ? 'true' : undefined"
 		@update:model-value="execValueChange"
-		@update:focused="(e: boolean) => !e ? execBlurChange() : null"
+		@update:focused="(e: boolean) => { focused = e; if (!e) execBlurChange() }"
 	/>
 </template>

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

@@ -1,6 +1,5 @@
 import { it, describe, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
 import SyTextArea from '../SyTextArea.vue'
 
 describe('SyTextArea', () => {
@@ -126,11 +125,16 @@ describe('SyTextArea', () => {
 			},
 		})
 		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent\ncontent')
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).toContain('Ce champ ne peut pas dépasser 5 lignes')
 
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent')
-		await nextTick()
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).not.toContain('Ce champ ne peut pas dépasser 5 lignes')
 	})
 
@@ -201,4 +205,123 @@ describe('SyTextArea', () => {
 
 		expect(textarea.element.value).toBe('new  value')
 	})
+
+	it('shows custom error from customRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string) => value.includes('ok'),
+							message: 'Le texte doit contenir ok',
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		const isValid = await (wrapper.vm as { validateOnSubmit: () => Promise<boolean> }).validateOnSubmit()
+		expect(isValid).toBe(false)
+	})
+
+	it('shows vuetify rule error when useVuetifyValidation is true', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				useVuetifyValidation: true,
+				rules: [
+					(value: string) => value.includes('ok') || 'Erreur Vuetify personnalisée',
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Erreur Vuetify personnalisée')
+	})
+
+	it('shows custom warning from customWarningRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customWarningRules: [
+					{
+						type: 'custom',
+						options: {
+							warningMessage: 'Avertissement personnalisé',
+							validate: () => false,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Avertissement personnalisé')
+	})
+
+	it('shows custom success from customSuccessRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customSuccessRules: [
+					{
+						type: 'custom',
+						options: {
+							successMessage: 'Succès personnalisé',
+							validate: () => true,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Succès personnalisé')
+	})
 })