@cnamts/synapse 1.0.0 → 1.0.1

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

@@ -0,0 +1,61 @@
+import { ref, watch, type Ref } from 'vue'
+
+export type ViewMode = 'month' | 'year' | 'months' | undefined
+
+export interface ViewModeReturn {
+	currentViewMode: Ref<ViewMode>
+	handleViewModeUpdate: (newMode: ViewMode) => void
+	handleYearUpdate: () => void
+	handleMonthUpdate: () => void
+	resetViewMode: () => void
+}
+
+/**
+ * Composable pour gérer le mode d'affichage du DatePicker (année, mois, jour)
+ * Utilisé pour contrôler le comportement du DatePicker, notamment pour les dates de naissance
+ *
+ * @param isBirthDateGetter - Une fonction qui retourne la valeur actuelle de isBirthDate
+ */
+export function useDatePickerViewMode(isBirthDateGetter: () => boolean): ViewModeReturn {
+	// Variable pour suivre le mode d'affichage actuel du DatePicker
+	const currentViewMode = ref<ViewMode>(isBirthDateGetter() ? 'year' : 'month')
+
+	// Mettre à jour le mode d'affichage quand isBirthDate change
+	watch(isBirthDateGetter, (newValue) => {
+		currentViewMode.value = newValue ? 'year' : 'month'
+	})
+
+	// Fonction pour gérer le changement de mode d'affichage
+	const handleViewModeUpdate = (newMode: ViewMode) => {
+		currentViewMode.value = newMode
+	}
+
+	// Fonction pour gérer la sélection de l'année quand isBirthDate est true
+	const handleYearUpdate = () => {
+		if (isBirthDateGetter()) {
+			// Après la sélection de l'année, passer automatiquement à la sélection du mois
+			currentViewMode.value = 'months'
+		}
+	}
+
+	// Fonction pour gérer la sélection du mois quand isBirthDate est true
+	const handleMonthUpdate = () => {
+		if (isBirthDateGetter()) {
+			// Après la sélection du mois, passer automatiquement à la sélection du jour
+			currentViewMode.value = undefined
+		}
+	}
+
+	// Fonction pour réinitialiser le mode d'affichage (utile lors de la fermeture du DatePicker)
+	const resetViewMode = () => {
+		currentViewMode.value = isBirthDateGetter() ? 'year' : 'month'
+	}
+
+	return {
+		currentViewMode,
+		handleViewModeUpdate,
+		handleYearUpdate,
+		handleMonthUpdate,
+		resetViewMode,
+	}
+}

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

