@cnamts/synapse 1.0.4 → 1.0.6

package/src/components/DatePicker/utils/dateFormattingUtils.ts

@@ -0,0 +1,228 @@
+/**
+ * Utilitaires de formatage de dates pour les composants DatePicker
+ * Extrait et centralisé à partir des différents composables
+ */
+
+/**
+ * Résultat du formatage d'une date
+ */
+export interface FormatDateInputResult {
+	/**
+   * Valeur formatée
+   */
+	formatted: string
+	/**
+   * Position du curseur après formatage
+   */
+	cursorPos: number
+}
+
+/**
+ * Options pour le formatage d'une date
+ */
+export interface FormatDateOptions {
+	/**
+   * Position actuelle du curseur
+   */
+	cursorPosition?: number
+	/**
+   * Caractère à utiliser pour les positions non remplies
+   */
+	placeholderChar?: string
+}
+
+/**
+ * Formate une entrée de date en ajoutant les séparateurs appropriés
+ *
+ * @param input - Chaîne de caractères saisie
+ * @param format - Format de date (ex: 'DD/MM/YYYY')
+ * @param options - Options de formatage
+ * @returns Objet contenant la chaîne formatée et la nouvelle position du curseur
+ */
+export const formatDateInput = (
+	input: string,
+	format: string,
+	options: FormatDateOptions = {},
+): FormatDateInputResult => {
+	const {
+		cursorPosition,
+		placeholderChar = '_',
+	} = options
+
+	// Nettoyer l'entrée pour ne garder que les chiffres
+	let cleanedInput = input.replace(/[^\d]/g, '')
+
+	// Déterminer le séparateur utilisé dans le format
+	const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+	// Calculer la position du curseur dans l'entrée nettoyée (sans séparateurs)
+	const inputBeforeCursor = input.substring(0, cursorPosition || 0)
+	const digitsBeforeCursor = inputBeforeCursor.replace(/[^\d]/g, '').length
+
+	// Extraire les groupes de chiffres du format (DD, MM, YYYY)
+	const digitGroups: string[] = []
+	let currentGroup = ''
+
+	for (const char of format) {
+		if (['D', 'M', 'Y'].includes(char.toUpperCase())) {
+			currentGroup += char
+		}
+		else if (currentGroup) {
+			digitGroups.push(currentGroup)
+			currentGroup = ''
+		}
+	}
+
+	// Ajouter le dernier groupe s'il existe
+	if (currentGroup) {
+		digitGroups.push(currentGroup)
+	}
+
+	// Calculer le nombre total de chiffres attendus dans le format
+	const expectedDigits = format.replace(/[^DMY]/g, '').length
+
+	// Limiter le nombre de chiffres saisis au nombre attendu
+	if (cleanedInput.length > expectedDigits) {
+		cleanedInput = cleanedInput.substring(0, expectedDigits)
+	}
+
+	// Construire la chaîne formatée
+	let result = ''
+	let digitIndex = 0
+
+	// Parcourir les groupes de chiffres pour construire la date formatée
+	for (let groupIndex = 0; groupIndex < digitGroups.length; groupIndex++) {
+		const group = digitGroups[groupIndex]
+		const groupLength = group.length
+
+		// Ajouter les chiffres pour ce groupe
+		for (let j = 0; j < groupLength; j++) {
+			if (digitIndex < cleanedInput.length) {
+				result += cleanedInput[digitIndex]
+				digitIndex++
+			}
+			else {
+				// Utiliser le caractère de placeholder configuré pour les positions non remplies
+				result += placeholderChar
+			}
+		}
+
+		// Ajouter le séparateur après chaque groupe sauf le dernier
+		if (groupIndex < digitGroups.length - 1) {
+			result += separator
+		}
+	}
+
+	// Calculer la nouvelle position du curseur
+	let newCursorPos = 0
+	let digitCount = 0
+
+	// Parcourir le résultat formaté pour trouver la position du curseur
+	for (let i = 0; i < result.length && digitCount < digitsBeforeCursor; i++) {
+		newCursorPos++
+		if (/\d/.test(result[i])) {
+			digitCount++
+		}
+	}
+
+	return {
+		formatted: result,
+		cursorPos: Math.min(newCursorPos, result.length),
+	}
+}
+
+/**
+ * Crée une description accessible de la date pour les lecteurs d'écran
+ *
+ * @param dateStr - La chaîne de date à décrire
+ * @param format - Le format de la date
+ * @param placeholderChar - Caractère utilisé pour les positions vides
+ * @returns Une description de la date adaptée aux lecteurs d'écran
+ */
+export const getDateDescription = (
+	dateStr: string,
+	format: string,
+	placeholderChar = '_',
+): string => {
+	// Si la chaîne est vide, retourner un message simple
+	if (!dateStr.trim()) {
+		return 'Aucune date saisie'
+	}
+
+	// Déterminer le séparateur utilisé dans le format
+	const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+	// Extraire les parties de la date
+	const dateParts = dateStr.split(separator)
+	const formatParts = format.split(separator)
+
+	// Créer une description en fonction du format
+	let description = 'Date en cours de saisie: '
+
+	for (let i = 0; i < formatParts.length; i++) {
+		if (i >= dateParts.length) break
+
+		const part = dateParts[i].trim()
+		const formatPart = formatParts[i].charAt(0).toUpperCase()
+
+		// Ignorer les parties vides ou contenant uniquement des placeholders
+		if (!part || part.replace(new RegExp(placeholderChar, 'g'), '').length === 0) {
+			continue
+		}
+
+		switch (formatPart) {
+			case 'D':
+				description += `jour ${part}, `
+				break
+			case 'M':
+				description += `mois ${part}, `
+				break
+			case 'Y':
+				description += `année ${part}, `
+				break
+		}
+	}
+
+	// Supprimer la virgule finale si elle existe
+	return description.endsWith(', ')
+		? description.slice(0, -2)
+		: description
+}
+
+/**
+ * Extrait les deux parties d'une plage de dates
+ *
+ * @param value - Chaîne de caractères contenant une plage de dates
+ * @param separator - Séparateur de plage (par défaut: ' - ')
+ * @returns Tableau contenant les deux parties de la plage
+ */
+export const extractRangeParts = (value: string, separator = ' - '): [string, string] => {
+	const parts = value.split(separator)
+	return [
+		parts[0]?.trim() || '',
+		parts[1]?.trim() || '',
+	]
+}
+
+/**
+ * Vérifie si une chaîne de caractères contient un séparateur de plage
+ *
+ * @param value - Chaîne de caractères à vérifier
+ * @param separator - Séparateur de plage (par défaut: ' - ')
+ * @returns Booléen indiquant si la chaîne contient le séparateur
+ */
+export const hasRangeSeparator = (value: string, separator = ' - '): boolean => {
+	return value.includes(separator)
+}
+
+/**
+ * Vérifie si une plage de dates est valide (la date de début est antérieure à la date de fin)
+ *
+ * @param startDate - Date de début
+ * @param endDate - Date de fin
+ * @returns Booléen indiquant si la plage est valide
+ */
+export const isValidDateRange = (startDate: Date | null, endDate: Date | null): boolean => {
+	if (!startDate || !endDate) return true
+	return startDate.getTime() <= endDate.getTime()
+}

