@cnamts/synapse 1.0.6 → 1.0.8

package/src/components/DataList/DataList.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-	import { computed } from 'vue'
 	import type { PropType } from 'vue'
 
-	import { locales } from './locales'
 	import DataListItem from '@/components/DataListItem/DataListItem.vue'
 	import DataListLoading from './DataListLoading/DataListLoading.vue'
 
@@ -68,12 +66,14 @@
 		},
 	})
 
+	const uniqueId = Math.random().toString(36).substr(2, 9)
+
+	const sectionTitleId = `data-list-section-title-${uniqueId}`
+
 	const { widthStyles } = useWidthable(props)
 
 	const emit = defineEmits(['click:item-action'])
 
-	const label = computed(() => (props.loading ? locales.loadingLabel : undefined))
-
 	const getIcon = (iconName?: string): string | undefined => {
 		if (!iconName || !props.icons) {
 			return
@@ -90,54 +90,52 @@
 </script>
 
 <template>
-	<div
-		:aria-label="label"
-		:style="widthStyles"
-		class="sy-data-list"
-	>
-		<VFadeTransition mode="out-in">
-			<DataListLoading
-				v-if="loading"
-				:items-number="itemsNumberLoading"
-				:heading="headingLoading"
-				:title-class="titleClass"
-				:row="row"
-			/>
+	<VFadeTransition mode="out-in">
+		<DataListLoading
+			v-if="loading"
+			:items-number="itemsNumberLoading"
+			:heading="headingLoading"
+			:row="row"
+		/>
 
-			<dl v-else>
-				<dt>
-					<slot name="title">
-						<component
-							:is="titleTag"
-							v-if="listTitle"
-							:class="titleClass"
-						>
-							{{ listTitle }}
-						</component>
-					</slot>
-				</dt>
+		<component
+			:is="listTitle ? 'section' : 'div'"
+			v-else
+			:aria-labelledby="listTitle ? sectionTitleId : undefined"
+			:style="widthStyles"
+			class="sy-data-list"
+		>
+			<slot name="title">
+				<component
+					:is="titleTag"
+					v-if="listTitle"
+					:id="sectionTitleId"
+					:class="titleClass"
+				>
+					{{ listTitle }}
+				</component>
+			</slot>
 
-				<dd v-if="items.length">
-					<DataListItem
-						v-for="(item, index) in items"
-						:key="index"
-						:label="item.key"
-						:value="item.value"
-						:action="item.action"
-						:chip="item.chip"
-						:row="row"
-						:render-html-value="renderHtmlValue"
-						:icon="getIcon(item.icon)"
-						:placeholder="placeholder"
-						:vuetify-options="item.options"
-						:class="getItemClass(index, item.class)"
-						class="sy-data-list-item text-body-1"
-						@click:action="emit('click:item-action', index)"
-					/>
-				</dd>
+			<dl v-if="items.length">
+				<DataListItem
+					v-for="(item, index) in items"
+					:key="index"
+					:label="item.key"
+					:value="item.value"
+					:action="item.action"
+					:chip="item.chip"
+					:row="row"
+					:render-html-value="renderHtmlValue"
+					:icon="getIcon(item.icon)"
+					:placeholder="placeholder"
+					:vuetify-options="item.options"
+					:class="getItemClass(index, item.class)"
+					class="sy-data-list-item text-body-1"
+					@click:action="emit('click:item-action', index)"
+				/>
 			</dl>
-		</VFadeTransition>
-	</div>
+		</component>
+	</VFadeTransition>
 </template>
 
 <style lang="scss" scoped>

package/src/components/DataListGroup/DataListGroup.vue

@@ -44,7 +44,7 @@
 </script>
 
 <template>
-	<ul class="sy-data-list-group d-flex flex-wrap max-width-none ma-n4">
+	<ul class="sy-data-list-group d-flex max-width-none ma-n4">
 		<li
 			v-for="(dataList, index) in props.items"
 			:key="`sy-data-list-${index}`"

package/src/components/DataListItem/DataListItem.vue

@@ -33,7 +33,7 @@
 
 	const labelColor = computed(() => {
 		return theme.current.value.dark
-			? 'rgba(255, 255, 255, .7)'
+			? 'rgba(255, 255, 255, .85)'
 			: 'rgba(0, 0, 0, .6)'
 	})
 
@@ -45,66 +45,73 @@
 		}
 		return props.value || props.placeholder
 	})
