@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
-import { VMenu, VChip } from 'vuetify/components'
+import { VMenu } from 'vuetify/components'
 
 import SyAutocomplete from '../SyAutocomplete.vue'
 import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -128,13 +128,13 @@ describe('SyAutocomplete', () => {
 
 		// Some environments can emit a follow-up input event with the previous DOM value.
 		// Ensure it doesn't re-populate the query after selection.
-		textField.vm.$emit('update:modelValue', 'Option 1, Opt')
+		textField.vm.$emit('update:modelValue', 'Opt')
 		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		// Query should be cleared, leaving only selected label prefix in input
+		// Search and input should be cleared; selected items render as inline labels, not in input value
 		expect(wrapper.vm.search).toBe('')
-		expect(getInputEl()!.value).toBe('Option 1, ')
+		expect(getInputEl()!.value).toBe('')
 	})
 
 	it('displays chips in multiple mode', async () => {
@@ -150,12 +150,13 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
 		})
 
 		await wrapper.vm.$nextTick()
-		const chips = wrapper.findAllComponents(VChip)
+		const chips = wrapper.findAll('.v-chip')
 		expect(chips.length).toBe(1)
-		expect(chips[0]!.text()).toBe('Option 1')
+		expect(chips[0]!.text()).toContain('Option 1')
 	})
 
 	it('removes chip when close button is clicked', async () => {
@@ -171,14 +172,15 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
 		})
 
 		await wrapper.vm.$nextTick()
-		const chip = wrapper.findComponent(VChip)
-		await chip.vm.$emit('click:close')
+		const closeBtn = wrapper.find('.v-chip__close')
+		await closeBtn.trigger('click')
 		await wrapper.vm.$nextTick()
 
