@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/DatePicker/DatePicker.vue

@@ -6,8 +6,8 @@
 	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
 	import type { RuleOptions } from '@/composables/rules/useFieldValidation'
 
-	type DateValue = string | [string, string]
-	type DateInput = string | string[]
+	type DateValue = string | [string, string] | null
+	type DateInput = string | string[] | null | object
 
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
@@ -20,12 +20,15 @@
 		displayRange?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
+		displayPrependIcon?: boolean
 		customRules?: { type: string, options: RuleOptions }[]
 		customWarningRules?: { type: string, options: RuleOptions }[]
 		isDisabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
+		isReadOnly?: boolean
+		width?: string
 	}>(), {
 		modelValue: undefined,
 		placeholder: 'Sélectionner une date',
@@ -37,24 +40,29 @@
 		displayRange: false,
 		displayIcon: true,
 		displayAppendIcon: false,
+		displayPrependIcon: true,
 		customRules: () => [],
 		customWarningRules: () => [],
 		isDisabled: false,
 		noIcon: false,
 		noCalendar: false,
 		isOutlined: true,
+		isReadOnly: false,
+		width: '100%',
 	})
 
 	const emit = defineEmits<{
-		(e: 'update:model-value', value: DateValue): void
+		(e: 'update:modelValue', value: DateValue): void
+		(e: 'closed'): void
+		(e: 'focus'): void
+		(e: 'blur'): void
 	}>()
 
 	// Fonction pour parser les dates selon le format spécifié
-	const parseDate = (dateString: string): Date | null => {
+	const parseDate = (dateString: string, format: string = props.format): Date | null => {
 		if (!dateString) return null
 
 		// Créer un mapping des positions des éléments de date selon le format
-		const format = props.format || 'DD/MM/YYYY'
 		const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
 		const parts = format.split(separator)
 		const dateParts = dateString.split(separator)
@@ -105,6 +113,11 @@
 			return []
 		}
 
+		// Si modelValue est un objet, on le convertit en chaîne
+		if (typeof modelValue === 'object') {
+			return null
+		}
+
 		const date = parseDate(modelValue)
 		return date === null ? null : date
 	}
@@ -120,6 +133,22 @@
 	const warningMessages = ref<string[]>([])
 	const displayFormattedDate = ref('')
 
+	const textInputValue = ref<string>('')
+
+	watch(selectedDates, (newValue) => {
+		validateDates()
+		if (props.displayRange) {
+			if (Array.isArray(newValue) && newValue.length >= 2) {
+				isDatePickerVisible.value = false
+				emit('closed')
+			}
+		}
+		else {
+			isDatePickerVisible.value = false
+			emit('closed')
+		}
+	})
+
 	const getMessageClasses = () => ({
 		'dp-width': true,
 		'v-messages__message--success': successMessages.value.length > 0,
@@ -127,6 +156,10 @@
 		'v-messages__message--warning': warningMessages.value.length > 0 && errorMessages.value.length < 1,
 	})
 
+	const inputStyle = computed(() => ({
+		'min-width': '100%',
+	}))
+
 	// Formate une date unique au format spécifié
 	const formatDate = (date: Date, format: string): string => {
 		if (!date) return ''
@@ -156,6 +189,40 @@
 		return formatDate(selectedDates.value, returnFormat)
 	})
 
+	watch(formattedDate, (newValue) => {
+		if (!newValue || newValue === '') {
+			textInputValue.value = ''
+		}
+		else if (typeof newValue === 'string') {
+			// Si on a un format de retour différent, on doit convertir la date
+			if (props.dateFormatReturn) {
+				const date = parseDate(newValue, props.dateFormatReturn)
+				if (date) {
+					textInputValue.value = formatDate(date, props.format)
+				}
+			}
+			else {
+				textInputValue.value = newValue
+			}
+		}
+	}, { immediate: true })
+
+	watch(textInputValue, (newValue) => {
+		// Parse la date avec le format d'affichage
+		const date = parseDate(newValue, props.format)
+		if (date) {
+			// Si on a un format de retour, formater la date dans ce format
+			const formattedValue = props.dateFormatReturn
+				? formatDate(date, props.dateFormatReturn)
+				: formatDate(date, props.format)
+			emit('update:modelValue', formattedValue)
+		}
+		else {
+			emit('update:modelValue', newValue || null)
+		}
+		updateSelectedDates(newValue)
+	})
+
 	// Date(s) formatée(s) en chaîne de caractères pour l'affichage
 	const displayFormattedDateComputed = computed(() => {
 		if (!selectedDates.value) return null
@@ -173,20 +240,15 @@
 		return formatDate(selectedDates.value, props.format)
 	})
 
