@cnamts/synapse 1.0.12 → 1.0.14

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -54,7 +54,7 @@
 		persistentHint?: boolean
 		externalErrorMessages?: string[]
 	}>(), {
-		modelValue: null,
+		modelValue: undefined,
 		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
 		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		dateFormatReturn: undefined,
@@ -200,6 +200,8 @@
 	const inputValue = ref('')
 	const inputRef = ref<InstanceType<typeof SyTextField> | null>(null)
 	const isFormatting = ref(false)
+	// Force re-render of SyTextField when needed (e.g., after reset)
+	const fieldKey = ref(0)
 
 	const updateDisplayValue = (dateDisplayText: string) => (inputValue.value = dateDisplayText)
 	const updateAriaLabel = (ariaLabelText: string) => (ariaLabel.value = ariaLabelText)
@@ -688,6 +690,49 @@
 	 * =====================
 	 */
 	watch(inputValue, async (nv, ov) => {
+		if (props.disabled) {
+			const isEmpty = !nv || nv.trim() === '' || /^[_/\-.\s]+$/.test(nv)
+
+			if (isEmpty && ov && props.modelValue) {
+				isFormatting.value = true
+
+				const mv = props.modelValue
+
+				// --- RANGE ---
+				if (isRange.value && Array.isArray(mv) && mv.length === 2) {
+					const [start, end] = mv
+					const sd = parseDate(start, returnFormat.value)
+					const ed = parseDate(end, returnFormat.value)
+
+					if (sd && ed) {
+						initializeWithDates(sd, ed)
+						selectedDates.value = [sd, ed]
+						inputValue.value = formatRangeForDisplay(sd, ed)
+						runRules(inputValue.value)
+					}
+				}
+
+				// --- SINGLE ---
+				else {
+					const raw = typeof mv === 'string' ? mv : ''
+					const parsed = dayjs(raw, displayFormat.value, true)
+
+					if (parsed.isValid()) {
+						inputValue.value = parsed.format(displayFormat.value)
+						runRules(inputValue.value)
+					}
+					else {
+						inputValue.value = raw
+						runRules(raw)
+					}
+				}
+
+				isFormatting.value = false
+			}
+
+			return
+		}
+
 		// Prevent infinite loops but allow formatting
 		if (isFormatting.value || nv === ov || isHandlingBackspace.value || isBootstrapping.value) return
 		try {
@@ -869,7 +914,7 @@
 		}
 	})
 
-	watch(() => props.modelValue, (nv: DateValue) => {
+	watch(() => props.modelValue, (nv) => {
 		if (isFormatting.value) return
 		if (!nv) {
 			inputValue.value = ''
@@ -940,15 +985,42 @@
 		isValidating.value = true
 		hasInteracted.value = true
 		const ok = runRules(inputValue.value)
-		if (!ok || hasError.value) return false
-		return !hasError.value
+		isValidating.value = false
+		return ok
+	}
+
+	// Reset hook utilisé par SyForm.reset() via useValidatable
+	const reset = () => {
+		// 1) Nettoyer l'état de validation et d'interaction
+		clearValidation()
+		isFocused.value = false
+		hasInteracted.value = false
+
+		if (props.disabled) {
+			fieldKey.value++
+			return
+		}
+
+		// 2) Réinitialiser la valeur sans déclencher de validation interactive
+		isFormatting.value = true
+		inputValue.value = ''
+		selectedDates.value = null
+		resetState()
+		isFormatting.value = false
+
+		// 3) Synchroniser le modèle externe
+		emitModel(null)
+
+		// 4) Forcer la recréation du champ pour réinitialiser l'état interne de Vuetify
+		fieldKey.value++
 	}
 
 	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
+	useValidatable(validateOnSubmit, clearValidation, reset)
 
 	defineExpose({
 		validateOnSubmit,
+		reset,
 		focus() {
 			const el: HTMLInputElement | null | undefined = inputRef.value?.$el?.querySelector?.('input:not([type="hidden"])')
 			el?.focus({ preventScroll: true })
@@ -1002,6 +1074,7 @@
 
 <template>
 	<SyTextField
+		:key="fieldKey"
 		ref="inputRef"
 		v-model="inputValue"
 		:append-icon="props.displayIcon && props.displayAppendIcon ? 'calendar' : undefined"

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -681,7 +681,7 @@ export const AutoClampFeature: Story = {
 					<div class="d-flex flex-column">
 						<h3>Démonstration de l'auto clamp dans DateTextInput</h3>
 						
-						<h4 class="mt-4">Format DD/MM/YYYY (séparateur /)</h4>
+						<h4 class="mt-4">Format JJ/MM/AAAA (séparateur /)</h4>
 						<DatePicker
 							v-model="dateSlash"
 							placeholder="Saisie avec auto clamp - séparateur /"
@@ -690,7 +690,7 @@ export const AutoClampFeature: Story = {
 							autoClamp
 						/>
 						
-						<h4 class="mt-4">Format DD-MM-YYYY (séparateur -)</h4>
+						<h4 class="mt-4">Format JJ-MM-AAAA (séparateur -)</h4>
 						<DatePicker
 							v-model="dateDash"
 							placeholder="Saisie avec auto clamp - séparateur -"
@@ -753,7 +753,7 @@ export const AutoClampFeature: Story = {
                 <h3>Démonstration de l'auto clamp dans DateTextInput</h3>
                 <div class="mb-4 mt-2">Saisissez uniquement des chiffres - les séparateurs seront ajoutés automatiquement selon le format défini</div>
                 
-                <h4 class="mb-2">Format DD/MM/YYYY (séparateur /)</h4>
+                <h4 class="mb-2">Format JJ/MM/AAAA (séparateur /)</h4>
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
@@ -763,7 +763,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateSlash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format DD-MM-YYYY (séparateur -)</h4>
+                <h4 class="mb-2">Format JJ-MM-AAAA (séparateur -)</h4>
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
@@ -773,7 +773,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateDash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format YYYY.MM.DD (séparateur .)</h4>
+                <h4 class="mb-2">Format AAAA.MM.JJ (séparateur .)</h4>
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."
@@ -809,31 +809,31 @@ export const DifferentFormats: Story = {
 					<div class="d-flex flex-column gap-4">
 						<DatePicker
 							v-model="value1"
-							placeholder="Format DD/MM/YYYY"
+							placeholder="Format JJ/MM/AAAA"
 							format="DD/MM/YYYY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value2"
-							placeholder="Format MM/DD/YYYY"
+							placeholder="Format MM/JJ/AAAA"
 							format="MM/DD/YYYY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value3"
-							placeholder="Format YYYY-MM-DD"
+							placeholder="Format AAAA-MM-JJ"
 							format="YYYY-MM-DD"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value4"
-							placeholder="Format DD-MM-YY"
+							placeholder="Format JJ-MM-AA"
 							format="DD-MM-YY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value5"
-							placeholder="Format DD.MM.YYYY"
+							placeholder="Format JJ.MM.AAAA"
 							format="DD.MM.YYYY"
 							no-calendar
 						/>
@@ -873,35 +873,35 @@ export const DifferentFormats: Story = {
               <div class="d-flex flex-column gap-4 pa-4">
                 <DatePicker
                     v-model="value1"
-                    placeholder="Format DD/MM/YYYY"
+                    placeholder="Format JJ/MM/AAAA"
                     format="DD/MM/YYYY"
                     no-calendar
                     class="py-4"
                 />
                 <DatePicker
                     v-model="value2"
-                    placeholder="Format MM/DD/YYYY"
+                    placeholder="Format MM/JJ/AAAA"
                     format="MM/DD/YYYY"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value3"
-                    placeholder="Format YYYY-MM-DD"
+                    placeholder="Format AAAA-MM-JJ"
                     format="YYYY-MM-DD"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value4"
-                    placeholder="Format DD-MM-YY"
+                    placeholder="Format JJ-MM-AA"
                     format="DD-MM-YY"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value5"
-                    placeholder="Format DD.MM.YYYY"
+                    placeholder="Format JJ.MM.AAAA"
                     format="DD.MM.YYYY"
 					no-calendar
 					class="py-4"

package/src/components/DatePicker/composables/tests/useDateFormatValidation.spec.ts

@@ -29,7 +29,7 @@ describe('useDateFormatValidation', () => {
 
 			const result = validateDateFormat('32/12/2023')
 			expect(result.isValid).toBe(false)
-			expect(result.message).toBe('Format de date invalide (DD/MM/YYYY)')
+			expect(result.message).toBe('Format de date invalide (JJ/MM/AAAA)')
 		})
 
 		it('devrait retourner isValid=true pour une date vide si non requis', () => {
@@ -78,7 +78,7 @@ describe('useDateFormatValidation', () => {
 
 			const result = validateDateFormat('25/12/2023a')
 			expect(result.isValid).toBe(false)
-			expect(result.message).toBe('Format de date invalide (DD/MM/YYYY)')
+			expect(result.message).toBe('Format de date invalide (JJ/MM/AAAA)')
 		})
 
 		it('devrait valider une date au format alternatif si dateFormatReturn est spécifié', () => {

package/src/components/DatePicker/composables/tests/useManualDateValidation.spec.ts

@@ -161,7 +161,7 @@ describe('useManualDateValidation', () => {
 		const result = validateManualInput('01/01/2023')
 
 		expect(result).toBe(false)
-		expect(errors.value).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(errors.value).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	it('devrait appeler validateField avec les règles personnalisées', () => {

package/src/components/DatePicker/composables/useDateFormatDisplay.ts

@@ -0,0 +1,25 @@
+export const useDateFormatDisplay = () => {
+	const getDisplayFormat = (format: string): string => {
+		if (!format) return ''
+
+		return format.replace(/[DMY]+/gi, (token) => {
+			const upper = token.toUpperCase()
+			const firstChar = upper.charAt(0)
+
+			switch (firstChar) {
+				case 'D':
+					return 'J'.repeat(token.length)
+				case 'M':
+					return 'M'.repeat(token.length)
+				case 'Y':
+					return 'A'.repeat(token.length)
+				default:
+					return token
+			}
+		})
+	}
+
+	return {
+		getDisplayFormat,
+	}
+}

package/src/components/DatePicker/composables/useDateFormatValidation.ts

@@ -2,6 +2,7 @@ import { computed, type Ref } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { DATE_PICKER_MESSAGES } from '../constants/messages'
+import { useDateFormatDisplay } from './useDateFormatDisplay'
 
 // Initialiser le plugin dayjs nécessaire pour la validation des formats de date
 dayjs.extend(customParseFormat)
@@ -25,6 +26,8 @@ export const useDateFormatValidation = (options: {
 	disableErrorHandling?: boolean
 }) => {
 	const { format, dateFormatReturn, required = false, hasInteracted, disableErrorHandling = false } = options
+	const { getDisplayFormat } = useDateFormatDisplay()
+	const displayFormat = getDisplayFormat(format)
 
 	/**
    * Valide le format d'une chaîne de date
@@ -43,7 +46,7 @@ export const useDateFormatValidation = (options: {
 		if (!/^[\d/.-]*$/.test(dateStr)) {
 			return {
 				isValid: disableErrorHandling,
-				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+				message: disableErrorHandling ? '' : `Format de date invalide (${displayFormat})`,
 			}
 		}
 
@@ -53,7 +56,7 @@ export const useDateFormatValidation = (options: {
 		if (!isValid) {
 			return {
 				isValid: disableErrorHandling,
-				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+				message: disableErrorHandling ? '' : `Format de date invalide (${displayFormat})`,
 			}
 		}
 

package/src/components/DatePicker/composables/useManualDateValidation.ts

@@ -6,6 +6,7 @@ import {
 	validateEmptyOrIncompleteDate,
 	type CustomRule,
 } from '../utils/validationUtils'
+import { useDateFormatDisplay } from './useDateFormatDisplay'
 
 /**
  * Composable pour la validation manuelle des dates saisies
@@ -47,6 +48,9 @@ export const useManualDateValidation = (options: {
 		validateField,
 	} = options
 
+	const { getDisplayFormat } = useDateFormatDisplay()
+	const displayFormat = getDisplayFormat(format)
+
 	/**
 	 * Valide une saisie manuelle de date
 	 *
@@ -89,7 +93,7 @@ export const useManualDateValidation = (options: {
 		if (!date) {
 			// La date n'a pas pu être parsée
 			if (!disableErrorHandling) {
-				errors.value.push(`Format de date invalide (${format})`)
+				errors.value.push(`Format de date invalide (${displayFormat})`)
 			}
 			return false
 		}

package/src/components/DatePicker/tests/DatePicker.validation.spec.ts

@@ -2634,7 +2634,7 @@ describe('DatePicker - Tests de Validation Complets', () => {
 				const endTime = performance.now()
 
 				expect(wrapper.exists()).toBe(true)
-				expect(endTime - startTime).toBeLessThan(500) // Moins de 500ms
+				expect(endTime - startTime).toBeLessThan(1000) // Moins de 1 seconde sans lag
 			})
 		})
 

package/src/components/ErrorPage/ErrorPage.vue

@@ -3,10 +3,45 @@
 	import { locales } from './locales'
 	import PageContainer from '../PageContainer/PageContainer.vue'
 
+	type MessagePart =
+		| { type: 'text', value: string }
+		| { type: 'phone', value: string }
+
 	// Fonction pour formater le message et ajouter des liens tel: aux numéros de téléphone
-	const formatMessage = (message: string): string => {
-		// Regex pour détecter les numéros de téléphone comme 3646
-		return message.replace(/\b(3646|\d{10})\b/g, '<a href="tel:$1">$1</a>')
+	const splitMessage = (message?: string): MessagePart[] => {
+		// Regex pour détecter les numéros de téléphone
+		if (!message)
+			return []
+
+		const regex = /\b(\d{4}|\d{10})\b/g
+		const parts: MessagePart[] = []
+		let lastIndex = 0
+		let match: RegExpExecArray | null
+
+		while ((match = regex.exec(message)) !== null) {
+			if (match.index > lastIndex) {
+				parts.push({
+					type: 'text',
+					value: message.slice(lastIndex, match.index),
+				})
+			}
+
+			parts.push({
+				type: 'phone',
+				value: match[1],
+			})
+
+			lastIndex = regex.lastIndex
+		}
+
+		if (lastIndex < message.length) {
+			parts.push({
+				type: 'text',
+				value: message.slice(lastIndex),
+			})
+		}
+
+		return parts
 	}
 
 	withDefaults(defineProps<{
@@ -57,10 +92,22 @@
 						{{ pageTitle }}
 					</h1>
 
-					<p
-						v-if="message"
-						v-html="formatMessage(message)"
-					/>
+					<p v-if="message">
+						<template
+							v-for="(part, index) in splitMessage(message)"
+							:key="index"
+						>
+							<span v-if="part.type === 'text'">
+								{{ part.value }}
+							</span>
+							<a
+								v-else
+								:href="`tel:${part.value}`"
+							>
+								{{ part.value }}
+							</a>
+						</template>
+					</p>
 
 					<slot name="additional-content" />
 

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

@@ -103,7 +103,9 @@ exports[`ErrorPage > renders correctly 1`] = `
             Something went wrong
           </h1>
           <p>
-            Error message
+            <span>
+              Error message
+            </span>
           </p>
           <!-- v-if -->
         </div>
@@ -229,7 +231,9 @@ exports[`ErrorPage > renders correctly with undefined route 1`] = `
             Error
           </h1>
           <p>
-            Error message
+            <span>
+              Error message
+            </span>
           </p>
           <a
             class="

package/src/components/ExternalLinks/ExternalLinks.vue

@@ -145,9 +145,7 @@
 						class="sy-external-links-list-item py-2"
 						v-bind="options.listItem"
 					>
-						<div
-							class="w-100 h-100 d-flex justify-space-between align-center"
-						>
+						<div class="w-100 h-100 d-flex justify-space-between align-center">
 							<div v-bind="options.listItemTitle">
 								{{ item.text }}
 							</div>
@@ -183,6 +181,7 @@ $list-max-height: 248px;
 	// Allow overgrow on mobile
 	max-width: none;
 	border-radius: 0 !important;
+	box-shadow: none !important;
 
 	:deep(.v-btn__content) {
 		flex-direction: inherit;
@@ -244,7 +243,6 @@ $list-max-height: 248px;
 	width: 100%;
 	font-size: 1rem;
 	font-weight: 400;
-	letter-spacing: 0.0094em;
 }
 
 @media only screen and (height <= 340px) {

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

@@ -349,6 +349,16 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
+		customLocale: {
+			description: 'Objet permettant de surcharger les messages du composant. Clés supportées : `errorRequiredNumber`, `errorInvalidNumber`, `errorRequiredKey`, `errorInvalidKey`, `successNumberValid`, `successKeyValid`.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'Partial<typeof locales>',
+				},
+				defaultValue: { summary: '{}' },
+			},
+		},
 	},
 } satisfies Meta<typeof NirField>
 
@@ -1315,3 +1325,67 @@ mais gérer leur affichage différemment, ou utiliser la validation uniquement a
     `,
 	}),
 }
+
+export const WithCustomLocale: Story = {
+	args: {
+		...Default.args,
+		required: true,
+		showSuccessMessages: true,
+		customLocale: {
+			errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
+			errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
+			errorRequiredKey: 'La clé (2 chiffres) est requise.',
+			errorInvalidKey: 'La clé ne correspond pas au NIR saisi.',
+			successNumberValid: 'Numéro reconnu ✅',
+			successKeyValid: 'Clé correspondante ✅',
+		},
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: `
+### Surcharger les messages avec customLocale
+
+Utilisez la prop \`customLocale\` pour remplacer les messages par défaut sans toucher au composant.
+
+Clés supportées :
+- \`errorRequiredNumber\`
+- \`erreurInvalidNumber\`
+- \`errorRequiredKey\`
+- \`errorInvalidKey\`
+- \`successNumberValid\`
+- \`successKeyValid\`
+`,
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <NirField
+    v-model="value"
+    required
+    show-success-messages
+    :custom-locale="{
+      errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
+      errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
+      errorRequiredKey: 'La clé (2 chiffres) est requise.',
+      errorInvalidKey: 'La clé ne correspond pas au NIR saisi.',
+      successNumberValid: 'Numéro reconnu ✅',
+      successKeyValid: 'Clé correspondante ✅'
+    }"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+import { NirField } from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const value = ref('')
+</script>`,
+			},
+		],
+	},
+}

package/src/components/NirField/NirField.vue

@@ -43,6 +43,7 @@
 		disableErrorHandling?: boolean
 		nirType?: 'simple' | 'complexe'
 		withoutFieldset?: boolean
+		customLocale?: Partial<Record<keyof typeof locales, string>>
 	}>(), {
 		modelValue: undefined,
 		label: 'Identifiant d\'assuré',
@@ -79,6 +80,14 @@
 		disableErrorHandling: false,
 		nirType: 'simple',
 		withoutFieldset: false,
+		customLocale: () => ({
+			errorRequiredNumber: locales.errorRequiredNumber,
+			errorInvalidNumber: locales.errorInvalidNumber,
+			errorRequiredKey: locales.errorRequiredKey,
+			errorInvalidKey: locales.errorInvalidKey,
+			successNumberValid: locales.successNumberValid,
+			successKeyValid: locales.successKeyValid,
+		} as Partial<Record<keyof typeof locales, string>>),
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -199,7 +208,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredNumber,
+					message: props.customLocale.errorRequiredNumber,
 					fieldIdentifier: props.numberLabel,
 				},
 			})
@@ -221,13 +230,13 @@
 					if (!value) return true
 					// Ne valider que si tous les caractères sont saisis
 					if (value.length < 13) {
-						return locales.erreurInvalidNumber
+						return props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 					}
 					const result = checkNIR(value, props.nirType)
-					return result === true ? true : locales.erreurInvalidNumber
+					return result ? true : props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
 				},
-				message: locales.erreurInvalidNumber,
-				successMessage: locales.successNumberValid,
+				message: props.customLocale.errorInvalidNumber,
+				successMessage: props.customLocale.successNumberValid,
 				fieldIdentifier: props.numberLabel,
 			},
 		})
@@ -250,7 +259,7 @@
 			rules.push({
 				type: 'required',
 				options: {
-					message: locales.errorRequiredKey,
+					message: props.customLocale.errorRequiredKey,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -274,8 +283,8 @@
 				type: 'custom',
 				options: {
 					validate: validateKey,
-					message: locales.errorInvalidKey,
-					successMessage: locales.successKeyValid,
+					message: props.customLocale.errorInvalidKey,
+					successMessage: props.customLocale.successKeyValid,
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -506,7 +515,23 @@
 	})
 
 	// Rendre le composant auto-validable dans un SyForm
-	useValidatable(validateOnSubmit)
+	useValidatable(
+		validateOnSubmit,
+		() => {
+			try {
+				numberValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+			try {
+				keyValidation.clearValidation()
+			}
+			catch {
+				void 0
+			}
+		},
+	)
 
 	defineExpose({
 		validateOnSubmit,