@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -0,0 +1,351 @@
+<script lang="ts" setup>
+	import { computed, ref, watch, onMounted, nextTick } from 'vue'
+	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
+	import { locales } from './locales'
+
+	const props = withDefaults(
+		defineProps<{
+			modelValue?: boolean | null
+			indeterminate?: boolean
+			label?: string
+			ariaLabel?: string
+			ariaLabelledby?: string
+			title?: string
+			color?: string
+			disabled?: boolean
+			readonly?: boolean
+			required?: boolean
+			hideDetails?: boolean | 'auto'
+			density?: 'default' | 'comfortable' | 'compact'
+			errorMessages?: string[] | null
+			warningMessages?: string[] | null
+			successMessages?: string[] | null
+			customRules?: ValidationRule[]
+			customWarningRules?: ValidationRule[]
+			customSuccessRules?: ValidationRule[]
+			showSuccessMessages?: boolean
+			isValidateOnBlur?: boolean
+			disableErrorHandling?: boolean
+			id?: string
+			name?: string
+			value?: unknown
+			trueValue?: unknown
+			falseValue?: unknown
+			controlsIds?: string[]
+		}>(),
+		{
+			modelValue: false,
+			indeterminate: false,
+			label: undefined,
+			ariaLabel: undefined,
+			ariaLabelledby: undefined,
+			title: undefined,
+			color: 'primary',
+			disabled: false,
+			readonly: false,
+			required: false,
+			hideDetails: false,
+			density: 'default',
+			errorMessages: null,
+			warningMessages: null,
+			successMessages: null,
+			customRules: () => [],
+			customWarningRules: () => [],
+			customSuccessRules: () => [],
+			showSuccessMessages: true,
+			isValidateOnBlur: true,
+			disableErrorHandling: false,
+			id: undefined,
+			name: undefined,
+			value: undefined,
+			trueValue: () => true,
+			falseValue: () => false,
+			controlsIds: () => [],
+		},
+	)
+
+	const emit = defineEmits(['update:modelValue', 'update:indeterminate', 'change'])
+
+	const internalIndeterminate = ref(props.indeterminate)
+
+	const model = computed({
+		get() {
+			return props.modelValue
+		},
+		set(value) {
+			if (internalIndeterminate.value) {
+				internalIndeterminate.value = false
+				emit('update:indeterminate', false)
+			}
+			emit('update:modelValue', value)
+			emit('change', value)
+		},
+	})
+
+	watch(() => props.indeterminate, (val) => {
+		internalIndeterminate.value = val
+	})
+
+	// Initialisation du composable de validation
+	const validation = useValidation({
+		customRules: props.customRules,
+		warningRules: props.customWarningRules,
+		successRules: props.customSuccessRules,
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label,
+		disableErrorHandling: props.disableErrorHandling,
+	})
+
+	// Synchronisation des messages externes
+	watch(() => props.errorMessages, (newVal) => {
+		validation.errors.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.warningMessages, (newVal) => {
+		validation.warnings.value = newVal || []
+	}, { immediate: true })
+
+	watch(() => props.successMessages, (newVal) => {
+		validation.successes.value = newVal || []
+	}, { immediate: true })
+
+	// Construction des règles de validation
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+			type: 'required',
+			options: {
+				message: `Le champ ${props.label || 'ce champ'} est requis.`,
+				fieldIdentifier: props.label,
+			},
+		}]
+		: [],
+	)
+
+	const validateField = (value: boolean | null) => {
+		// Si en lecture seule ou si la valeur est null et non requise, pas de validation
+		if (props.readonly) {
+			validation.clearValidation()
+			return true
+		}
+
+		if (value === null && !props.required) {
+			validation.clearValidation()
+			return true
+		}
+
+		// Pour les règles personnalisées qui vérifient si la case est cochée
+		// Si la valeur est true, on peut déjà savoir que la validation va réussir
+		if (value === true && props.customRules.every(rule =>
+			rule.type === 'custom',
+		)) {
+			validation.clearValidation()
+			return true
+		}
+
+		// Validation standard
+		const result = validation.validateField(
+			value,
+			[...defaultRules.value, ...props.customRules],
+			props.customWarningRules,
+		)
+
+		return !result.hasError
+	}
+
+	const validateOnSubmit = () => {
+		return validateField(model.value)
+	}
+
+	const checkErrorOnBlur = () => {
+		validateField(model.value)
+	}
+
+	watch(model, (newValue) => {
+		if (!props.isValidateOnBlur) {
+			// Valider le champ et s'assurer que l'état d'erreur est correctement mis à jour
+			const isValid = validateField(newValue)
+
+			// Si la validation réussit, s'assurer que les erreurs sont effacées
+			if (isValid && validation.hasError.value) {
+				validation.clearValidation()
+			}
+		}
+	})
+
+	const hasError = computed(() => validation.hasError.value)
+	const hasWarning = computed(() => validation.hasWarning.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value)
+
+	const errors = computed(() => validation.errors.value)
+	const warnings = computed(() => validation.warnings.value)
+	const successes = computed(() => validation.successes.value)
+
+	const ariaChecked = computed(() => {
+		if (internalIndeterminate.value) return 'mixed'
+		return model.value ? 'true' : 'false'
+	})
+
+	// Propriétés ARIA personnalisées pour éviter les conflits
+	const messageId = computed(() => {
+		// Don't create messageId if aria-labelledby is provided
+		if (props.ariaLabelledby) {
+			return undefined
+		}
+
+		// Create messageId for checkboxes with IDs
+		if (props.id) {
+			return `${props.id}-messages`
+		}
+		return undefined
+	})
+
+	// 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'],
+			})
+		})
+	}
+
+	// Appliquer la correction lors du montage du composant
+	onMounted(() => {
+		removeAriaAttributes()
+	})
+
+	const toggleMixed = () => {
+		if (!props.readonly && !props.disabled) {
+			if (internalIndeterminate.value) {
+				// Désactiver l'état indéterminé
+				internalIndeterminate.value = false
+				emit('update:indeterminate', false)
+				// Émettre l'événement update:modelValue directement
+				emit('update:modelValue', true)
+				emit('change', true)
+			}
+			else if (model.value) {
+				// Émettre l'événement update:modelValue directement
+				emit('update:modelValue', false)
+				emit('change', false)
+			}
+			else {
+				if (props.controlsIds.length > 0) {
+					// Activer l'état indéterminé
+					internalIndeterminate.value = true
+					emit('update:indeterminate', true)
+				}
+				else {
+					// Émettre l'événement update:modelValue directement
+					emit('update:modelValue', true)
+					emit('change', true)
+				}
+			}
+		}
+	}
+
+	defineExpose({
+		validation,
+		validateOnSubmit,
+		checkErrorOnBlur,
+		toggleMixed,
+	})
+</script>
+
+<template>
+	<div>
+		<VCheckbox
+			:id="props.id"
+			v-model="model"
+			:name="props.name"
+			:label="props.label"
+			:aria-label="props.ariaLabel"
+			:aria-labelledby="props.ariaLabelledby"
+			:title="props.title"
+			:color="props.color"
+			:disabled="props.disabled"
+			:readonly="props.readonly"
+			:hide-details="props.hideDetails"
+			:density="props.density"
+			:error="hasError"
+			:error-messages="errors"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:indeterminate="internalIndeterminate"
+			:true-value="props.trueValue"
+			:false-value="props.falseValue"
+			:aria-checked="ariaChecked"
+			:aria-describedby="messageId"
+			@click="toggleMixed"
+			@blur="checkErrorOnBlur"
+		>
+			<template
+				v-if="$slots.label"
+				#label
+			>
+				<slot name="label" />
+			</template>
+			<template
+				v-if="$slots.default"
+				#default
+			>
+				<slot />
+			</template>
+			<span
+				v-if="messageId && props.required && !props.ariaLabel && !props.ariaLabelledby"
+				:id="messageId"
+				class="d-sr-only"
+			>
+				{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label }}</span>.
+			</span>
+		</VCheckbox>
+	</div>
+</template>
+
+<style scoped>
+:deep(.v-selection-control--dirty .v-selection-control__input) {
+	color: v-bind('props.color');
+}
+
+:deep(.v-checkbox--indeterminate .v-selection-control__input) {
+	color: v-bind('props.color');
+}
+
+:deep(.v-checkbox--indeterminate .v-selection-control__input .v-selection-control__input-icon) {
+	transform: scale(0.8);
+	height: 16px;
+	width: 16px;
+}
+
+:deep(.v-selection-control__input) {
+	cursor: pointer;
+}
+
+:deep(.v-selection-control--disabled .v-selection-control__input) {
+	cursor: not-allowed;
+}
+
+:deep(.v-selection-control--error .v-selection-control__input) {
+	color: rgb(var(--v-theme-error));
+}
+</style>