-	const validateDateValue = (value: string | string[]): DateValue => {
-		if (Array.isArray(value)) {
-			if (value.length >= 2) {
-				return [value[0], value[1]] as [string, string]
-			}
-			return value[0] || ''
-		}
-		return value
-	}
-
-	watch(formattedDate, (newValue) => {
-		const validValue = validateDateValue(newValue)
-		emit('update:model-value', validValue)
-	})
+	// const validateDateValue = (value: DateValue): DateValue => {
+	// 	if (Array.isArray(value)) {
+	// 		if (value.length >= 2) {
+	// 			return [value[0], value[1]] as [string, string]
+	// 		}
+	// 		return value[0] || ''
+	// 	}
+	// 	return value
+	// }
 
 	watch(displayFormattedDateComputed, (newValue) => {
 		if (!props.noCalendar && newValue) {
@@ -213,24 +275,20 @@
 		selectedDates.value = date === null ? null : date
 	}
 
-	watch(selectedDates, (newValue) => {
-		validateDates()
-		if (props.displayRange) {
-			if (Array.isArray(newValue) && newValue.length >= 2) {
-				isDatePickerVisible.value = false
-			}
-		}
-		else {
-			isDatePickerVisible.value = false
-		}
-	})
-
 	// Gestionnaire de clic en dehors
 	const handleClickOutside = (event: MouseEvent) => {
+		if (!isDatePickerVisible.value) return
+
 		const target = event.target as HTMLElement
-		if (!target.closest('.date-picker-container')) {
-			isDatePickerVisible.value = false
-		}
+		const container = target.closest('.date-picker-container')
+
+		// Si on clique dans le conteneur du DatePicker, on ne fait rien
+		if (container) return
+
+		isDatePickerVisible.value = false
+		emit('closed')
+		// Déclencher la validation à la fermeture
+		validateDates()
 	}
 
 	const todayInString = computed(() => {
@@ -243,10 +301,13 @@
 
 	onMounted(() => {
 		document.addEventListener('click', handleClickOutside)
+		if (props.modelValue) {
+			validateDates()
+		}
 		if (selectedDates.value !== null) {
 			validateDates()
 			// Force format application on mount
-			emit('update:model-value', formattedDate.value)
+			emit('update:modelValue', formattedDate.value)
 		}
 		if (displayFormattedDateComputed.value) {
 			displayFormattedDate.value = displayFormattedDateComputed.value
@@ -320,6 +381,11 @@
 		successMessages.value = []
 		warningMessages.value = []
 
+		if (props.noCalendar) {
+			// En mode no-calendar, on délègue la validation au DateTextInput
+			return
+		}
+
 		const addMessages = (dates, rules) => {
 			dates.forEach((date) => {
 				rules.forEach((rule) => {
@@ -359,10 +425,7 @@
 			}
 		}
 
-		if (
-			props.required
-			&& (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))
-		) {
+		if (props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
 			errorMessages.value.push('La date est requise.')
 		}
 		else if (selectedDates.value) {
@@ -385,25 +448,47 @@
 			return
 		}
 	}
+
+	// Watch sur modelValue pour gérer les changements externes
+	watch(() => props.modelValue, (newValue) => {
+		if (!newValue || newValue === '') {
+			selectedDates.value = null
+			textInputValue.value = ''
+			displayFormattedDate.value = ''
+		}
+		else {
+			selectedDates.value = initializeSelectedDates(newValue)
+		}
+	}, { immediate: true })
 </script>
 
 <template>
-	<div class="date-picker-container">
+	<div
+		class="date-picker-container"
+		:style="inputStyle"
+	>
 		<template v-if="props.noCalendar">
 			<DateTextInput
 				ref="dateTextInputRef"
-				v-model="displayFormattedDate"
+				v-model="textInputValue"
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
 				:date-format-return="props.dateFormatReturn"
 				:format="props.format"
 				:label="props.placeholder"
 				:placeholder="props.placeholder"
-				:range="props.displayRange"
 				:required="props.required"
-				:rules="props.customRules"
-				:warning-rules="props.customWarningRules"
+				:custom-rules="props.customRules"
+				:custom-warning-rules="props.customWarningRules"
+				:is-disabled="props.isDisabled"
+				:is-read-only="props.isReadOnly"
+				:is-outlined="props.isOutlined"
+				:display-icon="props.displayIcon"
+				:display-append-icon="props.displayAppendIcon"
+				:display-prepend-icon="props.displayPrependIcon"
+				:no-icon="props.noIcon"
 				title="Date text input"
-				@update:model-value="updateSelectedDates"
+				@focus="emit('focus')"
+				@blur="emit('blur')"
 			/>
 		</template>
 		<template v-else>
@@ -413,10 +498,11 @@
 				:append-inner-icon="getIcon()"
 				:class="[getMessageClasses(), 'label-hidden-on-focus']"
 				:error-messages="errorMessages"
+				:warning-messages="warningMessages"
+				:success-messages="successMessages"
 				:is-disabled="props.isDisabled"
 				:is-read-only="true"
 				:label="props.placeholder"
-				:messages="[...successMessages, ...warningMessages]"
 				:no-icon="props.noIcon"
 				:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 				:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
@@ -442,7 +528,7 @@
 					color="primary"
 				>
 					<template #title>
-						Selectionnez une date
+						Sélectionnez une date
 					</template>
 					<template #header>
 						<h3 class="mx-auto my-auto ml-5 mb-4">
@@ -463,7 +549,7 @@
 }
 
 .dp-width {
-	min-width: 345px;
+	width: v-bind('props.width');
 }
 
 .v-messages__message--success {
@@ -528,11 +614,11 @@
 }
 
 .date-picker-container {
-	max-width: 345px;
+	max-width: 100%;
 	position: relative;
 
 	:deep(.v-date-picker) {
-		width: 345px;
+		max-width: 445px;
 		position: absolute;
 		top: 56px;
 		left: 0;