@cnamts/synapse 1.0.0 → 1.0.2

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

@@ -0,0 +1,95 @@
+import { computed, type Ref } from 'vue'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
+
+// Initialiser le plugin dayjs nécessaire pour la validation des formats de date
+dayjs.extend(customParseFormat)
+
+/**
+ * Composable pour la validation du format des dates
+ *
+ * @param options - Options de configuration
+ * @param options.format - Format d'affichage de la date (ex: 'DD/MM/YYYY')
+ * @param options.dateFormatReturn - Format de retour de la date (optionnel)
+ * @param options.required - Indique si le champ est requis
+ * @param options.hasInteracted - Ref indiquant si l'utilisateur a interagi avec le champ
+ * @param options.disableErrorHandling - Désactive la gestion des erreurs
+ * @returns Fonctions et propriétés pour la validation du format des dates
+ */
+export const useDateFormatValidation = (options: {
+	format: string
+	dateFormatReturn?: string
+	required?: boolean
+	hasInteracted: Ref<boolean>
+	disableErrorHandling?: boolean
+}) => {
+	const { format, dateFormatReturn, required = false, hasInteracted, disableErrorHandling = false } = options
+
+	/**
+   * Valide le format d'une chaîne de date
+   *
+   * @param dateStr - Chaîne de date à valider
+   * @returns Objet contenant l'état de validité et un message d'erreur éventuel
+   */
+	const validateDateFormat = (dateStr: string): { isValid: boolean, message: string } => {
+		if (!dateStr) {
+			return {
+				isValid: !required || !hasInteracted.value || disableErrorHandling,
+				message: (required && hasInteracted.value && !disableErrorHandling) ? DATE_PICKER_MESSAGES.ERROR_REQUIRED : '',
+			}
+		}
+
+		if (!/^[\d/.-]*$/.test(dateStr)) {
+			return {
+				isValid: disableErrorHandling,
+				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+			}
+		}
+
+		const isValid = dayjs(dateStr, format, true).isValid()
+			|| (dateFormatReturn ? dayjs(dateStr, dateFormatReturn, true).isValid() : false)
+
+		if (!isValid) {
+			return {
+				isValid: disableErrorHandling,
+				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+			}
+		}
+
+		return { isValid: true, message: '' }
+	}
+
+	/**
+   * Vérifie si une chaîne de date est complète selon le format spécifié
+   * en comptant le nombre de chiffres attendus et saisis, et en vérifiant la validité de la date
+   *
+   * @param dateStr - Chaîne de date à vérifier
+   * @returns Booléen indiquant si la date est complète
+   */
+	const isDateCompleteFunc = (dateStr: string): boolean => {
+		if (!dateStr) return false
+
+		// Compter le nombre de chiffres attendus en fonction du format
+		const expectedDigits = format.replace(/[^DMY]/g, '').length
+
+		// Compter le nombre de chiffres saisis
+		const actualDigits = dateStr.replace(/[^\d]/g, '').length
+
+		// Vérifier si la date est complète en termes de nombre de chiffres
+		const hasAllDigits = actualDigits === expectedDigits
+
+		// Vérifier si la date est valide selon le format spécifié
+		const isValid = hasAllDigits
+
+		return isValid
+	}
+
+	// Créer une version réactive de la fonction isDateComplete
+	const isDateComplete = computed(() => (dateStr: string) => isDateCompleteFunc(dateStr))
+
+	return {
+		validateDateFormat,
+		isDateComplete,
+	}
+}

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

