@cnamts/synapse 1.0.0 → 1.0.2

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', () => {
@@ -634,4 +636,234 @@ describe('SySelect.vue', () => {
 		await clearBtn.trigger('click')
 		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([null])
 	})
+
+	describe('Multiple selection mode', () => {
+		it('handles multiple selection correctly', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: [],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Open the select menu
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Select Option 1
+			const listItems = wrapper.findAll('.v-list-item')
+			await listItems[1].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that Option 1 is selected
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['1']])
+
+			// Select Option 2 as well
+			await listItems[2].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that both options are selected
+			expect(wrapper.emitted()['update:modelValue'][1]).toEqual([['1', '2']])
+		})
+
+		it('clears all selections when default option is clicked', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Open the select menu
+			await wrapper.find('.sy-select').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Click on the default option
+			const defaultOption = wrapper.findAll('.v-list-item')[0]
+			await defaultOption.trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that all selections are cleared
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[]])
+		})
+
+		it('treats default option as selected when no items are selected', async () => {
+			const items = [
+				{ text: '-choisir-', value: null },
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					modelValue: [],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+
+			// Check that the selectedItemText is the default option
+			expect(instance.selectedItemText).toBe('-choisir-')
+
+			// Check that isDefaultOption returns true for the default item
+			const defaultItem = items[0]
+			expect(instance.isDefaultOption(defaultItem)).toBe(true)
+
+			// Check that isItemSelected returns true for the default item when no selections
+			expect(instance.isItemSelected(defaultItem)).toBe(true)
+		})
+	})
+
+	describe('Chips mode', () => {
+		it('renders chips for selected items', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips are rendered
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+		})
+
+		it('removes a chip when close button is clicked', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: '2' },
+				{ text: 'Option 3', value: '3' },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', '2'],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Find the first chip's close button and click it
+			const closeButton = wrapper.find('.v-chip__close')
+			await closeButton.trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Check that the chip was removed from the model
+			expect(wrapper.emitted()['update:modelValue'][0]).toEqual([['2']])
+		})
+
+		it('handles chip text correctly for object items', async () => {
+			const items = [
+				{ text: 'Option 1', value: '1', data: { id: 101 } },
+				{ text: 'Option 2', value: '2', data: { id: 102 } },
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					returnObject: true,
+					modelValue: [items[0], items[1]],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips display the correct text
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+		})
+
+		it('safely handles different item types in chips', async () => {
+			// This test verifies our safeChipItem function works correctly
+			const items = [
+				{ text: 'Option 1', value: '1' },
+				{ text: 'Option 2', value: 2 }, // Number value
+			]
+			const wrapper = mount(SySelect, {
+				props: {
+					items,
+					multiple: true,
+					chips: true,
+					modelValue: ['1', 2],
+					textKey: 'text',
+					valueKey: 'value',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that chips are rendered without errors
+			const chips = wrapper.findAll('.v-chip')
+			expect(chips.length).toBe(2)
+			expect(chips[0].text()).toBe('Option 1')
+			expect(chips[1].text()).toBe('Option 2')
+
+			// Test the safeChipItem method directly
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			const stringResult = instance.safeChipItem('test')
+			const numberResult = instance.safeChipItem(123)
+			const objectResult = instance.safeChipItem({ id: 3 })
+
+			expect(stringResult).toBe('test')
+			expect(numberResult).toBe(123)
+			expect(typeof objectResult).toBe('object')
+		})
+	})
 })

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.stories.ts

@@ -138,7 +138,7 @@ const meta = {
 		},
 		'bgColor': {
 			description: 'Couleur de fond du champ',
-			control: 'text',
+			control: 'color',
 		},
 		'centerAffix': {
 			description: 'Centre verticalement les éléments ajoutés avant/après le champ',
@@ -217,13 +217,14 @@ const meta = {
 			default: false,
 		},
 		'displayPersistentPlaceholder': {
-			description: 'Garde le placeholder visible même avec une valeur',
+			description: 'Garde le placeholder visible. Si le champ est vide, le placeholder reste affiché',
 			control: 'boolean',
 			default: false,
 		},
 		'placeholder': {
 			description: 'Texte affiché quand le champ est vide',
 			control: 'text',
+			default: 'Placeholder',
 		},
 		'prefix': {
 			description: 'Texte affiché avant la valeur: prefix="€" : affichera "€" avant la valeur saisie',

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

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+	// Prevent display-asterisk from being passed to the DOM
+	defineOptions({
+		inheritAttrs: false,
+	})
 	import { computed, onMounted, ref, watch, nextTick, type ComponentPublicInstance } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
@@ -92,7 +96,7 @@
 			tooltipLocation: 'top',
 			variantStyle: 'outlined',
 			color: 'primary',
-			label: 'custom label',
+			label: '',
 			errorMessages: null,
 			warningMessages: null,
 			successMessages: null,
@@ -100,7 +104,7 @@
 			isClearable: false,
 			isActive: false,
 			baseColor: undefined,
-			bgColor: undefined,
+			bgColor: 'white',
 			centerAffix: undefined,
 			counter: false,
 			counterValue: undefined,
@@ -253,7 +257,7 @@
 
 	const hasError = computed(() => validation.hasError.value)
 	const hasWarning = computed(() => validation.hasWarning.value)
-	const hasSuccess = computed(() => validation.hasSuccess.value)
+	const hasSuccess = computed(() => validation.hasSuccess.value && !hasError.value && !hasWarning.value)
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
@@ -338,6 +342,12 @@
 			setAriaHidden('.v-text-field__suffix')
 			addSrOnlySpan('.v-text-field__prefix')
 			addSrOnlySpan('.v-text-field__suffix')
+
+			// Remove aria-describedby attribute
+			const inputElement = syTextFieldRef.value?.$el?.querySelector('input')
+			if (inputElement) {
+				inputElement.removeAttribute('aria-describedby')
+			}
 		})
 	})
 
@@ -399,6 +409,7 @@
 		:type="props.type"
 		:variant="props.variantStyle"
 		:width="props.width"
+		v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk'))"
 		:class="{
 			'error-field': hasError,
 			'warning-field': hasWarning,
@@ -519,11 +530,11 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
-:deep(.v-field__input input::placeholder),
-:deep(input.v-field__input::placeholder),
-:deep(textarea.v-field__input::placeholder) {
-	opacity: 0;
-}
+// :deep(.v-field__input input::placeholder),
+// :deep(input.v-field__input::placeholder),
+// :deep(textarea.v-field__input::placeholder) {
+// 	opacity: 0;
+// }
 
 .warning-field {
 	:deep(.v-input__details > .v-icon),

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