@@ -0,0 +1,146 @@
+import { type Ref, nextTick, onMounted, onBeforeUnmount } from 'vue'
+
+/**
+ * Composable pour gérer la visibilité et les interactions avec le DatePicker
+ *
+ * @param options - Options de configuration
+ * @returns Fonctions pour gérer la visibilité du DatePicker
+ */
+export const useDatePickerVisibility = (options: {
+	// Propriétés de configuration
+	disabled?: boolean
+	readonly?: boolean
+	textFieldActivator?: boolean
+
+	// Références réactives
+	isDatePickerVisible: Ref<boolean>
+	isManualInputActive: Ref<boolean>
+	hasInteracted: Ref<boolean>
+
+	// Fonctions
+	updateAccessibility: () => void
+	validateDates: () => void
+
+	// Émetteurs d'événements
+	emitClosed: () => void
+	emitFocus: () => void
+}) => {
+	const {
+		disabled = false,
+		readonly = false,
+		textFieldActivator = false,
+		isDatePickerVisible,
+		isManualInputActive,
+		hasInteracted,
+		updateAccessibility,
+		validateDates,
+		emitClosed,
+		emitFocus,
+	} = options
+
+	/**
+	 * Bascule l'affichage du DatePicker
+	 */
+	const toggleDatePicker = () => {
+		if (disabled || readonly) return
+
+		isDatePickerVisible.value = !isDatePickerVisible.value
+
+		if (isDatePickerVisible.value) {
+			// Mettre à jour l'accessibilité après l'ouverture du DatePicker
+			nextTick(() => {
+				updateAccessibility()
+			})
+		}
+		else {
+			emitClosed()
+			validateDates()
+		}
+	}
+
+	/**
+	 * Ouvre le DatePicker s'il n'est pas déjà visible
+	 */
+	const openDatePicker = () => {
+		if (!isDatePickerVisible.value) {
+			toggleDatePicker()
+		}
+	}
+
+	/**
+	 * Ouvre le DatePicker lors d'un clic sur le champ de texte
+	 */
+	const openDatePickerOnClick = () => {
+		if (textFieldActivator) {
+			openDatePicker()
+		}
+	}
+
+	/**
+	 * Gère le focus sur le champ de texte
+	 */
+	const openDatePickerOnFocus = () => {
+		// Only open the DatePicker if textFieldActivator is true
+		if (textFieldActivator) {
+			openDatePicker()
+		}
+		// Always emit the focus event
+		emitFocus()
+		isManualInputActive.value = true
+		hasInteracted.value = true
+	}
+
+	/**
+	 * Gère le clic sur l'icône du DatePicker
+	 */
+	const openDatePickerOnIconClick = () => {
+		toggleDatePicker()
+	}
+
+	/**
+	 * Gère les clics en dehors du DatePicker pour le fermer
+	 */
+	const handleClickOutside = (event: MouseEvent) => {
+		if (!isDatePickerVisible.value) return
+
+		const target = event.target as HTMLElement
+		const container = target.closest('.date-picker-container')
+
+		// Si on clique dans le conteneur du DatePicker, on ne fait rien
+		if (container) return
+		emitClosed()
+		// Déclencher la validation à la fermeture
+		validateDates()
+	}
+
+	// Gestion des événements de clic en dehors du DatePicker
+	onMounted(() => {
+		document.addEventListener('click', handleClickOutside)
+	})
+
+	onBeforeUnmount(() => {
+		document.removeEventListener('click', handleClickOutside)
+	})
+
+	/**
+	 * Gère l'ouverture du DatePicker lors de l'appui sur Entrée ou Espace
+	 */
+	const handleKeyboardNavigation = (event: KeyboardEvent) => {
+		if ((event.key === 'Enter' || event.key === ' ') && !disabled && !readonly) {
+			event.preventDefault() // Empêcher le comportement par défaut
+			openDatePicker()
+			return true
+		}
+		return false
+	}
+
+	return {
+		toggleDatePicker,
+		openDatePicker,
+		openDatePickerOnClick,
+		openDatePickerOnFocus,
+		openDatePickerOnIconClick,
+		handleClickOutside,
+		handleKeyboardNavigation,
+	}
+}

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

