@cnamts/synapse 1.0.20 → 1.0.21

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

@@ -0,0 +1,152 @@
+import SyCheckBoxGroup from '../SyCheckBoxGroup.vue'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+describe('SyCheckBoxGroup', () => {
+	it('should render correctly', () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				label: 'Test checkbox group',
+				options: [
+					{ label: 'A', value: 'A', id: 'opt-a' },
+					{ label: 'B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		expect(wrapper.find('.sy-checkbox-group').exists()).toBe(true)
+		expect(wrapper.text()).toContain('Test checkbox group')
+		expect(wrapper.findAll('input[type="checkbox"]').length).toBe(2)
+	})
+
+	it('should handle v-model correctly (single)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [
+					{ label: 'Option A', value: 'A', id: 'opt-a' },
+					{ label: 'Option B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		const checkboxes = wrapper.findAllComponents(SyCheckbox)
+		expect(checkboxes.length).toBe(2)
+
+		await checkboxes[0]?.find('input').setValue(true)
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['A'])
+		expect(wrapper.emitted('change')?.[0]).toEqual(['A'])
+
+		// Uncheck
+		await checkboxes[0]?.find('input').setValue(false)
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([null])
+		expect(wrapper.emitted('change')?.[1]).toEqual([null])
+	})
+
+	it('should handle v-model correctly (multiple)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'multiple': true,
+				'modelValue': [],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [
+					{ label: 'Option A', value: 'A', id: 'opt-a' },
+					{ label: 'Option B', value: 'B', id: 'opt-b' },
+				],
+			},
+		})
+
+		const checkboxes = wrapper.findAllComponents(SyCheckbox)
+		expect(checkboxes.length).toBe(2)
+
+		await checkboxes[0]?.find('input').setValue(true)
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['A']])
+
+		await checkboxes[1]?.find('input').setValue(true)
+		expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([['A', 'B']])
+	})
+
+	it('should handle validation correctly (required)', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'label': 'Required CheckBoxGroup',
+				'required': true,
+				'isValidateOnBlur': false,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'options': [{ label: 'X', value: 'X', id: 'opt-x' }],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+		expect(wrapper.vm.validation.hasError.value).toBe(true)
+		expect(wrapper.vm.validation.errors.value[0]).toContain('est requis')
+
+		await wrapper.find('input').setValue(true)
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.vm.validation.hasError.value).toBe(false)
+		expect(wrapper.props('modelValue')).toBe('X')
+	})
+
+	it('should handle readonly and disabled states', async () => {
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				modelValue: null,
+				readonly: true,
+				options: [{ label: 'X', value: 'X', id: 'opt-x' }],
+			},
+		})
+
+		wrapper.findComponent(SyCheckbox).vm.$emit('update:modelValue', true)
+		await nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+
+		await wrapper.setProps({ readonly: false, disabled: true })
+		wrapper.findComponent(SyCheckbox).vm.$emit('update:modelValue', true)
+		await nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+	})
+
+	it('should handle custom validation rules', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: unknown) => value === 'OK',
+				message: 'Vous devez sélectionner une option.',
+				fieldIdentifier: 'Custom CheckBoxGroup',
+			},
+		}
+
+		const wrapper = mount(SyCheckBoxGroup, {
+			props: {
+				'modelValue': null,
+				'required': true,
+				'customRules': [customRule],
+				'isValidateOnBlur': false,
+				'options': [
+					{ label: 'Non', value: 'NO', id: 'opt-no' },
+					{ label: 'Oui', value: 'OK', id: 'opt-ok' },
+				],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+		})
+
+		const isValidInitial = await wrapper.vm.validateOnSubmit()
+		expect(isValidInitial).toBe(false)
+		expect(wrapper.vm.validation.errors.value).toContain('Vous devez sélectionner une option.')
+
+		await wrapper.setProps({ modelValue: 'OK' })
+
+		const isValidCorrect = await wrapper.vm.validateOnSubmit()
+		expect(isValidCorrect).toBe(true)
+		expect(wrapper.vm.validation.errors.value).toHaveLength(0)
+	})
+})

package/src/components/Customs/SyCheckBoxGroup/types.ts

@@ -0,0 +1,10 @@
+export type Option = {
+	label: string
+	value: string | number
+	disabled?: boolean
+	readonly?: boolean
+	id?: string
+	name?: string
+	ariaLabel?: string
+	title?: string
+}

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-	import { computed, ref, watch, onMounted, nextTick } from 'vue'
+	import { computed, ref, watch, onMounted, onUpdated, nextTick } from 'vue'
+	import type { VCheckbox } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -70,6 +71,8 @@
 
 	const emit = defineEmits(['update:modelValue', 'update:indeterminate', 'change'])
 
+	const checkboxRef = ref<VCheckbox | null>(null)
+
 	const internalIndeterminate = ref(props.indeterminate)
 
 	const generatedLabel = computed(() => {
@@ -239,39 +242,24 @@
 	// Fonction pour supprimer les attributs ARIA non désirés des éléments input
 	const removeAriaAttributes = () => {
 		nextTick(() => {
-			// Sélectionner tous les inputs de type checkbox dans le composant
-			// Pour aria-disabled
-			const checkboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-			checkboxInputsDisabled.forEach((input) => {
-				input.removeAttribute('aria-disabled')
-			})
-
-			// Configurer un MutationObserver pour surveiller les changements futurs
-			const observer = new MutationObserver((mutations) => {
-				mutations.forEach(() => {
-					// Pour aria-disabled
-					const newCheckboxInputsDisabled = document.querySelectorAll('input[type="checkbox"][aria-disabled="false"]')
-					newCheckboxInputsDisabled.forEach((input) => {
-						input.removeAttribute('aria-disabled')
-					})
-				})
-			})
-
-			// Observer le document pour les changements
-			observer.observe(document.body, {
-				subtree: true,
-				childList: true,
-				attributes: true,
-				attributeFilter: ['aria-disabled'],
-			})
+			if (checkboxRef.value) {
+				const checkboxInput = checkboxRef.value.$el.querySelector('input[type="checkbox"][aria-disabled="false"]')
+				if (checkboxInput) {
+					checkboxInput.removeAttribute('aria-disabled')
+				}
+			}
 		})
 	}
 
-	// Appliquer la correction lors du montage du composant
+	// Appliquer la correction lors du montage et de la mise à jour du composant
 	onMounted(() => {
 		removeAriaAttributes()
 	})
 
+	onUpdated(() => {
+		removeAriaAttributes()
+	})
+
 	// Intégration avec le système de validation du formulaire
 	useValidatable(validateOnSubmit)
 
@@ -317,6 +305,7 @@
 	<div>
 		<VCheckbox
 			:id="props.id"
+			ref="checkboxRef"
 			v-model="model"
 			:name="props.name"
 			:label="generatedLabel"

package/src/components/Customs/SyCheckbox/accessibilite/Accessibility.mdx

@@ -3,7 +3,7 @@ import * as SyCheckboxStories from '../SyCheckbox.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
 
-<Meta of={SyCheckboxStories} />
+<Meta of={SyCheckboxStories} name="Accessibility" />
 
 <div className="accessibility-guide">
 <div className="header">

package/src/components/Customs/SyForm/SyForm.a11y.spec.ts

@@ -4,7 +4,7 @@ import { describe, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
-import SyForm from '../SyForm.vue'
+import SyForm from './SyForm.vue'
 
 // Scénario d’accessibilité : formulaire contenant un champ et un bouton de soumission.
 

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/DatePicker/CalendarMode/DatePicker.vue

@@ -188,16 +188,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 +603,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(() => {