@cnamts/synapse 1.0.4 → 1.0.6

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>
+			`,
+		}
+	},
+
+}

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -339,7 +339,27 @@
 	// Assignation des fonctions et variables retournées par le composable
 	// Utiliser une fonction pour wrapper updateSelectedDates afin de maintenir la compatibilité avec le template
 	const updateSelectedDates = (date: Date | null) => {
+		// Avant de mettre à jour la date, vérifier qu'elle est valide selon nos règles personnalisées
+		if (date !== null) {
+			// Appliquer les règles personnalisées directement à la date sélectionnée
+			const validationResult = validateField(date, props.customRules, props.customWarningRules)
+
+			// Si la date est invalide selon nos règles, ne pas mettre à jour et afficher l'erreur
+			if (validationResult.hasError) {
+				// Mettre à jour les messages d'erreur
+				errors.value = validationResult.state.errors
+				return // Ne pas continuer la mise à jour
+			}
+		}
+
+		// Si la date est valide ou null, on poursuit normalement
 		dateSelectionResult.updateSelectedDates(date)
+
+		// Forcer une validation immédiate après la mise à jour des dates
+		// pour s'assurer que les messages s'affichent
+		setTimeout(() => {
+			validateDates(true)
+		}, 0)
 	}
 	// generateDateRange est maintenant utilisé via le composable useInputHandler
 	// Synchroniser notre référence locale avec celle du composable
@@ -654,7 +674,7 @@
 		}
 
 		// Si c'est une valeur string (venant du DateTextInput)
-		const inputElement = dateCalendarTextInputRef.value?.$el?.querySelector('input')
+		const inputElement = dateCalendarTextInputRef.value?.$el?.querySelector?.('input')
 		if (!inputElement) return
 
 		// Mettre à jour la valeur du modèle directement
@@ -756,9 +776,9 @@
 
 			// set the focus on the date picker
 			await nextTick()
-			const firstButton = datePickerRef.value?.$el.querySelector('button')
+			const firstButton = datePickerRef.value?.$el?.querySelector?.('button')
 			if (firstButton) {
-				firstButton.focus()
+				firstButton.focus({ preventScroll: true })
 			}
 		}
 		else {
@@ -766,9 +786,9 @@
 			// 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
 					}
 				})
@@ -1178,6 +1198,8 @@
 					:view-mode="currentViewMode"
 					:max="maxDate"
 					:min="minDate"
+					:custom-rules="props.customRules"
+					:custom-warning-rules="props.customWarningRules"
 					:display-holiday-days="props.displayHolidayDays"
 					:display-asterisk="props.displayAsterisk"
 					@update:model-value="updateDisplayFormattedDate"

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

@@ -22,9 +22,295 @@ export const ValidationExamples: StoryFn = () => ({
 	template: '<DatePickerValidationExamples />',
 })
 
+ValidationExamples.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<template>
+				<div class="date-picker-validation-examples">
+					<h1 class="text-h5 mb-6">
+						Exemples de validation du DatePicker
+					</h1>
+
+					<!-- Exemple 1: Validation de base (required) -->
+					<section class="mb-10">
+						<h2 class="text-h6 mb-3">
+							Validation de base (required)
+						</h2>
+						<div class="mb-2">
+							<DatePicker
+								v-model="date1"
+								placeholder="Date requise"
+								required
+							/>
+						</div>
+						<v-btn
+							size="small"
+							color="primary"
+							@click="date1 = ''"
+						>
+							Vider le champ
+						</v-btn>
+						<v-btn
+							size="small"
+							class="ml-2"
+							@click="date1 = today"
+						>
+							Remplir le champ
+						</v-btn>
+						<div class="mt-2">
+							Valeur actuelle: {{ date1 }}
+						</div>
+					</section>
+
+					<!-- Autres exemples de validation -->
+				</div>
+			</template>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup>
+				import { ref } from 'vue'
+				import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+
+				// Exemple 1: Validation de base (required)
+				const date1 = ref('')
+
+				// Exemple 2: notWeekend
+				const date2 = ref('')
+
+				// Exemple 3: notAfterToday
+				const date3 = ref('')
+
+				// Exemple 4: notBeforeToday
+				const date4 = ref('')
+
+				// Exemple 5: notBeforeDate
+				const date5 = ref('')
+
+				// Exemple 6: notAfterDate
+				const date6 = ref('')
+
+				// Exemple 7: dateExact
+				const date7 = ref('')
+
+				// Exemple 8: customRules (règle personnalisée)
+				const date8 = ref('')
+
+				// Exemple 9: customWarningRules
+				const date9 = ref('')
+
+				// Exemple 10: Combinaison de plusieurs règles
+				const date10 = ref('')
+
+				const today = new Date().toLocaleDateString('fr-FR', {
+					day: '2-digit',
+					month: '2-digit',
+					year: 'numeric',
+				})
+				const tomorrow = new Date(Date.now() + 86400000).toLocaleDateString('fr-FR', {
+					day: '2-digit',
+					month: '2-digit',
+					year: 'numeric',
+				})
+				const yesterday = new Date(Date.now() - 86400000).toLocaleDateString('fr-FR', {
+					day: '2-digit',
+					month: '2-digit',
+					year: 'numeric',
+				})
+			</script>
+			`,
+		},
+	],
+}
+
 export const BidirectionalValidation: StoryFn = () => ({
 	components: {
 		DatePickerBidirectionalValidation,
 	},
 	template: '<DatePickerBidirectionalValidation />',
 })