@@ -0,0 +1,375 @@
+import { ref, computed } from 'vue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+// Initialiser les plugins dayjs
+dayjs.extend(customParseFormat)
+
+/**
+ * Composable pour gérer la saisie manuelle des plages de dates
+ * Permet de saisir et formater correctement une plage de dates au format "date1 - date2"
+ */
+export function useDateRangeInput(
+	format: string,
+	isRangeMode: boolean,
+	parseDate: (dateStr: string, format: string) => Date | null,
+	formatDate: (date: Date, format: string) => string,
+) {
+	// État pour suivre si nous sommes en train de saisir la première ou la deuxième date
+	const isEditingSecondDate = ref(false)
+	// Stockage temporaire pour la première date saisie
+	const firstDate = ref<Date | null>(null)
+	// Stockage temporaire pour la deuxième date saisie
+	const secondDate = ref<Date | null>(null)
+	// Séparateur de plage
+	const rangeSeparator = ' - '
+
+	/**
+	 * Vérifie si une chaîne de caractères contient un séparateur de plage
+	 */
+	const hasRangeSeparator = (value: string): boolean => {
+		return value.includes(rangeSeparator)
+	}
+
+	/**
+	 * Extrait les deux parties d'une plage de dates
+	 */
+	const extractRangeParts = (value: string): [string, string] => {
+		const parts = value.split(rangeSeparator)
+		return [
+			parts[0]?.trim() || '',
+			parts[1]?.trim() || '',
+		]
+	}
+
+	/**
+	 * Formate une plage de dates pour l'affichage
+	 */
+	const formatRangeForDisplay = (startDate: Date | null, endDate: Date | null): string => {
+		if (!startDate) return ''
+		if (!endDate) return `${formatDate(startDate, format)}${rangeSeparator}`
+		return `${formatDate(startDate, format)}${rangeSeparator}${formatDate(endDate, format)}`
+	}
+
+	/**
+	 * Analyse une chaîne de caractères pour en extraire une plage de dates
+	 * Retourne un tableau contenant les dates de début et de fin
+	 */
+	const parseRangeInput = (value: string): [Date | null, Date | null] => {
+		if (!value) return [null, null]
+
+		// Si la valeur contient un séparateur de plage
+		if (hasRangeSeparator(value)) {
+			const [startStr, endStr] = extractRangeParts(value)
+			const startDate = parseDate(startStr, format)
+			const endDate = parseDate(endStr, format)
+			return [startDate, endDate]
+		}
+
+		// Si la valeur ne contient pas de séparateur, c'est une seule date
+		const singleDate = parseDate(value, format)
+		return [singleDate, null]
+	}
+
+	/**
+	 * Gère la saisie manuelle d'une plage de dates
+	 * @param inputValue Valeur actuelle du champ de saisie
+	 * @param newValue Nouvelle valeur saisie
+	 * @param cursorPosition Position actuelle du curseur (optionnel)
+	 * @returns Objet contenant les informations sur la plage de dates
+	 */
+	const handleRangeInput = (inputValue: string, newValue: string, cursorPosition?: number): {
+		formattedValue: string
+		dates: [Date | null, Date | null]
+		isComplete: boolean
+		justCompletedFirstDate?: boolean
+		cursorPosition?: number
+	} => {
+		// Si le mode plage n'est pas activé, traiter comme une date unique
+		if (!isRangeMode) {
+			const date = parseDate(newValue, format)
+			return {
+				formattedValue: date ? formatDate(date, format) : newValue,
+				dates: [date, null],
+				isComplete: !!date,
+				cursorPosition: cursorPosition,
+			}
+		}
+
+		// Cas spécial : si la valeur précédente se terminait par un séparateur et que la nouvelle valeur
+		// contient du texte après le séparateur, c'est qu'on commence à saisir la seconde date
+		if (inputValue && inputValue.endsWith(rangeSeparator)
+			&& newValue.startsWith(inputValue)
+			&& newValue.length > inputValue.length) {
+			// On est en train de saisir la seconde date pour la première fois
+			isEditingSecondDate.value = true
+
+			// Extraire la première date et le nouveau caractère saisi
+			const firstPart = inputValue.substring(0, inputValue.length - rangeSeparator.length)
+			const firstDateObj = parseDate(firstPart, format)
+			firstDate.value = firstDateObj
+
+			// Extraire le caractère nouvellement saisi (après le séparateur)
+			const secondPart = newValue.substring(inputValue.length)
+			secondDate.value = parseDate(secondPart, format)
+
+			return {
+				formattedValue: `${firstPart}${rangeSeparator}${secondPart}`,
+				dates: [firstDateObj, secondDate.value],
+				isComplete: false,
+				cursorPosition: newValue.length,
+			}
+		}
+
+		// Si la valeur contient déjà un séparateur de plage
+		if (hasRangeSeparator(newValue)) {
+			const [startStr, endStr] = extractRangeParts(newValue)
+			const startDate = parseDate(startStr, format)
+			const endDate = parseDate(endStr, format)
+
+			// Mettre à jour les dates temporaires
+			firstDate.value = startDate
+			secondDate.value = endDate
+
+			// Déterminer si nous sommes en train d'éditer la deuxième date
+			isEditingSecondDate.value = !!startDate && startStr.length >= format.length
+
+			// Formater correctement la valeur
+			const formattedStart = startDate ? formatDate(startDate, format) : startStr
+			const formattedValue = `${formattedStart}${rangeSeparator}${endStr}`
+
+			// Calculer la nouvelle position du curseur en fonction de la position actuelle
+			let newCursorPosition = cursorPosition
+
+			// Si la position du curseur est dans la première partie de la date
+			if (cursorPosition !== undefined) {
+				const separatorPos = inputValue.indexOf(rangeSeparator)
+				if (separatorPos !== -1 && cursorPosition <= separatorPos) {
+					// Ajuster la position si la première partie a été formatée
+					if (startStr !== formattedStart) {
+						// Conserver la position relative dans la première partie
+						const relativePos = Math.min(cursorPosition, startStr.length)
+						newCursorPosition = Math.min(relativePos, formattedStart.length)
+					}
+				}
+				else if (separatorPos !== -1) {
+					// Le curseur est dans la seconde partie
+					// Conserver la position relative après le séparateur
+					const posAfterSeparator = cursorPosition - (separatorPos + rangeSeparator.length)
+					newCursorPosition = formattedStart.length + rangeSeparator.length + Math.min(posAfterSeparator, endStr.length)
+				}
+			}
+
+			return {
+				formattedValue,
+				dates: [startDate, endDate],
+				isComplete: !!startDate && !!endDate,
+				cursorPosition: newCursorPosition,
+			}
+		}
+
+		// Si nous sommes déjà en train d'éditer la deuxième date
+		// (ce cas ne devrait pas arriver souvent car la valeur devrait contenir un séparateur)
+		if (isEditingSecondDate.value && firstDate.value) {
+			// Formater la valeur pour afficher la première date + séparateur + nouvelle valeur
+			const formattedValue = `${formatDate(firstDate.value, format)}${rangeSeparator}${newValue}`
+			const secondDateParsed = parseDate(newValue, format)
+			secondDate.value = secondDateParsed
+
+			return {
+				formattedValue,
+				dates: [firstDate.value, secondDateParsed],
+				isComplete: !!firstDate.value && !!secondDateParsed,
+				cursorPosition: cursorPosition !== undefined ? formatDate(firstDate.value, format).length + rangeSeparator.length + Math.min(cursorPosition, newValue.length) : undefined,
+			}
+		}
+
+		// Si nous éditons la première date
+		const date = parseDate(newValue, format)
+		firstDate.value = date
+
+		// Si la première date est complète, passer à la saisie de la deuxième date
+		if (date && newValue.length >= format.length) {
+			isEditingSecondDate.value = true
+			const formattedDate = formatDate(date, format)
+
+			return {
+				formattedValue: `${formattedDate}${rangeSeparator}`,
+				dates: [date, null],
+				isComplete: false,
+				justCompletedFirstDate: true,
+				cursorPosition: formattedDate.length + rangeSeparator.length,
+			}
+		}
+
+		return {
+			formattedValue: newValue,
+			dates: [date, null],
+			isComplete: false,
+			cursorPosition: cursorPosition,
+		}
+	}
+
+	/**
+	 * Initialise l'état du composable avec des valeurs existantes
+	 */
+	const initializeWithDates = (startDate: Date | null, endDate: Date | null) => {
+		firstDate.value = startDate
+		secondDate.value = endDate
+		isEditingSecondDate.value = !!startDate && !!endDate
+	}
+
+	/**
+	 * Réinitialise l'état du composable
+	 */
+	const resetState = () => {
+		firstDate.value = null
+		secondDate.value = null
+		isEditingSecondDate.value = false
+	}
+
+	/**
+	 * Vérifie si une plage de dates est valide (la date de début est antérieure à la date de fin)
+	 */
+	const isValidRange = (startDate: Date | null, endDate: Date | null): boolean => {
+		if (!startDate || !endDate) return true
+		return startDate.getTime() <= endDate.getTime()
+	}
+
+	/**
+	 * Vérifie si la plage actuelle est valide
+	 */
+	const currentRangeIsValid = computed(() => {
+		return isValidRange(firstDate.value, secondDate.value)
+	})
+
+	/**
+	 * Gère l'événement keydown pour filtrer les caractères non numériques
+	 *
+	 * @param event - Événement keydown
+	 */
+	const handleKeydown = (event: KeyboardEvent & { target: HTMLInputElement }): void => {
+		// Bloquer la saisie de caractères non numériques
+		// Autoriser uniquement : chiffres, touches de navigation, touches de modification et touches de contrôle
+		if (
+			// Si la touche n'est pas un chiffre
+			!/^\d$/.test(event.key)
+			// Et n'est pas une touche spéciale autorisée
+			&& ![
+				'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+				'Home', 'End', 'Tab', 'Escape', 'Enter',
+				'Control', 'Alt', 'Shift', 'Meta',
+			].includes(event.key)
+			// Et n'est pas une combinaison de touches (Ctrl+A, Ctrl+C, Ctrl+V, etc.)
+			&& !(event.ctrlKey || event.metaKey)
+		) {
+			// Empêcher la saisie de caractères non numériques
+			event.preventDefault()
+			return
+		}
+
+		// Gérer les touches spéciales pour le mode plage
+		if (isRangeMode) {
+			// Gérer la suppression des séparateurs de plage
+			if (event.key === 'Backspace') {
+				const input = event.target
+				if (!input.selectionStart || input.selectionStart !== input.selectionEnd) {
+					return
+				}
+
+				const cursorPos = input.selectionStart
+
+				// Si on est juste après un séparateur de plage
+				if (cursorPos >= rangeSeparator.length
+					&& input.value.substring(cursorPos - rangeSeparator.length, cursorPos) === rangeSeparator) {
+					// Empêcher le comportement par défaut
+					event.preventDefault()
+
+					// Supprimer le séparateur complet
+					const newValue = input.value.substring(0, cursorPos - rangeSeparator.length)
+						+ input.value.substring(cursorPos)
+
+					// Mettre à jour la valeur (via l'événement input)
+					const inputEvent = new InputEvent('input', { bubbles: true, cancelable: true, data: newValue })
+					Object.defineProperty(inputEvent, 'target', { value: input, enumerable: true })
+					input.value = newValue
+					input.dispatchEvent(inputEvent)
+
+					// Positionner le curseur
+					setTimeout(() => {
+						const newCursorPos = cursorPos - rangeSeparator.length
+						input.setSelectionRange(newCursorPos, newCursorPos)
+					}, 0)
+				}
+			}
+		}
+	}
+
+	/**
+	 * Gère l'événement paste pour filtrer les caractères non numériques
+	 *
+	 * @param event - Événement paste
+	 */
+	const handlePaste = (event: ClipboardEvent): void => {
+		// Récupérer le contenu du presse-papiers
+		const clipboardData = event.clipboardData
+		if (!clipboardData) return
+
+		// Extraire le texte
+		const pastedText = clipboardData.getData('text')
+
+		// Filtrer pour ne garder que les chiffres
+		const cleanedText = pastedText.replace(/[^0-9]/g, '')
+
+		// Si le texte collé ne contient pas de chiffres, annuler l'opération
+		if (cleanedText.length === 0) {
+			event.preventDefault()
+			return
+		}
+
+		// Si le texte a été modifié (des caractères non numériques ont été supprimés)
+		if (cleanedText !== pastedText) {
+			event.preventDefault()
+
+			// Insérer manuellement le texte nettoyé
+			const input = event.target as HTMLInputElement
+			if (!input) return
+
+			const start = input.selectionStart || 0
+			const end = input.selectionEnd || 0
+
+			// Construire la nouvelle valeur
+			const newValue = input.value.substring(0, start) + cleanedText + input.value.substring(end)
+
+			// Mettre à jour la valeur (via l'événement input)
+			const inputEvent = new InputEvent('input', { bubbles: true, cancelable: true, data: newValue })
+			Object.defineProperty(inputEvent, 'target', { value: input, enumerable: true })
+			input.value = newValue
+			input.dispatchEvent(inputEvent)
+
+			// Positionner le curseur après le texte collé
+			setTimeout(() => {
+				const newCursorPos = start + cleanedText.length
+				input.setSelectionRange(newCursorPos, newCursorPos)
+			}, 0)
+		}
+	}
+
+	return {
+		isEditingSecondDate,
+		firstDate,
+		secondDate,
+		rangeSeparator,
+		hasRangeSeparator,
+		extractRangeParts,
+		formatRangeForDisplay,
+		parseRangeInput,
+		handleRangeInput,
+		initializeWithDates,
+		resetState,
+		isValidRange,
+		currentRangeIsValid,
+		handleKeydown,
+		handlePaste,
+	}
+}

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

