@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

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

@@ -2,86 +2,94 @@
 
 exports[`Alert > render correctly 1`] = `
 <div
-  class="
-    alert
-    alert--success
-    text-success
-    v-alert
-    v-alert--border
-    v-alert--border-start
-    v-alert--density-default
-    v-alert--variant-tonal
-    v-theme--light
-  "
+  class="sy-alert"
   message="message"
   role="alert"
+  title="title"
 >
-  <!---->
-  <span class="v-alert__underlay"></span>
-  <div class="v-alert__border"></div>
-  <div class="v-alert__prepend">
-    <i
-      aria-hidden="true"
-      class="
-        11.59L6
-        12
-        12
-        12
-        12
-        12
-        12
-        12S6.5
-        12S7.59
-        13L10
-        14.17L7.41
-        16.41
-        16.41
-        17.5
-        17.5
-        17L18
-        2
-        2
-        2
-        2
-        20
-        20
-        20
-        20
-        20C7.59
-        20M16.59
-        22
-        22
-        22
-        22
-        2C6.5
-        2M12
-        4
-        4
-        4
-        4
-        6.5
-        7.58L10
-        7.58Z
-        7.59
-        9L16.59
-        M12
-        alert-icon
-        mdi
-        notranslate
-        v-icon
-        v-theme--light
-      "
-      style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;"
-    ></i>
-  </div>
-  <div class="v-alert__content">
-    <div class="v-alert-title">
-      title
+  <div
+    class="
+      alert
+      alert--success
+      text-success
+      v-alert
+      v-alert--border
+      v-alert--border-start
+      v-alert--density-default
+      v-alert--variant-tonal
+      v-theme--light
+    "
+    message="message"
+    role="alert"
+  >
+    <!---->
+    <span class="v-alert__underlay"></span>
+    <div class="v-alert__border"></div>
+    <div class="v-alert__prepend">
+      <i
+        aria-hidden="true"
+        class="
+          11.59L6
+          12
+          12
+          12
+          12
+          12
+          12
+          12S6.5
+          12S7.59
+          13L10
+          14.17L7.41
+          16.41
+          16.41
+          17.5
+          17.5
+          17L18
+          2
+          2
+          2
+          2
+          20
+          20
+          20
+          20
+          20C7.59
+          20M16.59
+          22
+          22
+          22
+          22
+          2C6.5
+          2M12
+          4
+          4
+          4
+          4
+          6.5
+          7.58L10
+          7.58Z
+          7.59
+          9L16.59
+          M12
+          alert-icon
+          mdi
+          notranslate
+          v-icon
+          v-theme--light
+        "
+        role="presentation"
+        style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;"
+      ></i>
     </div>
+    <div class="v-alert__content">
+      <div class="v-alert-title">
+        title
+      </div>
+      <!---->
+      slot content
+    </div>
+    <!---->
     <!---->
-    slot content
   </div>
-  <!---->
-  <!---->
 </div>
 `;

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -44,6 +44,13 @@ const meta = {
 				type: { summary: 'string' },
 			},
 		},
+		'logoutText': {
+			control: 'text',
+			description: 'Texte dans le bouton de déconnexion',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 		'additionalInformation': {
 			control: 'text',
 			description: 'Informations supplémentaires sur l\'utilisateur (ex: rôle, service, etc.)',
@@ -376,6 +383,55 @@ export const CustomFullName: Story = {
 	},
 }
 
+export const CustomLogoutText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menu-items="menuItems"
+  :logout-text="Déconnexion"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import { UserMenuBtn } from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const logoutText = ref('Déconnexion')
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		logoutText: 'Déconnexion',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
 export const CustomAdditionalInformation: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -15,6 +15,7 @@
 		hideLogoutBtn?: boolean
 		isMobileView?: boolean
 		hideUserIcon?: boolean
+		logoutText?: string
 	}>(), {
 		menuItems: () => [],
 		additionalInformation: 'Information supplémentaire',
@@ -22,6 +23,7 @@
 		hideLogoutBtn: false,
 		isMobileView: false,
 		hideUserIcon: false,
+		logoutText: 'Logout',
 	})
 
 	const modelValue = defineModel<MenuItem | null>({
@@ -74,8 +76,8 @@
 						class="mr-4"
 						v-bind="options['logoutIcon']"
 					/>
-					<VListItemTitle>
-						Logout
+					<VListItemTitle class="logout">
+						{{ props.logoutText }}
 					</VListItemTitle>
 				</div>
 			</VListItem>

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

@@ -122,4 +122,45 @@ describe('UserMenuBtn', () => {
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])
 	})