package/src/components/Customs/SyCheckbox/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	labelledbyMessage: 'Sélectionner l\'option',
+}

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

@@ -0,0 +1,201 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+import SyCheckbox from '../SyCheckbox.vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+describe('SyCheckbox', () => {
+	// Configuration de Vuetify pour les tests
+	const vuetify = createVuetify({
+		components,
+		directives,
+	})
+
+	const global = {
+		plugins: [vuetify],
+	}
+
+	it('should render correctly', () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Test checkbox',
+			},
+			global,
+		})
+
+		expect(wrapper.find('.v-checkbox').exists()).toBe(true)
+		expect(wrapper.text()).toContain('Test checkbox')
+	})
+
+	it('should handle v-model correctly', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				'modelValue': false,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+			global,
+		})
+
+		await wrapper.find('input[type="checkbox"]').setValue(true)
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+		expect(wrapper.emitted('change')?.[0]).toEqual([true])
+	})
+
+	it('should handle indeterminate state correctly', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				'modelValue': false,
+				'indeterminate': true,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+				'onUpdate:indeterminate': e => wrapper.setProps({ indeterminate: e }),
+			},
+			global,
+		})
+
+		// Vérifier que l'état indéterminé est actif
+		expect(wrapper.props('indeterminate')).toBe(true)
+
+		// Cliquer sur la case à cocher devrait changer l'état indéterminé à checked
+		await wrapper.find('.v-selection-control').trigger('click')
+		expect(wrapper.emitted('update:indeterminate')?.[0]).toEqual([false])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+	})
+
+	it('should toggle between states correctly', async () => {
+		// Monter le composant avec des handlers pour les événements
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				modelValue: false,
+				controlsIds: ['child-1', 'child-2'],
+			},
+			global,
+		})
+
+		// État initial: non coché
+		expect(wrapper.props('modelValue')).toBe(false)
+
+		// Premier toggle: passe à indéterminé (car controlsIds est défini)
+		await wrapper.vm.toggleMixed()
+		await nextTick()
+
+		// Vérifier que l'événement update:indeterminate a été émis
+		const indeterminateEvents = wrapper.emitted('update:indeterminate')
+		expect(indeterminateEvents).toBeTruthy()
+		expect(indeterminateEvents && indeterminateEvents[0]).toEqual([true])
+
+		// Simuler la mise à jour des props par le parent
+		await wrapper.setProps({
+			indeterminate: true,
+			modelValue: false,
+		})
+
+		// Deuxième toggle: passe à coché
+		await wrapper.vm.toggleMixed()
+		await nextTick()
+
+		// Vérifier que les événements ont été émis
+		const updatedIndeterminateEvents = wrapper.emitted('update:indeterminate')
+		const modelValueEvents = wrapper.emitted('update:modelValue')
+		expect(updatedIndeterminateEvents && updatedIndeterminateEvents[1]).toEqual([false])
+		expect(modelValueEvents).toBeTruthy()
+		expect(modelValueEvents && modelValueEvents[0]).toEqual([true])
+
+		// Simuler la mise à jour des props par le parent
+		await wrapper.setProps({
+			indeterminate: false,
+			modelValue: true,
+		})
+
+		// Troisième toggle: passe à non coché
+		await wrapper.vm.toggleMixed()
+		await nextTick()
+
+		// Vérifier que l'événement update:modelValue a été émis avec false
+		const finalModelValueEvents = wrapper.emitted('update:modelValue')
+		expect(finalModelValueEvents && finalModelValueEvents[1]).toEqual([false])
+	})
+
+	it('should handle validation correctly', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				'modelValue': false,
+				'label': 'Required checkbox',
+				'required': true,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+			global,
+		})
+
+		// Simuler un événement blur pour déclencher la validation
+		await wrapper.find('.v-checkbox').trigger('blur')
+
+		// Vérifier que le message d'erreur est affiché
+		expect(wrapper.find('.v-messages').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Required checkbox est requis')
+	})
+
+	it('should handle custom validation rules', async () => {
+		// Créer une règle de validation au format attendu par le composant
+		const customRule = {
+			type: 'custom',
+			validator: (value: boolean) => value === true,
+			options: {
+				message: 'This checkbox must be checked',
+				fieldIdentifier: 'Custom checkbox',
+			},
+		}
+
+		// Monter le composant avec la règle de validation personnalisée
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				'modelValue': false,
+				'customRules': [customRule],
+				'isValidateOnBlur': false, // Valider immédiatement
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+			global,
+		})
+
+		// Vérifier l'état initial
+		expect(wrapper.props('modelValue')).toBe(false)
+
+		// Simuler la validation du formulaire
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+
+		// La validation devrait échouer car la case n'est pas cochée
+		expect(isValid).toBe(false)
+
+		// Cocher la case
+		await wrapper.setProps({ modelValue: true })
+
+		// Simuler à nouveau la validation du formulaire
+		const isValidAfterCheck = await wrapper.vm.validateOnSubmit()
+		await wrapper.vm.$nextTick()
+
+		// La validation devrait réussir maintenant
+		expect(isValidAfterCheck).toBe(true)
+	})
+
+	it('should handle readonly and disabled states', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				'modelValue': false,
+				'readonly': true,
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+			global,
+		})
+
+		// Cliquer sur une case à cocher en lecture seule ne devrait pas changer sa valeur
+		await wrapper.find('.v-checkbox').trigger('click')
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+
+		// Tester l'état désactivé
+		await wrapper.setProps({ readonly: false, disabled: true })
+		await wrapper.find('.v-checkbox').trigger('click')
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+	})
+})

