@cnamts/synapse 0.0.16-alpha → 1.0.0

package/src/components/Customs/SySelect/SySelect.vue

@@ -61,6 +61,10 @@
 			type: Boolean,
 			default: false,
 		},
+		density: {
+			type: String as PropType<'default' | 'comfortable' | 'compact' | undefined>,
+			default: 'default',
+		},
 		bgColor: {
 			type: String,
 			default: undefined,
@@ -73,6 +77,14 @@
 			type: Boolean,
 			default: false,
 		},
+		hideMessages: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: String,
+			default: 'undefined',
+		},
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -100,9 +112,8 @@
 			const rect = input.value.$el.getBoundingClientRect()
 			listStyles.value = {
 				position: 'fixed',
-				top: `${rect.bottom}px`,
+				top: props.density === 'compact' ? `${rect.bottom + 22}px` : `${rect.bottom}px`,
 				left: `${rect.left}px`,
-				width: `${rect.width}px`,
 				zIndex: '999',
 			}
 		}
@@ -159,21 +170,27 @@
 	})
 
 	const isRequired = computed(() => {
-		// Si la gestion des erreurs est désactivée, on ne considère jamais le champ comme requis
-		if (props.disableErrorHandling) return false
+		if (props.disableErrorHandling || props.hideMessages) return false
+		if (props.readonly) return
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
 
 	const input = ref<InstanceType<typeof VTextField> | null>(null)
 
+	const calculatedWidth = computed(() => {
+		const baseWidth = props.width ? Number(props.width) : 0
+		const selectedText = typeof selectedItemText.value === 'string' ? selectedItemText.value : ''
+		const clearableAdjustment = props.clearable ? 4 : 0
+		return `${baseWidth + selectedText.length * (4 + clearableAdjustment)}px`
+	})
+
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
 
 	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
 		if (!newIsOpen) {
-			// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
-			if (props.disableErrorHandling) {
+			if (props.disableErrorHandling || props.readonly) {
 				hasError.value = false
 			}
 			else {
@@ -186,7 +203,6 @@
 	})
 
 	watch(() => props.errorMessages, (newValue) => {
-		// Si la gestion des erreurs est désactivée, on ne met jamais hasError à true
 		if (!props.disableErrorHandling) {
 			hasError.value = newValue.length > 0
 		}
@@ -202,6 +218,13 @@
 		}
 		window.addEventListener('scroll', updateListPosition, true)
 		window.addEventListener('resize', updateListPosition)
+
+		if (props.hideMessages) {
+			const message = document.querySelector('.v-input__details')
+			if (message) {
+				message.classList.add('d-sr-only')
+			}
+		}
 	})
 
 	onUnmounted(() => {
@@ -230,11 +253,13 @@
 			:aria-label="labelWithAsterisk"
 			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
+			:rules="isRequired && !props.disableErrorHandling && !props.hideMessages ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			:bg-color="props.bgColor"
+			:density="props.density"
 			readonly
 			class="sy-select"
+			:width="calculatedWidth"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
 			@click="toggleMenu"
 			@keydown.enter.prevent="toggleMenu"

package/src/components/Customs/SySelect/tests/SySelect.spec.ts

@@ -192,14 +192,303 @@ describe('SySelect.vue', () => {
 		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['1'])
 	})
 
-	it('closes the menu when v-click-outside directive is called', async () => {
+	it('ferme le menu avec la méthode closeList', async () => {
 		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const instance = wrapper.vm as any
+		expect(instance.isOpen).toBe(true)
+
+		instance.closeList()
+		await wrapper.vm.$nextTick()
+
+		expect(instance.isOpen).toBe(false)
+	})
+
+	describe('Affichage de l\'astérisque', () => {
+		it('affiche l\'astérisque quand displayAsterisk et required sont true', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: true,
+					required: true,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).toContain('Test Label *')
+		})
+
+		it('n\'affiche pas l\'astérisque quand displayAsterisk est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: false,
+					required: true,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).not.toContain('Test Label *')
+			expect(html).toContain('Test Label')
+		})
+
+		it('n\'affiche pas l\'astérisque quand required est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					displayAsterisk: true,
+					required: false,
+					label: 'Test Label',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const html = wrapper.html()
+			expect(html).not.toContain('Test Label *')
+			expect(html).toContain('Test Label')
+		})
+	})
+
+	describe('Mode readonly', () => {
+		it('empêche l\'ouverture du menu en mode readonly', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					readonly: true,
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.isOpen).toBe(false)
+		})
+
+		it('affiche correctement le champ en mode readonly', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					readonly: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					textKey: 'text',
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-input--readonly').exists()).toBe(true)
+
+			expect(wrapper.html()).toContain('Option 1')
+		})
+	})
+
+	describe('Option clearable', () => {
+		it('affiche l\'icône de suppression quand clearable est true et qu\'une valeur est sélectionnée', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.sy-select__clear-icon').exists()).toBe(true)
+		})
+
+		it('n\'affiche pas l\'icône de suppression quand clearable est false', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: false,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-icon.mdi-close-circle').exists()).toBe(false)
+		})
+
+		it('efface la valeur sélectionnée avec la méthode selectItem', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					clearable: true,
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			instance.selectItem(null)
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
+		})
+	})
+
+	describe('Validation', () => {
+		it('affiche une erreur pour un champ requis sans valeur', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(true)
+		})
+
+		it('n\'affiche pas d\'erreur pour un champ requis avec une valeur', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: { text: 'Option 1', value: '1' },
+					returnObject: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+		})
+
+		it('n\'affiche pas d\'erreur quand disableErrorHandling est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+					disableErrorHandling: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+		})
+	})
+
+	describe('Comportement du menu', () => {
+		it('ouvre et ferme le menu au clic', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(true)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.v-list').exists()).toBe(false)
+		})
+
+		it('met à jour isOpen quand on ouvre le menu', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [{ text: 'Option 1', value: '1' }],
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.isOpen).toBe(false)
+
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			expect(instance.isOpen).toBe(true)
+		})
+	})
+
+	it('ferme le menu après un clic sur le sélecteur', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+			},
 			global: {
 				plugins: [vuetify],
 			},
 		})
