@cnamts/synapse 1.0.5 → 1.0.7

package/src/components/DataListItem/DataListItem.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { computed } from 'vue'
 	import { useTheme } from 'vuetify'
-
-	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
-
+	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 	import { config } from './config'
 	import { locales } from './locales'
 
@@ -34,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)'
 	})
 
@@ -46,87 +45,95 @@
 		}
 		return props.value || props.placeholder
 	})
+
+	const actionButtonColor = computed(() => {
+		return theme.current.value.dark ? 'white' : 'primary'
+	})
 </script>
 
 <template>
-	<li class="sy-data-list-item d-flex flex-wrap">
-		<slot name="icon">
-			<VIcon
-				v-if="icon"
-				v-bind="options.icon"
+	<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 }"
 			>
-				{{ icon }}
-			</VIcon>
-		</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 }"
+				<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>
-
-						<span
-							v-else-if="renderHtmlValue"
-							class="text-body-1"
-							v-html="itemValue"
-						/>
-
-						<span
-							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>
-	</li>
+		</dd>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .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-value.has-icon {
+	margin-left: 2.5rem;
+}
+
 .sy-data-list-item-action-btn.v-btn {
-	min-width: 0;
-	margin: 0 -1px;
+	&:focus-visible::after {
+		opacity: 1;
+	}
 }
 
 .v-icon.v-theme--light {

package/src/components/DataListItem/config.ts

@@ -2,7 +2,7 @@ import type { VariantType } from '@/types/vuetifyTypes'
 
 export const config = {
 	icon: {
-		size: 24,
+		size: '24',
 		class: 'mr-4 mt-2',
 	},
 	chip: {

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)
@@ -275,8 +290,13 @@
 			try {
 				isUpdatingFromInternal.value = true
 				if (Array.isArray(newValue)) {
-					// Pour les plages de dates, utiliser la première date
-					if (newValue.length > 0) {
+					// Pour les plages de dates, formater correctement la plage complète
+					if (props.displayRange && newValue.length >= 2) {
+						// Formater la plage complète pour l'affichage
+						textInputValue.value = `${formatDate(newValue[0], props.format)} - ${formatDate(newValue[1], props.format)}`
+					}
+					else if (newValue.length > 0) {
+						// Si on n'a qu'une date ou mode non-range, utiliser la première date
 						textInputValue.value = formatDate(newValue[0], props.format)
 					}
 				}
@@ -545,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
@@ -652,7 +677,10 @@
 
 	const handleInputBlur = () => {
 		emit('blur')
-		validateDates(true)
+		onblur.value = true
+		if (props.isValidateOnBlur) {
+			validateDates(true)
+		}
 	}
 
 	watch(isDatePickerVisible, async (isVisible) => {
@@ -665,22 +693,14 @@
 			resetViewMode()
 		}
 
-		if (isVisible) {
-			// set the focus on the date picker
-			await nextTick()
-			const firstButton = datePickerRef.value?.$el.querySelector('button')
-			if (firstButton) {
-				firstButton.focus()
-			}
-		}
-		else {
+		if (!isVisible) {
 			// set the focus on the text input
 			// wait for VMenu to finish DOM updates & transition
 			setTimeout(() => {
 				requestAnimationFrame(() => {
-					const inputElement = dateCalendarTextInputRef.value?.$el?.querySelector('input')
+					const inputElement = dateCalendarTextInputRef.value?.$el?.querySelector?.('input')
 					if (inputElement) {
-						inputElement.focus()
+						inputElement.focus({ preventScroll: true })
 						isDatePickerVisible.value = false
 					}
 				})
@@ -793,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')
 	}
 
@@ -802,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,
@@ -847,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"
@@ -855,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"
@@ -886,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')"
@@ -901,7 +941,7 @@
 				location="bottom"
 				:close-on-content-click="false"
 				:open-on-click="false"
-				scroll-strategy="none"
+				scroll-strategy="reposition"
 				transition="fade-transition"
 				attach="body"
 				:offset="[-20, 5]"
@@ -938,6 +978,7 @@
 						@click="openDatePickerOnClick"
 						@focus="openDatePickerOnFocus"
 						@blur="handleInputBlur"
+						@keydown="handleInputKeydown"
 						@update:model-value="updateSelectedDates"
 						@prepend-icon-click="openDatePickerOnIconClick"
 						@append-icon-click="openDatePickerOnIconClick"
@@ -970,7 +1011,7 @@
 					</template>
 					<template #header>
 						<h3 class="mx-auto my-auto ml-5 mb-4">
-							{{ displayedDateString }}
+							{{ selectedDates ? displayedDateString : headerDate }}
 						</h3>
 					</template>
 					<template

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

@@ -1305,3 +1305,177 @@ export const WithFormSubmission: Story = {
 		}
 	},
 }
+
+export const CustomRules: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+					<template>
+						<DatePicker
+							v-model="date"
+							placeholder="Date requise"
+							format="DD/MM/YYYY"
+							required
+							class="mb-4"
+							useCombinedMode
+							:customRules="customRules"
+						/>
+					</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+					<script setup lang="ts">
+						import { DatePicker } from '@cnamts/synapse'
+						import { ref } from 'vue'
+						
+						const date = ref('')
+
+						const customRules = [
+						{
+							type: 'notBeforeToday',
+							options: {
+								message: 'La date ne peut pas être antérieure à aujourd'hui',
+							},
+					},
+				]
+					</script>
+				`,
+			},
+		],
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				const customRules = [
+					{
+						type: 'notBeforeToday',
+						options: {
+							message: 'La date ne peut pas être antérieure à aujourd\'hui',
+						},
+					},
+				]
+
+				// Valeur du DatePicker
+				const date = ref(null)
+
+				return { date, customRules }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<DatePicker
+						v-model="date"
+						:custom-rules="customRules"
+						required
+						use-combined-mode
+						label="Date de rendez-vous"
+				placeholder="JJ/MM/AAAA"
+			/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const CustomWarningRules: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+					<template>
+						<DatePicker
+							v-model="date"
+							placeholder="Date requise"
+							format="DD/MM/YYYY"
+							required
+							class="mb-4"
+							useCombinedMode
+							:customWarningRules="customWarningRules"
+						/>
+					</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+					<script setup lang="ts">
+						import { DatePicker } from '@cnamts/synapse'
+						import { ref } from 'vue'
+						
+						const date = ref('')
+						const customWarningRules = [
+							{
+								type: 'custom',
+								options: {
+									validate: (value: string | Date) => {
+										// check if manual entry
+										if (typeof value === 'string') {
+											return !value.includes('2025')
+										} else {
+											// check if DatePicker selection
+											return !value.getFullYear().toString().includes('2025')
+										}
+									},
+									warningMessage: 'Les dates en 2025 ne sont pas autorisées',
+									successMessage: 'Date hors 2025',
+									fieldIdentifier: 'date',
+								},
+							},
+						]
+					</script>
+				`,
+			},
+		],
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				const customWarningRules = [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string | Date) => {
+								// check typeof value
+								if (typeof value === 'string') {
+									return !value.includes('2025')
+								}
+								else {
+									// check if value is a Date
+									return !value.getFullYear().toString().includes('2025')
+								}
+							},
+							warningMessage: 'Les dates en 2025 ne sont pas autorisées',
+							successMessage: 'Date hors 2025',
+							fieldIdentifier: 'date',
+							isWarning: true,
+						},
+					},
+				]
+
+				// Valeur du DatePicker
+				const date = ref('')
+
+				return { date, customWarningRules }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<DatePicker
+						v-model="date"
+						:custom-warning-rules="customWarningRules"
+						required
+						use-combined-mode
+						label="Date de rendez-vous"
+						placeholder="JJ/MM/AAAA"
+				/>
+				</div>
+			`,
+		}
+	},
+
+}