+
+BidirectionalValidation.parameters = {
+	sourceCode: [
+		{
+			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>
+			`,
+		},
+		{
+			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>
+			`,
+		},
+		{
+			name: 'Style',
+			code: `
+			<style scoped>
+			.date-picker-bidirectional-validation {
+				padding: 20px;
+				max-width: 800px;
+				margin: 0 auto;
+			}
+
+			.date-range-container {
+				display: flex;
+				gap: 20px;
+			}
+
+			.date-picker-wrapper {
+				flex: 1;
+			}
+
+			.actions {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 8px;
+			}
+
+			.current-values {
+				padding: 15px;
+				background-color: #f5f5f5;
+				border-radius: 4px;
+			}
+			</style>
+			`,
+		},
+	],
+}

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

@@ -241,7 +241,7 @@ export const WithInitialValue: Story = {
 		'onClosed': fn(),
 	},
 	render(args) {
-		const dateRange = ref<string | null>('01/06/2025 - 30/06/2025')
+		const dateRange = ref<string | [string, string] | null>('01/06/2025 - 30/06/2025')
 		return {
 			components: { DatePicker },
 			setup() {

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

@@ -3,6 +3,7 @@
 	import { nextTick } from 'vue'
 	import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
 	import { useValidation, type ValidationRule, type ValidationResult } from '@/composables/validation/useValidation'
+	import { type CustomRule } from '../utils/validationUtils'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
 	import { useDateRangeInput, useDateRangeValidation, useDateFormatValidation, useDateValidation, useDateInputEditing, useManualDateValidation, useDateAutoClamp } from '../composables'
@@ -252,8 +253,8 @@
 		format: props.format,
 		required: props.required,
 		disableErrorHandling: props.disableErrorHandling,
-		customRules: props.customRules,
-		customWarningRules: props.customWarningRules,
+		customRules: props.customRules as CustomRule[],
+		customWarningRules: props.customWarningRules as CustomRule[],
 		hasInteracted,
 		errors,
 		clearValidation,
@@ -477,7 +478,7 @@
 				}
 			}
 
-			const input = inputRef.value?.$el.querySelector('input')
+			const input = inputRef.value?.$el?.querySelector?.('input')
 			const cursorPos = input?.selectionStart || 0
 
 			// Utiliser le composable de plage de dates si le mode plage est activé
@@ -545,21 +546,8 @@
 					// Si la plage est complète (deux dates)
 					if (result.isComplete && result.dates[1]) {
 						const [startDate, endDate] = result.dates
-
 						// Vérifier si la plage est valide
-						if (isValidRange(startDate, endDate)) {
-							// Formater les dates pour le modèle
-							const returnFormat = props.dateFormatReturn || props.format
-							const modelValue: [string, string] = [
-								formatDate(startDate, returnFormat),
-								formatDate(endDate, returnFormat),
-							]
-
-							// Émettre les événements
-							emit('update:model-value', modelValue)
-							emit('date-selected', modelValue)
-						}
-						else {
+						if (!isValidRange(startDate, endDate)) {
 							errors.value.push(DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START)
 						}
 					}
@@ -571,9 +559,6 @@
 
 						// Émettre l'événement date-selected pour la première date
 						emit('date-selected', formattedDate)
-
-						// Note: Nous n'émettons pas update:model-value avec un tableau contenant null
-						// car le type DateValue n'accepte que [string, string] pour les plages
 					}
 				}
 				else {
@@ -729,18 +714,35 @@
 			const validation = validateDateFormat(inputValue.value)
 			// check si pas d'erreur des rules
 			const checkRules = validateField(inputValue.value, props.customRules, props.customWarningRules)
-			if (validation.isValid && !checkRules.hasError) {
+			if (validation.isValid && !checkRules.hasError && !props.displayRange) {
 				// Si le format est valide, la date est également valide grâce à notre correction dans useDateFormatValidation
 				const formattedDate = props.dateFormatReturn
 					? dayjs(inputValue.value, props.format).format(props.dateFormatReturn)
 					: inputValue.value
 				emit('update:model-value', formattedDate)
 			}
+			else if (validation.isValid && !checkRules.hasError && props.displayRange) {
+				// If the input is a range (contains ' - '), split it into a tuple [string, string]
+				if (typeof inputValue.value === 'string' && inputValue.value.includes(' - ')) {
+					const parts = inputValue.value.split(' - ')
+					if (parts.length === 2) {
+						emit('update:model-value', [parts[0], parts[1]])
+					}
+					else {
+						// If we don't have exactly two parts, use original value
+						emit('update:model-value', inputValue.value)
+					}
+				}
+				else {
+					emit('update:model-value', inputValue.value)
+				}
+			}
 			else {
+				validateRules(inputValue.value)
 				// Si le format n'est pas valide ou si la date est invalide, ajouter le message d'erreur
-				clearValidation()
 				errors.value.push(validation.message)
 				emit('update:model-value', props.modelValue)
+				clearValidation()
 			}
 		}
 
@@ -828,7 +830,6 @@
 		if (props.displayRange && inputValue.value) {
 			// Utiliser le composable pour analyser la plage de dates
 			const [startDate, endDate] = parseRangeInput(inputValue.value)
-
 			// Si nous avons une plage complète (deux dates)
 			if (startDate && endDate) {
 				// Vérifier si la plage est valide (date de fin >= date de début)
@@ -848,11 +849,8 @@
 
 				// Plage valide, mettre à jour le modèle
 				const returnFormat = props.dateFormatReturn || props.format
-				const modelValue: [string, string] = [
-					formatDate(startDate, returnFormat),
-					formatDate(endDate, returnFormat),
-				]
-				emit('update:model-value', modelValue)
+
+				emit('update:model-value', [formatDate(startDate, returnFormat), formatDate(endDate, returnFormat)])
 				validateRules(inputValue.value)
 				return
 			}
@@ -958,14 +956,14 @@
 		focus() {
 			// Utiliser un sélecteur plus spécifique pour cibler l'input principal
 			// SyTextField peut contenir plusieurs inputs, donc on cible le premier qui n'est pas caché
-			const input = inputRef.value?.$el.querySelector('input:not([type="hidden"])')
+			const input = inputRef.value?.$el?.querySelector?.('input:not([type="hidden"])')
 			if (input) {
-				input.focus()
+				input.focus({ preventScroll: true })
 			}
 		},
 		blur() {
 			// Utiliser un sélecteur plus spécifique pour cibler l'input principal
-			const input = inputRef.value?.$el.querySelector('input:not([type="hidden"])')
+			const input = inputRef.value?.$el?.querySelector?.('input:not([type="hidden"])')
 			if (input) {
 				input.blur()
 			}