@cnamts/synapse 0.0.15-alpha → 1.0.0

package/src/components/DiacriticPicker/locales.ts

@@ -0,0 +1,6 @@
+export const locales = {
+	inputAriaLabel: 'Champ de saisie avec diacritiques',
+	title: 'caractères accentués',
+	uppercaseChars: 'Caractères majuscules',
+	lowercaseChars: 'Caractères minuscules',
+}

package/src/components/DiacriticPicker/tests/DiatriticPicker.spec.ts

@@ -0,0 +1,132 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import { ref, nextTick, defineComponent, h } from 'vue'
+import DiacriticPicker from '../DiacriticPicker.vue'
+
+const defaultProps = {
+	modelValue: '',
+	diacritics: ['á', 'à', 'â', 'ä'],
+}
+
+describe('DiacriticPicker.vue', () => {
+	let wrapper: ReturnType<typeof mount>
+
+	beforeEach(async () => {
+		// Mount component with a slot containing an input
+		wrapper = mount(DiacriticPicker, {
+			props: defaultProps,
+			slots: {
+				default: `<input id="diacritic-input-${Math.random().toString(36).substr(2, 9)}" type="text" value="a" />`,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await nextTick()
+	})
+
+	it('renders the diacritic button', () => {
+		const btn = wrapper.find('.sy-diacritic-btn')
+		expect(btn.exists()).toBe(true)
+	})
+
+	it('initially hides the dialog', () => {
+		const dialog = wrapper.find('.sy-diacritic-dialog')
+		expect(dialog.exists()).toBe(false)
+	})
+
+	it('shows dialog when button is clicked', async () => {
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		expect(wrapper.findComponent({ name: 'VDialog' }).vm.$props.modelValue).toBe(true)
+	})
+
+	it('inserts selected character into the input', async () => {
+		const model = ref('a')
+
+		const wrapper = mount(DiacriticPicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: model.value,
+				onUpdateModelValue: (val: string) => {
+					model.value = val
+				},
+				diacritics: ['á', 'à', 'â', 'ä'],
+			},
+			slots: {
+				default: defineComponent({
+					setup() {
+						return () => h('input', {
+							id: 'sy-diacritic-input',
+							value: model.value,
+						})
+					},
+				}),
+			},
+		})
+
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		const buttons = wrapper.findAllComponents({ name: 'VBtn' })
+		const button = buttons.find(btn => btn.text() === 'á')
+		expect(button).toBeTruthy()
+
+		await button!.trigger('click')
+		await nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('aá')
+	})
+
+	it('sets correct ARIA attributes', () => {
+		const btn = wrapper.find('.sy-diacritic-btn')
+		expect(btn.attributes('aria-haspopup')).toBe('dialog')
+		expect(btn.attributes('aria-expanded')).toBe('false')
+		expect(btn.attributes('aria-controls')).toContain('diacritic-dialog')
+	})
+
+	it('closes dialog on click:outside', async () => {
+		await wrapper.find('.sy-diacritic-btn').trigger('click')
+		await nextTick()
+
+		const card = wrapper.findComponent({ name: 'VCard' })
+		await card.trigger('click:outside')
+		await nextTick()
+
+		expect(wrapper.findComponent({ name: 'VDialog' }).vm.$props.modelValue).toBe(false)
+	})
+
+	it('selects next diacritic on keydown', async () => {
+		const model1 = ref('a')
+
+		const wrapper = mount(DiacriticPicker, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: model1.value,
+				onUpdateModelValue: (val: string) => {
+					model1.value = val
+				},
+				diacritics: ['á', 'à', 'â', 'ä'],
+			},
+			slots: {
+				default: defineComponent({
+					setup() {
+						return () => h('input', {
+							id: 'sy-diacritic-input',
+							value: model1.value,
+						})
+					},
+				}),
+			},
+		})
+
+		const input = wrapper.find('#sy-diacritic-input')
+		await input.trigger('keydown', { key: '=' })
+		await nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('á')
+	})
+})

package/src/components/DialogBox/DialogBox.vue

@@ -50,12 +50,10 @@
 			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
 		))
 
