@cnamts/synapse 1.0.9 → 1.0.10

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

@@ -73,8 +73,9 @@ ValidationExamples.parameters = {
 			name: 'Script',
 			code: `
 			<script setup>
-				import { ref } from 'vue'
-				import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import { computed, ref, watch } from 'vue';vue'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+import { useDateFormat } from '@/composables/date/useDateFormat';vue'
 
 				// Exemple 1: Validation de base (required)
 				const date1 = ref('')
@@ -140,143 +141,249 @@ BidirectionalValidation.parameters = {
 			name: 'Template',
 			code: `
 			<template>
-				<div class="date-picker-bidirectional-validation">
-					<h1 class="text-h5 mb-6">
-						Validation bidirectionnelle entre deux DatePickers
-					</h1>
-
-					<div class="text-body-2 mb-4">
-						Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
-						<ul class="ml-4">
-							<li>La date de fin doit être postérieure ou égale à la date de début</li>
-							<li>La date de début doit être antérieure ou égale à la date de fin</li>
-							<li>Lorsque la date de début change, la validation de la date de fin est mise à jour</li>
-							<li>Lorsque la date de fin change, la validation de la date de début est mise à jour</li>
-						</ul>
-					</div>
-
-					<div class="date-range-container mb-6">
-						<div class="date-picker-wrapper">
-							<h3 class="text-subtitle-1 mb-2">
-								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 class="text-subtitle-1 mb-2">
-								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="actions mb-4">
-						<v-btn
-							size="small"
-							color="primary"
-							class="mr-2"
-							@click="resetDates"
-						>
-							Réinitialiser
-						</v-btn>
-
-						<v-btn
-							size="small"
-							color="success"
-							class="mr-2"
-							@click="setTestDates"
-						>
-							Dates valides
-						</v-btn>
-
-						<v-btn
-							size="small"
-							color="error"
-							@click="setInvalidDates"
-						>
-							Dates invalides
-						</v-btn>
-					</div>
-
-					<div class="current-values mt-4">
-						<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>
+	<div class="date-picker-bidirectional-validation">
+		<h1 class="text-h5 mb-6">
+			Validation bidirectionnelle entre deux DatePickers
+		</h1>
+
+		<div class="text-body-2 mb-4">
+			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
+			<ul class="ml-4">
+				<li>La date de fin doit être postérieure ou égale à la date de début</li>
+				<li>La date de début doit être antérieure ou égale à la date de fin</li>
+				<li>Lorsque la date de début change, la validation de la date de fin est mise à jour</li>
+				<li>Lorsque la date de fin change, la validation de la date de début est mise à jour</li>
+			</ul>
+		</div>
+
+		<div class="date-range-container mb-6">
+			<div class="date-picker-wrapper">
+				<h3 class="text-subtitle-1 mb-2">
+					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 class="text-subtitle-1 mb-2">
+					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="actions mb-4">
+			<v-btn
+				size="small"
+				color="primary"
+				class="mr-2"
+				@click="resetDates"
+			>
+				Réinitialiser
+			</v-btn>
+
+			<v-btn
+				size="small"
+				color="success"
+				class="mr-2"
+				@click="setTestDates"
+			>
+				Dates valides
+			</v-btn>
+
+			<v-btn
+				size="small"
+				color="error"
+				@click="setInvalidDates"
+			>
+				Dates invalides
+			</v-btn>
+		</div>
+
+		<div class="current-values mt-4">
+			<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 class="mt-6 pa-4 bg-grey-lighten-4 rounded">
+			<h3 class="text-subtitle-1 mb-2">
+				Comment fonctionne la validation bidirectionnelle
+			</h3>
+			<p class="text-body-2">
+				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
+				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.
+			</p>
+			<p class="text-body-2 mt-2">
+				Lorsqu'une date change, un watcher déclenche la validation de l'autre DatePicker. Cela garantit que les messages d'erreur
+				sont toujours à jour, même lorsque les dates sont modifiées dans n'importe quel ordre.
+			</p>
+			<p class="text-body-2 mt-2">
+				Les messages d'erreur apparaissent directement dans les composants DatePicker, ce qui améliore l'expérience utilisateur
+				en fournissant un retour immédiat sur la validité des dates sélectionnées.
+			</p>
+			<p class="text-body-2 mt-2">
+				Vous trouverez le code source dans la story Bidirectional Validation.
+			</p>
+		</div>
+	</div>
+</template>
 			`,
 		},
 		{
 			name: 'Script',
 			code: `
 			<script lang="ts" setup>
-				import { ref, computed, watch } from 'vue'
-				import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
-				import { useDateFormat } from '@/composables/date/useDateFormat'
-
-				const { parseDate } = useDateFormat()
-
-				// État des dates
-				const startDate = ref<string | null>(null)
-				const endDate = ref<string | null>(null)
-
-				// Références aux composants CalendarMode 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ègles de validation et méthodes additionnelles
-				// ...
-
-				// Fonctions pour la démonstration
-				const setTestDates = () => {
-					// Définir dates valides (aujourd'hui et demain)
-				}
-
-				const setInvalidDates = () => {
-					// Définir dates invalides (aujourd'hui et hier)
-				}
-
-				const resetDates = () => {
-					startDate.value = null
-					endDate.value = null
-				}
-			</script>
+	// useDateFormat n'est plus nécessaire avec les règles prédéfinies
+
+	// État des dates
+	const startDate = ref<string | null>(null)
+	const endDate = ref<string | null>(null)
+
+	// Références aux composants CalendarMode pour accéder à leurs méthodes
+	const startDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+	const endDatePickerRef = ref<InstanceType<typeof DatePicker> | null>(null)
+
+	// Les règles de validation sont définies directement dans les computed startDateRules et endDateRules
+
+	// Règles de validation pour la date de début
+	const startDateRules = computed(() => {
+		const rules = [
+			{
+				type: 'required',
+				options: {
+					message: 'La date de début est requise.',
+				},
+			},
+		]
+
+		// Ajouter la règle notAfterDate seulement si endDate.value existe
+		if (endDate.value) {
+			rules.push({
+				type: 'notAfterDate',
+
+				options: {
+					message: 'La date de début ne peut pas être postérieure à la date de fin',
+					date: endDate.value, // Déjà une chaîne au format DD/MM/YYYY
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+				} as any,
+			})
+		}
+
+		return rules
+	})
+
+	// Règles de validation pour la date de fin
+	const endDateRules = computed(() => {
+		const rules = [
+			{
+				type: 'required',
+				options: {
+					message: 'La date de fin est requise.',
+				},
+			},
+		]
+		// Ajouter la règle notBeforeDate seulement si startDate.value existe
+		if (startDate.value) {
+			rules.push({
+				type: 'notBeforeDate',
+
+				options: {
+					message: 'La date de fin ne peut pas être antérieure à la date de début',
+					date: startDate.value, // Déjà une chaîne au format DD/MM/YYYY
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+				} as any,
+			})
+		}
+		return rules
+	})
+
+	// 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)
+	})
+
+	// Fonction pour définir des dates de test
+	const setTestDates = () => {
+		// Définir une date de début (aujourd'hui)
+		const today = new Date()
+		const day = String(today.getDate()).padStart(2, '0')
+		const month = String(today.getMonth() + 1).padStart(2, '0')
+		const year = today.getFullYear()
+		startDate.value = day + '/' + month + '/' + year
+
+		// Définir une date de fin (demain) - pour démontrer une validation valide
+		const tomorrow = new Date(today)
+		tomorrow.setDate(today.getDate() + 1)
+		const tomorrowDay = String(tomorrow.getDate()).padStart(2, '0')
+		const tomorrowMonth = String(tomorrow.getMonth() + 1).padStart(2, '0')
+		const tomorrowYear = tomorrow.getFullYear()
+		endDate.value = tomorrowDay + '/' + tomorrowMonth + '/' + tomorrowYear
+	}
+
+	// Fonction pour définir des dates invalides (date de fin avant date de début)
+	const setInvalidDates = () => {
+		// Définir une date de début (aujourd'hui)
+		const today = new Date()
+		const day = String(today.getDate()).padStart(2, '0')
+		const month = String(today.getMonth() + 1).padStart(2, '0')
+		const year = today.getFullYear()
+		startDate.value = day + '/' + month + '/' + year
+
+		// Définir une date de fin (hier) - pour démontrer une validation invalide
+		const yesterday = new Date(today)
+		yesterday.setDate(today.getDate() - 1)
+		const yesterdayDay = String(yesterday.getDate()).padStart(2, '0')
+		const yesterdayMonth = String(yesterday.getMonth() + 1).padStart(2, '0')
+		const yesterdayYear = yesterday.getFullYear()
+		endDate.value = yesterdayDay + '/' + yesterdayMonth + '/' + yesterdayYear
+	}
+
+	// Fonction pour réinitialiser les dates
+	const resetDates = () => {
+		startDate.value = null
+		endDate.value = null
+	}
+</script>
 			`,
 		},
 		{

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

@@ -10,6 +10,7 @@ interface DatePickerProps {
 	'placeholder'?: string
 	'format'?: string
 	'dateFormatReturn'?: string
+	'density'?: 'default' | 'comfortable' | 'compact'
 	'isBirthDate'?: boolean
 	'birthDate'?: boolean
 	'showWeekNumber'?: boolean
@@ -29,7 +30,6 @@ interface DatePickerProps {
 	'disableErrorHandling'?: boolean
 	'showSuccessMessages'?: boolean
 	'bgColor'?: string
-	'density'?: 'default' | 'comfortable' | 'compact'
 	'hideDetails'?: boolean | 'auto'
 	'displayWeekendDays'?: boolean
 	'displayTodayButton'?: boolean
@@ -68,80 +68,108 @@ const meta = {
 		placeholder: {
 			control: 'text',
 			description: 'Texte indicatif',
+			defaultValue: 'JJ/MM/AAAA - JJ/MM/AAAA',
 		},
 		format: {
 			control: 'select',
 			options: ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'],
 			description: 'Format d\'affichage de la date',
+			defaultValue: 'DD/MM/YYYY',
 		},
 		dateFormatReturn: {
 			control: 'select',
 			options: ['', 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'],
 			description: 'Format de la date pour la valeur de retour',
+			defaultValue: '',
 		},
 		label: {
 			control: 'text',
 			description: 'Libellé du champ',
+			defaultValue: 'Période',
 		},
 		required: {
 			control: 'boolean',
 			description: 'Champ obligatoire',
+			defaultValue: false,
 		},
 		disabled: {
 			control: 'boolean',
 			description: 'Désactive le champ',
+			defaultValue: false,
 		},
 		readonly: {
 			control: 'boolean',
 			description: 'Le champ est en lecture seule',
+			defaultValue: false,
 		},
 		isOutlined: {
 			control: 'boolean',
 			description: 'Affiche le champ en contour',
+			defaultValue: true,
 		},
 		displayIcon: {
 			control: 'boolean',
 			description: 'Affiche l\'icône calendrier',
+			defaultValue: true,
 		},
 		displayAppendIcon: {
 			control: 'boolean',
 			description: 'Icône à la fin du champ',
+			defaultValue: false,
 		},
 		noIcon: {
 			control: 'boolean',
 			description: 'Masque toutes les icônes',
+			defaultValue: false,
 		},
 		customRules: {
 			control: 'object',
 			description: 'Règles de validation',
+			defaultValue: [],
 		},
 		customWarningRules: {
 			control: 'object',
 			description: 'Règles d\'avertissement',
+			defaultValue: [],
 		},
 		displayPrependIcon: {
 			control: 'boolean',
 			description: 'Icône au début du champ',
+			defaultValue: true,
 		},
 		disableErrorHandling: {
 			control: 'boolean',
 			description: 'Désactive la gestion des erreurs par le composant',
+			defaultValue: false,
 		},
 		showSuccessMessages: {
 			control: 'boolean',
 			description: 'Affiche les messages de succès',
+			defaultValue: true,
 		},
 		bgColor: {
 			control: 'color',
 			description: 'Couleur de fond',
+			defaultValue: 'white',
 		},
 		displayRange: {
 			control: 'boolean',
 			description: 'Sélection de plage de dates',
+			defaultValue: true,
 		},
 		noCalendar: {
 			control: 'boolean',
 			description: 'Masque le calendrier',
+			defaultValue: false,
+		},
+		density: {
+			control: 'select',
+			options: ['default', 'comfortable', 'compact'],
+			description: 'Densité du champ, affecte l\'espacement interne et la hauteur (standard Vuetify)',
+			defaultValue: 'default',
+		},
+		title: {
+			control: 'text',
 		},
 	},
 } as Meta<DatePickerProps>

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -13,6 +13,7 @@
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
 	import { useValidation, type ValidationRule, type ValidationResult } from '@/composables/validation/useValidation'
+	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
@@ -34,6 +35,7 @@
 		required?: boolean
 		disabled?: boolean
 		readonly?: boolean
+		title?: string | false
 		isOutlined?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
@@ -47,6 +49,8 @@
 		displayRange?: boolean
 		autoClamp?: boolean
 		isValidateOnBlur?: boolean
+		density?: 'default' | 'comfortable' | 'compact'
+		externalErrorMessages?: string[]
 	}>(), {
 		modelValue: null,
 		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
@@ -56,6 +60,7 @@
 		required: false,
 		disabled: false,
 		readonly: false,
+		title: false,
 		isOutlined: true,
 		displayIcon: true,
 		displayAppendIcon: false,
@@ -69,6 +74,8 @@
 		displayRange: false,
 		autoClamp: true,
 		isValidateOnBlur: true,
+		density: 'default',
+		externalErrorMessages: () => [],
 	})
 
 	const emit = defineEmits<{
@@ -117,7 +124,9 @@
 		}
 
 	const { errors, warnings, successes, hasError, clearValidation, validateField } = validationApi
-	const errorMessages = errors
+
+	// Agrégation des erreurs internes et externes
+	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])
 	const warningMessages = warnings
 	const successMessages = successes
 
@@ -539,6 +548,13 @@
 				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
 				return false
 			}
+			// Permettre aux custom rules de s'exécuter même sur des champs vides
+			// Mais seulement si l'utilisateur a interagi avec le champ
+			if (props.customRules && props.customRules.length > 0 && hasInteracted.value) {
+				// Exécuter les custom rules sur la valeur vide
+				safeValidateField(null, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
+				return !hasError.value
+			}
 			return true
 		}
 
@@ -560,8 +576,8 @@
 						errors.value.push(DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START)
 						return false
 					}
-					safeValidateField(startDate, props.customRules, props.customWarningRules)
-					if (errors.value.length === 0) safeValidateField(endDate, props.customRules, props.customWarningRules)
+					safeValidateField(startDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
+					if (errors.value.length === 0) safeValidateField(endDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
 				}
 			}
 			return !hasError.value
@@ -620,7 +636,7 @@
 
 		if (inputValue.value) {
 			const formatValidationResult = validateDateFormatForSingleOrRange(inputValue.value)
-			const customRulesValidationResult = safeValidateField(inputValue.value, props.customRules, props.customWarningRules)
+			const customRulesValidationResult = safeValidateField(inputValue.value, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
 
 			if (formatValidationResult.isValid && !customRulesValidationResult.hasError && !isRange.value) {
 				const parsedDate = dayjs(inputValue.value, displayFormat.value, true).toDate()
@@ -637,8 +653,11 @@
 			else {
 				runRules(inputValue.value)
 				if (!props.disableErrorHandling && formatValidationResult.message) errors.value.push(formatValidationResult.message)
-				// For invalid input, emit null instead of previous value
-				emitModel(null)
+				// Only emit null for format errors, not for custom rule errors
+				if (!formatValidationResult.isValid) {
+					emitModel(null)
+				}
+				// For custom rule errors with valid format, keep the current value
 			}
 		}
 
@@ -921,6 +940,9 @@
 		return !hasError.value
 	}
 
+	// Intégration avec le système de validation du formulaire
+	useValidatable(validateOnSubmit)
+
 	defineExpose({
 		validateOnSubmit,
 		focus() {
@@ -985,7 +1007,7 @@
 			'warning-field': isOnWarning,
 			'success-field': isOnSuccess,
 		}"
-		:disabled="props.disabled || props.readonly"
+		:disabled="props.disabled"
 		:error-messages="errorMessages"
 		:label="props.label || ''"
 		:placeholder="props.placeholder"
@@ -997,11 +1019,12 @@
 		:success-messages="props.showSuccessMessages ? successMessages : []"
 		:bg-color="props.bgColor"
 		color="primary"
-		is-clearable
+		:is-clearable="!props.readonly"
 		:display-persistent-placeholder="true"
 		:aria-label="ariaLabel || props.placeholder"
 		:is-validate-on-blur="props.isValidateOnBlur"
-		title="Date text input"
+		:density="props.density"
+		:title="props.title || undefined"
 		@focus="onFocus"
 		@blur="onBlur"
 		@keydown="handleKeydown"