+
 		await wrapper.find('.sy-select').trigger('click')
+		await wrapper.vm.$nextTick()
 		expect(wrapper.find('.v-list').exists()).toBe(true)
+
 		await wrapper.find('.sy-select').trigger('mouseleave')
 		await wrapper.find('.sy-select').trigger('click')
 		await wrapper.vm.$nextTick()

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -212,7 +212,11 @@
 	)
 
 	const validateField = (value: string | number | null) => {
-		// Si le champ est vide et non requis, on ne fait pas de validation
+		if (props.readonly) {
+			validation.clearValidation()
+			return true
+		}
+
 		if (!value && !props.required) {
 			validation.clearValidation()
 			return true
@@ -247,7 +251,6 @@
 		}
 	})
 
-	// Computed pour l'affichage des états
 	const hasError = computed(() => validation.hasError.value)
 	const hasWarning = computed(() => validation.hasWarning.value)
 	const hasSuccess = computed(() => validation.hasSuccess.value)
@@ -256,7 +259,6 @@
 	const warnings = computed(() => validation.warnings.value)
 	const successes = computed(() => validation.successes.value)
 
-	// Computed pour les icônes
 	const appendInnerIconColor = computed(() => {
 		if (props.appendInnerIcon === 'error') return 'error'
 		if (props.appendInnerIcon === 'success') return 'success'

package/src/components/DatePicker/DatePicker.vue

@@ -86,7 +86,15 @@
 		warningRules: props.customWarningRules,
 		disableErrorHandling: props.disableErrorHandling,
 	})
-	const { errors, warnings, successes, validateField, clearValidation } = validation
+	const { errors, warnings, successes, validateField, clearValidation } = !props.readonly
+		? validation
+		: {
+			errors: ref<string[]>([]),
+			warnings: ref<string[]>([]),
+			successes: ref<string[]>([]),
+			validateField: () => {},
+			clearValidation: () => {},
+		}
 
 	const errorMessages = errors
 	const warningMessages = warnings
@@ -114,6 +122,9 @@
 
 		// Vérifier si le champ est requis et vide
 		if ((forceValidation || !isUpdatingFromInternal.value) && props.required && (!selectedDates.value || (Array.isArray(selectedDates.value) && selectedDates.value.length === 0))) {
+			if (props.readonly) {
+				return
+			}
 			if (shouldDisplayErrors) {
 				errors.value.push('La date est requise.')
 			}
@@ -347,8 +358,10 @@
 			return
 		}
 
-		const date = input ? parseDate(input, props.format) : null
-		selectedDates.value = date === null ? null : date
+		if (!props.displayRange) {
+			const date = input ? parseDate(input, props.format) : null
+			selectedDates.value = date === null ? null : date
+		}
 	}
 
 	// Gestionnaire de clic en dehors