package/src/components/DatePicker/utils/validationUtils.ts

@@ -0,0 +1,90 @@
+import { formatDate } from '@/utils/formatDate'
+import dayjs from 'dayjs'
+
+/**
+ * Type pour une règle de validation personnalisée
+ */
+export interface CustomRule {
+	type: string
+	options: {
+		validate: (value: unknown) => boolean
+		message?: string
+		[key: string]: unknown
+	}
+}
+
+/**
+ * Adapte les règles personnalisées pour assurer la compatibilité avec différents types de valeurs
+ *
+ * @param rules - Règles personnalisées à adapter
+ * @param format - Format de date à utiliser pour la conversion
+ * @returns Règles adaptées pour fonctionner avec les dates et chaînes
+ */
+export const adaptCustomRules = (rules: CustomRule[] = [], format: string): CustomRule[] => {
+	return rules.map((rule) => {
+		if (rule.type === 'custom' && rule.options && rule.options.validate) {
+			// Créer une copie de la règle pour ne pas modifier l'original
+			const safeCopy: CustomRule = { ...rule }
+			const originalValidate = rule.options.validate
+
+			// Remplacer la fonction validate par une version sécurisée
+			safeCopy.options = { ...rule.options }
+			safeCopy.options.validate = (val: unknown) => {
+				// Si la valeur est une Date mais que la fonction originale attend une chaîne
+				// (détecté par la présence de includes dans le code source)
+				if (val instanceof Date && originalValidate.toString().includes('.includes')) {
+					// Convertir la date en chaîne au format spécifié
+					return originalValidate(format ? formatDate(dayjs(val), format) : val.toISOString())
+				}
+				return originalValidate(val)
+			}
+			return safeCopy
+		}
+		return rule
+	})
+}
+
+/**
+ * Vérifie si une chaîne de date est vide ou incomplète
+ *
+ * @param value - Chaîne de date à vérifier
+ * @param required - Indique si le champ est requis
+ * @returns Objet indiquant si la validation doit continuer et si la valeur est valide
+ */
+export const validateEmptyOrIncompleteDate = (
+	value: string,
+	required: boolean,
+	isDateComplete: (value: string) => boolean,
+	hasInteracted: boolean,
+): { shouldContinue: boolean, isValid: boolean, errorMessage?: string } => {
+	// Vérifier si le champ est requis et vide
+	if (!value && required && hasInteracted) {
+		return {
+			shouldContinue: false,
+			isValid: false,
+			errorMessage: 'Ce champ est requis',
+		}
+	}
+
+	// Si le champ est vide et non requis, c'est valide
+	if (!value && !required) {
+		return { shouldContinue: false, isValid: true }
+	}
+
+	// Vérifier si la saisie est complète avant de valider le format
+	if (!isDateComplete(value)) {
+		// La saisie n'est pas complète, ne pas afficher d'erreur
+		return { shouldContinue: false, isValid: true }
+	}
+
+	// La validation doit continuer
+	return { shouldContinue: true, isValid: true }
+}
+
+/**
+ * Structure de résultat de validation de format
+ */
+export interface FormatValidationResult {
+	isValid: boolean
+	message: string
+}

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