@@ -0,0 +1,48 @@
+import { computed, type Ref } from 'vue'
+import type { DateObjectValue } from '../types'
+
+/**
+ * Composable pour gérer la validation des plages de dates
+ * Permet de vérifier si une plage de dates est valide (date de début avant date de fin)
+ */
+export function useDateRangeValidation(
+	selectedDates: Ref<DateObjectValue>,
+	displayRange: boolean,
+) {
+	/**
+	 * Vérifie si une plage de dates est valide (date de début avant date de fin)
+	 */
+	const isRangeValid = (startDate: Date | null, endDate: Date | null): boolean => {
+		if (!startDate || !endDate) return true // Si une des dates est manquante, considérer comme valide
+		return startDate.getTime() <= endDate.getTime()
+	}
+
+	/**
+	 * Variable réactive pour suivre la validité de la plage de dates actuelle
+	 */
+	const currentRangeIsValid = computed(() => {
+		if (!displayRange || !selectedDates.value) return true
+		if (!Array.isArray(selectedDates.value)) return true
+		if (selectedDates.value.length < 2) return true
+
+		const [startDate, endDate] = selectedDates.value.length >= 2
+			? [selectedDates.value[0], selectedDates.value[selectedDates.value.length - 1]]
+			: [null, null]
+
+		return isRangeValid(startDate, endDate)
+	})
+
+	/**
+	 * Fonction pour obtenir un message d'erreur si la plage n'est pas valide
+	 */
+	const getRangeValidationError = computed((): string => {
+		if (currentRangeIsValid.value) return ''
+		return 'La date de fin doit être postérieure ou égale à la date de début'
+	})
+
+	return {
+		isRangeValid,
+		currentRangeIsValid,
+		getRangeValidationError,
+	}
+}