-		const filteredElements = elements.filter(element => (
+		return elements.filter(element => (
 			!element.hasAttribute('disabled')
 			&& !element.getAttribute('aria-hidden')
 		))
-
-		return filteredElements
 	}
 
 	async function handleFocus(e: KeyboardEvent): Promise<void> {

package/src/components/NirField/NirField.stories.ts

@@ -608,6 +608,178 @@ ne sont pas nécessaires dans certains contextes.
 	}),
 }
 
+export const CustomPatternRules: Story = {
+	args: {
+		...Default.args,
+		customRulesPrecedence: true,
+		customNumberRules: [
+			{
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!value) return true
+
+						// Supprimer les espaces pour la validation
+						const valueWithoutSpaces = value.replace(/\s/g, '')
+
+						// Vérifier la longueur
+						if (valueWithoutSpaces.length !== 13) {
+							return 'Le numéro de sécurité sociale doit contenir 13 caractères.'
+						}
+
+						// Vérifier le pattern selon les règles spécifiques du NIR français
+						// Rang 1: sexe (1 pour homme, 2 pour femme)
+						if (!/^[12]/.test(valueWithoutSpaces)) {
+							return 'Le premier chiffre doit être 1 (homme) ou 2 (femme).'
+						}
+
+						// Rangs 2-3: deux derniers chiffres de l'année de naissance
+						const anneeNaissance = valueWithoutSpaces.substring(1, 3)
+						if (!/^[0-9]{2}$/.test(anneeNaissance)) {
+							return 'Les chiffres 2 et 3 doivent représenter l\'année de naissance.'
+						}
+
+						// Rangs 4-5: mois de naissance (01-12)
+						const moisNaissance = valueWithoutSpaces.substring(3, 5)
+						if (!/^(0[1-9]|1[0-2])$/.test(moisNaissance)) {
+							return 'Les chiffres 4 et 5 doivent représenter un mois valide (01-12).'
+						}
+
+						// Rangs 6-7: département de naissance
+						const departement = valueWithoutSpaces.substring(5, 7)
+						if (!((/^[0-9]{2}$/.test(departement) && departement !== '00')
+							|| departement === '2A' || departement === '2B' || departement === '99')) {
+							return 'Les chiffres 6 et 7 doivent représenter un département valide.'
+						}
+
+						// Rangs 8-10: code commune ou pays
+						const codeCommune = valueWithoutSpaces.substring(7, 10)
+						if (!/^[0-9]{3}$/.test(codeCommune)) {
+							return 'Les chiffres 8 à 10 doivent représenter un code commune ou pays valide.'
+						}
+
+						// Rangs 11-13: numéro d'ordre
+						const numeroOrdre = valueWithoutSpaces.substring(10, 13)
+						if (!/^[0-9]{3}$/.test(numeroOrdre)) {
+							return 'Les chiffres 11 à 13 doivent représenter un numéro d\'ordre valide.'
+						}
+
+						return true
+					},
+					message: 'Le numéro de sécurité sociale est invalide.',
+					successMessage: 'Le numéro de sécurité sociale est valide.',
+					fieldIdentifier: 'Numéro de sécurité sociale',
+				},
+			},
+		],
+	},
+	parameters: {
+		...Default.parameters,
+		docs: {
+			description: {
+				story: 'Exemple d\'utilisation avec une règle personnalisée qui prend la prévalence sur la validation standard. Cette règle valide le format du NIR selon les règles officielles françaises : 1er chiffre pour le sexe, 2 chiffres pour l\'année de naissance, 2 chiffres pour le mois, 5 chiffres pour le lieu de naissance et 3 chiffres pour le numéro d\'ordre.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+    <template>
+     <NirField
+      v-model="value"
+      :required="false"
+      numberLabel="Numéro de sécurité sociale"
+      keyLabel="Clé"
+      :displayKey="true"
+      :customRulesPrecedence="true"
+      :customNumberRules="[
+        {
+          type: 'custom',
+          options: {
+            validate: (value) => {
+              if (!value) return true;
+              
+              // Supprimer les espaces pour la validation
+              const valueWithoutSpaces = value.replace(/\\s/g, '');
+              
+              // Vérifier la longueur
+              if (valueWithoutSpaces.length !== 13) {
+                return 'Le numéro de sécurité sociale doit contenir 13 caractères.';
+              }
+              
+              // Vérification selon les règles spécifiques du NIR français
+              // Rang 1: sexe (1 pour homme, 2 pour femme)
+              if (!/^[12]/.test(valueWithoutSpaces)) {
+                return 'Le premier chiffre doit être 1 (homme) ou 2 (femme).';
+              }
+
+              // Rangs 2-3: deux derniers chiffres de l'année de naissance
+              if (!/^[12][0-9]{2}/.test(valueWithoutSpaces)) {
+                return 'Les chiffres 2 et 3 doivent représenter l'année de naissance.';
+              }
+
+              // Rangs 4-5: mois de naissance (01-12)
+              const moisNaissance = valueWithoutSpaces.substring(3, 5);
+              if (!/^(0[1-9]|1[0-2])$/.test(moisNaissance)) {
+                return 'Les chiffres 4 et 5 doivent représenter un mois valide (01-12).';
+              }
+
+              // Vérification complète du format
+              const formatComplet = /^[12][0-9]{2}(0[1-9]|1[0-2])[0-9]{8}$/;
+              if (!formatComplet.test(valueWithoutSpaces)) {
+                return 'Le format du numéro de sécurité sociale est invalide.';
+              }
+              
+              return true;
+            },
+            message: 'Le numéro de sécurité sociale est invalide.',
+            successMessage: 'Le numéro de sécurité sociale est valide.',
+            fieldIdentifier: 'Numéro de sécurité sociale',
+          }
+        }
+      ]"
+     />
+    </template>
+    `,
+			},
+		],
+	},
+	render: args => ({
+		components: { NirField },
+		setup() {
+			const value = ref('')
+			return { args, value }
+		},
+		template: `
+      <div>
+        <h3>Validation avec pattern personnalisé et prévalence</h3>
+        <p>Cette démonstration utilise une règle personnalisée qui valide le format du NIR selon le pattern suivant :</p>
+        <pre>X XX XX XXX XXX XXX</pre>
+        <p>Où :</p>
+        <ul>
+          <li><strong>X</strong> (rang 1) : sexe (1 pour les hommes, 2 pour les femmes)</li>
+          <li><strong>XX</strong> (rangs 2-3) : deux derniers chiffres de l'année de naissance</li>
+          <li><strong>XX</strong> (rangs 4-5) : mois de naissance (01-12)</li>
+          <li><strong>XXX</strong> (rangs 6-10) : lieu de naissance
+            <ul>
+              <li>Rangs 6-7 : département (99 si étranger, 2A/2B pour la Corse)</li>
+              <li>Rangs 8-10 : code commune ou pays</li>
+            </ul>
+          </li>
+          <li><strong>XXX</strong> (rangs 11-13) : numéro d’ordre</li>
+        </ul>
+        <p>La propriété <code>customRulesPrecedence</code> est définie à <code>true</code> pour que cette règle soit appliquée avant la validation standard.</p>
+        <NirField
+          v-model="value"
+          v-bind="args"
+		  class="mt-4"
+        />
+        <div class="mt-4">Valeur actuelle : {{ value }}</div>
+      </div>
+    `,
+	}),
+}
+
 export const CustomRules: Story = {
 	args: {
 		...Default.args,

package/src/components/NirField/NirField.vue

@@ -23,6 +23,7 @@
 		customKeyRules?: ValidationRule[]
 		customNumberWarningRules?: ValidationRule[]
 		customKeyWarningRules?: ValidationRule[]
+		customRulesPrecedence?: boolean
 		showSuccessMessages?: boolean
 		width?: string
 		bgColor?: string
@@ -56,6 +57,7 @@
 		customKeyRules: () => [],
 		customNumberWarningRules: () => [],
 		customKeyWarningRules: () => [],
+		customRulesPrecedence: false,
 		showSuccessMessages: true,
 		width: '100%',
 		bgColor: undefined,
@@ -165,7 +167,7 @@
 	// Règles de validation
 	const defaultNumberRules = computed(() => {
 		const rules: ValidationRule[] = []
-
+		if (props.readonly) return
 		if (props.required) {
 			rules.push({
 				type: 'required',
@@ -176,6 +178,15 @@
 			})
 		}
 
+		// Ajout des règles personnalisées avec prévalence si demandé
+		if (props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
+			rules.push(...props.customNumberRules.map(rule => ({
+				...rule,
+				options: rule.options || {},
+			})))
+		}
+
+		// Règle de validation standard du NIR
 		rules.push({
 			type: 'custom',
 			options: {
@@ -194,8 +205,8 @@
 			},
 		})
 
-		// Ajout des règles personnalisées
-		if (props.customNumberRules) {
+		// Ajout des règles personnalisées sans prévalence (comportement par défaut)
+		if (!props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
 			rules.push(...props.customNumberRules.map(rule => ({
 				...rule,
 				options: rule.options || {},
@@ -207,7 +218,7 @@
 
 	const defaultKeyRules = computed(() => {
 		const rules: ValidationRule[] = []
-
+		if (props.readonly) return
 		if (props.required) {
 			rules.push({
 				type: 'required',
@@ -324,7 +335,6 @@
 		return validateFields(true)
 	}
 
-	// Computed pour statut des champs
 	const hasNumberErrors = computed(() => numberValidation.hasError.value)
 	const hasNumberWarning = computed(() => !hasNumberErrors.value && numberValidation.hasWarning.value)
 	const hasNumberSuccess = computed(() => !hasNumberErrors.value && !hasNumberWarning.value && numberValidation.hasSuccess.value)
@@ -333,7 +343,6 @@
 	const hasKeyWarning = computed(() => !hasKeyErrors.value && keyValidation.hasWarning.value)
 	const hasKeySuccess = computed(() => !hasKeyErrors.value && !hasKeyWarning.value && keyValidation.hasSuccess.value)
 
-	// Labels avec astérisque si nécessaire
 	const numberLabelWithAsterisk = computed(() => {
 		return props.required && props.displayAsterisk ? `${props.numberLabel} *` : props.numberLabel
 	})
@@ -342,7 +351,6 @@
 		return props.required && props.displayAsterisk ? `${props.keyLabel} *` : props.keyLabel
 	})
 
-	// Gestion des événements
 	const handleNumberInput = () => {
 		emitValue()
 		validateFields()

package/src/components/NotificationBar/Accessibilite.stories.ts

@@ -161,7 +161,7 @@ export const Legende: StoryObj = {
 			  </div>
 			  <div class="mt-4">
 				  <p>Rapport d’audit manuel : <a href="/audits/NotificationBar.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
-				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/3967" target="_blank" style="color:#0C41BD;">issue #3967</a>)</p>
+				  <p style="color: grey; font-size: 14px">Correctifs en cours (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4029" target="_blank" style="color:#0C41BD;">issue #4029</a>)</p>
 			  </div>
             `,
 		}

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -53,6 +53,20 @@ const meta: Meta<typeof NotificationBar> = {
 				},
 			},
 		},
