@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/Customs/SyPagination/tests/SyPagination.spec.ts

@@ -6,6 +6,7 @@ describe('SyPagination', () => {
 	it('renders correctly with default props', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -20,6 +21,7 @@ describe('SyPagination', () => {
 	it('does not render pagination if pages is 1', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 1,
 			},
@@ -31,6 +33,7 @@ describe('SyPagination', () => {
 	it('emits update:modelValue when page is changed', async () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -58,6 +61,7 @@ describe('SyPagination', () => {
 	it('disables previous button on first page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -70,6 +74,7 @@ describe('SyPagination', () => {
 	it('disables next button on last page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 10,
 				pages: 10,
 			},
@@ -82,6 +87,7 @@ describe('SyPagination', () => {
 	it('shows correct aria-current attribute', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 3,
 				pages: 10,
 			},
@@ -94,6 +100,7 @@ describe('SyPagination', () => {
 	it('respects visible prop for number of visible pages', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 5,
 				pages: 10,
 				visible: 3,
@@ -113,6 +120,7 @@ describe('SyPagination', () => {
 	it('uses custom label when provided', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 				label: 'Test Pagination',
@@ -125,6 +133,7 @@ describe('SyPagination', () => {
 	it('sets aria-controls when provided', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 				ariaControls: 'test-content',
@@ -137,6 +146,7 @@ describe('SyPagination', () => {
 	it('uses d-sr-only class for screen reader text', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -149,6 +159,7 @@ describe('SyPagination', () => {
 	it('shows start ellipsis when current page is far from first page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 8, // Current page far from first page
 				pages: 10,
 				visible: 3, // Small visible count to ensure ellipsis appears
@@ -163,6 +174,7 @@ describe('SyPagination', () => {
 	it('shows both ellipses when current page is in the middle of a large range', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 10, // Middle page
 				pages: 20,
 				visible: 3, // Small visible count to ensure ellipsis appears

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 
-	import { computed, nextTick, onMounted, ref, watch } from 'vue'
+	import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
+	import type { VRadioGroup } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -61,6 +62,7 @@
 	)
 
 	const emit = defineEmits(['update:modelValue', 'change'])
+	const radioGroupRef = ref<VRadioGroup | null>(null)
 	const model = computed({
 		get() {
 			return props.modelValue
@@ -139,24 +141,10 @@
 
 	watch(model, (newValue) => {
 		if (!props.isValidateOnBlur) {
-			// Si le formulaire a été soumis et que la valeur change, on valide à nouveau
-			if (isSubmitted.value) {
-				const isValid = validateField(newValue)
-				if (isValid) {
-					// La validation a réussi, effacer les erreurs
-					validation.clearValidation()
-				}
-			}
-			else {
-				// Comportement normal (hors soumission)
-				const isValid = validateField(newValue)
-				// Si la validation réussit, s'assurer que les erreurs sont effacées
-				if (isValid && validation.hasError.value) {
-					validation.clearValidation()
-				}
-			}
+			validateField(newValue)
 		}
 	})
+
 	const hasError = computed(() => validation.hasError.value)
 	const hasWarning = computed(() => validation.hasWarning.value)
 	const hasSuccess = computed(() => validation.hasSuccess.value)
@@ -184,36 +172,16 @@
 
 	const removeAriaAttributesForRadio = () => {
 		nextTick(() => {
-			// Pour aria-disabled sur les radios
-			const radioInputsDisabled = document.querySelectorAll(
-				'input[type="radio"][aria-disabled="false"]',
-			)
-			radioInputsDisabled.forEach((input) => {
-				input.removeAttribute('aria-disabled')
-			})
-
-			// Observer les futurs changements
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach(() => {
-					const newRadioInputsDisabled = document.querySelectorAll(
-						'input[type="radio"][aria-disabled="false"]',
-					)
-					newRadioInputsDisabled.forEach((input) => {
-						input.removeAttribute('aria-disabled')
-					})
+			if (radioGroupRef.value) {
+				const radioInputs = radioGroupRef.value.$el.querySelectorAll('input[type="radio"][aria-disabled="false"]')
+				radioInputs.forEach((input: Element) => {
+					input.removeAttribute('aria-disabled')
 				})
-			})
-
-			observer.observe(document.body, {
-				subtree: true,
-				childList: true,
-				attributes: true,
-				attributeFilter: ['aria-disabled'],
-			})
+			}
 		})
 	}
 
-	// Appliquer la correction lors du montage du composant
+	// Appliquer la correction lors du montage et de la mise à jour du composant
 	onMounted(() => {
 		removeAriaAttributesForRadio()
 		if (!props.isValidateOnBlur && !props.required) {
@@ -221,6 +189,10 @@
 		}
 	})
 
+	onUpdated(() => {
+		removeAriaAttributesForRadio()
+	})
+
 	// Intégration avec le système de validation du formulaire
 	useValidatable(validateOnSubmit)
 
@@ -235,6 +207,7 @@
 <template>
 	<v-radio-group
 		:id="props.id"
+		ref="radioGroupRef"
 		v-model="model"
 		:class="{
 			'warning-field': hasWarning && !hasError,

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -185,6 +185,10 @@ const meta = {
 			description: 'Texte d\'aide affiché sous le champ',
 			control: 'text',
 		},
+		'maxlength': {
+			description: 'Nombre maximal de caractères autorisés dans le champ',
+			control: { type: 'text' },
+		},
 		'loading': {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',

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

@@ -90,6 +90,8 @@
 			disableClickButton?: boolean
 			autocomplete?: string
 			helpText?: string
+			maxlength?: string | number
+			title?: string | false
 		}>(),
 		{
 			modelValue: undefined,
@@ -159,6 +161,8 @@
 			disableClickButton: true,
 			autocomplete: 'off',
 			helpText: '',
+			maxlength: undefined,
+			title: undefined,
 		},
 	)
 
@@ -173,6 +177,8 @@
 
 	const emit = defineEmits([
 		'update:modelValue',
+		'input',
+		'keydown',
 		'clear',
 		'prepend-icon-click',
 		'append-icon-click',
@@ -197,6 +203,11 @@
 			Object.entries(attrs).filter(([key]) => key !== 'display-asterisk'),
 		) as Record<string, unknown>
 
+		// aria-controls coming from menu activators is invalid on the input itself; drop it
+		if ('aria-controls' in filteredAttrs) {
+			delete filteredAttrs['aria-controls']
+		}
+
 		if (!('validate-on' in filteredAttrs) && 'rules' in filteredAttrs && props.isValidateOnBlur) {
 			filteredAttrs['validate-on'] = 'blur lazy'
 		}
@@ -300,7 +311,11 @@
 		}
 	})
 
-	const hasError = computed(() => validation.hasError.value || props.hasError)
+	const hasError = computed(() =>
+		validation.hasError.value
+		|| (props.errorMessages?.length ?? 0) > 0
+		|| props.hasError,
+	)
 	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
 	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess) && props.showSuccessMessages)
 
@@ -355,7 +370,13 @@
 		return props.helpText && hasMessages.value && !props.areDetailsHidden
 	})
 
-	// Accessible label that includes prefix and suffix content for screen readers
+	// Use title prop if provided, otherwise fall back to accessible label
+	const titleValue = computed(() => {
+		// If title is explicitly false, don't show any title
+		if (props.title === false) return undefined
+		// Otherwise use title if provided, or accessibleLabel as fallback
+		return props.title || accessibleLabel.value
+	})
 	const accessibleLabel = computed(() => {
 		let label = labelWithAsterisk.value
 
@@ -449,7 +470,12 @@
 					const describedbyIds = existingIds.join(' ').trim()
 
 					// Associate input with messages via aria-describedby (preserve existing IDs)
-					inputElement.setAttribute('aria-describedby', describedbyIds)
+					if (describedbyIds) {
+						inputElement.setAttribute('aria-describedby', describedbyIds)
+					}
+					else {
+						inputElement.removeAttribute('aria-describedby')
+					}
 
 					// Remove problematic ARIA attributes from details container (parent)
 					if (detailsContainer) {
@@ -517,7 +543,12 @@
 					const describedbyIds = existingIds.join(' ').trim()
 
 					// Associate input with messages via aria-describedby (preserve existing IDs)
-					inputElement.setAttribute('aria-describedby', describedbyIds)
+					if (describedbyIds) {
+						inputElement.setAttribute('aria-describedby', describedbyIds)
+					}
+					else {
+						inputElement.removeAttribute('aria-describedby')
+					}
 
 					// Remove problematic ARIA attributes from details container (parent)
 					if (detailsContainer) {
@@ -579,7 +610,7 @@
 			v-model="model"
 			:autocomplete="props.autocomplete"
 			:active="props.isActive"
-			:title="accessibleLabel"
+			:title="titleValue"
 			:aria-label="accessibleLabel"
 			:aria-required="props.required ? 'true' : undefined"
 			:base-color="props.baseColor"
@@ -600,6 +631,7 @@
 			:hint="showHelpTextAsMessage ? props.helpText : props.hint"
 			:label="labelWithAsterisk"
 			:loading="props.loading"
+			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
 			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
@@ -630,6 +662,8 @@
 				'basic-field': !hasError && !hasWarning && !hasSuccess
 			}"
 			@blur="checkErrorOnBlur"
+			@input="(e: Event) => emit('input', e)"
+			@keydown="(e: KeyboardEvent) => emit('keydown', e)"
 		>
 			<!-- Prepend -->
 			<template

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

@@ -38,6 +38,10 @@ const meta = {
 		},
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'onUpdate:modelValue': {
 			description: 'Émis lorsque la valeur du champ est mise à jour',
 			table: {
@@ -345,6 +349,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -417,6 +422,7 @@ export const Required: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -489,6 +495,7 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une période',
 		'label': 'Sélectionner une période',
 		'format': 'DD/MM/YYYY',
@@ -575,6 +582,7 @@ export const WithCustomPeriod: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -671,6 +679,7 @@ export const WithAppendIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -738,6 +747,7 @@ export const WithoutIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -805,6 +815,7 @@ export const BirthDate: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date de naissance',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -873,6 +884,7 @@ export const WithError: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -948,6 +960,7 @@ export const WithWarning: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date avec avertissement',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1026,6 +1039,7 @@ export const WithSuccess: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date valide',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1222,6 +1236,7 @@ export const WithDateFormatReturn: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1333,6 +1348,7 @@ export const WithDayjsFormat: Story = {
 		],
 	},
 	args: {
+		headingLevel: 3,
 		placeholder: 'Sélectionner une date',
 		format: 'DD/MM/YYYY',
 		isBirthDate: false,
@@ -1465,6 +1481,7 @@ export const UTC: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1496,12 +1513,20 @@ export const UTC: Story = {
 
 				const dateString = computed({
 					get() {
-						return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT.value)
+						return dayjs.utc(utcIso.value).format(DISPLAY_FORMAT.value)
 					},
 					set(v: string) {
-						const parsed = dayjs.tz(v, DISPLAY_FORMAT.value, selectedTimeZone.value)
+						const parsed = dayjs.utc(v, DISPLAY_FORMAT.value, true)
 						if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT.value) !== v) return
-						utcIso.value = parsed.utc().toISOString()
+						utcIso.value = dayjs.utc()
+							.year(parsed.year())
+							.month(parsed.month())
+							.date(parsed.date())
+							.hour(0)
+							.minute(0)
+							.second(0)
+							.millisecond(0)
+							.toISOString()
 						args['onUpdate:modelValue']?.(v)
 					},
 				})

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

@@ -16,6 +16,7 @@
 	import { mdiCalendarMonthOutline } from '@mdi/js'
 	import type { DateObjectValue } from '../types'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -74,6 +75,8 @@
 		isValidateOnBlur?: boolean
 		hint?: string
 		persistentHint?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
 	}>(), {
 		modelValue: undefined,
 		placeholder: undefined,
@@ -112,6 +115,7 @@
 		isValidateOnBlur: true,
 		hint: undefined,
 		persistentHint: false,
+		headingLevel: 3,
 	})
 
 	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
@@ -188,16 +192,39 @@
 		warningRules: props.customWarningRules,
 		disableErrorHandling: props.disableErrorHandling,
 	})
-	const { errors, warnings, successes, validateField, clearValidation } = !props.readonly
-		? validation
-		: {
-			errors: ref<string[]>([]),
-			warnings: ref<string[]>([]),
-			successes: ref<string[]>([]),
-			validateField: () => {},
-			clearValidation: () => {},
+	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 = (
+		// 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[] = [],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		successRules: any[] = [],
+	): ValidationResult => {
+		if (props.readonly) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: { errors: [], warnings: [], successes: [] },
+			}
 		}
 
+		return baseValidateField(value, rules, warningRules, successRules) as ValidationResult
+	}
+
 	const validateFieldForDateValidation = (
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
 		value: any,
@@ -580,10 +607,11 @@
 		}
 
 		// Valider les dates au montage, mais sans afficher d'erreur pour le required
-		// Forcer la validation si il y a des custom rules et que le champ est rempli
-		const hasCustomRules = props.customRules && props.customRules.length > 0
+		// Forcer la validation si il y a des règles (erreur ou warning) et que le champ est rempli
+		const hasValidationRules = (props.customRules && props.customRules.length > 0)
+			|| (props.customWarningRules && props.customWarningRules.length > 0)
 		const hasValue = selectedDates.value !== null && selectedDates.value !== undefined
-		validateDates(hasCustomRules && hasValue)
+		validateDates(hasValidationRules && hasValue)
 
 		// Après la validation initiale, désactiver le flag
 		nextTick(() => {
@@ -756,8 +784,8 @@
 					textInputValue.value = ''
 				}
 				else if (Array.isArray(newValue) && props.displayRange) {
-					// Pour les plages de dates, on ne modifie pas directement textInputValue
-					// car le DateTextInput gère son propre formatage
+				// Pour les plages de dates, on ne modifie pas directement textInputValue
+				// car le DateTextInput gère son propre formatage
 				}
 				else if (typeof newValue === 'string') {
 					// Pour une date unique
@@ -856,9 +884,7 @@
 </script>
 
 <template>
-	<div
-		class="date-picker-container"
-	>
+	<div class="date-picker-container">
 		<template v-if="props.noCalendar">
 			<DateTextInput
 				ref="dateTextInputRef"
@@ -901,6 +927,7 @@
 		<template v-else-if="props.useCombinedMode">
 			<ComplexDatePicker
 				ref="complexDatePickerRef"
+				:heading-level="headingLevel"
 				:model-value="props.modelValue"
 				:format="props.format"
 				:date-format-return="props.dateFormatReturn"
@@ -998,6 +1025,7 @@
 					ref="datePickerRef"
 					v-model="selectedDates"
 					color="primary"
+					control-variant="modal"
 					:first-day-of-week="1"
 					:multiple="props.displayRange ? 'range' : false"
 					:show-adjacent-months="true"
@@ -1019,9 +1047,12 @@
 						Sélectionnez une date
 					</template>
 					<template #header>
-						<h3 class="mx-auto my-auto ml-5 mb-4">
+						<SyHeading
+							class="mx-auto my-auto ml-5 mb-4"
+							:level="headingLevel"
+						>
 							{{ selectedDates ? displayedDateString : headerDate }}
-						</h3>
+						</SyHeading>
 					</template>
 					<template
 						v-if="props.displayTodayButton"
@@ -1186,7 +1217,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-contrasted !important;
+	background-color: tokens.$colors-background-accent-primary-contrasted !important;
 }
 
 .fade-enter-active,
@@ -1251,6 +1282,10 @@
 	}
 }
 
+:deep(.v-date-picker-months) {
+	flex: 1;
+}
+
 :deep(.v-date-picker-months .v-btn__content) {
 	font-size: 1rem;
 }
@@ -1279,4 +1314,5 @@
 :deep(.v-picker__body .v-btn--active .v-btn__overlay) {
 	opacity: 0;
 }
+
 </style>

package/src/components/DatePicker/CalendarMode/tests/DatePicker.spec.ts

@@ -77,8 +77,12 @@ describe('DatePicker', () => {
 		expect(result.length).toBe(2)
 		expect(result[0]).toBeInstanceOf(Date)
 		expect(result[1]).toBeInstanceOf(Date)
-		expect(result[0]?.toISOString().split('T')[0]).toBe('2023-01-01')
-		expect(result[1]?.toISOString().split('T')[0]).toBe('2023-01-05')
+		expect(result[0]?.getFullYear()).toBe(2023)
+		expect(result[0]?.getMonth()).toBe(0)
+		expect(result[0]?.getDate()).toBe(1)
+		expect(result[1]?.getFullYear()).toBe(2023)
+		expect(result[1]?.getMonth()).toBe(0)
+		expect(result[1]?.getDate()).toBe(5)
 	})
 
 	it('initializeSelectedDates returns an empty array for invalid range inputs', () => {
@@ -106,7 +110,9 @@ describe('DatePicker', () => {
 		if (!(result instanceof Date)) {
 			throw new Error('Expected initializeSelectedDates to return a Date for a single valid date')
 		}
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-01')
+		expect(result.getFullYear()).toBe(2023)
+		expect(result.getMonth()).toBe(0)
+		expect(result.getDate()).toBe(1)
 	})
 
 	it('initializeSelectedDates returns an empty array when start date is after end date', () => {