package/src/components/Customs/SyIcon/Accessibilite.mdx

@@ -0,0 +1,103 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/blocks'
+import * as SyIconStoriesAccessibility from './Accessibilite.stories'
+import SyIconAccessibility from './SyIconAccessibility.vue'
+
+<Meta of={SyIconStoriesAccessibility} />
+
+# 🌐 Accessibilité des icônes
+
+<Subtitle>
+	Guide d'accessibilité pour l'utilisation des icônes dans le Design System
+</Subtitle>
+
+<div className="tip-wrapper" style={{ background: '#f8f9fa', padding: '20px', borderRadius: '5px', marginBottom: '20px' }}>
+  <div style={{ fontWeight: 'bold', marginBottom: '10px' }}>💡 Pourquoi l'accessibilité des icônes est importante</div>
+  <p>
+    Les icônes améliorent l'expérience utilisateur, mais doivent être accessibles à tous, y compris aux personnes utilisant des technologies d'assistance.
+  </p>
+</div>
+
+## 🔍 Principes généraux
+
+Le composant `SyIcon` implémente automatiquement les bonnes pratiques d'accessibilité en fonction de la nature de l'icône :
+
+<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+  <div style={{ flex: 1, border: '1px solid #e0e0e0', borderRadius: '5px', padding: '15px' }}>
+    <h3>📌 Icônes décoratives</h3>
+    <p><em>Invisibles pour les lecteurs d'écran</em></p>
+    
+    ```vue
+    <!-- Icône décorative (par défaut) -->
+    <SyIcon 
+    :icon="mdi-home" 
+    />
+    ```
+    
+    <div style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', marginTop: '78px' }}>
+      <strong>Attributs ARIA générés :</strong>
+      <ul>
+        <li><code>role="presentation"</code></li>
+        <li><code>aria-hidden="true"</code></li>
+      </ul>
+    </div>
+  </div>
+  
+  <div style={{ flex: 1, border: '1px solid #e0e0e0', borderRadius: '5px', padding: '15px' }}>
+    <h3>🔊 Icônes informatives</h3>
+    <p><em>Annoncées par les lecteurs d'écran</em></p>
+    
+    ```vue
+    <!-- Icône informative avec label -->
+    <SyIcon 
+      :icon="mdi-information" 
+      :decorative="false" 
+      label="Information importante" 
+    />
+    ```
+    
+    <div style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px' }}>
+      <strong>Attributs ARIA générés :</strong>
+      <ul>
+        <li><code>role="img"</code></li>
+        <li><code>aria-label="Information importante"</code></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+## 🧪 Démonstration interactive
+
+La démonstration ci-dessous vous permet de voir comment les attributs d'accessibilité sont générés en fonction des propriétés du composant :
+
+<Canvas of={SyIconStoriesAccessibility.AccessibilityDemo} />
+
+## ✅ Bonnes pratiques
+
+<div style={{ background: '#edf7ed', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #4caf50', marginBottom: '20px' }}>
+  <h4 style={{ marginTop: '0' }}>📋 Recommandations</h4>
+  <ul style={{ paddingLeft: '20px' }}>
+    <li><strong>Toujours fournir un label</strong> lorsque l'icône est informative (<code>decorative="false"</code>)</li>
+    <li><strong>Utiliser des labels explicites</strong> qui décrivent clairement la fonction de l'icône</li>
+    <li><strong>Éviter les icônes seules</strong> pour les actions importantes - combinez-les avec du texte visible</li>
+    <li><strong>Maintenir un bon contraste</strong> entre l'icône et son arrière-plan</li>
+  </ul>
+</div>
+
+## 🔒 Conformité RGAA
+
+<div style={{ background: '#e8f4fd', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #2196f3', marginBottom: '20px' }}>
+  <p style={{ margin: '0' }}>
+    Le composant <code>SyIcon</code> utilise la directive <code>v-rgaa-svg-fix</code> qui assure la compatibilité 
+    avec les lecteurs d'écran en appliquant les correctifs nécessaires aux SVG.
+  </p>
+  <p style={{ marginTop: '10px', marginBottom: '0' }}>
+    <strong>Important :</strong> Tous les éléments SVG ont systématiquement l'attribut <code>aria-hidden="true"</code> et 
+    n'ont jamais l'attribut <code>role="img"</code>, indépendamment du type d'icône. La sémantique d'accessibilité 
+    est gérée uniquement au niveau de l'élément conteneur (<code>&lt;i&gt;</code>).
+  </p>
+</div>
+
+## 📚 Ressources
+
+- [Guide d'accessibilité WAI-ARIA pour les images et icônes](https://www.w3.org/WAI/ARIA/apg/patterns/)
+- [RGAA - Référentiel Général d'Amélioration de l'Accessibilité](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/)

package/src/components/Customs/SyIcon/Accessibilite.stories.ts

@@ -0,0 +1,27 @@
+import SyIconAccessibility from './SyIconAccessibility.vue'
+import { mdiStar } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Données/SyIcon/Accessibilite',
+	component: () => import('./SyIcon.vue'),
+	parameters: {
+		docs: {
+			description: {
+				component: 'Icon component for accessibility features.',
+			},
+		},
+	},
+}
+
+export default meta
+
+export const AccessibilityDemo = {
+	args: {
+		icon: mdiStar, // Using an icon from the imported icons
+	},
+	render: () => ({
+		components: { SyIconAccessibility },
+		template: '<SyIconAccessibility />',
+	}),
+	tags: ['!dev'],
+}