@@ -182,6 +182,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DialogBox.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/798" target="_blank" style="color:#0C41BD;">issue #798</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/DialogBox/DialogBox.stories.ts

@@ -2,6 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/vue3'
 import { VBtn } from 'vuetify/components'
 import DialogBox from './DialogBox.vue'
 import { fn } from '@storybook/test'
+import { computed } from 'vue'
 
 const meta: Meta<typeof DialogBox> = {
 	title: 'Composants/Feedback/DialogBox',
@@ -189,7 +190,12 @@ export const Default: Story = {
 		return {
 			components: { DialogBox, VBtn },
 			setup() {
-				return { args }
+				const rest = computed(() => {
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					const { default: _, ...rest } = args
+					return rest
+				})
+				return { args, rest }
 			},
 			template: `
 				<div class="pa-4">
@@ -198,7 +204,7 @@ export const Default: Story = {
 						color="primary"
 					>Toggle DialogBox</VBtn>
 					<DialogBox
-						v-bind="args"
+						v-bind="rest"
 						@confirm="args.modelValue = false"
 						@cancel="args.modelValue = false"
 						@update:modelValue="args.modelValue = $event"
@@ -560,10 +566,7 @@ export const TitleSlot: Story = {
 						@cancel="args.modelValue = false"
 					>
 						<template #title>
-							<VBtn
-								color="primary"
-								@click="args.modelValue = false"
-							>Title slot</VBtn>
+							Title slot
 						</template>
 						{{ args.default }}
 					</DialogBox>
@@ -585,10 +588,7 @@ export const TitleSlot: Story = {
 						v-model="dialogOpen"
 					>
 						<template #title>
-							<VBtn 
-								color="primary"
-								@click="dialogOpen = false"
-							>Title slot</VBtn>
+							Title slot
 						</template>
 						DialogBox content
 					</DialogBox>

package/src/components/DialogBox/DialogBox.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { mdiClose } from '@mdi/js'
-	import { ref } from 'vue'
+	import { ref, useId, watch } from 'vue'
 	import type { VDialog } from 'vuetify/components'
 	import { config } from './config'
 	import { locales } from './locales'
+	import { useDisplay } from 'vuetify/lib/framework.mjs'
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		title?: string
@@ -33,6 +35,18 @@
 		default: false,
 	})
 
+	// Restor the focus to the last active element when the dialog is closed
+	let activeElement: HTMLElement | null = null
+	watch(dialog, (newValue) => {
+		if (newValue) {
+			activeElement = document.activeElement as HTMLElement
+		}
+		else if (activeElement) {
+			activeElement.focus()
+		}
+	})
+
+	const id = `dialog-${useId()}`
 	const dialogContent = ref<VDialog | undefined>(undefined)
 
 	const options = useCustomizableOptions(config, props)
@@ -75,6 +89,9 @@
 			selectableElements[lastElement].focus()
 		}
 	}
+
+	const display = useDisplay()
+
 </script>
 
 <template>
@@ -86,18 +103,19 @@
 		:retain-focus="false"
 		aria-modal="true"
 		class="sy-dialog-box"
+		:aria-labelledby="id"
 		@keydown.tab="handleFocus"
 	>
 		<VCard
 			v-bind="options.card"
-			id="dialogContent"
+			id="dialog-content"
 			ref="dialogContent"
-			:aria-labelledby="props.title ? props.title : 'dialogContent'"
 		>
 			<VCardTitle v-bind="options.cardTitle">
 				<slot name="title">
 					<h2
 						v-if="title"
+						:id="id"
 						class="text-h6 font-weight-bold"
 					>
 						{{ props.title }}
@@ -108,13 +126,16 @@
 
 				<VBtn
 					v-if="!props.persistent"
+					class="sy-dialog-box-close-btn"
 					v-bind="options.closeBtn"
 					:aria-label="locales.closeBtn"
 					@click="dialog = false"
 				>
-					<VIcon v-bind="options.icon">
-						{{ closeIcon }}
-					</VIcon>
+					<SyIcon
+						:icon="closeIcon"
+						:decorative="true"
+						v-bind="options.icon"
+					/>
 				</VBtn>
 			</VCardTitle>
 			<slot />
@@ -127,20 +148,40 @@
 				<VSpacer v-bind="options.actionsSpacer" />
 
 				<slot name="actions">
-					<VBtn
-						v-bind="options.cancelBtn"
-						@click="$emit('cancel')"
-					>
-						{{ props.cancelBtnText }}
-					</VBtn>
-
-					<VBtn
-						v-bind="options.confirmBtn"
-						data-test-id="confirm-btn"
-						@click="$emit('confirm')"
-					>
-						{{ props.confirmBtnText }}
-					</VBtn>
+					<template v-if="display.xs.value">
+						<VBtn
+							v-bind="options.confirmBtn"
+							data-test-id="confirm-btn"
+							@click="$emit('confirm')"
+						>
+							{{ props.confirmBtnText }}
+						</VBtn>
+
+						<VBtn
+							v-bind="options.cancelBtn"
+							@click="$emit('cancel')"
+						>
+							{{ props.cancelBtnText }}
+						</VBtn>
+					</template>
+					<template v-else>
+						<VBtn
+							class="sy-dialog-box-cancel-btn"
+							v-bind="options.cancelBtn"
+							@click="$emit('cancel')"
+						>
+							{{ props.cancelBtnText }}
+						</VBtn>
+
+						<VBtn
+							class="sy-dialog-box-confirm-btn"
+							v-bind="options.confirmBtn"
+							data-test-id="confirm-btn"
+							@click="$emit('confirm')"
+						>
+							{{ props.confirmBtnText }}
+						</VBtn>
+					</template>
 				</slot>
 			</div>
 		</VCard>
@@ -165,9 +206,30 @@ h2 {
 	text-wrap: balance;
 }
 
+.sy-dialog-box-close-btn:focus-visible,
+.sy-dialog-box-cancel-btn:focus-visible,
+.sy-dialog-box-confirm-btn:focus-visible {
+	:deep(.v-btn__overlay) {
+		display: none;
+	}
+
+	&::after {
+		opacity: 1;
+		border: transparent;
+		outline: 2px solid rgb(var(--v-theme-primary));
+		outline-offset: 2px;
+	}
+}
+
+.sy-dialog-box-confirm-btn:focus-visible {
+	&::after {
+		outline-offset: 2px;
+	}
+}
+
 .sy-dialog-box-actions-ctn {
 	display: flex;
-	flex-direction: column-reverse;
+	flex-direction: column;
 	justify-content: stretch;
 	gap: $spacing-small;
 }

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

@@ -2,6 +2,7 @@
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
 <div
+  aria-labelledby="dialog-v-0"
   aria-modal="true"
   class="sy-dialog-box"
   modelvalue="true"
@@ -10,7 +11,6 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
   width="600px"
 >
   <div
-    aria-labelledby="Test title"
     class="
       pa-6
       v-card
@@ -18,7 +18,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       v-card--variant-elevated
       v-theme--light
     "
-    id="dialogContent"
+    id="dialog-content"
   >
     <!---->
     <div class="v-card__loader">
@@ -81,10 +81,13 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       pa-0
       v-card-title
     ">
-      <h2 class="
-        font-weight-bold
-        text-h6
-      ">
+      <h2
+        class="
+          font-weight-bold
+          text-h6
+        "
+        id="dialog-v-0"
+      >
         Test title
       </h2>
       <div class="v-spacer"></div>
@@ -95,6 +98,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
           ml-4
           mr-n2
           mt-n2
+          sy-dialog-box-close-btn
           v-btn
           v-btn--density-default
           v-btn--elevated
@@ -141,6 +145,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       <div class="v-spacer"></div>
       <button
         class="
+          sy-dialog-box-cancel-btn
           text-primary
           v-btn
           v-btn--density-default
@@ -165,6 +170,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
       <button
         class="
           bg-primary
+          sy-dialog-box-confirm-btn
           v-btn
           v-btn--density-default
           v-btn--elevated

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

@@ -57,6 +57,9 @@ describe('FileUpload', () => {
 			global: {
 				plugins: [vuetify],
 			},
+			props: {
+				modelValue: [], // Ajouter la prop modelValue obligatoire
+			},
 		})
 
 		const label = wrapper.find('label')

package/src/components/FooterBar/FooterBar.vue

@@ -184,6 +184,7 @@
 						v-bind="options.goTopBtnIcon"
 						:icon="arrowTopIcon"
 						class="scroll"
+						label="Aller en haut de la page"
 					/>
 				</VBtn>
 			</div>

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

@@ -216,6 +216,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/HeaderBar.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/643" target="_blank" style="color:#0C41BD;">issue #643</a>)</p>
+			  </div>
             `,
 		}
 	},