@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/NirField/useNirValidation.ts

@@ -0,0 +1,277 @@
+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 { 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 || locales.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 || locales.errorInvalidNumber
+					}
+					const result = checkNIR(value, nirType.value)
+					return result ? true : customLocale.value.errorInvalidNumber || locales.errorInvalidNumber
+				},
+				message: customLocale.value.errorInvalidNumber || locales.errorInvalidNumber,
+				successMessage: customLocale.value.successNumberValid || locales.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 || !displayKey.value) {
+			return []
+		}
+		const rules: SyValidationRule[] = []
+		if (required.value) {
+			rules.push({
+				type: 'required',
+				options: {
+					message: customLocale.value.errorRequiredKey || locales.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 || locales.errorInvalidKey,
+					successMessage: customLocale.value.successKeyValid || locales.successKeyValid,
+					fieldIdentifier: keyLabel.value,
+				},
+			})
+		}
+
+		return rules
+	})
+
+	// État pour suivre si une validation est en cours
+	const isValidating = ref(false)
+	const shouldValidateOnBlur = ref(false)
+	let validationPromise: Promise<boolean> | null = null
+	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 = (onBlur = false): Promise<boolean> => {
+		shouldValidateOnBlur.value = shouldValidateOnBlur.value || onBlur
+
+		if (validationPromise) {
+			return validationPromise
+		}
+
+		validationPromise = (async () => {
+			isValidating.value = true
+
+			await numberValidation.validate()
+
+			if (displayKey.value) {
+				await keyValidation.validate()
+			}
+
+			if (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
+			validationPromise = null
+			return !numberValidation.hasError.value && (!displayKey.value || !keyValidation.hasError.value)
+		})()
+
+		return validationPromise
+	}
+
+	const hasFieldErrors = computed(() => numberValidation.hasError.value || (displayKey.value && keyValidation.hasError.value))
+
+	return {
+		numberValidation,
+		keyValidation,
+		validateFields,
+		hasFieldErrors,
+	}
+}

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

@@ -107,16 +107,14 @@
 	</div>
 </template>
 <style scoped lang="scss">
-	@use '@/assets/tokens';
-
 	.notification {
 		display: flex;
 		align-items: center;
 		width: 100%;
 		transform: translateX(-50%);
-		padding: tokens.$gap-2 tokens.$gap-4;
-		margin-block: tokens.$gap-1;
-		gap: tokens.$gap-2 tokens.$gap-4;
+		padding: var(--v-gap-2) var(--v-gap-4);
+		margin-block: var(--v-gap-1);
+		gap: var(--v-gap-2) var(--v-gap-4);
 		box-shadow:
 			0 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgb(0 0 0 / 20%)),
 			0 6px 10px 0 var(--v-shadow-key-penumbra-opacity, rgb(0 0 0 / 14%)),
@@ -180,10 +178,10 @@
 
 	.notification--long-text {
 		/* stylelint-disable-next-line */
-		@media screen and (width <= tokens.$container-mobile-max-width) {
+		@media screen and (width <= 600px) {
 			flex-direction: column;
 			align-items: flex-start;
-			padding: tokens.$gap-4;
+			padding: var(--v-gap-4);
 
 			.notification__actions {
 				justify-content: space-between;

package/src/components/NotificationBar/NotificationBar.vue

@@ -136,8 +136,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-notification-content {
 	min-width: 0;
 	word-wrap: break-word;
@@ -202,7 +200,7 @@
 		opacity: 0;
 		height: 0;
 		padding-block: 0;
-		margin-block: tokens.$gap-0;
+		margin-block: var(--v-gap-0);
 	}
 }
 </style>

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -237,7 +237,6 @@
 
 <style lang="scss" scoped>
 /* stylelint-disable selector-class-pattern */
-@use '@/assets/tokens';
 
 .sy-paginated-table :deep() {
 	table thead tr {
@@ -278,12 +277,12 @@
 			.v-field__append-inner > .v-icon,
 			.v-field__clearable > .v-icon {
 				opacity: 1;
-				color: tokens.$primary-base;
+				color: rgb(var(--v-theme-primary));
 			}
 		}
 
 		&--focused {
-			border-color: tokens.$primary-base;
+			border-color: rgb(var(--v-theme-primary));
 		}
 	}
 }

package/src/components/PaginatedTable/Pagination.vue

@@ -58,8 +58,6 @@
 	</div>
 </template>
 <style scoped lang="scss">
-@use '@/assets/tokens';
-
 /* stylelint-disable-next-line selector-class-pattern */
 :deep(.v-field__outline__notch, .v-field-label) {
 	width: 0;
@@ -75,12 +73,12 @@
 }
 
 :deep(.v-pagination) button:focus-visible {
-	outline: 2px solid tokens.$colors-interactive;
+	outline: 2px solid var(--v-theme-colors-interactive);
 	outline-offset: -2px;
 }
 
 :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: tokens.$colors-icon-base;
+	color: rgb(var(--v-theme-iconBase));
 }
 
 :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
@@ -88,6 +86,6 @@
 }
 
 :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: #000;
+	color: rgb(var(--v-theme-textBase));
 }
 </style>

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 !'
 					}

package/src/components/PasswordField/PasswordField.vue

@@ -20,7 +20,7 @@
 		modelValue?: string | null
 		variantStyle?: 'outlined' | 'underlined'
 		color?: ColorType
-		label?: string
+		label: string
 		required?: boolean
 		errorMessages?: string[] | null
 		warningMessages?: string[] | null
@@ -41,7 +41,6 @@
 		modelValue: null,
 		variantStyle: 'outlined',
 		color: 'primary',
