@cnamts/synapse 0.0.16-alpha → 1.0.1

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.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
 		}
@@ -233,8 +249,11 @@
 			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			:bg-color="props.bgColor"
+			:density="props.density"
 			readonly
+			:hide-details="props.hideMessages"
 			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

@@ -50,12 +50,14 @@ describe('SySelect.vue', () => {
 	it('renders error messages when provided', () => {
 		const errorMessages = ['Error 1']
 		const wrapper = mount(SySelect, {
-			props: { errorMessages },
+			props: { errorMessages, hideMessages: false },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		expect(wrapper.find('.v-messages__message').text()).toContain('Error 1')
+		const message = wrapper.find('.v-messages__message')
+		expect(message.exists()).toBe(true)
+		expect(message.text()).toContain('Error 1')
 	})
 
 	it('does not render error messages when not provided', () => {
@@ -192,14 +194,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/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

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/DataList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DataListGroup/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DatePicker/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.mdx

@@ -0,0 +1,212 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as DatePickerStories from "./ComplexDatePicker.stories.ts";
+
+<Meta of={DatePickerStories}/>
+
+# DatePicker - Mode combiné
+
+Le DatePicker en mode combiné (`useCombinedMode: true`) permet d'utiliser à la fois le calendrier interactif et la saisie manuelle avec formatage automatique.
+
+## Description
+
+Cette variante du DatePicker est particulièrement utile lorsque :
+- Vous souhaitez offrir plusieurs méthodes de saisie de date aux utilisateurs
+- Vous avez besoin du formatage automatique intelligent des dates pendant la saisie
+- Vous voulez conserver l'interaction avec le calendrier pour une meilleure expérience utilisateur
+
+Le formatage automatique intelligent ajoute les séparateurs (/, -, etc.) pendant la saisie en fonction du format spécifié.
+
+<Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
+
+## Propriétés spécifiques
+
+Propriétés applicables pour le mode combiné :
+
+<Controls of={DatePickerStories.Default}/>
+
+
+# Fonctionnalités spécifiques
+
+## Formatage automatique des dates
+
+Le composant ComplexDatePicker offre un formatage automatique intelligent des dates pendant la saisie. Les séparateurs sont automatiquement ajoutés lors de la saisie des chiffres, en s'adaptant au format spécifié (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.).
+
+<Canvas of={DatePickerStories.AutoFormattingInput}/>
+
+## Désactivation de l'interaction avec le calendrier
+
+La propriété `disablePickerInteraction` permet d'utiliser le champ de saisie avec formatage automatique sans que le calendrier n'apparaisse au clic sur l'input ou sur l'icône. Cette option est utile pour les cas où on souhaite uniquement la saisie manuelle.
+
+<Canvas of={DatePickerStories.DisablePickerInteraction}/>
+
+## Formats de date personnalisés
+
+Le composant supporte différents formats de date et détecte automatiquement le séparateur utilisé dans le format (/, -, ., etc.) pour l'appliquer lors de la saisie.
+
+<Canvas of={DatePickerStories.CustomDateFormat}/>
+
+## Mode lecture seule
+
+Le composant peut être configuré en mode lecture seule, ce qui empêche toute modification de la valeur.
+
+<Canvas of={DatePickerStories.ReadonlyMode}/>
+
+## Plages de dates
+
+Le composant permet la sélection de plages de dates avec validation automatique.
+
+<Canvas of={DatePickerStories.DateRange}/>
+
+### DatePicker avec période personnalisée
+
+
+<div
+    style={{
+        border: '2px solid #FF0000',
+        padding: '1rem',
+        borderRadius: '4px',
+        marginBottom: '1rem',
+    }}
+>
+    <strong>Note importante</strong>
+    <ul>
+        <li>La prop <code>period</code> permet de définir une période de dates valides. Les dates en dehors de cette période ne seront pas visibles dans le calendrier.</li>
+        <li>Le format de la prop <code>period</code> est <code>MM/DD/YYYY</code>.</li>
+    </ul>
+</div>
+
+<Canvas of={DatePickerStories.WithCustomPeriod}/>
+
+## Personnalisation des icônes
+
+Vous pouvez personnaliser la position de l'icône du calendrier (au début ou à la fin du champ).
+
+<Canvas of={DatePickerStories.WithCustomIcons}/>
+
+## Activation par le champ de texte
+
+La propriété `textFieldActivator` permet d'ouvrir le calendrier en cliquant n'importe où sur le champ de texte.
+
+<Canvas of={DatePickerStories.WithTextFieldActivator}/>
+
+
+# Validation et règles personnalisées
+
+Le composant prend en charge des règles de validation personnalisées pour vérifier les dates saisies.
+
+<Canvas of={DatePickerStories.WithValidation}/>
+
+## Formats de retour différents
+
+Vous pouvez spécifier un format différent pour la valeur de retour avec la propriété `dateFormatReturn`.
+
+<Canvas of={DatePickerStories.WithDateFormatReturn}/>
+
+## Intégration dans un formulaire
+
+Le composant s'intègre facilement dans un formulaire avec validation à la soumission.
+
+<Canvas of={DatePickerStories.WithFormSubmission}/>
+
+# Méthodes exposées
+
+Le composant expose plusieurs méthodes qui peuvent être utilisées via une référence :
+
+### validateOnSubmit
+- **Description** : Valide le champ lors de la soumission d'un formulaire
+- **Retour** : `boolean` - Indique si la validation a réussi
+
+### clearValidation
+- **Description** : Efface les messages de validation
+
+### validateDates
+- **Description** : Valide les dates sélectionnées
+
+### openDatePicker
+- **Description** : Ouvre le calendrier programmatiquement
+
+### toggleDatePicker
+- **Description** : Bascule l'état d'ouverture du calendrier
+
+### Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+	const datePicker = ref(null)
+
+	const submitForm = () => {
+		const isValid = datePicker.value.validateOnSubmit()
+		if (isValid) {
+			// Traitement du formulaire
+		}
+	}
+</script>
+
+<template>
+	<form @submit.prevent="submitForm">
+		<DatePicker
+			ref="datePicker"
+			v-model="date"
+			placeholder="Date requise"
+			format="DD/MM/YYYY"
+            useCombinedMode
+			required
+		/>
+		<button type="submit">Soumettre</button>
+	</form>
+</template>
+`}
+/>
+
+### Exemple avec période personnalisée
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+</script>
+
+<template>
+	<DatePicker
+		v-model="date"
+		placeholder="Sélectionner une date (1995-2005)"
+		format="DD/MM/YYYY"
+		useCombinedMode
+		:period="{
+			min: '01/01/1995',
+			max: '31/12/2005'
+		}"
+	/>
+</template>
+`}
+/>
+
+# Événements
+
+Le composant émet plusieurs événements :
+
+### update:modelValue
+- **Payload** : `string | string[]` - La nouvelle valeur du champ
+
+### closed
+- **Description** : Émis lorsque le calendrier est fermé
+
+### focus
+- **Description** : Émis lorsque le champ reçoit le focus
+
+### blur
+- **Description** : Émis lorsque le champ perd le focus
+
+### input
+- **Payload** : `string` - La valeur saisie dans le champ
+
+### date-selected
+- **Payload** : `Date | Date[] | null` - La date ou les dates sélectionnées