@cnamts/synapse 1.0.19 → 1.0.21

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/vue3'
 import DatePickerValidationExamples from '../docExamples/DatePickerValidationExamples.vue'
 import DatePickerBidirectionalValidation from '../docExamples/DatePickerBidirectionalValidation.vue'
+import BidirectionalComplexValidation from '../docExamples/BidirectionalComplexValidation.vue'
 
 export default {
 	title: 'Composants/Formulaires/DatePicker/Validation',
@@ -421,3 +422,299 @@ BidirectionalValidation.parameters = {
 		},
 	],
 }
+
+export const BidirectionalComplexDatePickerValidation: StoryFn = () => ({
+	components: {
+		BidirectionalComplexValidation,
+	},
+	template: '<BidirectionalComplexValidation />',
+})
+
+BidirectionalComplexDatePickerValidation.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"
+					use-combined-mode
+					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"
+					use-combined-mode
+					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>
+	// 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>
+			`,
+		},
+		{
+			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/DateTextInput.vue

@@ -103,30 +103,57 @@
 
 	/**
 	 * =====================
-	 * Validation setup (safe wrapper for readonly)
+	 * Validation setup (safe wrapper for readonly, reactive to toggles)
 	 * =====================
 	 */
-	const validationApi = !readonly.value
-		? useValidation({
-			showSuccessMessages: props.showSuccessMessages,
-			fieldIdentifier: props.label || props.placeholder,
-			disableErrorHandling: props.disableErrorHandling,
-		})
-		: {
-			errors: ref<string[]>([]),
-			warnings: ref<string[]>([]),
-			successes: ref<string[]>([]),
-			hasError: ref(false),
-			clearValidation: () => {},
-			validateField: () => ({
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: { errors: [], warnings: [], successes: [] },
-			} as ValidationResult),
-		}
+	const baseValidation = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label || props.placeholder,
+		disableErrorHandling: props.disableErrorHandling,
+	})
 
-	const { errors, warnings, successes, hasError, clearValidation, validateField } = validationApi
+	const readonlyValidation = {
+		errors: ref<string[]>([]),
+		warnings: ref<string[]>([]),
+		successes: ref<string[]>([]),
+		hasError: ref(false),
+		clearValidation: () => {},
+		validateField: () => ({
+			hasError: false,
+			hasWarning: false,
+			hasSuccess: false,
+			state: { errors: [], warnings: [], successes: [] },
+		} as ValidationResult),
+	}
+
+	const validationApi = computed(() => (readonly.value ? readonlyValidation : baseValidation))
+
+	const errors = computed({
+		get: () => validationApi.value.errors.value,
+		set: (value) => { validationApi.value.errors.value = value },
+	})
+	const warnings = computed({
+		get: () => validationApi.value.warnings.value,
+		set: (value) => { validationApi.value.warnings.value = value },
+	})
+	const successes = computed({
+		get: () => validationApi.value.successes.value,
+		set: (value) => { validationApi.value.successes.value = value },
+	})
+	const hasError = computed(() => {
+		const api = validationApi.value
+		// baseValidation exposes a computed hasError, readonly stub exposes a ref
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- computed/ref dual shape
+		return (api as any).hasError?.value ?? api.errors.value.length > 0
+	})
+
+	const clearValidation = () => validationApi.value.clearValidation()
+
+	const validateField = (
+		value: unknown,
+		rules?: ValidationRule[],
+		warningRules?: ValidationRule[],
+	): ValidationResult => validationApi.value.validateField(value, rules, warningRules)
 
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])

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

@@ -231,6 +231,45 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							date-format-return=""
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							display-icon
+							:no-icon="false"
+							:no-calendar="true"
+						/>
+						<div style="margin-top: 10px; font-family: monospace; color: #666;">
+							Valeur : {{ date }}
+						</div>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -275,6 +314,51 @@ export const Default: Story = {
 }
 
 export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+
+					const date = ref<string | null>(null)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<h4 class="mb-4">Sans astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+						/>
+						<h4 class="mb-4">Avec astérisque :</h4>
+						<DatePicker
+							v-model="date"
+							format="DD/MM/YYYY"
+							placeholder="JJ/MM/AAAA"
+							label="Date avec règles de validation"
+							required
+							is-outlined
+							:no-calendar="true"
+							display-asterisk
+						/>
+					</div>
+				</template>
+				`,
+			},
+		],
+	},
 	args: {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
@@ -359,6 +443,7 @@ export const EuropeanFormat: Story = {
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'YYYY/MM/DD',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles de validation',
 		'required': true,
 		'noIcon': true,
 		'onUpdate:modelValue': fn(),
@@ -421,6 +506,7 @@ export const CustomRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': 'DD/MM/YYYY',
+		'label': 'Date avec règles personnalisées',
 		'placeholder': 'DD/MM/YYYY',
 		'required': true,
 		'customRules': [{
@@ -492,6 +578,7 @@ export const WarningRules: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec règles d\'avertissement',
 		'customWarningRules': [{
 			type: 'custom',
 			options: {
@@ -553,6 +640,7 @@ export const WithAppendIcon: Story = {
 		'noCalendar': true,
 		'format': 'DD/MM/YYYY',
 		'placeholder': 'JJ/MM/AAAA',
+		'label': 'Date avec icône en suffixe',
 		'displayAppendIcon': true,
 		'onUpdate:modelValue': fn(),
 		'onFocus': fn(),
@@ -623,6 +711,7 @@ export const WithErrorDisabled: Story = {
 		format: 'DD/MM/YYYY',
 		dateFormatReturn: 'YYYY/MM/DD',
 		placeholder: 'Date requise sans erreur',
+		label: 'Date requise sans erreur',
 		required: true,
 		noIcon: true,
 		disableErrorHandling: true,
@@ -757,6 +846,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
+				  label="Date"
                   format="DD/MM/YYYY"
                   noCalendar
                   autoClamp
@@ -767,6 +857,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
+				  label="Date"
                   format="DD-MM-YYYY"
                   noCalendar
                   autoClamp
@@ -777,6 +868,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."
+				  label="Date"
                   format="YYYY.MM.DD"
                   noCalendar
                   autoClamp
@@ -787,6 +879,7 @@ export const AutoClampFeature: Story = {
                 <DatePicker
                   v-model="dateRange"
                   placeholder="Saisie plage avec auto clamp"
+				  label="Date"
                   format="DD/MM/YYYY"
                   displayRange
                   noCalendar
@@ -874,6 +967,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value1"
                     placeholder="Format JJ/MM/AAAA"
+					label="Date"
                     format="DD/MM/YYYY"
                     no-calendar
                     class="py-4"
@@ -881,6 +975,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value2"
                     placeholder="Format MM/JJ/AAAA"
+					label="Date"
                     format="MM/DD/YYYY"
 					no-calendar
 					class="py-4"
@@ -888,6 +983,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value3"
                     placeholder="Format AAAA-MM-JJ"
+					label="Date"
                     format="YYYY-MM-DD"
 					no-calendar
 					class="py-4"
@@ -895,6 +991,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value4"
                     placeholder="Format JJ-MM-AA"
+					label="Date"
                     format="DD-MM-YY"
 					no-calendar
 					class="py-4"
@@ -902,6 +999,7 @@ export const DifferentFormats: Story = {
                 <DatePicker
                     v-model="value5"
                     placeholder="Format JJ.MM.AAAA"
+					label="Date"
                     format="DD.MM.YYYY"
 					no-calendar
 					class="py-4"

package/src/components/DatePicker/composables/useDateSelection.ts

@@ -14,6 +14,10 @@ export function useDateSelection(
 	// Stockage des dates de début et de fin pour les plages
 	const rangeBoundaryDates = ref<[Date | null, Date | null] | null>(null)
 
+	const resetRange = () => {
+		rangeBoundaryDates.value = null
+	}
+
 	/**
 	 * Génère toutes les dates entre deux dates (incluses)
 	 */
@@ -117,5 +121,6 @@ export function useDateSelection(
 		updateSelectedDates,
 		rangeBoundaryDates,
 		generateDateRange,
+		resetRange,
 	}
 }