+		// @ts-expect-error the prop is passed down
+		type: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error'],
+			table: {
+				type: {
+					summary: 'info | success | warning | error',
+				},
+				defaultValue: {
+					summary: 'info',
+				},
+				category: 'props',
+			},
+		},
 	},
 }
 

package/src/components/NotificationBar/NotificationBar.vue

@@ -2,9 +2,9 @@
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { useNotificationService } from '@/services/NotificationService'
 	import { mdiAlertCircleOutline, mdiAlertOctagonOutline, mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js'
-	import { computed, getCurrentInstance, ref, watch } from 'vue'
+	import { computed, getCurrentInstance, onMounted, onUnmounted, ref, useAttrs, watch } from 'vue'
 	import { useDisplay } from 'vuetify'
-	import defaultOptions from './options'
+	import defaultOptions from './config'
 	import { type Notification } from './types'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
@@ -17,6 +17,8 @@
 		bottom: false,
 	})
 
+	const attrs = useAttrs()
+
 	const options = useCustomizableOptions(defaultOptions, props)
 
 	const display = useDisplay()
@@ -109,6 +111,20 @@
 		isNotificationVisible.value = false
 	}
 
+	function closeOnEscape(e: KeyboardEvent) {
+		if (e.key == 'Escape' && notificationQueue.value.length) {
+			showNextNotification()
+		}
+	}
+
+	onMounted(() => {
+		document.addEventListener('keyup', closeOnEscape)
+	})
+
+	onUnmounted(() => {
+		document.removeEventListener('keyup', closeOnEscape)
+	})
+
 	defineExpose({
 		openNotification,
 		showNextNotification,
@@ -131,7 +147,7 @@
 		<VSnackbar
 			v-bind="options.snackbar"
 			v-model="isNotificationVisible"
-			role="status"
+			:role="attrs?.type === 'error' ? 'alert' : 'status'"
 			:eager="true"
 			:color="color"
 			:location="props.bottom ? 'bottom' : 'top'"
@@ -139,6 +155,7 @@
 			:multi-line="hasLongContent"
 			:timeout="currentNotification?.timeout ?? -1"
 			:width="isMobileVersion || isTabletVersion ? 'auto' : '960px'"
+			:min-width="isMobileVersion || isTabletVersion ? 'auto' : undefined"
 			:rounded="props.rounded"
 			:class="[{ 'long-text': hasLongContent }]"
 		>
@@ -220,5 +237,11 @@
 .sy-notification-content {
 	min-width: 0;
 	word-wrap: break-word;
+	overflow-y: auto;
+}
+
+:deep(.v-snackbar__wrapper) {
+	max-height: 100%;
+	overflow-y: auto;
 }
 </style>

package/src/components/NotificationBar/{options.ts → config.ts}

@@ -1,5 +1,4 @@
 type VariantType = 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
-// TODO rename file to config.ts
 
 const defaultOptions = {
 	snackBar: {

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -209,17 +209,6 @@
 		}
 	}
 
-	.v-data-table-progress {
-		.v-progress-linear {
-			height: 4px !important;
-		}
-
-		.v-progress-linear__background,
-		.v-progress-linear__indeterminate {
-			background: tokens.$primary-base;
-		}
-	}
-
 	.v-field {
 		&--active {
 			.v-field__prepend-inner > .v-icon,

package/src/components/PasswordField/PasswordField.stories.ts

@@ -523,11 +523,11 @@ export const WithSuccess: Story = {
 						const isLongEnough = value.length >= 8
 
 						if (hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar && isLongEnough) {
-							return 'Mot de passe fort'
+							return true
 						}
 						return false
 					},
-					fieldIdentifier: 'password',
+					successMessage: 'Mot de passe fort',
 				},
 			},
 		],
@@ -691,7 +691,7 @@ export const WithValidation: Story = {
 					:custom-success-rules="customSuccessRules"
 					:show-success-messages="true"
 					:display-asterisk="true"
-					:is-validate-on-blur="false"
+					:is-validate-on-blur="true"
 				/>
 				<div class="mt-4">
 					<p><strong>Conseils pour tester :</strong></p>
@@ -807,6 +807,7 @@ export const WithCustomRules: Story = {
 							return true
 						},
 						fieldIdentifier: 'password',
+						successMessage: 'Le mot de passe est sécurisé',
 					},
 				},
 				{

package/src/components/PasswordField/PasswordField.vue

@@ -88,29 +88,35 @@
 		}
 
 		// 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',