+
+	const actionButtonColor = computed(() => {
+		return theme.current.value.dark ? 'white' : 'primary'
+	})
 </script>
 
 <template>
-	<div class="sy-data-list-item d-flex flex-wrap">
-		<slot name="icon">
-			<SyIcon
-				v-if="icon"
-				v-bind="options.icon"
-				:icon="icon"
-				:decorative="true"
-			/>
-		</slot>
-
-		<div class="sy-data-list-item-content">
-			<div :class="{ 'sy-row': row }">
-				<div
-					class="sy-data-list-item-label text-caption"
-					:style="{ color: labelColor }"
+	<div
+		:class="{ 'sy-row': row }"
+		class="sy-data-list-item"
+	>
+		<dt
+			class="sy-data-list-item-label text-caption"
+			:style="{ color: labelColor }"
+		>
+			<slot name="icon">
+				<SyIcon
+					v-if="icon"
+					v-bind="options.icon"
+					:icon="icon"
+					:decorative="true"
+				/>
+			</slot>
+			<span>{{ label }} :</span>
+		</dt>
+
+		<dd
+			class="sy-data-list-item-value d-flex align-center ga-2"
+			:class="{ 'has-icon': icon }"
+		>
+			<slot
+				name="value"
+				v-bind="{ itemValue }"
+			>
+				<VChip
+					v-if="chip"
+					v-bind="options.chip"
 				>
-					{{ label }}
-				</div>
-
-				<div class="sy-data-list-item-value">
-					<slot
-						name="value"
-						v-bind="{ itemValue }"
+					{{ itemValue }}
+				</VChip>
+
+				<span
+					v-else-if="renderHtmlValue"
+					class="text-body-1"
+					v-html="itemValue"
+				/>
+
+				<span
+					v-else
+					class="text-body-1"
+					v-text="itemValue"
+				/>
+
+				<slot name="action">
+					<VBtn
+						v-if="action"
+						class="sy-data-list-item-action-btn px-2"
+						size="small"
+						variant="tonal"
+						:color="actionButtonColor"
+						@click="emits('click:action')"
 					>
-						<VChip
-							v-if="chip"
-							v-bind="options.chip"
-						>
-							{{ itemValue }}
-						</VChip>
-
-						<div
-							v-else-if="renderHtmlValue"
-							class="text-body-1"
-							v-html="itemValue"
-						/>
-
-						<div
-							v-else
-							class="text-body-1"
-							v-text="itemValue"
-						/>
-					</slot>
-				</div>
-			</div>
-
-			<slot name="action">
-				<VBtn
-					v-if="action"
-					v-bind="options.actionBtn"
-					class="sy-data-list-item-action-btn"
-					@click="emits('click:action')"
-				>
-					{{ action }}
-				</VBtn>
+						{{ action }}
+					</VBtn>
+				</slot>
 			</slot>
-		</div>
+		</dd>
 	</div>
 </template>
 
@@ -112,21 +119,18 @@
 .sy-row {
 	display: flex;
 	flex-wrap: wrap;
+	gap: 0.25rem;
 
 	.sy-data-list-item-label {
 		align-self: center;
-
-		&::after {
-			content: ':';
-			margin: 0 4px;
-		}
 	}
 }
 
