@cnamts/synapse 0.0.15-alpha → 0.0.16-alpha

package/src/components/SyAlert/SyAlert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, ref, onMounted, useAttrs } from 'vue'
 	import { locales } from './locales'
 	import {
 		mdiAlertOutline,
@@ -8,6 +8,7 @@
 		mdiInformationOutline,
 		mdiClose,
 	} from '@mdi/js'
+	import type { VIcon } from 'vuetify/components'
 
 	const show = defineModel<boolean>({
 		default: true,
@@ -23,6 +24,8 @@
 		variant: 'tonal',
 	})
 
+	const attrs = useAttrs()
+
 	const prependIcon = computed(() => {
 		return {
 			info: mdiInformationOutline,
@@ -43,58 +46,71 @@
 		prependIcon,
 		dismissAlert,
 	})
+
+	const alertIcon = ref<typeof VIcon | null>(null)
+	onMounted(() => {
+		alertIcon.value?.$el?.querySelector('svg')?.setAttribute('role', 'presentation')
+	})
 </script>
 
 <template>
-	<VAlert
-		v-model="show"
-		:type="props.type"
-		:closable="props.closable"
-		:variant="props.variant"
-		:class="`alert alert--${props.type}`"
-		:color="props.type"
-		:border="props.variant === 'tonal' ? 'start' : false"
+	<div
+		class="sy-alert"
+		role="alert"
 	>
-		<template #prepend>
-			<VIcon
-				class="alert-icon"
-				size="1.5rem"
-			>
-				<slot name="icon">
-					{{ prependIcon }}
-				</slot>
-			</VIcon>
-		</template>
-
-		<template #default>
-			<slot />
-		</template>
-
-		<template
-			v-if="props.closable"
-			#close
+		<VAlert
+			v-model="show"
+			v-bind="attrs"
+			:type="props.type"
+			:closable="props.closable"
+			:variant="props.variant"
+			:class="`alert alert--${props.type}`"
+			:color="props.type"
+			:border="props.variant === 'tonal' ? 'start' : false"
 		>
-			<VBtn
-				:color="props.variant === 'outlined' ? undefined : 'primary'"
-				:ripple="false"
-				variant="text"
-				width="auto"
-				height="100%"
-				class="alert-close-btn"
-				@click="dismissAlert"
-			>
+			<template #prepend>
 				<VIcon
-					size="small"
+					ref="alertIcon"
+					class="alert-icon"
+					size="1.5rem"
+					role="presentation"
 				>
-					{{ mdiClose }}
+					<slot name="icon">
+						{{ prependIcon }}
+					</slot>
 				</VIcon>
+			</template>
+
+			<template #default>
+				<slot />
+			</template>
 
-				<span>
-					{{ locales.close }}
-				</span>
-			</VBtn>
-		</template>
-	</VAlert>
+			<template
+				v-if="props.closable"
+				#close
+			>
+				<VBtn
+					:color="props.variant === 'outlined' ? undefined : 'primary'"
+					:ripple="false"
+					variant="text"
+					width="auto"
+					height="100%"
+					class="alert-close-btn"
+					@click="dismissAlert"
+				>
+					<VIcon
+						size="small"
+					>
+						{{ mdiClose }}
+					</VIcon>
+
+					<span>
+						{{ locales.close }}
+					</span>
+				</VBtn>
+			</template>
+		</VAlert>
+	</div>
 </template>
 
 <style lang="scss" scoped>
@@ -128,17 +144,24 @@
 .alert-close-btn {
 	cursor: pointer;
 	line-height: 0;
-
-	.v-btn__overlay {
-		display: none;
-	}
-}
-
-.v-btn {
 	text-transform: none;
 	font-weight: bold;
 	font-size: 0.75rem;
 	letter-spacing: normal;
+
+	&:focus-visible {
+		outline: solid 2px black !important;
+		outline-color: var(--v-primary-base) !important;
+		outline-offset: 2px !important;
+
+		&::after {
+			visibility: hidden;
+		}
+	}
+
+	.v-btn__overlay {
+		display: none;
+	}
 }
 
 @media screen and (width <= 440px) {
@@ -254,4 +277,18 @@
 		)
 	);
 }
+
+.v-alert.v-theme--dark {
+	&.v-alert--variant-outlined {
+		background-color: tokens.$white-base !important;
+	}
+
+	.alert-close-btn {
+		color: black !important;
+
+		&:focus-visible {
+			outline-color: black !important;
+		}
+	}
+}
 </style>

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

@@ -46,7 +46,16 @@ describe('Alert', () => {
 			modelValue: false,
 		})
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 
 		await wrapper.setProps({
 			modelValue: true,
@@ -79,7 +88,16 @@ describe('Alert', () => {
 
 		await closeBtn.element.click()
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 		expect(wrapper.emitted('update:modelValue')![0]![0]).toBe(false)
 	})
 

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/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'

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/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} />