-			},
-		})
+		// 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 } = useValidation({
-		customRules: defaultRules.value,
-		warningRules: props.customWarningRules || [],
-		successRules: props.customSuccessRules || [],
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label || 'password',
-		disableErrorHandling: props.disableErrorHandling,
-	})
+	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,
+		})
+		: {
+			errors: ref<string[]>([]),
+			warnings: ref<string[]>([]),
+			successes: ref<string[]>([]),
+			validateField: () => {},
+		}
 
-	// Computed pour les états de validation
 	const hasError = computed(() => errors.value.length > 0)
 	const hasWarning = computed(() => warnings.value.length > 0)
 	const hasSuccess = computed(() => successes.value.length > 0 && props.showSuccessMessages)
@@ -149,6 +155,7 @@
 	}, { immediate: true })
 
 	watch(() => password.value, () => {
+		if (props.readonly) return
 		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
 		emit('update:modelValue', password.value)
 	})
@@ -160,6 +167,7 @@
 	}
 
 	const validateOnSubmit = () => {
+		if (props.readonly) return
 		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
 		const isValid = errors.value.length === 0
 		if (isValid) {
@@ -199,7 +207,7 @@
 		:rules="[...defaultRules, ...props.customRules]"
 		class="vd-password"
 		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"
-		@blur="props.isValidateOnBlur ? validateField(password, [...defaultRules, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || []) : () => {}"
+		@blur="props.isValidateOnBlur && !props.readonly ? validateField(password, [...defaultRules, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || []) : () => {}"
 		@keydown="handleKeydown"
 	>
 		<template #append-inner>