+
+	it('possède la prop logoutText  custom', async () => {
+		const customLogoutText = 'Déconnexion'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				logoutText: customLogoutText,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(customLogoutText)
+	})
+
+	it('possède la prop logoutText  par défaut', async () => {
+		const defaultLogoutText = 'Logout'
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideLogoutBtn: false,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				fullName: 'John Doe',
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+
+		// Vérifier directement que la prop est correctement passée au composant
+		expect(wrapper.props('logoutText')).toBe(defaultLogoutText)
+	})
 })

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { useFieldValidation } from '../composables/rules/useFieldValidation'
 export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
 export { useValidation } from '../composables/validation/useValidation'
+export { useDateFormat } from '../composables/date/useDateFormatDayjs'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
@@ -42,6 +43,7 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
+export { indicatifs } from './PhoneField/indicatifs'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'

package/src/composables/date/useDateFormat.ts

@@ -8,9 +8,25 @@
  * @param format - Le format de la date (ex: 'DD/MM/YYYY')
  * @returns Un objet Date ou null si la chaîne n'est pas valide
  */
-export const parseDate = (dateString: string, format: string): Date | null => {
+export const parseDate = (dateString: string | Date | null, format: string): Date | null => {
+	// Si dateString est null ou undefined, retourner null
 	if (!dateString) return null
 
+	// Si dateString est déjà un objet Date, le retourner directement
+	if (dateString instanceof Date) {
+		return dateString
+	}
+
+	// Si dateString n'est pas une chaîne de caractères, convertir en chaîne ou retourner null
+	if (typeof dateString !== 'string') {
+		try {
+			dateString = String(dateString)
+		}
+		catch {
+			return null
+		}
+	}
+
 	// Créer un mapping des positions des éléments de date selon le format
 	const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
 	const parts = format.split(separator)

package/src/composables/date/useDateFormatDayjs.ts

@@ -0,0 +1,84 @@
+/**
+ * Composable pour le formatage et le parsing des dates avec dayjs
+ */
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import 'dayjs/locale/fr'
+
+// Initialiser les plugins dayjs
+dayjs.extend(customParseFormat)
+dayjs.extend(localizedFormat)
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.locale('fr')
+
+/**
+ * Parse une chaîne de caractères en objet Date selon un format spécifié
+ * @param dateString - La chaîne de caractères à parser
+ * @param format - Le format de la date (ex: 'DD/MM/YYYY')
+ * @returns Un objet Date ou null si la chaîne n'est pas valide
+ */
+export const parseDate = (dateString: string | Date | null, format: string): Date | null => {
+	// Si dateString est null ou undefined, retourner null
+	if (!dateString) return null
+
+	// Si dateString est déjà un objet Date, le retourner directement
+	if (dateString instanceof Date) {
+		return dateString
+	}
+
+	// Si dateString n'est pas une chaîne de caractères, convertir en chaîne ou retourner null
+	if (typeof dateString !== 'string') {
+		try {
+			dateString = String(dateString)
+		}
+		catch {
+			return null
+		}
+	}
+
+	// Utiliser dayjs pour parser la date
+	const parsedDate = dayjs(dateString, format, true)
+
+	if (!parsedDate.isValid()) return null
+
+	// Extraire les composants de la date pour créer une date UTC
+	// Cela évite les problèmes de décalage de fuseau horaire
+	return dayjs.utc()
+		.year(parsedDate.year())
+		.month(parsedDate.month())
+		.date(parsedDate.date())
+		.hour(0)
+		.minute(0)
+		.second(0)
+		.millisecond(0)
+		.toDate()
+}
+
+/**
+ * Formate une date selon un format spécifié
+ * @param date - La date à formater
+ * @param format - Le format de sortie (ex: 'DD/MM/YYYY')
+ * @returns La date formatée en chaîne de caractères
+ */
+export const formatDate = (date: Date | null, format: string): string => {
+	if (!date) return ''
+
+	return dayjs(date).format(format)
+}
+
+/**
+ * Hook composable pour le formatage et le parsing des dates
+ * @returns Fonctions de formatage et parsing de dates
+ */
+export function useDateFormat() {
+	return {
+		parseDate,
+		formatDate,
+	}
+}
+
+export default useDateFormat

package/src/composables/date/useDateInitializationDayjs.ts

@@ -0,0 +1,133 @@
+/**
+ * Composable pour l'initialisation des dates dans le DatePicker avec dayjs
+ */
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import 'dayjs/locale/fr'
+
+// Initialiser les plugins dayjs
+dayjs.extend(customParseFormat)
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.locale('fr')
+
+// Types
+export type DateValue = string | [string, string] | null
+export type DateInput = string | string[] | null | object
+
+/**
+ * Parse une date en utilisant dayjs et retourne une Date UTC
+ * @param dateStr - La chaîne de date à analyser
+ * @param format - Le format de la date
+ * @returns Une Date ou null si la date est invalide
+ */
+const parseToUTCDate = (dateStr: string, format: string): Date | null => {
+	if (!dayjs(dateStr, format).isValid()) return null
+
+	// Extraire les composants de la date à partir de la chaîne
+	const dateParts = dayjs(dateStr, format)
+
+	// Créer une date UTC avec les composants exacts pour éviter les décalages de fuseau horaire
+	// Utiliser set pour définir explicitement l'année, le mois et le jour
+	return dayjs.utc()
+		.year(dateParts.year())
+		.month(dateParts.month())
+		.date(dateParts.date())
+		.hour(0)
+		.minute(0)
+		.second(0)
+		.millisecond(0)
+		.toDate()
+}
+
+/**
+ * Initialise les dates sélectionnées à partir d'une valeur d'entrée
+ * @param modelValue - La valeur d'entrée (peut être une chaîne, un tableau, null ou un objet)
+ * @param displayFormat - Le format d'affichage des dates
+ * @param returnFormat - Le format de retour des dates (optionnel)
+ * @returns Une date, un tableau de dates ou null
+ */
+export const initializeSelectedDates = (
+	modelValue: DateInput | null,
+	displayFormat: string,
+	returnFormat: string = '',
+): Date | Date[] | null => {
+	if (!modelValue) return null
+
+	// Déterminer le format à utiliser pour l'analyse
+	const parseFormat = returnFormat || displayFormat
+
+	if (Array.isArray(modelValue)) {
+		if (modelValue.length >= 2) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let dates = [
+				parseToUTCDate(modelValue[0], parseFormat),
+				parseToUTCDate(modelValue[1], parseFormat),
+			]
+
+			// Si l'une des dates est invalide avec le format de retour, essayer avec le format d'affichage
+			if (dates.some(date => date === null) && returnFormat) {
+				dates = [
+					parseToUTCDate(modelValue[0], displayFormat),
+					parseToUTCDate(modelValue[1], displayFormat),
+				]
+			}
+
+			// Vérifie si l'une des dates est toujours invalide
+			if (dates.some(date => date === null)) {
+				return []
+			}
+
+			// Vérifie si la première date est après la seconde
+			if (dates[0] && dates[1] && dayjs(dates[0]).isAfter(dayjs(dates[1]))) {
+				return []
+			}
+
+			// Filtrer les dates nulles et convertir en tableau de Date
+			return dates.filter((date): date is Date => date !== null)
+		}
+
+		if (modelValue.length === 1) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let date = parseToUTCDate(modelValue[0], parseFormat)
+
+			// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+			if (date === null && returnFormat) {
+				date = parseToUTCDate(modelValue[0], displayFormat)
+			}
+
+			return date === null ? [] : [date]
+		}
+
+		return []
+	}
+
+	// Si modelValue est un objet, on le convertit en chaîne
+	if (typeof modelValue === 'object') {
+		return null
+	}
+
+	// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+	let date = parseToUTCDate(modelValue, parseFormat)
+
+	// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+	if (date === null && returnFormat) {
+		date = parseToUTCDate(modelValue, displayFormat)
+	}
+
+	return date
+}
+
+/**
+ * Hook composable pour l'initialisation des dates
+ * @returns Fonction d'initialisation des dates
+ */
+export function useDateInitialization() {
+	return {
+		initializeSelectedDates,
+	}
+}
+
+export default useDateInitialization

