@cnamts/synapse 0.0.15-alpha → 0.0.16-alpha

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import DatePicker from './DatePicker.vue'
-import { ref } from 'vue'
+import { ref, watch, computed } from 'vue'
+import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 
 const meta = {
 	title: 'Composants/Formulaires/DatePicker',
@@ -1199,6 +1200,436 @@ export const NoCalendarWithErrorDisabled: Story = {
 	},
 }
 
+export const WithDayjsFormat: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="date"
+							placeholder="Sélectionner une date"
+							format="DD/MM/YYYY"
+						/>
+						<p class="mt-4">Date formatée avec dayjs: {{ formattedDate }}</p>
+						<p>Date parsée avec dayjs: {{ parsedDate ? parsedDate.toLocaleDateString() : 'Aucune date' }}</p>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref, watch } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+					import { useDateFormat } from '@cnamts/synapse'
+
+					const { parseDate, formatDate } = useDateFormat()
+
+					const date = ref('')
+					const formattedDate = ref('')
+					const parsedDate = ref<Date | null>(null)
+
+					watch(date, (newDate) => {
+						if (newDate) {
+							parsedDate.value = parseDate(newDate, 'DD/MM/YYYY')
+							if (parsedDate.value) {
+								formattedDate.value = formatDate(parsedDate.value, 'YYYY-MM-DD')
+							}
+						} else {
+							formattedDate.value = ''
+							parsedDate.value = null
+						}
+					})
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		placeholder: 'Sélectionner une date',
+		format: 'DD/MM/YYYY',
+		isBirthDate: false,
+		showWeekNumber: false,
+		required: false,
+		displayRange: false,
+		displayIcon: true,
+		displayAppendIcon: false,
+		disabled: false,
+		noIcon: false,
+		noCalendar: false,
+		modelValue: '',
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				// Importer le composable useDateFormat depuis useDateFormatDayjs
+				const { parseDate, formatDate } = useDateFormat()
+
+				const date = ref('')
+				const formattedDate = ref('')
+				const parsedDate = ref<Date | null>(null)
+
+				watch(date, (newDate) => {
+					if (newDate) {
+						parsedDate.value = parseDate(newDate, 'DD/MM/YYYY')
+						if (parsedDate.value) {
+							formattedDate.value = formatDate(parsedDate.value, 'YYYY-MM-DD')
+						}
+					}
+					else {
+						formattedDate.value = ''
+						parsedDate.value = null
+					}
+				})
+
+				return { date, formattedDate, parsedDate }
+			},
+
+			template: `
+				<div class="pa-4">
+					<DatePicker
+						v-model="date"
+						placeholder="Sélectionner une date"
+						format="DD/MM/YYYY"
+					/>
+					<p class="mt-4">Date formatée avec dayjs: {{ formattedDate }}</p>
+					<p>Date parsée avec dayjs: {{ parsedDate ? parsedDate.toLocaleDateString() : 'Aucune date' }}</p>
+				</div>
+			`,
+		}
+	},
+}
+
+export const BidirectionalValidation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div class="date-validation-playground">
+						<h1>Validation bidirectionnelle des dates</h1>
+						<p class="description">
+							Démonstration de la validation bidirectionnelle entre les DatePickers.
+							Les messages d'erreur apparaissent directement dans les composants.
+						</p>
+						<div class="date-range-container">
+							<div class="date-picker-wrapper">
+								<h3>Date de début</h3>
+								<DatePicker
+									ref="startDatePickerRef"
+									v-model="startDate"
+									placeholder="Date de début"
+									:custom-rules="startDateRules"
+									required
+									@update:model-value="validateEndDate"
+								/>
+							</div>
+							<div class="date-picker-wrapper">
+								<h3>Date de fin</h3>
+								<DatePicker
+									ref="endDatePickerRef"
+									v-model="endDate"
+									placeholder="Date de fin"
+									:custom-rules="endDateRules"
+									required
+									@update:model-value="validateStartDate"
+								/>
+							</div>
+						</div>
+						<div class="current-values">
+							<p><strong>Date de début:</strong> {{ startDate || 'Non sélectionnée' }}</p>
+							<p><strong>Date de fin:</strong> {{ endDate || 'Non sélectionnée' }}</p>
+						</div>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script lang="ts" setup>
+					import { ref, watch, computed } from 'vue'
+					import DatePicker from '@cnamts/synapse'
+					import { useDateFormat } from '@cnamts/synapse'
+
+					const { parseDate } = useDateFormat()
+
+					// État des dates
+					const startDate = ref<string | null>(null)
+					const endDate = ref<string | null>(null)
+
+					// Références aux composants DatePicker pour accéder à leurs méthodes
+					const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+					const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+
+					// Règle de validation pour vérifier que la date de fin n'est pas avant la date de début
+					const createEndDateValidationRule = () => ({
+						type: 'custom',
+						options: {
+							validate: (value: string) => {
+								// Si pas de valeur pour la date de fin, pas besoin de validation
+								if (!value) return true
+
+								// Si pas de date de début mais une date de fin, afficher l'erreur
+								if (!startDate.value) return 'Veuillez d'abord sélectionner une date de début'
+
+								const start = parseDate(startDate.value, 'DD/MM/YYYY')
+								const end = parseDate(value, 'DD/MM/YYYY')
+
+								if (!start || !end) return true
+
+								return end >= start || 'La date de fin ne peut pas être antérieure à la date de début'
+							},
+							message: 'La date de fin ne peut pas être antérieure à la date de début',
+						},
+					})
+
+					// Règle de validation pour vérifier que la date de début n'est pas après la date de fin
+					const createStartDateValidationRule = () => ({
+						type: 'custom',
+						options: {
+							validate: (value: string) => {
+								// Si pas de valeur pour la date de début ou pas de date de fin, pas besoin de validation
+								if (!value || !endDate.value) return true
+
+								const start = parseDate(value, 'DD/MM/YYYY')
+								const end = parseDate(endDate.value, 'DD/MM/YYYY')
+
+								if (!start || !end) return true
+
+								return start <= end || 'La date de début ne peut pas être postérieure à la date de fin'
+							},
+							message: 'La date de début ne peut pas être postérieure à la date de fin',
+						},
+					})
+
+					// Règles de validation pour la date de début
+					const startDateRules = computed(() => [
+						{
+							type: 'required',
+							options: {
+								message: 'La date de début est requise.',
+							},
+						},
+						createStartDateValidationRule(),
+					])
+
+					// Règles de validation pour la date de fin
+					const endDateRules = computed(() => [
+						{
+							type: 'required',
+							options: {
+								message: 'La date de fin est requise.',
+							},
+						},
+						createEndDateValidationRule(),
+					])
+
+					// Fonction pour forcer la validation de la date de fin quand la date de début change
+					const validateEndDate = () => {
+						if (endDatePickerRef.value && endDate.value) {
+							// On utilise validateOnSubmit pour forcer la validation complète
+							endDatePickerRef.value.validateOnSubmit()
+						}
+					}
+
+					// Fonction pour forcer la validation de la date de début quand la date de fin change
+					const validateStartDate = () => {
+						if (startDatePickerRef.value && startDate.value) {
+							// On utilise validateOnSubmit pour forcer la validation complète
+							startDatePickerRef.value.validateOnSubmit()
+						}
+					}
+
+					// Watcher pour la date de début qui force la revalidation de la date de fin
+					watch(startDate, () => {
+						// Laisser le temps au système de mettre à jour les valeurs
+						setTimeout(() => {
+							validateEndDate()
+						}, 0)
+					})
+
+					// Watcher pour la date de fin qui force la revalidation de la date de début
+					watch(endDate, () => {
+						// Laisser le temps au système de mettre à jour les valeurs
+						setTimeout(() => {
+							validateStartDate()
+						}, 0)
+					})
+				</script>
+				`,
+			},
+		],
+	},
+	render: () => {
+		return {
+			components: { DatePicker },
+			setup() {
+				// Importer le composable useDateFormat depuis useDateFormatDayjs
+				const { parseDate } = useDateFormat()
+
+				// État des dates
+				const startDate = ref<string | null>(null)
+				const endDate = ref<string | null>(null)
+
+				// Références aux composants DatePicker pour accéder à leurs méthodes
+				const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+				const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+
+				// Règle de validation pour vérifier que la date de fin n'est pas avant la date de début
+				const createEndDateValidationRule = () => ({
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							// Si pas de valeur pour la date de fin, pas besoin de validation
+							if (!value) return true
+
+							// Si pas de date de début mais une date de fin, afficher l'erreur
+							if (!startDate.value) return 'Veuillez d\'abord sélectionner une date de début'
+
+							const start = parseDate(startDate.value, 'DD/MM/YYYY')
+							const end = parseDate(value, 'DD/MM/YYYY')
+
+							if (!start || !end) return true
+
+							return end >= start || 'La date de fin ne peut pas être antérieure à la date de début'
+						},
+						message: 'La date de fin ne peut pas être antérieure à la date de début',
+					},
+				})
+
+				// Règle de validation pour vérifier que la date de début n'est pas après la date de fin
+				const createStartDateValidationRule = () => ({
+					type: 'custom',
+					options: {
+						validate: (value: string) => {
+							// Si pas de valeur pour la date de début ou pas de date de fin, pas besoin de validation
+							if (!value || !endDate.value) return true
+
+							const start = parseDate(value, 'DD/MM/YYYY')
+							const end = parseDate(endDate.value, 'DD/MM/YYYY')
+
+							if (!start || !end) return true
+
+							return start <= end || 'La date de début ne peut pas être postérieure à la date de fin'
+						},
+						message: 'La date de début ne peut pas être postérieure à la date de fin',
+					},
+				})
+
+				// Règles de validation pour la date de début
+				const startDateRules = computed(() => [
+					{
+						type: 'required',
+						options: {
+							message: 'La date de début est requise.',
+						},
+					},
+					createStartDateValidationRule(),
+				])
+
+				// Règles de validation pour la date de fin
+				const endDateRules = computed(() => [
+					{
+						type: 'required',
+						options: {
+							message: 'La date de fin est requise.',
+						},
+					},
+					createEndDateValidationRule(),
+				])
+
+				// Fonction pour forcer la validation de la date de fin quand la date de début change
+				const validateEndDate = () => {
+					if (endDatePickerRef.value && endDate.value) {
+						// On utilise validateOnSubmit pour forcer la validation complète
+						endDatePickerRef.value.validateOnSubmit()
+					}
+				}
+
+				// Fonction pour forcer la validation de la date de début quand la date de fin change
+				const validateStartDate = () => {
+					if (startDatePickerRef.value && startDate.value) {
+						// On utilise validateOnSubmit pour forcer la validation complète
+						startDatePickerRef.value.validateOnSubmit()
+					}
+				}
+
+				// Watcher pour la date de début qui force la revalidation de la date de fin
+				watch(startDate, () => {
+					// Laisser le temps au système de mettre à jour les valeurs
+					setTimeout(() => {
+						validateEndDate()
+					}, 0)
+				})
+
+				// Watcher pour la date de fin qui force la revalidation de la date de début
+				watch(endDate, () => {
+					// Laisser le temps au système de mettre à jour les valeurs
+					setTimeout(() => {
+						validateStartDate()
+					}, 0)
+				})
+
+				return {
+					startDate,
+					endDate,
+					startDatePickerRef,
+					endDatePickerRef,
+					startDateRules,
+					endDateRules,
+					validateEndDate,
+					validateStartDate,
+				}
+			},
+
+			template: `
+				<div class="date-validation-playground">
+					<h1>Validation bidirectionnelle des dates</h1>
+					<p class="description">
+						Démonstration de la validation bidirectionnelle entre les DatePickers.
+						Les messages d'erreur apparaissent directement dans les composants.
+					</p>
+					<div class="date-range-container">
+						<div class="date-picker-wrapper">
+							<h3>Date de début</h3>
+							<DatePicker
+								ref="startDatePickerRef"
+								v-model="startDate"
+								placeholder="Date de début"
+								:custom-rules="startDateRules"
+								required
+								@update:model-value="validateEndDate"
+							/>
+						</div>
+						<div class="date-picker-wrapper">
+							<h3>Date de fin</h3>
+							<DatePicker
+								ref="endDatePickerRef"
+								v-model="endDate"
+								placeholder="Date de fin"
+								:custom-rules="endDateRules"
+								required
+								@update:model-value="validateStartDate"
+							/>
+						</div>
+					</div>
+					<div class="current-values">
+						<p><strong>Date de début:</strong> {{ startDate || 'Non sélectionnée' }}</p>
+						<p><strong>Date de fin:</strong> {{ endDate || 'Non sélectionnée' }}</p>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const WithFormSubmission: Story = {
 	parameters: {
 		sourceCode: [

package/src/components/DatePicker/DatePicker.vue

@@ -4,9 +4,14 @@
 	import DateTextInput from './DateTextInput.vue'
 	import { VDatePicker } from 'vuetify/components'
 	import { useValidation } from '@/composables/validation/useValidation'
-	import { useDateFormat } from '@/composables/date/useDateFormat'
-	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitialization'
+	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
+	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
+	import dayjs from 'dayjs'
+	import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+	// Initialiser les plugins dayjs
+	dayjs.extend(customParseFormat)
 
 	const { parseDate, formatDate } = useDateFormat()
 	const { initializeSelectedDates } = useDateInitialization()
@@ -93,7 +98,7 @@
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
 
-	// Déclaration de la fonction validateDates avant son utilisation
+	// Fonction pour valider les dates
 	const validateDates = (forceValidation = false) => {
 		if (props.noCalendar) {
 			// En mode no-calendar, on délègue la validation au DateTextInput
@@ -320,6 +325,13 @@
 		}
 	})
 
+	// Fonction pour mettre à jour displayFormattedDate quand le VDatePicker change
+	const updateDisplayFormattedDate = () => {
+		if (displayFormattedDateComputed.value) {
+			displayFormattedDate.value = displayFormattedDateComputed.value
+		}
+	}
+
 	const updateSelectedDates = (input: DateValue) => {
 		if (Array.isArray(input)) {
 			const dates = input
@@ -354,11 +366,7 @@
 	}
 
 	const todayInString = computed(() => {
-		return (new Date().toLocaleDateString('fr-FR', {
-			weekday: 'long',
-			month: 'long',
-			day: 'numeric',
-		})).replace(/\b\w/g, l => l.toUpperCase())
+		return dayjs().locale('fr').format('dddd D MMMM').replace(/\b\w/g, l => l.toUpperCase())
 	})
 
 	onMounted(() => {
@@ -377,7 +385,7 @@
 		document.removeEventListener('click', handleClickOutside)
 	})
 
-	const dateTextInputRef = ref<null | ComponentPublicInstance< typeof DateTextInput>>()
+	const dateTextInputRef = ref<null | ComponentPublicInstance<typeof DateTextInput>>()
 	const dateCalendarTextInputRef = ref<null | ComponentPublicInstance<typeof SyTextField>>()
 	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
 
@@ -391,19 +399,10 @@
 		return errors.value.length === 0
 	}
 
-	const showDatePicker = () => {
-		if (props.disabled || props.readonly) return
-
-		isDatePickerVisible.value = true
-
-		// Mettre à jour l'accessibilité après l'ouverture du DatePicker
-		nextTick(() => {
-			updateAccessibility()
-		})
-	}
-
 	const openDatePicker = () => {
-		showDatePicker()
+		if (!isDatePickerVisible.value) {
+			toggleDatePicker()
+		}
 	}
 
 	type ViewMode = 'month' | 'year' | 'months' | undefined
@@ -411,6 +410,10 @@
 	// Variable pour suivre le mode d'affichage actuel du DatePicker
 	const currentViewMode = ref<ViewMode>(props.isBirthDate ? 'year' : 'month')
 
+	watch(() => props.isBirthDate, (newValue) => {
+		currentViewMode.value = newValue ? 'year' : 'month'
+	})
+
 	// Fonction pour gérer le changement de mode d'affichage
 	const handleViewModeUpdate = (newMode: ViewMode) => {
 		currentViewMode.value = newMode
@@ -432,6 +435,11 @@
 		}
 	}
 
+	const handleInputBlur = () => {
+		emit('blur')
+		validateDates(true)
+	}
+
 	watch(isDatePickerVisible, async (isVisible) => {
 		if (!isVisible && props.isBirthDate) {
 			// Réinitialiser le mode d'affichage au type birthdate
@@ -526,6 +534,36 @@
 		}
 	}, { immediate: true })
 
+	const toggleDatePicker = () => {
+		if (props.disabled || props.readonly) return
+
+		isDatePickerVisible.value = !isDatePickerVisible.value
+
+		if (isDatePickerVisible.value) {
+			// Mettre à jour l'accessibilité après l'ouverture du DatePicker
+			nextTick(() => {
+				updateAccessibility()
+			})
+		}
+		else {
+			emit('closed')
+			validateDates()
+		}
+	}
+
+	const openDatePickerOnClick = () => {
+		openDatePicker()
+	}
+
+	const openDatePickerOnFocus = () => {
+		openDatePicker()
+		emit('focus')
+	}
+
+	const openDatePickerOnIconClick = () => {
+		toggleDatePicker()
+	}
+
 	defineExpose({
 		validateOnSubmit,
 		isDatePickerVisible,
@@ -596,6 +634,7 @@
 						:warning-messages="warningMessages"
 						:success-messages="props.showSuccessMessages ? successMessages : []"
 						:disabled="props.disabled"
+						:disable-click-button="false"
 						:readonly="true"
 						:label="props.placeholder"
 						:no-icon="props.noIcon"
@@ -606,10 +645,12 @@
 						:bg-color="props.bgColor"
 						is-clearable
 						title="Date Picker"
-						@focus="openDatePicker"
+						@click="openDatePickerOnClick"
+						@focus="openDatePickerOnFocus"
+						@blur="handleInputBlur"
 						@update:model-value="updateSelectedDates"
-						@prepend-icon-click="openDatePicker"
-						@append-icon-click="openDatePicker"
+						@prepend-icon-click="openDatePickerOnIconClick"
+						@append-icon-click="openDatePickerOnIconClick"
 					/>
 				</template>
 				<VDatePicker
@@ -625,6 +666,7 @@
 					@update:view-mode="handleViewModeUpdate"
 					@update:year="handleYearUpdate"
 					@update:month="handleMonthUpdate"
+					@update:model-value="updateDisplayFormattedDate"
 				>
 					<template #title>
 						Sélectionnez une date

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

@@ -1,5 +1,6 @@
 import { type Meta, type StoryFn } from '@storybook/vue3'
-import DatePickerValidationExamples from './DatePickerValidationExamples.vue'
+import DatePickerValidationExamples from './docExamples/DatePickerValidationExamples.vue'
+import DatePickerBidirectionalValidation from './docExamples/DatePickerBidirectionalValidation.vue'
 
 export default {
 	title: 'Composants/Formulaires/DatePicker/Validation',
@@ -20,3 +21,10 @@ export const ValidationExamples: StoryFn = () => ({
 	},
 	template: '<DatePickerValidationExamples />',
 })
+
+export const BidirectionalValidation: StoryFn = () => ({
+	components: {
+		DatePickerBidirectionalValidation,
+	},
+	template: '<DatePickerBidirectionalValidation />',
+})