@cnamts/synapse 0.0.15-alpha → 1.0.0

package/src/components/TableToolbar/TableToolbar.vue

@@ -7,7 +7,7 @@
 	import { locales as defaultLocales } from './locales'
 
 	const props = withDefaults(defineProps<{
-		nbTotal: number
+		nbTotal?: number
 		nbFiltered?: number
 		search?: string
 		searchLabel?: string
@@ -16,6 +16,7 @@
 		loading?: boolean
 		locales?: typeof defaultLocales
 	} & CustomizableOptions>(), {
+		nbTotal: 0,
 		nbFiltered: undefined,
 		search: undefined,
 		searchLabel: defaultLocales.search,
@@ -30,6 +31,12 @@
 		(e: 'add'): void
 	}>()
 
+	defineSlots<{
+		searchLeft?: () => undefined
+		searchRight?: () => undefined
+		filters?: () => undefined
+	}>()
+
 	const options = useCustomizableOptions(config, props)
 	const display = useDisplay()
 	const theme = useTheme()
@@ -38,7 +45,6 @@
 		'sy-form-input--s': display.xs.value,
 		'flex-grow-0': display.xs.value,
 		'flex-grow-1': !display.xs.value,
-		'mr-6': props.showAddButton,
 		'loading': props.loading,
 	}))
 
@@ -59,12 +65,14 @@
 	>
 		<p
 			v-if="nbTotal > 0"
-			class="mb-0 font-weight-bold mr-4 my-3"
+			class="mb-0 font-weight-bold mr-4 mr-sm-0 my-3"
 			data-test-id="nb-rows"
 		>
 			{{ displayNbRows }}
 		</p>
 
+		<slot name="filters" />
+
 		<div class="sy-table-toolbar__search">
 			<slot name="search-left" />
 			<VTextField
@@ -109,6 +117,16 @@
 
 .sy-table-toolbar {
 	min-height: 56px;
+
+	:deep(.v-toolbar__content) {
+		width: 100%;
+		flex-wrap: wrap;
+		flex-direction: row !important;
+
+		@media (width <= 600px) {
+			flex-direction: column !important;
+		}
+	}
 }
 
 .loading :deep(.v-field__append-inner) {
@@ -125,6 +143,10 @@
 	grid-auto-flow: column;
 	margin-left: auto;
 	align-items: end;
+
+	@media (width <= 600px) {
+		margin-left: 0;
+	}
 }
 
 .sy-form-input {
@@ -134,11 +156,6 @@
 .sy-form-input--s {
 	z-index: 1; // Display content above the table on mobile
 	contain: none; // Allow fixed elements to be displayed properly
-
-	:deep(.v-toolbar__content) {
-		width: 100%;
-		flex-wrap: wrap;
-	}
 }
 
 .sy-table-toolbar.v-theme--dark :deep() {

package/src/components/TableToolbar/config.ts

@@ -8,14 +8,15 @@ export const config = {
 	addBtn: {
 		variant: 'outlined',
 		color: 'primary',
-		class: 'my-1 px-2 px-md-4',
+		class: 'px-2 px-md-4',
 		minWidth: '44px',
+		height: '40px',
 	},
 	addIconLabel: {
 		class: 'mr-1',
 	},
 	textField: {
-		variant: 'underlined',
+		variant: 'outlined',
 		clearable: true,
 		singleLine: true,
 		hideDetails: true,

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

@@ -27,6 +27,7 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       5/5 lignes
@@ -36,9 +37,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -48,8 +49,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -193,7 +195,9 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -243,6 +247,7 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -253,10 +258,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
         loading
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--disabled
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -266,9 +271,10 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--disabled
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -387,7 +393,9 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -437,6 +445,7 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -446,9 +455,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -458,8 +467,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -603,7 +613,9 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -653,6 +665,7 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1 ligne
@@ -662,9 +675,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -674,8 +687,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -819,7 +833,9 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -871,9 +887,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -883,8 +899,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -1028,7 +1045,9 @@ exports[`TableToolbar > renders correctly with no items 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>
@@ -1079,6 +1098,7 @@ exports[`TableToolbar > should render 1`] = `
       font-weight-bold
       mb-0
       mr-4
+      mr-sm-0
       my-3
     ">
       1/2 lignes
@@ -1088,9 +1108,9 @@ exports[`TableToolbar > should render 1`] = `
         flex-grow-1
         sy-form-input
         v-input
+        v-input--center-affix
         v-input--density-compact
         v-input--horizontal
-        v-input--plain-underlined
         v-locale--is-ltr
         v-text-field
         v-theme--light
@@ -1100,8 +1120,9 @@ exports[`TableToolbar > should render 1`] = `
           <div class="
             v-field
             v-field--appended
+            v-field--center-affix
             v-field--single-line
-            v-field--variant-underlined
+            v-field--variant-outlined
             v-locale--is-ltr
             v-theme--light
           ">
@@ -1245,7 +1266,9 @@ exports[`TableToolbar > should render 1`] = `
               ></i>
             </div>
             <div class="v-field__outline">
+              <div class="v-field__outline__start"></div>
               <!---->
+              <div class="v-field__outline__end"></div>
               <!---->
             </div>
           </div>

package/src/components/index.ts

@@ -3,6 +3,8 @@ 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 Accordion } from './Accordion/Accordion.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
@@ -22,6 +24,7 @@ export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DataListItem } from './DataListItem/DataListItem.vue'
 export { default as DialogBox } from './DialogBox/DialogBox.vue'
+export { default as DiacriticPicker } from './DiacriticPicker/DiacriticPicker.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as ExternalLinks } from './ExternalLinks/ExternalLinks.vue'
@@ -65,6 +68,7 @@ export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
 export { default as SyAlert } from './SyAlert/SyAlert.vue'
+export { default as SyTextArea } from './SyTextArea/SyTextArea.vue'
 export { default as TableToolbar } from './TableToolbar/TableToolbar.vue'
 export { default as UploadWorkflow } from './UploadWorkflow/UploadWorkflow.vue'
 export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.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