@cnamts/synapse 0.0.14-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: [