-		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
 	})
 
 	it('shows clear button when clearable and has selection', async () => {
@@ -298,6 +300,181 @@ describe('SyAutocomplete', () => {
 		expect(isMenuOverlayActive()).toBe(false)
 	})
 
+	describe('selectionText', () => {
+		const selectionText = (selected: unknown[]) => `${selected.length} élément${selected.length > 1 ? 's' : ''} sélectionné${selected.length > 1 ? 's' : ''}`
+
+		it('displays custom text in prepend-inner when items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const selectionTextEl = wrapper.find('.sy-autocomplete__selection-text')
+			expect(selectionTextEl.exists()).toBe(true)
+			expect(selectionTextEl.text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('does not display selection text element when no items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: [],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText vide',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.sy-autocomplete__selection-text').exists()).toBe(false)
+		})
+
+		it('keeps custom text visible when menu is open', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText ouvert',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// Custom text still visible in prepend-inner, input empty for searching
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('updates custom text when selection changes', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText update',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('1 élément sélectionné')
+
+			await wrapper.setProps({ modelValue: ['1', '2', '3'] })
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('3 éléments sélectionnés')
+		})
+	})
+
+	describe('loading', () => {
+		it('shows progress bar when loading is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Loading',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(true)
+		})
+
+		it('does not show progress bar when loading is false', async () => {
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(false)
+		})
+
+		it('hides no-data message while loading', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading No Data',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// No-data item should not appear while loading
+			const noDataItem = document.body.querySelector(`#${menuId} .v-list-item`)
+			expect(noDataItem).toBeNull()
+		})
+
+		it('shows no-data message once loading is done and items is empty', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading Done',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: false,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			const listItems = document.body.querySelectorAll(`#${menuId} .v-list-item`)
+			const texts = Array.from(listItems).map(el => el.textContent?.trim())
+			expect(texts).toContain('Aucune option')
+		})
+	})
+
 	it('selects and deselects items in multiple mode (mouse + keyboard)', async () => {
 		wrapper.unmount()
 		wrapper = mount(SyAutocomplete, {
@@ -342,4 +519,52 @@ describe('SyAutocomplete', () => {
 		option0 = getOption(0)
 		expect(option0?.getAttribute('aria-selected')).toBe('false')
 	})
+
+	describe('hideDetails', () => {
+		it('hides the details zone when hideDetails is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+		})
+
+		it('shows the details zone when hideDetails is false', async () => {
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(true)
+		})
+
+		it('does not show error messages when hideDetails is true even with validation errors', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails + erreur',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					hasError: true,
+					errorMessages: ['Erreur de validation'],
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+			expect(wrapper.find('.v-messages').exists()).toBe(false)
+		})
+	})
 })

package/src/components/Customs/Selects/SyAutocomplete/utils/ariaManager.ts

@@ -145,9 +145,19 @@ export const ariaManager = {
 						popupRendered,
 					},
 				)
-				const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
-				if (labelToApply) {
-					inputEl.setAttribute('aria-label', labelToApply)
+				const labelledById = inputEl.getAttribute('aria-labelledby')
+				const labelElement = labelledById ? document.getElementById(labelledById) : null
+				const labelElementHasText = Boolean(labelElement?.textContent?.trim())
+				if (labelElementHasText) {
+					// aria-labelledby references a visible label — aria-label is redundant and causes validator errors
+					inputEl.removeAttribute('aria-label')
+				}
+				else {
+					// No visible label element (e.g. chips mode with label="") — use aria-label as fallback
+					const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
+					if (labelToApply) {
+						inputEl.setAttribute('aria-label', labelToApply)
+					}
 				}
 				inputEl.setAttribute('aria-haspopup', 'listbox')
 				if (!popupRendered) {

package/src/components/Customs/Selects/SyAutocomplete/utils/useSelectionLogic.ts

@@ -19,15 +19,9 @@ export function useSelectionLogic(
 	emit: EmitFunction,
 ) {
 	const resetValue = () => {
-		if (props.multiple) {
-			selected.value = []
-			emit('update:modelValue', [])
-		}
-		else {
-			selected.value = null
-			search.value = ''
-			emit('update:modelValue', null)
-		}
+		selected.value = null
+		search.value = ''
+		emit('update:modelValue', null)
 	}
 
 	const updateMultipleSelection = (valueKeyValue: string | number, valueToStore: ItemType | string | number) => {
@@ -44,7 +38,12 @@ export function useSelectionLogic(
 			arr.push(valueToStore)
 		}
 		selected.value = arr as SelectArray
-		emit('update:modelValue', arr as SelectArray)
+		if (arr.length === 0) {
+			emit('update:modelValue', null)
+		}
+		else {
+			emit('update:modelValue', arr as SelectArray)
+		}
 	}
 
 	const updateSingleSelection = (valueToStore: SelectValue, item: ItemType) => {

package/src/components/Customs/Selects/SyInputSelect/SyInputSelect.stories.ts

@@ -3,6 +3,7 @@ import SyInputSelect from './SyInputSelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
 import { ref } from 'vue'
 import SyAlert from '../../../SyAlert/SyAlert.vue'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 const meta = {
 	title: 'Composants/Formulaires/Selects/SyInputSelect',
@@ -601,16 +602,9 @@ const validateForm = () => {
 	},
 }
 
-// depreciation notice
 export const DeprecationNotice = {
-	render: () => ({
-		components: { SyAlert },
-		template: `
-			<SyAlert type="warning" variant="tonal" :closable="false">
-				<b>Ce composant est déprécié</b>, il ne sera plus maintenu ou mis à jour.<br/>
-				Nous vous recommandons d'utiliser à la place le composant <a class="text-primary" href="/?path=/docs/composants-formulaires-selects-syselect--docs"><code>SySelect</code></a>.
-			</SyAlert>
-		`,
-	}),
+	...createDeprecationNotice([
+		{ label: 'SySelect', url: '/?path=/docs/composants-formulaires-selects-syselect--docs' },
+	]),
 	tags: ['!dev'],
 }

package/src/components/Customs/Selects/SySelect/SySelect.mdx

@@ -25,7 +25,6 @@ Il est basé sur un `v-textfield`.</p>
 	import { SySelect } from '@cnamts/synapse'
 
 	const selectedValue = ref(undefined)
-import '../../../../stories/styles/shared.css';
 
 	const items = [
 		{ text: 'Option 1', value: '1' },

package/src/components/Customs/Selects/SySelect/SySelect.stories.ts

@@ -116,7 +116,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -189,7 +189,7 @@ export const Default: Story = {
 export const HelpText: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -266,7 +266,7 @@ export const HelpText: Story = {
 export const Required: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -327,7 +327,7 @@ export const Required: Story = {
 export const RequiredWithAsterisk: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -395,7 +395,7 @@ const items = [
 export const SlotPrepend: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -462,7 +462,7 @@ export const SlotPrepend: Story = {
 export const SlotAppend: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -562,7 +562,7 @@ export const WithTooltips: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -777,7 +777,7 @@ const options = [
 export const withCustomError: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -855,7 +855,7 @@ export const withCustomError: Story = {
 export const withCustomKey: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -936,7 +936,7 @@ export const Info: Story = {
 export const FormValidation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {

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

@@ -414,6 +414,11 @@
 			return ''
 		}
 
+		// If inline labels are shown, return empty string to hide input text
+		if (hasMultipleSelections.value) {
+			return ''
+		}
+
 		// For multiple mode, show default option text when nothing is selected
 		if (props.multiple) {
 			if (!selectedItem.value || (Array.isArray(selectedItem.value) && selectedItem.value.length === 0)) {
@@ -457,6 +462,10 @@
 		return props.chips && props.multiple && Array.isArray(selectedItem.value) && selectedItem.value.length > 0
 	})
 
+	const hasMultipleSelections = computed(() => {
+		return !props.chips && props.multiple && Array.isArray(selectedItem.value) && (selectedItem.value as unknown[]).length > 0
+	})
+
 	const hasSelectionToClear = computed(() => {
 		return props.multiple
 			? (((selectedItem.value as unknown[] | null | undefined)?.length) ?? 0) > 0
@@ -904,7 +913,10 @@
 			<template #activator="{ props: activatorProps }">
 				<div
 					class="sy-select"
-					:class="{ 'sy-select--clearable': props.clearable }"
+					:class="{
+						'sy-select--clearable': props.clearable,
+						'sy-select--with-chips': hasChips,
+					}"
 				>
 					<VTextField
 						:id="inputId"
@@ -920,7 +932,7 @@
 						:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 						:bg-color="props.bgColor"
 						:density="props.density"
-						:active="hasChips || isOpen"
+						:active="hasChips || hasMultipleSelections || isOpen"
 						readonly
 						:hide-details="props.hideMessages && !showHelpTextAsMessage"
 						:hint="showHelpTextAsMessage ? props.helpText : ''"
@@ -955,12 +967,21 @@
 								size="small"
 								class="ma-1"
 								closable
-								:close-label="`Supprimer ${getChipText(item)}`"
+								:close-label="locales.removeChip(getChipText(item))"
 								@click:close="removeChip(item)"
 							>
 								{{ getChipText(item) }}
 							</VChip>
 						</div>
+						<template v-else-if="hasMultipleSelections">
+							<span
+								v-for="item in (selectedItem as unknown[])"
+								:key="props.returnObject && item ? String((item as ItemType)[props.valueKey]) : String(item)"
+								class="sy-select__label"
+							>
+								{{ getChipText(item) }}
+							</span>
+						</template>
 						<!-- Prepend -->
 						<template
 							v-if="$slots.prepend || props.prependIcon || props.prependTooltip"
@@ -1048,8 +1069,21 @@
 			<VList
 				:id="uniqueMenuId"
 				ref="list"
+				class="v-list"
+				role="listbox"
 				:aria-label="$attrs['aria-label'] || labelWithAsterisk"
 				:title="$attrs['aria-label'] || labelWithAsterisk"
+				:style="{
+					minWidth: `${textInput?.$el.offsetWidth}px`
+				}"
+				bg-color="white"
+				tabindex="0"
+				@keydown.esc.prevent="closeList"
+				@keydown.tab="handleTabKey"
+				@keydown.enter.prevent="handleEnterKey"
+				@keydown.down.prevent="handleDownKey"
+				@keydown.up.prevent="handleUpKey"
+				@keydown.home.prevent="handleHomeKey"
 				@keydown.end.prevent="handleEndKey"
 				@keydown.page-up.prevent="handlePageUpKey"
 				@keydown.page-down.prevent="handlePageDownKey"
@@ -1184,6 +1218,10 @@
 	background-color: rgb(0 0 0 / 8%);
 }
 
+.v-list-item :deep(.v-list-item__overlay) {
+	background-color: transparent;
+}
+
 /* Permettre le passage à la ligne pour les textes longs dans la liste déroulante */
 .v-list-item-title {
 	white-space: normal;
@@ -1210,6 +1248,11 @@
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
+/* Style spécifique pour les chips */
+:deep(.v-chip .v-chip__close .v-icon__svg) {
+	fill: inherit !important;
+}
+
 .sy-select__clear-button {
 	position: absolute;
 	background: transparent;
@@ -1232,6 +1275,18 @@
 	margin: 2px;
 }
 
+.sy-select__label {
+	align-self: center;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-size: inherit;
+
+	&:not(:last-of-type)::after {
+		content: ',';
+		margin-right: 4px;
+	}
+}
+
 .sy-select :deep(.v-field__input) {
 	opacity: 1;
 	color: tokens.$grey-darken-20 !important;
@@ -1257,4 +1312,9 @@
 	position: absolute;
 	white-space: nowrap;
 }
+
+.sy-select--with-chips :deep(.v-field__input input) {
+	position: absolute;
+	z-index: -1;
+}
 </style>

package/src/components/Customs/Selects/SySelect/composables/useSySelectKeyboard.ts

@@ -61,10 +61,10 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 					allItems.forEach((item) => {
 						if (item !== element) {
 							item.classList.remove('keyboard-focused')
+							item.setAttribute('tabindex', '-1')
 						}
 					})
 
-					element.setAttribute('tabindex', '0')
 					element.setAttribute('tabindex', focusListItem ? '0' : '-1')
 					if (focusListItem) {
 						element.focus()

package/src/components/Customs/Selects/SySelect/locales.ts

@@ -1,3 +1,4 @@
 export const locales = {
 	clear: 'Effacer la sélection',
+	removeChip: (label: string) => `Supprimer ${label}`,
 }

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

@@ -26,9 +26,7 @@ describe('SySelect – accessibility (axe)', () => {
 
 		// Ouvrir le menu pour inclure la liste déroulante dans l’analyse axe
 		const activator = wrapper.find('.sy-select')
-		if (activator.exists()) {
-			await activator.trigger('click')
-		}
+		await activator.trigger('click')
 
 		const results = await axe(document.body)
 		assertNoA11yViolations(results, 'SySelect – required select with menu open', {