@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -78,18 +78,21 @@ export function useDateRangeInput(
 	 * @param cursorPosition Position actuelle du curseur (optionnel)
 	 * @returns Objet contenant les informations sur la plage de dates
 	 */
-	const handleRangeInput = (inputValue: string, newValue: string, cursorPosition?: number): {
+	const handleRangeInput = (inputValue: string | unknown, newValue: string | unknown, cursorPosition?: number): {
 		formattedValue: string
 		dates: [Date | null, Date | null]
 		isComplete: boolean
 		justCompletedFirstDate?: boolean
 		cursorPosition?: number
 	} => {
+		// S'assurer que inputValue et newValue sont des chaînes de caractères
+		const safeInputValue = typeof inputValue === 'string' ? inputValue : ''
+		const safeNewValue = typeof newValue === 'string' ? newValue : ''
 		// Si le mode plage n'est pas activé, traiter comme une date unique
 		if (!isRangeMode) {
-			const date = parseDate(newValue, format)
+			const date = parseDate(safeNewValue, format)
 			return {
-				formattedValue: date ? formatDate(date, format) : newValue,
+				formattedValue: date ? formatDate(date, format) : safeNewValue,
 				dates: [date, null],
 				isComplete: !!date,
 				cursorPosition: cursorPosition,
@@ -98,32 +101,32 @@ export function useDateRangeInput(
 
 		// Cas spécial : si la valeur précédente se terminait par un séparateur et que la nouvelle valeur
 		// contient du texte après le séparateur, c'est qu'on commence à saisir la seconde date
-		if (inputValue && inputValue.endsWith(rangeSeparator)
-			&& newValue.startsWith(inputValue)
-			&& newValue.length > inputValue.length) {
+		if (safeInputValue && safeInputValue.endsWith(rangeSeparator)
+			&& safeNewValue.startsWith(safeInputValue)
+			&& safeNewValue.length > safeInputValue.length) {
 			// On est en train de saisir la seconde date pour la première fois
 			isEditingSecondDate.value = true
 
 			// Extraire la première date et le nouveau caractère saisi
-			const firstPart = inputValue.substring(0, inputValue.length - rangeSeparator.length)
+			const firstPart = safeInputValue.substring(0, safeInputValue.length - rangeSeparator.length)
 			const firstDateObj = parseDate(firstPart, format)
 			firstDate.value = firstDateObj
 
 			// Extraire le caractère nouvellement saisi (après le séparateur)
-			const secondPart = newValue.substring(inputValue.length)
+			const secondPart = safeNewValue.substring(safeInputValue.length)
 			secondDate.value = parseDate(secondPart, format)
 
 			return {
 				formattedValue: `${firstPart}${rangeSeparator}${secondPart}`,
 				dates: [firstDateObj, secondDate.value],
 				isComplete: false,
-				cursorPosition: newValue.length,
+				cursorPosition: safeNewValue.length,
 			}
 		}
 
 		// Si la valeur contient déjà un séparateur de plage
-		if (hasRangeSeparator(newValue)) {
-			const [startStr, endStr] = extractRangeParts(newValue)
+		if (hasRangeSeparator(safeNewValue)) {
+			const [startStr, endStr] = extractRangeParts(safeNewValue)
 			const startDate = parseDate(startStr, format)
 			const endDate = parseDate(endStr, format)
 
@@ -143,7 +146,7 @@ export function useDateRangeInput(
 
 			// Si la position du curseur est dans la première partie de la date
 			if (cursorPosition !== undefined) {
-				const separatorPos = inputValue.indexOf(rangeSeparator)
+				const separatorPos = safeInputValue.indexOf(rangeSeparator)
 				if (separatorPos !== -1 && cursorPosition <= separatorPos) {
 					// Ajuster la position si la première partie a été formatée
 					if (startStr !== formattedStart) {
@@ -172,24 +175,24 @@ export function useDateRangeInput(
 		// (ce cas ne devrait pas arriver souvent car la valeur devrait contenir un séparateur)
 		if (isEditingSecondDate.value && firstDate.value) {
 			// Formater la valeur pour afficher la première date + séparateur + nouvelle valeur
-			const formattedValue = `${formatDate(firstDate.value, format)}${rangeSeparator}${newValue}`
-			const secondDateParsed = parseDate(newValue, format)
+			const formattedValue = `${formatDate(firstDate.value, format)}${rangeSeparator}${typeof newValue === 'string' ? newValue : ''}`
+			const secondDateParsed = parseDate(typeof newValue === 'string' ? newValue : '', format)
 			secondDate.value = secondDateParsed
 
 			return {
 				formattedValue,
 				dates: [firstDate.value, secondDateParsed],
 				isComplete: !!firstDate.value && !!secondDateParsed,
-				cursorPosition: cursorPosition !== undefined ? formatDate(firstDate.value, format).length + rangeSeparator.length + Math.min(cursorPosition, newValue.length) : undefined,
+				cursorPosition: cursorPosition !== undefined ? formatDate(firstDate.value, format).length + rangeSeparator.length + Math.min(cursorPosition, typeof newValue === 'string' ? newValue.length : 0) : undefined,
 			}
 		}
 
 		// Si nous éditons la première date
-		const date = parseDate(newValue, format)
+		const date = parseDate(typeof newValue === 'string' ? newValue : '', format)
 		firstDate.value = date
 
 		// Si la première date est complète, passer à la saisie de la deuxième date
-		if (date && newValue.length >= format.length) {
+		if (date && typeof newValue === 'string' && newValue.length >= format.length) {
 			isEditingSecondDate.value = true
 			const formattedDate = formatDate(date, format)
 
@@ -203,7 +206,7 @@ export function useDateRangeInput(
 		}
 
 		return {
-			formattedValue: newValue,
+			formattedValue: safeNewValue,
 			dates: [date, null],
 			isComplete: false,
 			cursorPosition: cursorPosition,

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

@@ -4,6 +4,7 @@ import { type DateObjectValue } from '../types'
 
 export interface DisplayedDateStringProps {
 	selectedDates: { value: DateObjectValue }
+	rangeBoundaryDates?: { value: [Date | null, Date | null] | null }
 	todayInString: ComputedRef<string>
 }
 
@@ -21,7 +22,18 @@ export function useDisplayedDateString(props: DisplayedDateStringProps): Display
 		// Si nous n'avons pas de date sélectionnée, afficher la date du jour
 		if (!props.selectedDates.value) return props.todayInString.value
 
-		// Si nous avons une plage de dates
+		// Priorité aux rangeBoundaryDates pour les plages
+		if (props.rangeBoundaryDates?.value && props.rangeBoundaryDates.value[0] && props.rangeBoundaryDates.value[1]) {
+			const startDate = dayjs(props.rangeBoundaryDates.value[0])
+			const endDate = dayjs(props.rangeBoundaryDates.value[1])
+
+			if (startDate.isValid() && endDate.isValid()) {
+				// Format court pour la date de début, format complet pour la date de fin
+				return `${startDate.format('D MMMM')} - ${endDate.format('D MMMM YYYY')}`
+			}
+		}
+
+		// Si nous avons une plage de dates dans selectedDates
 		if (Array.isArray(props.selectedDates.value)) {
 			// Si nous avons les deux dates de la plage
 			if (props.selectedDates.value.length >= 2) {

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

@@ -1,6 +1,7 @@
-import { type Ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
 import { type DateObjectValue } from '../types'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 /**
  * Composable pour gérer le comportement lors de la perte de focus d'un champ de date
@@ -20,6 +21,7 @@ export const useInputBlurHandler = (options: {
 	isManualInputActive: Ref<boolean>
 	isUpdatingFromInternal: Ref<boolean>
 	selectedDates: Ref<DateObjectValue>
+	errors?: Ref<string[]>
 
 	// Fonctions
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
@@ -40,6 +42,7 @@ export const useInputBlurHandler = (options: {
 		isManualInputActive,
 		isUpdatingFromInternal,
 		selectedDates,
+		errors = ref([]),
 		validateDateFormat,
 		parseDate,
 		formatDate,
@@ -63,25 +66,82 @@ export const useInputBlurHandler = (options: {
 
 		// Gérer la mise à jour du modèle en fonction de la validité de la date
 		if (displayFormattedDate.value) {
-			const validation = validateDateFormat(displayFormattedDate.value)
-			if (validation.isValid) {
-				const date = parseDate(displayFormattedDate.value, format)
-				if (date) {
-					// Si la date est valide, mettre à jour selectedDates et le modèle
-					try {
-						isUpdatingFromInternal.value = true
-						selectedDates.value = date
-
-						// Si on a un format de retour, formater la date dans ce format
-						const formattedValue = dateFormatReturn
-							? formatDate(date, dateFormatReturn)
-							: formatDate(date, format)
-						updateModel(formattedValue)
+			// S'assurer que displayFormattedDate.value est une chaîne de caractères
+			if (typeof displayFormattedDate.value !== 'string') {
+				return
+			}
+
+			// Vérifier si c'est une plage de dates (contient un séparateur)
+			if (displayFormattedDate.value.includes(' - ')) {
+				const parts = displayFormattedDate.value.split(' - ')
+				const startDateStr = parts[0]?.trim() || ''
+				const endDateStr = parts[1]?.trim() || ''
+
+				// Si les deux dates sont présentes, valider et mettre à jour
+				if (startDateStr && endDateStr) {
+					const startValidation = validateDateFormat(startDateStr)
+					const endValidation = validateDateFormat(endDateStr)
+
+					if (startValidation.isValid && endValidation.isValid) {
+						const startDate = parseDate(startDateStr, format)
+						const endDate = parseDate(endDateStr, format)
+
+						if (startDate && endDate) {
+							// Vérifier que la date de fin est postérieure ou égale à la date de début
+							if (startDate.getTime() <= endDate.getTime()) {
+								try {
+									isUpdatingFromInternal.value = true
+									selectedDates.value = [startDate, endDate]
+
+									// Formater les dates selon le format de retour
+									const formattedStartDate = dateFormatReturn
+										? formatDate(startDate, dateFormatReturn)
+										: formatDate(startDate, format)
+									const formattedEndDate = dateFormatReturn
+										? formatDate(endDate, dateFormatReturn)
+										: formatDate(endDate, format)
+
+									// Mettre à jour le modèle avec un tableau de dates formatées
+									updateModel([formattedStartDate, formattedEndDate])
+								}
+								finally {
+									setTimeout(() => {
+										isUpdatingFromInternal.value = false
+									}, 0)
+								}
+							}
+							else {
+								// Ajouter un message d'erreur si la date de fin est antérieure à la date de début
+								if (errors && errors.value) {
+									errors.value = [DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START]
+								}
+							}
+						}
 					}
-					finally {
-						setTimeout(() => {
-							isUpdatingFromInternal.value = false
-						}, 0)
+				}
+			}
+			else {
+				// Traitement pour une date unique
+				const validation = validateDateFormat(displayFormattedDate.value)
+				if (validation.isValid) {
+					const date = parseDate(displayFormattedDate.value, format)
+					if (date) {
+						// Si la date est valide, mettre à jour selectedDates et le modèle
+						try {
+							isUpdatingFromInternal.value = true
+							selectedDates.value = date
+
+							// Si on a un format de retour, formater la date dans ce format
+							const formattedValue = dateFormatReturn
+								? formatDate(date, dateFormatReturn)
+								: formatDate(date, format)
+							updateModel(formattedValue)
+						}
+						finally {
+							setTimeout(() => {
+								isUpdatingFromInternal.value = false
+							}, 0)
+						}
 					}
 				}
 			}
@@ -92,7 +152,11 @@ export const useInputBlurHandler = (options: {
 		}
 
 		// Valider la saisie manuelle (affiche les messages d'erreur)
-		validateManualInput(displayFormattedDate.value || '')
+		// Note: La vérification du type string a déjà été faite plus haut
+		// et on retourne si ce n'est pas une chaîne, donc ici displayFormattedDate.value est forcément une chaîne
+		if (displayFormattedDate.value) {
+			validateManualInput(displayFormattedDate.value || '')
+		}
 	}
 
 	return {

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

@@ -1,82 +1,180 @@
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, type Ref } from 'vue'
 
 /**
  * Composable pour personnaliser les boutons du mois et de l'année dans les composants DatePicker
  * @param isPickerVisibleGetter - Fonction qui retourne l'état de visibilité du DatePicker
+ * @param monthName - Référence au nom du mois à utiliser
+ * @param yearName - Référence au nom de l'année à utiliser
  */
-export function useMonthButtonCustomization(isPickerVisibleGetter: () => boolean) {
+export function useMonthButtonCustomization(
+	isPickerVisibleGetter: () => boolean,
+	monthName?: Ref<string | null>,
+	yearName?: Ref<string | null>,
+) {
 	const monthButtonText = ref('')
 	const yearText = ref('')
 
+	/**
+	 * Retourne un nom personnalisé pour le mois en fonction de sa valeur
+	 * @param monthName - Le nom du mois à personnaliser
+	 * @returns Le nom personnalisé du mois
+	 */
+	const getCustomMonthName = (monthName: string | null | undefined): string => {
+		if (!monthName) return ''
+
+		// Convertir en minuscules pour faciliter la comparaison
+		const lowerMonth = monthName.toLowerCase()
+
+		switch (lowerMonth) {
+			case 'january':
+			case 'janvier':
+				return 'Janv.'
+			case 'february':
+			case 'février':
+				return 'Févr.'
+			case 'march':
+			case 'mars':
+				return 'Mars'
+			case 'april':
+			case 'avril':
+				return 'Avr.'
+			case 'may':
+			case 'mai':
+				return 'Mai'
+			case 'june':
+			case 'juin':
+				return 'Juin'
+			case 'july':
+			case 'juillet':
+				return 'Juil.'
+			case 'august':
+			case 'août':
+				return 'Août'
+			case 'september':
+			case 'septembre':
+				return 'Sept.'
+			case 'october':
+			case 'octobre':
+				return 'Oct.'
+			case 'november':
+			case 'novembre':
+				return 'Nov.'
+			case 'december':
+			case 'décembre':
+				return 'Déc.'
+			default:
+				// Si le mois n'est pas reconnu, retourner le mois avec la première lettre en majuscule
+				return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+		}
+	}
+
 	/**
 	 * Récupère et modifie les boutons du mois et de l'année avec une icône SVG chevron-down
 	 */
 	const customizeMonthButton = () => {
-		if (isPickerVisibleGetter()) {
+		if (isPickerVisibleGetter() || monthName?.value) {
 			nextTick(() => {
-				// Personnalisation du bouton du mois
-				const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')
-				if (monthBtn) {
-					// Récupérer le texte original et le nettoyer
-					monthButtonText.value = monthBtn.textContent?.trim() || ''
-
-					// Extraire le mois et l'année
+				// Personnalisation des boutons du mois pour tous les DatePickers
+				const monthBtns = document.querySelectorAll('.v-date-picker-controls__month-btn')
+				if (monthBtns.length > 0) {
+					// Récupérer le texte original et le nettoyer du premier bouton pour référence
+					// Cela n'affectera pas la personnalisation des autres boutons
+					monthButtonText.value = monthBtns[0].textContent?.trim() || ''
 					const parts = monthButtonText.value.split(' ')
-					const monthText = parts[0]
 					yearText.value = parts.length > 1 ? parts[1] : ''
 
-					// Créer un bouton stylisé comme un VBtn avec une icône Material Design
-					const buttonHTML = `
-						<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary); margin-left: -12px;" data-ripple="false">
-							<span class="v-btn__overlay"></span>
-							<span class="v-btn__underlay"></span>
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);"><title>chevron-down</title><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
-							</div>
-						</button>
-					`
-
-					// Remplacer le contenu du bouton original
-					monthBtn.innerHTML = buttonHTML
-
-					// Personnalisation du bouton d'année si l'année est disponible
-					if (yearText.value) {
-						const yearBtn = document.querySelector('.v-date-picker-controls__mode-btn')
-						if (yearBtn) {
-							// Créer un bouton stylisé pour l'année
-							const yearButtonHTML = `
-								<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary);" data-ripple="false">
-									<span class="v-btn__overlay"></span>
-									<span class="v-btn__underlay"></span>
-									<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-										<span style="color: var(--v-theme-primary);">${yearText.value}</span> 
-										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);"><title>chevron-down</title><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
-									</div>
-								</button>
-							`
-
-							// Remplacer le contenu du bouton d'année
-							yearBtn.innerHTML = yearButtonHTML
+					// Appliquer la personnalisation à tous les boutons du mois
+					monthBtns.forEach((monthBtn) => {
+						// Extraire le mois et l'année pour ce bouton spécifique
+						const btnText = monthBtn.textContent?.trim() || ''
+						const btnParts = btnText.split(' ')
+						// Utiliser le monthName fourni s'il existe, sinon utiliser le texte extrait
+						const rawMonthText = monthName?.value || btnParts[0]
+						// Personnaliser le nom du mois avec notre fonction switch case
+						const monthText = getCustomMonthName(rawMonthText)
+
+						// Créer un bouton stylisé comme un VBtn avec une icône Material Design
+						const buttonHTML = `
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary); margin-left: -12px;" data-ripple="false" aria-label="${monthText}">
+								<span class="v-btn__overlay"></span>
+								<span class="v-btn__underlay"></span>
+								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
+									<span style="color: var(--v-theme-primary);">${monthText.charAt(0).toUpperCase() + monthText.slice(1)}</span> 
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+								</div>
+							</button>
+						`
+
+						// Remplacer le contenu du bouton original
+						monthBtn.innerHTML = buttonHTML
+					})
+
+					// Personnalisation des boutons d'année pour tous les DatePickers
+					const yearBtns = document.querySelectorAll('.v-date-picker-controls__mode-btn')
+					yearBtns.forEach((yearBtn) => {
+						// Trouver le parent DatePicker-controls pour ce bouton d'année
+						const parentControl = yearBtn.closest('.v-date-picker-controls')
+						if (!parentControl) return
+
+						// Trouver le bouton de mois correspondant dans le même contrôle
+						const siblingMonthBtn = parentControl.querySelector('.v-date-picker-controls__month-btn')
+						if (!siblingMonthBtn) return
+
+						// Extraire le texte du bouton de mois pour obtenir l'année
+						const monthBtnText = siblingMonthBtn.textContent?.trim() || ''
+						const monthBtnParts = monthBtnText.split(' ')
+
+						// Déterminer l'année à afficher selon les priorités
+						let displayedYear = ''
+						if (yearName?.value) {
+							displayedYear = yearName.value
+						}
+						else if (monthBtnParts.length > 1) {
+							displayedYear = monthBtnParts[1]
 						}
-					}
+						else if (yearText.value) {
+							displayedYear = yearText.value
+						}
+						else {
+							// Si aucune année n'est trouvée, utiliser l'année courante
+							displayedYear = new Date().getFullYear().toString()
+						}
+
+						// Créer un bouton stylisé pour l'année
+						const yearButtonHTML = `
+							<button class="v-btn v-btn--density-comfortable v-btn--variant-text v-theme--light v-btn--size-default" style="color: var(--v-theme-primary);" data-ripple="false" aria-label="${displayedYear}">
+								<span class="v-btn__overlay"></span>
+								<span class="v-btn__underlay"></span>
+								<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
+									<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+								</div>
+							</button>
+						`
+
+						// Remplacer le contenu du bouton d'année
+						yearBtn.innerHTML = yearButtonHTML
+					})
 				}
 			})
 		}
 	}
 
 	/**
-	 * Configure un observateur pour détecter les changements dans le DOM
+	 * Configure des observateurs pour détecter les changements dans le DOM
 	 * et personnaliser les boutons du mois et de l'année automatiquement avec une icône SVG chevron-down
+	 * pour tous les DatePickers présents sur la page
 	 */
 	const setupMonthButtonObserver = () => {
 		nextTick(() => {
-			const targetNode = document.querySelector('.v-date-picker-controls')
-			if (targetNode) {
-				const observer = new MutationObserver(() => {
-					customizeMonthButton()
+			const targetNodes = document.querySelectorAll('.v-date-picker-controls')
+			if (targetNodes.length > 0) {
+				targetNodes.forEach((targetNode) => {
+					const observer = new MutationObserver(() => {
+						customizeMonthButton()
+					})
+					observer.observe(targetNode, { childList: true, subtree: true })
 				})
-				observer.observe(targetNode, { childList: true, subtree: true })
 			}
 		})
 	}

package/src/components/DiacriticPicker/DiacriticPicker.stories.ts

@@ -51,6 +51,7 @@ export const Default: Story = {
       label="Nom avec accents"
       color="primary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -110,6 +111,7 @@ export const Default: Story = {
 							label="Nom avec accents"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -130,6 +132,7 @@ export const WithTextarea: Story = {
       v-model="adresse"
       label="Adresse"
       color="primary"
+      bg-color="white"
       variant="outlined"
       auto-grow
     />
@@ -190,6 +193,7 @@ export const WithTextarea: Story = {
 							v-model="value"
 							label="Adresse"
 							color="primary"
+							bg-color="white"
 							variant="outlined"
 							auto-grow
 						/>
@@ -213,6 +217,7 @@ export const CustomDiacritics: Story = {
       label="Texte avec accents personnalisés"
       color="primary"
       variant="outlined"
+				bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -265,6 +270,7 @@ export const CustomDiacritics: Story = {
 							label="Texte avec accents personnalisés"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -286,6 +292,7 @@ export const CustomButtonTitle: Story = {
       label="Texte avec bouton personnalisé"
       color="primary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -345,6 +352,7 @@ export const CustomButtonTitle: Story = {
 							label="Texte avec bouton personnalisé"
 							color="primary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>
@@ -379,6 +387,7 @@ export const Customization: Story = {
       label="Options Vuetify personnalisées"
       color="secondary"
       variant="outlined"
+      bg-color="white"
     />
   </DiacriticPicker>
 </template>`,
@@ -437,6 +446,7 @@ export const Customization: Story = {
 							label="Options Vuetify personnalisées"
 							color="secondary"
 							variant="outlined"
+							bg-color="white"
 						/>
 					</DiacriticPicker>
 					<div class="mt-2">Valeur actuelle: {{ value }}</div>

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

@@ -181,6 +181,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/ErrorPage.xlsx" style="color:#0C41BD;">Voir le
+						rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a
+						href="https://github.com/assurance-maladie-digital/design-system-v3/issues/652" target="_blank"
+						style="color:#0C41BD;"
+					>issue #652</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/ErrorPage/ErrorPage.vue

@@ -3,6 +3,12 @@
 	import { locales } from './locales'
 	import PageContainer from '../PageContainer/PageContainer.vue'
 
+	// 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>')
+	}
+
 	withDefaults(defineProps<{
 		pageTitle?: string
 		message?: string
@@ -44,16 +50,17 @@
 						{{ code }}
 					</div>
 
-					<h2
+					<h1
 						v-if="pageTitle"
 						class="mb-2 font-weight-bold text-h5 mb-4"
 					>
 						{{ pageTitle }}
-					</h2>
+					</h1>
 
-					<p v-if="message">
-						{{ message }}
-					</p>
+					<p
+						v-if="message"
+						v-html="formatMessage(message)"
+					/>
 
 					<slot name="additional-content" />
 
@@ -63,7 +70,6 @@
 							:to="btnLink"
 							:href="btnHref"
 							color="primary"
-							exact
 							class="mt-6"
 						>
 							{{ btnText }}