@cnamts/synapse 1.0.15 → 1.0.16

package/src/components/DatePicker/composables/tests/useKeyboardEvents.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect, vi } from 'vitest'
+import { useKeyboardEvents } from '../useKeyboardEvents'
+
+describe('useKeyboardEvents', () => {
+	it('handleKeyDown blocks disallowed characters', () => {
+		const { handleKeyDown } = useKeyboardEvents()
+
+		const preventDefault = vi.fn()
+		const event = {
+			key: 'a',
+			ctrlKey: false,
+			metaKey: false,
+			preventDefault,
+			target: document.createElement('input'),
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleKeyDown(event)
+
+		expect(preventDefault).toHaveBeenCalledTimes(1)
+	})
+
+	it('handleKeyDown allows allowed characters and calls onKeyDown', () => {
+		const onKeyDown = vi.fn()
+		const { handleKeyDown } = useKeyboardEvents({ onKeyDown })
+
+		const preventDefault = vi.fn()
+		const target = document.createElement('input')
+		const event = {
+			key: '5',
+			ctrlKey: false,
+			metaKey: false,
+			preventDefault,
+			target,
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleKeyDown(event)
+
+		expect(preventDefault).not.toHaveBeenCalled()
+		expect(onKeyDown).toHaveBeenCalledWith(event)
+	})
+
+	it('handleKeyDown allows disallowed characters when used with ctrl/meta (shortcuts)', () => {
+		const { handleKeyDown } = useKeyboardEvents()
+
+		const preventDefault = vi.fn()
+		const target = document.createElement('input')
+		const event = {
+			key: 'a',
+			ctrlKey: true,
+			metaKey: false,
+			preventDefault,
+			target,
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleKeyDown(event)
+
+		expect(preventDefault).not.toHaveBeenCalled()
+	})
+
+	it('handleKeyDown allows special keys like Backspace', () => {
+		const { handleKeyDown } = useKeyboardEvents()
+
+		const preventDefault = vi.fn()
+		const target = document.createElement('input')
+		const event = {
+			key: 'Backspace',
+			ctrlKey: false,
+			metaKey: false,
+			preventDefault,
+			target,
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleKeyDown(event)
+
+		expect(preventDefault).not.toHaveBeenCalled()
+	})
+
+	it('handleArrowKeys skips over separator when moving left and right', () => {
+		const { handleArrowKeys } = useKeyboardEvents({ separator: '/' })
+
+		const setSelectionRange = vi.fn()
+		const input = {
+			value: '01/01/2023',
+			selectionStart: 3,
+			selectionEnd: 3,
+			setSelectionRange,
+		} as unknown as HTMLInputElement
+
+		// Cursor just after the separator: index 3 (0-based)
+		const preventDefaultLeft = vi.fn()
+		const leftEvent = {
+			key: 'ArrowLeft',
+			target: input,
+			preventDefault: preventDefaultLeft,
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleArrowKeys(leftEvent)
+
+		expect(preventDefaultLeft).toHaveBeenCalled()
+		expect(setSelectionRange).toHaveBeenCalledWith(1, 1)
+
+		// Now test ArrowRight from just before the separator
+		input.selectionStart = 2
+		input.selectionEnd = 2
+
+		const preventDefaultRight = vi.fn()
+		const rightEvent = {
+			key: 'ArrowRight',
+			target: input,
+			preventDefault: preventDefaultRight,
+		} as unknown as KeyboardEvent & { target: HTMLInputElement }
+
+		handleArrowKeys(rightEvent)
+
+		expect(preventDefaultRight).toHaveBeenCalled()
+		expect(setSelectionRange).toHaveBeenCalledWith(4, 4)
+	})
+
+	it('handlePaste prevents paste when no allowed characters remain after filtering', () => {
+		const { handlePaste } = useKeyboardEvents()
+		const input = document.createElement('input')
+		input.value = ''
+
+		const preventDefault = vi.fn()
+		const event = {
+			clipboardData: {
+				getData: vi.fn(() => 'abc'),
+			},
+			preventDefault,
+			target: input,
+		} as unknown as ClipboardEvent
+
+		handlePaste(event)
+
+		expect(preventDefault).toHaveBeenCalledTimes(1)
+		expect(input.value).toBe('')
+	})
+
+	it('handlePaste inserts filtered allowed characters and moves cursor', () => {
+		vi.useFakeTimers()
+		const { handlePaste } = useKeyboardEvents()
+		const input = document.createElement('input')
+		input.value = ''
+		input.selectionStart = 0
+		input.selectionEnd = 0
+
+		const preventDefault = vi.fn()
+		const event = {
+			clipboardData: {
+				getData: vi.fn(() => '1a2'),
+			},
+			preventDefault,
+			target: input,
+		} as unknown as ClipboardEvent
+		const dispatchSpy = vi.spyOn(input, 'dispatchEvent')
+
+		const setSelectionRangeSpy = vi.spyOn(input, 'setSelectionRange')
+
+		handlePaste(event)
+		vi.runAllTimers()
+
+		expect(preventDefault).toHaveBeenCalledTimes(1)
+		expect(input.value).toBe('12')
+		expect(dispatchSpy).toHaveBeenCalled()
+		expect(setSelectionRangeSpy).toHaveBeenCalled()
+		vi.useRealTimers()
+	})
+})

package/src/components/DatePicker/composables/tests/useMonthButtonCustomization.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { ref, nextTick, type Ref } from 'vue'
+import { ref, nextTick, type Ref, defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
 import { useMonthButtonCustomization } from '../useMonthButtonCustomization'
 
 describe('useMonthButtonCustomization', () => {
@@ -8,6 +9,30 @@ describe('useMonthButtonCustomization', () => {
 	let monthName: Ref<string | null>
 	let yearName: Ref<string | null>
 
+	const mountUseMonthButtonCustomization = (options?: {
+		isVisibleGetter?: () => boolean
+		month?: Ref<string | null>
+		year?: Ref<string | null>
+	}) => {
+		const exposed = {} as ReturnType<typeof useMonthButtonCustomization>
+		const TestComponent = defineComponent({
+			setup() {
+				Object.assign(
+					exposed,
+					useMonthButtonCustomization(
+						options?.isVisibleGetter ?? isPickerVisibleGetter,
+						options?.month ?? monthName,
+						options?.year ?? yearName,
+					),
+				)
+				return () => null
+			},
+		})
+
+		const wrapper = mount(TestComponent)
+		return { exposed, wrapper }
+	}
+
 	beforeEach(() => {
 		// Réinitialiser les refs pour chaque test avec le type exact attendu par le composable
 		monthName = ref<string | null>(null)
@@ -29,12 +54,9 @@ describe('useMonthButtonCustomization', () => {
 	// Test de l'affichage des mois personnalisés via les noms de mois fournis
 	it('personnalise correctement les noms de mois (janvier -> Janv.)', async () => {
 		monthName.value = 'janvier'
-		const { customizeMonthButton } = useMonthButtonCustomization(
-			isPickerVisibleGetter,
-			monthName,
-		)
+		const { exposed } = mountUseMonthButtonCustomization()
 
-		await customizeMonthButton()
+		await exposed.customizeMonthButton()
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
@@ -43,12 +65,9 @@ describe('useMonthButtonCustomization', () => {
 
 	it('personnalise correctement les noms de mois (février -> févr.)', async () => {
 		monthName.value = 'février'
-		const { customizeMonthButton } = useMonthButtonCustomization(
-			isPickerVisibleGetter,
-			monthName,
-		)
+		const { exposed } = mountUseMonthButtonCustomization()
 
-		await customizeMonthButton()
+		await exposed.customizeMonthButton()
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
@@ -57,29 +76,21 @@ describe('useMonthButtonCustomization', () => {
 
 	it('capitalise le premier caractère si le mois n\'est pas reconnu', async () => {
 		monthName.value = 'pluviose'
-		const { customizeMonthButton } = useMonthButtonCustomization(
-			isPickerVisibleGetter,
-			monthName,
-		)
+		const { exposed } = mountUseMonthButtonCustomization()
 
-		await customizeMonthButton()
+		await exposed.customizeMonthButton()
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
-		expect(monthBtn.textContent).toContain('pluviose')
+		expect(monthBtn.textContent).toContain('Pluviose')
 	})
 
 	it('customise les boutons du mois et de l’année', async () => {
 		// S'assurer que monthName est null pour ce test
 		monthName.value = null
+		const { exposed } = mountUseMonthButtonCustomization()
 
-		const { customizeMonthButton, monthButtonText } = useMonthButtonCustomization(
-			isPickerVisibleGetter,
-			monthName,
-			yearName,
-		)
-
-		await customizeMonthButton()
+		await exposed.customizeMonthButton()
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
@@ -87,7 +98,7 @@ describe('useMonthButtonCustomization', () => {
 
 		expect(monthBtn.innerHTML).toContain('<svg') // icône ajoutée
 		expect(monthBtn.textContent).toContain('janv.') // mois transformé
-		expect(monthButtonText.value).toBe('janvier 2023')
+		expect(exposed.monthButtonText.value).toBe('janvier 2023')
 
 		expect(yearBtn.innerHTML).toContain('2023')
 		expect(yearBtn.innerHTML).toContain('<svg')
@@ -96,14 +107,9 @@ describe('useMonthButtonCustomization', () => {
 	it('utilise monthName et yearName si fournis', async () => {
 		monthName.value = 'mars'
 		yearName.value = '2030'
+		const { exposed } = mountUseMonthButtonCustomization()
 
-		const { customizeMonthButton } = useMonthButtonCustomization(
-			isPickerVisibleGetter,
-			monthName,
-			yearName,
-		)
-
-		await customizeMonthButton()
+		await exposed.customizeMonthButton()
 		await nextTick()
 
 		const monthBtn = document.querySelector('.v-date-picker-controls__month-btn')!
@@ -114,10 +120,10 @@ describe('useMonthButtonCustomization', () => {
 	})
 
 	it('observe les changements du DOM et personnalise automatiquement', async () => {
-		const { setupMonthButtonObserver } = useMonthButtonCustomization(() => true)
+		const { exposed } = mountUseMonthButtonCustomization({ isVisibleGetter: () => true })
 		const spy = vi.spyOn(document, 'querySelectorAll')
 
-		setupMonthButtonObserver()
+		exposed.setupMonthButtonObserver()
 		await nextTick()
 
 		expect(spy).toHaveBeenCalledWith('.v-date-picker-controls')

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

@@ -17,8 +17,7 @@ export const useAsteriskDisplay = (
 
 	// Ajoute l'astérisque au label si nécessaire
 	const labelWithAsterisk = computed(() => {
-		// Assertion de type pour indiquer que props[labelProp] est de type string | undefined
-		const label = props[labelProp] as string | undefined
+		const label = props[labelProp] as string
 		return isShouldDisplayAsterisk.value && label
 			? `${label} *`
 			: label

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

@@ -0,0 +1,155 @@
+import {
+	type Ref,
+	type ComponentPublicInstance,
+	watch,
+	nextTick,
+	onMounted,
+	onBeforeUnmount,
+} from 'vue'
+import dayjs from 'dayjs'
+
+export interface CalendarKeyboardNavigationOptions {
+	isDatePickerVisible: Ref<boolean>
+	datePickerRef: Ref<ComponentPublicInstance | null>
+
+	// Renvoie la date actuellement "active" sur le calendrier
+	getCurrentDate: () => Date | null
+
+	// Applique la nouvelle date (typiquement via updateSelectedDates)
+	setCurrentDate: (date: Date) => void
+}
+
+export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigationOptions) => {
+	const {
+		isDatePickerVisible,
+		datePickerRef,
+		getCurrentDate,
+		setCurrentDate,
+	} = options
+
+	const addDays = (date: Date, amount: number) => dayjs(date).add(amount, 'day').toDate()
+
+	const toISO = (date: Date) => dayjs(date).format('YYYY-MM-DD')
+
+	let isListenerAttached = false
+
+	const getBaseDateFromEvent = (event: KeyboardEvent): { date: Date | null, fromDayCell: boolean } => {
+		const target = event.target as HTMLElement | null
+		const dayWrapper = target?.closest<HTMLElement>('[data-v-date]')
+		const iso = dayWrapper?.getAttribute('data-v-date')
+		if (!iso) {
+			return { date: getCurrentDate(), fromDayCell: false }
+		}
+
+		const parsed = dayjs(iso, 'YYYY-MM-DD', true)
+		if (!parsed.isValid()) {
+			return { date: getCurrentDate(), fromDayCell: false }
+		}
+
+		return { date: parsed.toDate(), fromDayCell: true }
+	}
+
+	const handleArrowNavigation = (event: KeyboardEvent) => {
+		if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+			return
+		}
+
+		// Ne pas intercepter les combinaisons de touches de navigation système (Ctrl/Alt/Meta)
+		if (event.altKey || event.ctrlKey || event.metaKey) {
+			return
+		}
+
+		const { date: current, fromDayCell } = getBaseDateFromEvent(event)
+		if (!current) return
+
+		event.preventDefault()
+
+		let nextDate = current
+		// Si l'événement ne vient pas d'un jour du calendrier (par ex. après un
+		// changement de mois via les contrôles), on utilise la date de base
+		// telle quelle pour « entrer » dans le mois (souvent le 1er jour),
+		// sans appliquer immédiatement le décalage lié à la flèche. À partir du
+		// moment où le focus est sur un jour (fromDayCell = true), les flèches
+		// se comportent normalement.
+		if (fromDayCell) {
+			switch (event.key) {
+				case 'ArrowLeft':
+					nextDate = addDays(current, -1)
+					break
+				case 'ArrowRight':
+					nextDate = addDays(current, 1)
+					break
+				case 'ArrowUp':
+					nextDate = addDays(current, -7)
+					break
+				case 'ArrowDown':
+					nextDate = addDays(current, 7)
+					break
+			}
+		}
+
+		setCurrentDate(nextDate)
+
+		nextTick(() => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+			const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
+			if (!rootEl) return
+
+			const selector = `[data-v-date="${toISO(nextDate)}"] > [type="button"]`
+			const dayButton = rootEl.querySelector<HTMLElement>(selector)
+
+			dayButton?.focus()
+		})
+	}
+
+	const keydownListener = (event: Event) => {
+		const keyboardEvent = event as KeyboardEvent
+		const target = keyboardEvent.target as HTMLElement | null
+
+		// Ne pas interférer avec la saisie dans les champs de formulaire ou zones éditables
+		if (target) {
+			const tagName = target.tagName
+			if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || (target as HTMLElement).isContentEditable) {
+				return
+			}
+		}
+
+		handleArrowNavigation(keyboardEvent)
+	}
+
+	const attachListeners = () => {
+		if (isListenerAttached) return
+		document.addEventListener('keydown', keydownListener as EventListener, true)
+		isListenerAttached = true
+	}
+
+	const detachListeners = () => {
+		if (!isListenerAttached) return
+		document.removeEventListener('keydown', keydownListener as EventListener, true)
+		isListenerAttached = false
+	}
+
+	watch(isDatePickerVisible, (visible) => {
+		if (visible) {
+			nextTick(attachListeners)
+		}
+		else {
+			detachListeners()
+		}
+	})
+
+	onMounted(() => {
+		if (isDatePickerVisible.value) {
+			nextTick(attachListeners)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		detachListeners()
+	})
+
+	return {
+		attachListeners,
+		detachListeners,
+	}
+}

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

@@ -0,0 +1,163 @@
+import { computed, ref, watch, type Ref, type ComputedRef } from 'vue'
+import type { DateInput, DateValue } from '@/composables/date/useDateInitializationDayjs'
+
+export interface UseDatePickerStateOptions {
+	selectedDates: Ref<Date | (Date | null)[] | null>
+	rangeBoundaryDates?: Ref<[Date | null, Date | null] | null>
+	format: string
+	dateFormatReturn?: string
+	displayRange?: boolean
+	parseDate: (value: string, format: string) => Date | null
+	formatDate: (date: Date | null, format: string) => string
+	initializeSelectedDates: (value: DateInput | null, format: string, dateFormatReturn?: string) => Date | (Date | null)[] | null
+	validateDates: (forceValidation?: boolean) => void
+	updateModel: (value: DateValue) => void
+}
+
+export interface UseDatePickerStateResult {
+	selectedDates: Ref<Date | (Date | null)[] | null>
+	rangeBoundaryDates?: Ref<[Date | null, Date | null] | null>
+	textInputValue: Ref<string>
+	displayFormattedDate: Ref<string>
+	formattedDate: Ref<DateValue>
+	displayFormattedFromSelectedDates: ComputedRef<string | null>
+	syncFromModelValue: (newValue: DateInput | undefined) => void
+	syncTextInputFromSelection: () => void
+}
+
+export const useDatePickerState = (options: UseDatePickerStateOptions): UseDatePickerStateResult => {
+	const {
+		selectedDates,
+		rangeBoundaryDates,
+		format,
+		dateFormatReturn,
+		displayRange = false,
+		parseDate,
+		formatDate,
+		initializeSelectedDates,
+		validateDates,
+		// updateModel,
+	} = options
+
+	const textInputValue = ref('')
+	const displayFormattedDate = ref('')
+
+	const formattedDate = computed<DateValue>(() => {
+		if (!selectedDates.value) return ''
+		const rf = dateFormatReturn || format
+
+		if (displayRange && rangeBoundaryDates?.value) {
+			return [
+				formatDate(rangeBoundaryDates.value[0], rf),
+				formatDate(rangeBoundaryDates.value[1], rf),
+			] as [string, string]
+		}
+
+		if (Array.isArray(selectedDates.value)) {
+			if (selectedDates.value.length >= 2) {
+				return [
+					formatDate(selectedDates.value[0], rf),
+					formatDate(selectedDates.value[selectedDates.value.length - 1], rf),
+				] as [string, string]
+			}
+			return ''
+		}
+
+		return formatDate(selectedDates.value, rf)
+	})
+
+	const displayFormattedFromSelectedDates = computed<string | null>(() => {
+		if (!selectedDates.value) return null
+
+		if (Array.isArray(selectedDates.value)) {
+			if (selectedDates.value.length >= 2) {
+				return `${formatDate(selectedDates.value[0], format)} - ${formatDate(
+					selectedDates.value[selectedDates.value.length - 1],
+					format,
+				)}`
+			}
+			return formatDate(selectedDates.value[0], format)
+		}
+
+		return formatDate(selectedDates.value, format)
+	})
+
+	watch(
+		formattedDate,
+		(newValue) => {
+			if (!newValue || newValue === '') {
+				textInputValue.value = ''
+				return
+			}
+			if (typeof newValue === 'string') {
+				if (dateFormatReturn) {
+					const date = parseDate(newValue, dateFormatReturn)
+					if (date) {
+						const formattedForDisplay = formatDate(date, format)
+						textInputValue.value = formattedForDisplay
+					}
+				}
+				else {
+					textInputValue.value = newValue
+				}
+			}
+		},
+		{ immediate: true },
+	)
+
+	const syncFromModelValue = (newValue: DateInput | undefined) => {
+		if (!newValue || newValue === '') {
+			selectedDates.value = null
+			textInputValue.value = ''
+			displayFormattedDate.value = ''
+			validateDates()
+			return
+		}
+
+		selectedDates.value = initializeSelectedDates(newValue ?? null, format, dateFormatReturn)
+		if (selectedDates.value) {
+			const firstDate = Array.isArray(selectedDates.value)
+				? selectedDates.value[0]
+				: selectedDates.value
+			if (firstDate) {
+				const formattedForInput = formatDate(firstDate, format)
+				textInputValue.value = formattedForInput
+			}
+			if (Array.isArray(formattedDate.value)) {
+				// Pour les plages, formater avec le séparateur standard " - "
+				displayFormattedDate.value = formattedDate.value.join(' - ')
+			}
+			else {
+				displayFormattedDate.value = (formattedDate.value as string) || ''
+			}
+		}
+		validateDates()
+	}
+
+	const syncTextInputFromSelection = () => {
+		const value = selectedDates.value
+		if (!value) {
+			textInputValue.value = ''
+			return
+		}
+
+		const firstDate = Array.isArray(value) ? (value[0] ?? null) : value
+		if (!firstDate) return
+
+		const formattedForInput = formatDate(firstDate, format)
+		if (textInputValue.value !== formattedForInput) {
+			textInputValue.value = formattedForInput
+		}
+	}
+
+	return {
+		selectedDates,
+		rangeBoundaryDates,
+		textInputValue,
+		displayFormattedDate,
+		formattedDate,
+		displayFormattedFromSelectedDates,
+		syncFromModelValue,
+		syncTextInputFromSelection,
+	}
+}

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

@@ -1,6 +1,7 @@
 import { ref, computed } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { extractRangeParts as extractRangePartsUtil, hasRangeSeparator as hasRangeSeparatorUtil, isValidDateRange } from '../utils/dateFormattingUtils'
 
 // Initialiser les plugins dayjs
 dayjs.extend(customParseFormat)
@@ -28,18 +29,14 @@ export function useDateRangeInput(
 	 * Vérifie si une chaîne de caractères contient un séparateur de plage
 	 */
 	const hasRangeSeparator = (value: string): boolean => {
-		return value.includes(rangeSeparator)
+		return hasRangeSeparatorUtil(value, 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() || '',
-		]
+		return extractRangePartsUtil(value, rangeSeparator)
 	}
 
 	/**
@@ -235,8 +232,7 @@ export function useDateRangeInput(
 	 * 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()
+		return isValidDateRange(startDate, endDate)
 	}
 
 	/**