-.sy-data-list-item-action-btn.v-btn {
-	min-width: 0;
-	margin: 0 -1px;
+.sy-data-list-item-value.has-icon {
+	margin-left: 2.5rem;
+}
 
+.sy-data-list-item-action-btn.v-btn {
 	&:focus-visible::after {
 		opacity: 1;
 	}

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

@@ -66,7 +66,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.sy-data-list-item-value div')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('<span>Custom Value</span>')
 	})
@@ -83,7 +83,7 @@ describe('DataListItem', () => {
 			},
 		})
 
-		const elValue = wrapper.find('.sy-data-list-item-value div')
+		const elValue = wrapper.find('.sy-data-list-item-value span')
 
 		expect(elValue.text()).toBe('Paul Dupont')
 	})

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -622,8 +622,8 @@ export const WithError: Story = {
 						v-model="date"
 						placeholder="notAfterToday"
 						:custom-rules="[
-							{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd'hui' } }
-						]"
+			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd'hui' } },
+		]"
 					/>
 				</template>
 				`,
@@ -656,7 +656,7 @@ export const WithError: Story = {
 		'noCalendar': false,
 		'modelValue': '01/01/2100',
 		'customRules': [
-			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
+			{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd hui' } },
 		],
 		'onUpdate:modelValue': fn(),
 		'onFocus': fn(),

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -68,6 +68,7 @@
 			max?: string
 		}
 		autoClamp?: boolean
+		isValidateOnBlur?: boolean
 	}>(), {
 		modelValue: undefined,
 		label: DATE_PICKER_MESSAGES.LABEL_DEFAULT,
@@ -106,13 +107,14 @@
 			max: '',
 		}),
 		autoClamp: false,
+		isValidateOnBlur: true,
 	})
 
 	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
 
 	// Utilisation des composables pour les fonctionnalités du CalendarMode
 	const { displayWeekendDays } = useWeekendDays(props)
-	const { todayInString } = useTodayButton(props)
+	const { todayInString, headerDate } = useTodayButton(props)
 	const { labelWithAsterisk } = useAsteriskDisplay(props)
 
 	const selectedDates = ref<Date | Date[] | null>(
@@ -125,9 +127,12 @@
 		todayInString,
 	})
 
+	const onblur = ref(false)
+
 	const dateTextInputRef = ref<null | ComponentPublicInstance<typeof DateTextInput>>()
 	const dateCalendarTextInputRef = ref<null | ComponentPublicInstance<typeof SyTextField>>()
 	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
+	const complexDatePickerRef = ref<null | ComponentPublicInstance<typeof ComplexDatePicker>>()
 
 	// Fonction pour sélectionner la date du jour
 	const handleSelectToday = () => {
@@ -151,6 +156,12 @@
 
 		// Mettre à jour l'affichage formaté
 		updateDisplayFormattedDate()
+
+		// Mettre à jour les variables currentMonth et currentYear pour refléter la date d'aujourd'hui
+		currentMonth.value = today.getMonth().toString()
+		currentYear.value = today.getFullYear().toString()
+		currentMonthName.value = dayjs(today).format('MMMM')
+		currentYearName.value = today.getFullYear().toString()
 	}
 
 	const emit = defineEmits<{
@@ -210,6 +221,10 @@
 			if (props.readonly) {
 				return
 			}
+			// Ne pas afficher d'erreur si on est sur une perte de focus et si isValidateOnBlur est false
+			if (onblur.value && !props.isValidateOnBlur) {
+				return
+			}
 			// Ne pas afficher d'erreur si on est dans le contexte du mounted initial
 			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
 				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
@@ -550,9 +565,14 @@
 	})
 
 	const validateOnSubmit = () => {
+		// Si le mode noCalendar est activé, on délègue la validation au DateTextInput
 		if (props.noCalendar) {
 			return dateTextInputRef.value?.validateOnSubmit()
 		}
+		// Si le mode combiné est activé, on délègue la validation au ComplexDatePicker
+		else if (props.useCombinedMode) {
+			return complexDatePickerRef.value?.validateOnSubmit()
+		}
 		// Forcer la validation pour ignorer les conditions de validation interactive
 		validateDates(true)
 		// Retourner directement un booléen pour maintenir la compatibilité avec les tests existants
@@ -657,7 +677,10 @@
 
 	const handleInputBlur = () => {
 		emit('blur')
-		validateDates(true)
+		onblur.value = true
+		if (props.isValidateOnBlur) {
+			validateDates(true)
+		}
 	}
 
 	watch(isDatePickerVisible, async (isVisible) => {
@@ -670,15 +693,7 @@
 			resetViewMode()
 		}
 
-		if (isVisible) {
-			// set the focus on the date picker
-			await nextTick()
-			const firstButton = datePickerRef.value?.$el?.querySelector?.('button')
-			if (firstButton) {
-				firstButton.focus({ preventScroll: true })
-			}
-		}
-		else {
+		if (!isVisible) {
 			// set the focus on the text input
 			// wait for VMenu to finish DOM updates & transition
 			setTimeout(() => {
@@ -798,8 +813,9 @@
 		customizeMonthButton()
 	}
 
+	// Ne plus ouvrir automatiquement le calendrier au focus, juste émettre l'événement
 	const openDatePickerOnFocus = () => {
-		openDatePicker()
+		// openDatePicker() - désactivé pour améliorer l'accessibilité
 		emit('focus')
 	}
 
@@ -807,6 +823,22 @@
 		toggleDatePicker()
 	}
 
+	// Gestionnaire d'événement clavier pour l'input
+	const handleInputKeydown = (event: KeyboardEvent) => {
+		// Ouvrir le calendrier uniquement lorsque la touche Entrée est pressée
+		if (event.key === 'Enter') {
+			openDatePicker()
+			event.preventDefault() // Empêcher la soumission du formulaire
+		}
+		// Fermer le calendrier lorsque la touche Escape est pressée
+		else if ((event.key === 'Escape' || event.key === 'Esc') && isDatePickerVisible.value) {
+			isDatePickerVisible.value = false
+			emit('closed')
+			validateDates() // Valider les dates à la fermeture
+			event.preventDefault()
+		}
+	}
+
 	defineExpose({
 		validateOnSubmit,
 		isDatePickerVisible,
@@ -852,6 +884,7 @@
 				:period="props.period"
 				:auto-clamp="props.autoClamp"
 				:display-asterisk="props.displayAsterisk"
+				:is-validate-on-blur="props.isValidateOnBlur"
 				@update:model-value="handleDateTextInputUpdate"
 				@date-selected="handleDateTextInputSelection"
 				@blur="handleInputBlur"
@@ -860,6 +893,7 @@
 		</template>
 		<template v-else-if="props.useCombinedMode">
 			<ComplexDatePicker
+				ref="complexDatePickerRef"
 				:model-value="props.modelValue"
 				:format="props.format"
 				:date-format-return="props.dateFormatReturn"
@@ -891,6 +925,7 @@
 				:auto-clamp="props.autoClamp"
 				:label="props.label"
 				:placeholder="props.placeholder"
+				:is-validate-on-blur="props.isValidateOnBlur"
 				@update:model-value="emit('update:modelValue', $event)"
 				@focus="emit('focus')"
 				@blur="emit('blur')"
@@ -943,6 +978,7 @@
 						@click="openDatePickerOnClick"
 						@focus="openDatePickerOnFocus"
 						@blur="handleInputBlur"
+						@keydown="handleInputKeydown"
 						@update:model-value="updateSelectedDates"
 						@prepend-icon-click="openDatePickerOnIconClick"
 						@append-icon-click="openDatePickerOnIconClick"
@@ -975,7 +1011,7 @@
 					</template>
 					<template #header>
 						<h3 class="mx-auto my-auto ml-5 mb-4">
-							{{ displayedDateString }}
+							{{ selectedDates ? displayedDateString : headerDate }}
 						</h3>
 					</template>
 					<template