-		label: undefined,
 		required: false,
 		errorMessages: null,
 		warningMessages: null,
@@ -96,25 +95,12 @@
 			})
 		}
 
-		// 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',
-		// 	},
-		// })
-
 		return rules
 	})
 
 	// Initialisation du composable de validation
 	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,
@@ -123,7 +109,7 @@
 			errors: ref<string[]>([]),
 			warnings: ref<string[]>([]),
 			successes: ref<string[]>([]),
-			validateField: () => {},
+			validateField: () => ({ hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }),
 		}
 
 	const hasError = computed(() => errors.value.length > 0)
@@ -199,15 +185,15 @@
 		})
 	}
 
-	function handleKeydown(event: KeyboardEvent): void {
+	async function handleKeydown(event: KeyboardEvent): Promise<void> {
 		if (event.key === 'Enter') {
-			validateOnSubmit()
+			await validateOnSubmit()
 		}
 	}
 
-	const validateOnSubmit = (): boolean => {
+	const validateOnSubmit = async (): Promise<boolean> => {
 		if (props.readonly) return true // Retourner true au lieu de undefined
-		validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
+		await validateField(password.value, [...defaultRules.value, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || [])
 		const isValid = errors.value.length === 0
 		if (isValid) {
 			emit('submit')
@@ -280,7 +266,16 @@
 		:autocomplete="props.autocompleteType"
 		class="vd-password"
 		:validate-on="props.isValidateOnBlur ? 'blur lazy' : 'lazy'"
-		@blur="props.isValidateOnBlur && !props.readonly ? validateField(password, [...defaultRules, ...(props.customRules || [])], props.customWarningRules || [], props.customSuccessRules || []) : () => {}"
+		@blur="async () => {
+			if (props.isValidateOnBlur && !props.readonly) {
+				await validateField(
+					password,
+					[...defaultRules, ...(props.customRules || [])],
+					props.customWarningRules || [],
+					props.customSuccessRules || []
+				)
+			}
+		}"
 		@keydown="handleKeydown"
 	>
 		<template #append-inner>
@@ -293,8 +288,7 @@
 					decorative
 					class="mr-2"
 				/>
-				<!-- Utiliser un vrai élément button plutôt qu'une icône avec role="button" -->
-				<v-button
+				<VBtn
 					type="button"
 					class="password-toggle-button"
 					:aria-label="btnLabel"
@@ -311,7 +305,7 @@
 						:aria-hidden="true"
 						decorative
 					/>
-				</v-button>
+				</VBtn>
 			</div>
 			<div
 				:id="`${passwordFieldId}-status`"
@@ -326,8 +320,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .vd-password {
 	:deep(.v-field) {
 		.v-field__input {
@@ -366,10 +358,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -377,7 +369,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -385,11 +377,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
@@ -401,10 +393,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -412,7 +404,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

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

@@ -6,7 +6,7 @@ import { describe, it, expect } from 'vitest'
 interface PasswordFieldVM {
 	showEyeIcon: boolean
 	errors: string[]
-	validateOnSubmit: () => boolean
+	validateOnSubmit: () => Promise<boolean>
 	hasError: boolean
 	hasWarning: boolean
 	hasSuccess: boolean
@@ -65,12 +65,12 @@ describe('PasswordField.vue', () => {
 		})
 		const vm = wrapper.vm as unknown as PasswordFieldVM
 
-		const result = vm.validateOnSubmit()
+		const result = await vm.validateOnSubmit()
 		expect(result).toBe(false)
 		expect(vm.errors).toContain('Le mot de passe est requis')
 
 		await wrapper.setProps({ modelValue: 'valid-password' })
-		const validResult = vm.validateOnSubmit()
+		const validResult = await vm.validateOnSubmit()
 		expect(validResult).toBe(true)
 		expect(wrapper.emitted().submit).toBeTruthy()
 	})
@@ -78,6 +78,7 @@ describe('PasswordField.vue', () => {
 	it('displays warning and success messages', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				warningMessages: ['Attention: mot de passe court'],
 				successMessages: ['Mot de passe valide'],
@@ -97,6 +98,7 @@ describe('PasswordField.vue', () => {
 	it('handles custom validation rules', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				customRules: [{
 					type: 'custom',
@@ -141,6 +143,7 @@ describe('PasswordField.vue', () => {
 	it('displays validation states based on validation rules', async () => {
 		const wrapper = mount(PasswordField, {
 			props: {
+				label: 'Password',
 				modelValue: 'test',
 				customRules: [{
 					type: 'custom',

package/src/components/PeriodField/PeriodField.stories.ts

@@ -995,9 +995,9 @@ export const FormValidation: Story = {
 				]
 				
 				// Soumission du formulaire
-				const submitForm = () => {
+				const submitForm = async (): Promise<void> => {
 				if (periodFieldRef.value) {
-					const isValid = periodFieldRef.value.validateOnSubmit()
+					const isValid = await periodFieldRef.value.validateOnSubmit()
 					if (isValid) {
 						formStatus.value = 'Formulaire soumis avec succès !'
 						isFormSubmitted.value = true
@@ -1035,9 +1035,9 @@ export const FormValidation: Story = {
 			]
 
 			// Soumission du formulaire
-			const submitForm = () => {
+			const submitForm = async (): Promise<void> => {
 				if (periodFieldRef.value) {
-					const isValid = periodFieldRef.value.validateOnSubmit()
+					const isValid = await periodFieldRef.value.validateOnSubmit()
 					if (isValid) {
 						formStatus.value = 'Formulaire soumis avec succès !'
 						isFormSubmitted.value = true