package/src/composables/rules/useFieldValidation.ts

@@ -177,16 +177,30 @@ export function useFieldValidation() {
 
 				case 'notBeforeToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue >= new Date(),
+						dateValue >= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
 					)
 				}
 
 				case 'notAfterToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue <= new Date(),
+						dateValue <= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être postérieur à aujourd'hui.`,
 					)
 				}
@@ -262,8 +276,17 @@ export function useFieldValidation() {
 						return { error: 'Date de référence invalide' }
 					}
 
+					// Normaliser les deux dates en réinitialisant les heures/minutes/secondes
+					dateValue.setHours(0, 0, 0, 0)
+					referenceDate.setHours(0, 0, 0, 0)
+
+					// Comparer les dates normalisées
+					const isSameDate = dateValue.getFullYear() === referenceDate.getFullYear()
+						&& dateValue.getMonth() === referenceDate.getMonth()
+						&& dateValue.getDate() === referenceDate.getDate()
+
 					return createValidationResult(
-						dateValue.getTime() === referenceDate.getTime(),
+						isSameDate,
 						options.message || options.warningMessage || `${identifier} doit être exactement le ${options.date}.`,
 					)
 				}

package/src/stories/Accessibilite/Avancement/Avancement.mdx

@@ -0,0 +1,12 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import * as AvancementStories from './Avancement.stories.ts';
+
+<Meta of={AvancementStories} />
+
+# Outils de pré-audit
+
+<Story of={AvancementStories.PreAudit} />
+
+# Contrôle manuel
+
+<Story of={AvancementStories.Manuel} />