package/src/components/DatePicker/DateTextInput.vue

@@ -64,11 +64,20 @@
 		hasError,
 		clearValidation,
 		validateField,
-	} = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.label || props.placeholder,
-		disableErrorHandling: props.disableErrorHandling,
-	})
+	} = !props.readonly
+		? 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: () => {},
+		}
 
 	const errorMessages = errors
 	const warningMessages = warnings
@@ -114,6 +123,7 @@
 	}
 
 	const validateDateFormat = (dateStr: string): { isValid: boolean, message: string } => {
+		if (props.readonly) return { isValid: true, message: '' }
 		if (!dateStr) {
 			return {
 				isValid: !props.required || !hasInteracted.value || props.disableErrorHandling,
@@ -145,6 +155,7 @@
 		clearValidation()
 
 		if (!value && props.required && hasInteracted.value) {
+			if (props.readonly) return true
 			if (!props.disableErrorHandling) {
 				errors.value.push('La date est requise')
 			}

package/src/components/DatePicker/examples/DatePickerHolidayRule.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+	import { ref, computed } from 'vue'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+
+	const selectedDate = ref('')
+	const { generateRules } = useFieldValidation()
+	const { isHolidayDay, getJoursFeries } = useHolidayDay()
+
+	// Année courante pour afficher les jours fériés
+	const currentYear = new Date().getFullYear()
+
+	// Création de la règle qui vérifie qu'une date n'est pas un jour férié
+	const holidayRules = generateRules([
+		{
+			type: 'isHolidayDay',
+			options: {
+				fieldName: 'La date',
+				message: 'Vous ne pouvez pas sélectionner un jour férié.',
+			},
+		},
+	])
+
+	// Vérification si la date sélectionnée est un jour férié (pour l'affichage)
+	const isDateHoliday = computed(() => {
+		if (!selectedDate.value) return false
+		return isHolidayDay(selectedDate.value)
+	})
+
+	// Liste des jours fériés de l'année courante
+	const currentYearHolidays = computed(() => {
+		const holidays = getJoursFeries(currentYear)
+		return Array.from(holidays).sort()
+	})
+</script>
+
+<template>
+	<div class="date-picker-holiday-example">
+		<h2>DatePicker avec règle de validation pour jours fériés</h2>
+		<p>
+			Cet exemple montre comment utiliser la règle <code>isHolidayDay</code> pour empêcher
+			la sélection de jours fériés dans un DatePicker.
+		</p>
+
+		<div class="date-picker-container">
+			<DatePicker
+				v-model="selectedDate"
+				label="Date (pas de jour férié)"
+				:rules="holidayRules"
+				error-messages
+				placeholder="Sélectionnez une date non fériée"
+			/>
+		</div>
+
+		<div class="info-container mt-4">
+			<h3>Informations</h3>
+			<p>Date sélectionnée : <strong>{{ selectedDate || 'Aucune' }}</strong></p>
+
+			<div
+				v-if="selectedDate"
+				class="mt-2"
+			>
+				<p
+					v-if="isDateHoliday"
+					class="error-text"
+				>
+					⚠️ Le {{ selectedDate }} est un jour férié.
+				</p>
+				<p
+					v-else
+					class="success-text"
+				>
+					✅ Le {{ selectedDate }} n'est pas un jour férié.
+				</p>
+			</div>
+
+			<div
+				v-if="currentYearHolidays.length"
+				class="holiday-list mt-4"
+			>
+				<h4>Jours fériés {{ currentYear }} :</h4>
+				<ul>
+					<li
+						v-for="(date, index) in currentYearHolidays"
+						:key="index"
+					>
+						{{ date }}
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.date-picker-holiday-example {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 20px;
+}
+
+.date-picker-container {
+	max-width: 400px;
+}
+
+.info-container {
+	background-color: #f5f5f5;
+	padding: 15px;
+	border-radius: 4px;
+}
+
+.error-text {
+	color: #d32f2f;
+	font-weight: bold;
+}
+
+.success-text {
+	color: #2e7d32;
+	font-weight: bold;
+}
+
+.holiday-list {
+	max-height: 200px;
+	overflow-y: auto;
+	background-color: #fff;
+	padding: 10px;
+	border-radius: 4px;
+	border: 1px solid #e0e0e0;
+}
+</style>