@@ -0,0 +1,326 @@
+// Pas besoin d'importer Ref car il n'est pas utilisé
+
+/**
+ * Options pour le composable useDateInputEditing
+ */
+export interface DateInputEditingOptions {
+	// Format de date (ex: 'DD/MM/YYYY')
+	format: string
+	// Fonction pour mettre à jour la valeur d'affichage
+	updateDisplayValue: (value: string) => void
+	// Fonction pour mettre à jour l'attribut aria-label (pour l'accessibilité)
+	updateAriaLabel?: (value: string) => void
+	// Caractère à utiliser pour les positions non remplies (défaut: '_')
+	placeholderChar?: string
+	// Si true, utilise des caractères invisibles pour les lecteurs d'écran
+	accessiblePlaceholders?: boolean
+}
+
+/**
+ * Résultat du formatage d'une date
+ */
+export interface FormatDateInputResult {
+	// Valeur formatée
+	formatted: string
+	// Position du curseur après formatage
+	cursorPos: number
+}
+
+/**
+ * Composable pour gérer l'édition manuelle des dates
+ * Ce composable fournit des fonctions pour formater les dates pendant la saisie
+ * et gérer les touches spéciales comme Backspace et les flèches
+ *
+ * @param options - Options de configuration
+ * @returns Fonctions pour gérer l'édition manuelle des dates
+ */
+export const useDateInputEditing = (options: DateInputEditingOptions) => {
+	const {
+		format,
+		updateDisplayValue,
+		updateAriaLabel,
+		placeholderChar = '_',
+		accessiblePlaceholders = true,
+	} = options
+
+	/**
+	 * Formate une entrée de date en ajoutant les séparateurs appropriés
+	 *
+	 * @param input - Chaîne de caractères saisie
+	 * @param cursorPosition - Position actuelle du curseur
+	 * @returns Objet contenant la chaîne formatée et la nouvelle position du curseur
+	 */
+	const formatDateInput = (input: string, cursorPosition?: number): FormatDateInputResult => {
+		// Nettoyer l'entrée pour ne garder que les chiffres
+		let cleanedInput = input.replace(/[^\d]/g, '')
+
+		// Déterminer le séparateur utilisé dans le format
+		const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+		// Calculer la position du curseur dans l'entrée nettoyée (sans séparateurs)
+		const inputBeforeCursor = input.substring(0, cursorPosition || 0)
+		const digitsBeforeCursor = inputBeforeCursor.replace(/[^\d]/g, '').length
+
+		// Extraire les groupes de chiffres du format (DD, MM, YYYY)
+		const digitGroups: string[] = []
+		let currentGroup = ''
+
+		for (const char of format) {
+			if (['D', 'M', 'Y'].includes(char.toUpperCase())) {
+				currentGroup += char
+			}
+			else if (currentGroup) {
+				digitGroups.push(currentGroup)
+				currentGroup = ''
+			}
+		}
+
+		// Ajouter le dernier groupe s'il existe
+		if (currentGroup) {
+			digitGroups.push(currentGroup)
+		}
+
+		// Calculer le nombre total de chiffres attendus dans le format
+		const expectedDigits = format.replace(/[^DMY]/g, '').length
+
+		// Limiter le nombre de chiffres saisis au nombre attendu
+		if (cleanedInput.length > expectedDigits) {
+			cleanedInput = cleanedInput.substring(0, expectedDigits)
+		}
+
+		// Construire la chaîne formatée
+		let result = ''
+		let digitIndex = 0
+
+		// Parcourir les groupes de chiffres pour construire la date formatée
+		for (let groupIndex = 0; groupIndex < digitGroups.length; groupIndex++) {
+			const group = digitGroups[groupIndex]
+			const groupLength = group.length
+
+			// Ajouter les chiffres pour ce groupe
+			for (let j = 0; j < groupLength; j++) {
+				if (digitIndex < cleanedInput.length) {
+					result += cleanedInput[digitIndex]
+					digitIndex++
+				}
+				else {
+					// Utiliser le caractère de placeholder configuré pour les positions non remplies
+					result += placeholderChar
+				}
+			}
+
+			// Ajouter le séparateur après chaque groupe sauf le dernier
+			if (groupIndex < digitGroups.length - 1) {
+				result += separator
+			}
+		}
+
+		// Calculer la nouvelle position du curseur
+		let newCursorPos = 0
+		let digitCount = 0
+
+		// Parcourir le résultat formaté pour trouver la position du curseur
+		for (let i = 0; i < result.length && digitCount < digitsBeforeCursor; i++) {
+			newCursorPos++
+			if (/\d/.test(result[i])) {
+				digitCount++
+			}
+		}
+
+		return {
+			formatted: result,
+			cursorPos: Math.min(newCursorPos, result.length),
+		}
+	}
+
+	/**
+	 * Gère l'événement keydown pour les touches spéciales
+	 *
+	 * @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 la suppression des séparateurs
+		if (event.key === 'Backspace') {
+			const input = event.target
+			if (!input.selectionStart || input.selectionStart !== input.selectionEnd) {
+				return
+			}
+
+			const cursorPos = input.selectionStart
+			const charBeforeCursor = input.value[cursorPos - 1]
+
+			if (!/\d/.test(charBeforeCursor)) {
+				// Si le caractère avant le curseur n'est pas un chiffre, on le supprime aussi
+				// et on supprime le chiffre avant le séparateur
+				event.preventDefault() // Empêcher le comportement par défaut
+
+				const newValue = input.value.substring(0, cursorPos - 2)
+					+ input.value.substring(cursorPos)
+
+				// Mettre à jour la valeur
+				updateDisplayValue(newValue)
+
+				// Positionner le curseur après un court délai
+				setTimeout(() => {
+					const newCursorPos = cursorPos - 2
+					input.setSelectionRange(newCursorPos, newCursorPos)
+				}, 0)
+			}
+		}
+
+		// Gérer les touches de direction pour éviter de se retrouver entre un séparateur et un chiffre
+		if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+			const input = event.target
+			const cursorPos = input.selectionStart || 0
+
+			// Déterminer le séparateur utilisé dans le format
+			const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+			if (event.key === 'ArrowLeft' && cursorPos > 0) {
+				const charBeforeCursor = input.value[cursorPos - 1]
+
+				if (charBeforeCursor === separator) {
+					// Si on se déplace à gauche et qu'on rencontre un séparateur, sauter par-dessus
+					event.preventDefault()
+					input.setSelectionRange(cursorPos - 2, cursorPos - 2)
+				}
+			}
+			else if (event.key === 'ArrowRight' && cursorPos < input.value.length) {
+				const charAtCursor = input.value[cursorPos]
+
+				if (charAtCursor === separator) {
+					// Si on se déplace à droite et qu'on rencontre un séparateur, sauter par-dessus
+					event.preventDefault()
+					input.setSelectionRange(cursorPos + 2, cursorPos + 2)
+				}
+			}
+		}
+	}
+
+	/**
+	 * Gère l'événement paste pour formater correctement les dates collées
+	 *
+	 * @param event - Événement paste
+	 */
+	const handlePaste = (event: ClipboardEvent): void => {
+		if (!event.clipboardData) return
+
+		const pastedText = event.clipboardData.getData('text')
+		if (!pastedText) return
+
+		// Empêcher le comportement par défaut
+		event.preventDefault()
+
+		// Récupérer l'élément input
+		const input = event.target as HTMLInputElement
+		const cursorPos = input.selectionStart || 0
+
+		// Récupérer la valeur actuelle
+		const currentValue = input.value
+
+		// Insérer le texte collé à la position du curseur
+		const newValue = currentValue.substring(0, cursorPos)
+			+ pastedText
+			+ currentValue.substring(input.selectionEnd || cursorPos)
+
+		// Formater la nouvelle valeur
+		const { formatted, cursorPos: newCursorPos } = formatDateInput(newValue, cursorPos + pastedText.length)
+
+		// Mettre à jour la valeur
+		updateDisplayValue(formatted)
+
+		// Mettre à jour l'aria-label si la fonction est fournie
+		if (updateAriaLabel && accessiblePlaceholders) {
+			// Créer une version accessible pour les lecteurs d'écran (sans les caractères de placeholder)
+			const accessibleValue = formatted.replace(new RegExp(placeholderChar, 'g'), ' ')
+
+			// Créer un message descriptif pour le lecteur d'écran
+			const dateDescription = getDateDescription(accessibleValue, format)
+			updateAriaLabel(dateDescription)
+		}
+
+		// Positionner le curseur après un court délai
+		setTimeout(() => {
+			input.setSelectionRange(newCursorPos, newCursorPos)
+		}, 0)
+	}
+
+	/**
+	 * Crée une description accessible de la date pour les lecteurs d'écran
+	 *
+	 * @param dateStr - La chaîne de date à décrire
+	 * @param format - Le format de la date
+	 * @returns Une description de la date adaptée aux lecteurs d'écran
+	 */
+	const getDateDescription = (dateStr: string, format: string): string => {
+		// Si la chaîne est vide, retourner un message simple
+		if (!dateStr.trim()) {
+			return 'Aucune date saisie'
+		}
+
+		// Déterminer le séparateur utilisé dans le format
+		const separator = format.match(/[^DMY]/)?.[0] || '/'
+
+		// Extraire les parties de la date
+		const dateParts = dateStr.split(separator)
+		const formatParts = format.split(separator)
+
+		// Créer une description en fonction du format
+		let description = 'Date en cours de saisie: '
+
+		for (let i = 0; i < formatParts.length; i++) {
+			if (i >= dateParts.length) break
+
+			const part = dateParts[i].trim()
+			const formatPart = formatParts[i].charAt(0).toUpperCase()
+
+			// Ignorer les parties vides ou contenant uniquement des placeholders
+			if (!part || part.replace(new RegExp(placeholderChar, 'g'), '').length === 0) {
+				continue
+			}
+
+			switch (formatPart) {
+				case 'D':
+					description += `jour ${part}, `
+					break
+				case 'M':
+					description += `mois ${part}, `
+					break
+				case 'Y':
+					description += `année ${part}, `
+					break
+			}
+		}
+
+		// Supprimer la virgule finale si elle existe
+		return description.endsWith(', ')
+			? description.slice(0, -2)
+			: description
+	}
+
+	return {
+		formatDateInput,
+		handleKeydown,
+		handlePaste,
+		getDateDescription,
+	}
+}

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