@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -67,6 +67,7 @@ describe('NirField.vue', () => {
 	})
 
 	it('displays error message for invalid NIR length', async () => {
+		await wrapper.find('.number-field input').trigger('focus')
 		await wrapper.find('.number-field input').setValue('123')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('.number-field input').trigger('blur')
@@ -76,6 +77,7 @@ describe('NirField.vue', () => {
 	})
 
 	it('validates the NIR field successfully', async () => {
+		await wrapper.find('.number-field input').trigger('focus')
 		await wrapper.find('.number-field input').setValue('2940375120005')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('.number-field input').trigger('blur')
@@ -87,6 +89,7 @@ describe('NirField.vue', () => {
 	it('displays error message for invalid key length', async () => {
 		await wrapper.find('.number-field input').setValue('2940375120005')
 		await wrapper.vm.$nextTick()
+		await wrapper.find('.key-field input').trigger('focus')
 		await wrapper.find('.key-field input').setValue('1')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('.key-field input').trigger('blur')
@@ -98,6 +101,7 @@ describe('NirField.vue', () => {
 	it('validates the key field successfully', async () => {
 		await wrapper.find('.number-field input').setValue('2940375120005')
 		await wrapper.vm.$nextTick()
+		await wrapper.find('.key-field input').trigger('focus')
 		await wrapper.find('.key-field input').setValue('91')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('.key-field input').trigger('blur')
@@ -149,6 +153,7 @@ describe('NirField.vue', () => {
 
 		const customWrapper = mount(NirField, {
 			props: {
+				label: 'NIR Field with custom key validation',
 				modelValue: undefined,
 				customKeyRules,
 				showSuccessMessages: true,
@@ -164,6 +169,7 @@ describe('NirField.vue', () => {
 		const numberField = customWrapper.find('.number-field input')
 		const keyField = customWrapper.find('.key-field input')
 		await numberField.setValue('2940375120005')
+		await keyField.trigger('focus')
 		await keyField.setValue('91')
 		await keyField.trigger('blur')
 		await customWrapper.vm.$nextTick()

package/src/components/NirField/useNirValidation.ts

@@ -0,0 +1,271 @@
+import { type ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+import { checkNIR, isNIRKeyValid } from './nirValidation'
+import type { locales } from './locales'
+import { useValidation } from '@/composables/unifyValidation/useValidation'
+import type { SyTextField } from '@/main'
+import type { ValidationRule as VuetifyValidationRule } from 'vuetify'
+
+export type NirValidationProps = {
+	customKeyRules?: SyValidationRule[]
+	customKeyWarningRules?: SyValidationRule[]
+	customNumberRules?: SyValidationRule[]
+	customNumberWarningRules?: SyValidationRule[]
+	customRulesPrecedence?: boolean
+	disabled?: boolean
+	isValidateOnBlur?: boolean
+	keyLabel?: string
+	keyRules?: VuetifyValidationRule[]
+	nirType?: 'simple' | 'complexe'
+	numberLabel?: string
+	numberRules?: VuetifyValidationRule[]
+	readonly?: boolean
+	required?: boolean
+	showSuccessMessages?: boolean
+	useVuetifyValidation?: boolean
+}
+
+/**
+ * Handle validation for NIR fields, including both the number and the key
+ */
+export function useNirValidation(
+	numberValue: Ref<string>,
+	keyValue: Ref<string>,
+	unmaskedNumberValue: Ref<string>,
+	unmaskedKeyValue: Ref<string>,
+	readonly: Ref<boolean>,
+	disabled: Ref<boolean>,
+	required: Ref<boolean>,
+	numberField: Ref<InstanceType<typeof SyTextField> | null>,
+	keyField: Ref<InstanceType<typeof SyTextField> | null>,
+	customLocale: Ref<typeof locales>,
+	numberLabel: Ref<string>,
+	keyLabel: Ref<string>,
+	customNumberRules: Ref<SyValidationRule[]>,
+	customKeyRules: Ref<SyValidationRule[]>,
+	customNumberWarningRules: Ref<SyValidationRule[]>,
+	customKeyWarningRules: Ref<SyValidationRule[]>,
+	displayKey: Ref<boolean>,
+	customRulesPrecedence: Ref<boolean>,
+	nirType: Ref<'simple' | 'complexe'>,
+	label: Ref<string>,
+	showSuccessMessages: Ref<boolean>,
+	disableErrorHandling: Ref<boolean>,
+	isValidateOnBlur: Ref<boolean>,
+	useVuetifyValidation: Ref<boolean>,
+	vuetifyNumberRules: Ref<VuetifyValidationRule[]>,
+	vuetifyKeyRules: Ref<VuetifyValidationRule[]>,
+) {
+	// Règles de validation
+	const numberRules = computed(() => {
+		if (useVuetifyValidation.value) {
+			return []
+		}
+		const rules: SyValidationRule[] = []
+		if (required.value) {
+			rules.push({
+				type: 'required',
+				options: {
+					message: customLocale.value.errorRequiredNumber,
+					fieldIdentifier: numberLabel.value,
+				},
+			})
+		}
+
+		// Ajout des règles personnalisées avec prévalence si demandé
+		if (customRulesPrecedence.value && customNumberRules.value && customNumberRules.value.length > 0) {
+			rules.push(...customNumberRules.value.map(rule => ({
+				...rule,
+				options: rule.options || {},
+			})))
+		}
+
+		// Règle de validation standard du NIR
+		rules.push({
+			type: 'custom',
+			options: {
+				validate: (value: string) => {
+					if (!value) return true
+					// Ne valider que si tous les caractères sont saisis
+					if (value.length < 13) {
+						return customLocale.value.errorInvalidNumber || customLocale.value.errorInvalidNumber
+					}
+					const result = checkNIR(value, nirType.value)
+					return result ? true : customLocale.value.errorInvalidNumber || customLocale.value.errorInvalidNumber
+				},
+				message: customLocale.value.errorInvalidNumber,
+				successMessage: customLocale.value.successNumberValid,
+				fieldIdentifier: numberLabel.value,
+			},
+		})
+
+		// Ajout des règles personnalisées sans prévalence (comportement par défaut)
+		if (!customRulesPrecedence.value && customNumberRules.value && customNumberRules.value.length > 0) {
+			rules.push(...customNumberRules.value.map(rule => ({
+				...rule,
+				options: rule.options || {},
+			})))
+		}
+
+		return rules
+	})
+
+	const keyRules = computed(() => {
+		if (useVuetifyValidation.value) {
+			return []
+		}
+		const rules: SyValidationRule[] = []
+		if (required.value) {
+			rules.push({
+				type: 'required',
+				options: {
+					message: customLocale.value.errorRequiredKey,
+					fieldIdentifier: keyLabel.value,
+				},
+			})
+		}
+
+		const validateKey = (value: string) => {
+			if (!value) return true
+			if (!unmaskedNumberValue.value) return true
+			const fullNir = unmaskedNumberValue.value + value
+			return isNIRKeyValid(fullNir)
+		}
+
+		// Ajout des règles personnalisées
+		if (customKeyRules.value) {
+			rules.push(...customKeyRules.value)
+		}
+
+		// Ajout de la règle de validation par défaut si pas de règle personnalisée avec validation de clé
+		if (!customKeyRules.value?.some(rule => rule.options.validate)) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: validateKey,
+					message: customLocale.value.errorInvalidKey,
+					successMessage: customLocale.value.successKeyValid,
+					fieldIdentifier: keyLabel.value,
+				},
+			})
+		}
+
+		return rules
+	})
+
+	// État pour suivre si une validation est en cours
+	const isValidating = ref(false)
+	const shouldValidateOnBlur = ref(false)
+	const numberFieldFocused = ref(false)
+	const keyFieldFocused = ref(false)
+
+	// update focus state on blur and focus
+	const onNumberFocus = () => {
+		numberFieldFocused.value = true
+	}
+	const onNumberBlur = () => {
+		numberFieldFocused.value = false
+	}
+	const onKeyFocus = () => {
+		keyFieldFocused.value = true
+	}
+	const onKeyBlur = () => {
+		keyFieldFocused.value = false
+	}
+
+	let numberInput: HTMLInputElement | null = null
+	let keyInput: HTMLInputElement | null = null
+
+	onMounted(() => {
+		numberInput = numberField.value?.$el?.querySelector('input') ?? null
+		if (numberInput) {
+			numberInput.addEventListener('focus', onNumberFocus)
+			numberInput.addEventListener('blur', onNumberBlur)
+		}
+
+		keyInput = keyField.value?.$el?.querySelector('input') ?? null
+		if (keyInput) {
+			keyInput.addEventListener('focus', onKeyFocus)
+			keyInput.addEventListener('blur', onKeyBlur)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		numberInput?.removeEventListener('focus', onNumberFocus)
+		numberInput?.removeEventListener('blur', onNumberBlur)
+		keyInput?.removeEventListener('focus', onKeyFocus)
+		keyInput?.removeEventListener('blur', onKeyBlur)
+	})
+
+	const numberValidation = useValidation({
+		modelValue: numberValue,
+		readonly,
+		disabled,
+		required,
+		isValidateOnBlur,
+		showSuccessMessages,
+		disableErrorHandling,
+		useVuetifyValidation,
+		label,
+		customRules: numberRules,
+		customWarningRules: computed(() => unmaskedNumberValue.value.length === 13 ? customNumberWarningRules.value : []),
+		rules: vuetifyNumberRules,
+		focused: numberFieldFocused,
+	})
+
+	const keyValidation = useValidation({
+		modelValue: keyValue,
+		readonly,
+		disabled,
+		required,
+		isValidateOnBlur,
+		showSuccessMessages,
+		disableErrorHandling,
+		useVuetifyValidation,
+		label,
+		customRules: keyRules,
+		customWarningRules: computed(() => (displayKey.value && unmaskedKeyValue.value.length === 2) ? customKeyWarningRules.value : []),
+		rules: vuetifyKeyRules,
+		focused: keyFieldFocused,
+	})
+
+	// Validation des champs
+	const validateFields = async (onBlur = false) => {
+		// Éviter les validations redondantes
+		if (isValidating.value) {
+			shouldValidateOnBlur.value = shouldValidateOnBlur.value || onBlur
+			return true
+		}
+
+		isValidating.value = true
+
+		await numberValidation.validate()
+
+		if (displayKey.value) {
+			await keyValidation.validate()
+		}
+
+		if (onBlur || shouldValidateOnBlur.value) {
+			await nextTick()
+			if (numberValidation.hasError.value) {
+				numberField.value?.$el?.querySelector?.('input')?.focus()
+			}
+			else if (keyValidation.hasError.value) {
+				keyField.value?.$el?.querySelector?.('input')?.focus()
+			}
+			shouldValidateOnBlur.value = false
+		}
+
+		isValidating.value = false
+		return !numberValidation.hasError.value && !keyValidation.hasError.value
+	}
+
+	const hasFieldErrors = computed(() => numberValidation.hasError.value || keyValidation.hasError.value)
+
+	return {
+		numberValidation,
+		keyValidation,
+		validateFields,
+		hasFieldErrors,
+	}
+}

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

@@ -115,13 +115,12 @@ describe('NotFoundPage', () => {
 		expect(img.attributes('src')).toBe('/custom.svg')
 	})
 
-	it('passes a uniqueId prop to StatusPage', async () => {
+	it('uses a generated uniqueId', async () => {
 		const wrapper = mount(NotFoundPage)
 		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		const statusPage = wrapper.findComponent(StatusPage)
-		expect(statusPage.props('uniqueId')).toBeDefined()
+		expect(wrapper.find('.vd-page-container').attributes('id')).toMatch(/^[-a-z0-9]+-container$/)
 	})
 
 	it('passes a custom uniqueId prop to StatusPage', async () => {

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -1,19 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="
@@ -149,19 +153,23 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
 `;
 
 exports[`NotFoundPage > renders correctly 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
+<div
+  class="
+    d-flex
+    justify-center
+    px-14
+    py-10
+    vd-page-container
+  "
+  id="v-0-container"
+>
   <div
     class="
       bg-transparent
       v-sheet
       v-theme--light
     "
+    id="v-0-content"
     style="width: 800px;"
   >
     <div class="

package/src/components/NotificationBar/Notification/Notification.vue

@@ -74,7 +74,9 @@
 			decorative
 		/>
 
-		<span class="notification__message">{{ notification.message }}</span>
+		<span class="notification__message">
+			<slot :notification="props.notification">{{ notification.message }}</slot>
+		</span>
 		<div
 			class="d-flex ga-2 notification__actions"
 			:class="notification.message.length > 50 ? 'action-section-long-text' : 'action-section-short-text'"

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

@@ -408,6 +408,160 @@ CustomCloseBtnText.parameters = {
 	],
 }
 
+export const DefaultSlot: Story = (args) => {
+	return {
+		components: { NotificationBar, VBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+
+			const envoyerNotification = () => {
+				const notification: Notification = {
+					id: Date.now().toString(),
+					message: 'Notification avec contenu principal personnalisé.',
+					type: 'info',
+					timeout: -1,
+				}
+				addNotification(notification)
+			}
+
+			return { args, envoyerNotification }
+		},
+		template: `
+          <div class="d-flex flex-wrap align-center justify-center">
+            <NotificationBar v-bind="args">
+              <template #default="{ notification }">
+                Contenu personnalisé pour <strong>{{ notification.id }}</strong>
+              </template>
+            </NotificationBar>
+            <VBtn
+                color="primary"
+                @click="envoyerNotification()"
+                class="ma-6"
+            >
+              Afficher la notification
+            </VBtn>
+          </div>
+        `,
+	}
+}
+
+DefaultSlot.args = {
+	...Default.args,
+}
+
+DefaultSlot.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<NotificationBar>
+				<template #default="{ notification }">
+					Contenu personnalisé pour <strong>{{ notification.id }}</strong>
+				</template>
+			</NotificationBar>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { NotificationBar, useNotificationService } from '@cnamts/synapse'
+
+				const { addNotification } = useNotificationService()
+
+				const envoyerNotification = () => {
+					addNotification({
+						id: Date.now().toString(),
+						message: 'Notification avec contenu principal personnalisé.',
+						type: 'info',
+						timeout: -1,
+					})
+				}
+			</script>
+			`,
+		},
+	],
+}
+
+export const ActionSlot: Story = (args) => {
+	return {
+		components: { NotificationBar, VBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+
+			const envoyerNotification = () => {
+				const notification: Notification = {
+					id: Date.now().toString(),
+					message: 'Notification avec contenu personnalisé via slot.',
+					type: 'info',
+					timeout: -1,
+				}
+				addNotification(notification)
+			}
+
+			return { args, envoyerNotification }
+		},
+		template: `
+          <div class="d-flex flex-wrap align-center justify-center">
+            <NotificationBar v-bind="args">
+              <template #action>
+                <VBtn variant="outlined">
+                  Voir le détail
+                </VBtn>
+              </template>
+            </NotificationBar>
+            <VBtn
+                color="primary"
+                @click="envoyerNotification()"
+                class="ma-6"
+            >
+              Afficher la notification
+            </VBtn>
+          </div>
+        `,
+	}
+}
+
+ActionSlot.args = {
+	...Default.args,
+}
+
+ActionSlot.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<NotificationBar>
+				<template #action>
+					<VBtn variant="outlined">
+						Voir le détail
+					</VBtn>
+				</template>
+			</NotificationBar>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { NotificationBar, useNotificationService } from '@cnamts/synapse'
+
+				const { addNotification } = useNotificationService()
+
+				const envoyerNotification = () => {
+					addNotification({
+						id: Date.now().toString(),
+						message: 'Notification avec contenu personnalisé via slot.',
+						type: 'info',
+						timeout: -1,
+					})
+				}
+			</script>
+			`,
+		},
+	],
+}
+
 export const Customization: Story = Default.bind({})
 Customization.args = {
 	...Default.args,

package/src/components/NotificationBar/tests/NotificationBar.a11y.spec.ts

@@ -41,6 +41,32 @@ describe('NotificationBar – accessibility (axe)', () => {
 		vi.restoreAllMocks()
 	})
 
+	it('has no obvious axe violations with default slot content', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+
+		useNotificationService().notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			attachTo: document.body,
+			slots: {
+				default: '<span>Contenu personnalisé via slot default</span>',
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'NotificationBar – default slot content', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
 	it('has no obvious axe violations with visible info notification', async () => {
 		const notification: Notification = {
 			id: '1',

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

@@ -186,6 +186,66 @@ describe('NotificationBar.vue', () => {
 		expect(wrapper.html()).not.toContain('Test message 1')
 	})
 
+	it('should render default slot content instead of message', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			slots: {
+				default: '<span>Contenu personnalisé</span>',
+			},
+		})
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('Contenu personnalisé')
+		expect(wrapper.html()).not.toContain('Message original')
+	})
+
+	it('should expose notification slotProp in default slot', async () => {
+		const notification: Notification = {
+			id: 'abc',
+			message: 'Message original',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar, {
+			slots: {
+				default: `<template #default="{ notification }"><span>id: {{ notification.id }}</span></template>`,
+			},
+		})
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('id: abc')
+	})
+
+	it('should fall back to message when no default slot is provided', async () => {
+		const notification: Notification = {
+			id: '1',
+			message: 'Message fallback',
+			type: 'info',
+			timeout: -1,
+			icon: null,
+		}
+		notificationServiceMock.notificationQueue.value = [notification]
+
+		const wrapper = mount(NotificationBar)
+		vi.runAllTimers()
+		await nextTick()
+
+		expect(wrapper.html()).toContain('Message fallback')
+	})
+
 	it('should compute action', async () => {
 		const notification: Notification = {
 			id: '1',

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

@@ -962,9 +962,9 @@ export const WithFormValidation: Story = {
 					]
 					
 					// Fonction de soumission du formulaire
-					const handleSubmit = () => {
+					const handleSubmit = async (): Promise<void> => {
 						if (passwordFieldRef.value) {
-							const isValid = passwordFieldRef.value.validateOnSubmit()
+							const isValid = await passwordFieldRef.value.validateOnSubmit()
 							if (isValid) {
 								formStatus.value = 'Formulaire soumis avec succès !'
 							} else {
@@ -1013,9 +1013,9 @@ export const WithFormValidation: Story = {
 			]
 
 			// Fonction de soumission du formulaire
-			const handleSubmit = () => {
+			const handleSubmit = async () => {
 				if (passwordFieldRef.value) {
-					const isValid = passwordFieldRef.value.validateOnSubmit()
+					const isValid = await passwordFieldRef.value.validateOnSubmit()
 					if (isValid) {
 						formStatus.value = 'Formulaire soumis avec succès !'
 					}