@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, onMounted, ref, watch, type PropType } from 'vue'
+	import { computed, nextTick, onMounted, ref, watch, type PropType } from 'vue'
 	import { VMenu, VList, VListItem, VListItemTitle, VChip } from 'vuetify/components'
 	import { mdiChevronDown, mdiCloseCircle } from '@mdi/js'
 	import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -12,6 +12,7 @@
 	import { useItemUtils } from './utils/useItemUtils'
 	import { useSelectionLogic } from './utils/useSelectionLogic'
 	import { useSyAutocompleteKeyboard } from './utils/useKeyboardHandler'
+	import { locales } from './locales'
 
 	const props = defineProps({
 		bgColor: {
@@ -74,6 +75,10 @@
 			type: Boolean,
 			default: false,
 		},
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
 		hideNoData: {
 			type: Boolean,
 			default: false,
@@ -108,7 +113,7 @@
 		},
 		noDataText: {
 			type: String,
-			default: 'Aucune option',
+			default: locales.noData,
 		},
 		placeholder: {
 			type: String,
@@ -138,6 +143,10 @@
 			type: Array as PropType<string[] | null>,
 			default: null,
 		},
+		selectionText: {
+			type: Function as PropType<(selected: SelectArray) => string>,
+			default: undefined,
+		},
 		textKey: {
 			type: String,
 			default: 'text',
@@ -152,14 +161,14 @@
 		},
 	})
 
-	const emit = defineEmits(['update:modelValue'])
+	const emit = defineEmits(['update:modelValue', 'search'])
 
 	const isOpen = ref(false)
 	const search = ref('')
 	const selected = ref<SelectValue | SelectArray>(props.modelValue as SelectValue | SelectArray)
 	const hasInteracted = ref(false)
 	const suppressNextInput = ref(false)
-	let suppressOpenOnSearch = false
+	const suppressMenuOpen = ref(false)
 	type SyTextFieldInstance = InstanceType<typeof SyTextField> & { $refs?: { input?: HTMLInputElement } }
 	const textFieldRef = ref<SyTextFieldInstance | null>(null)
 	const randomId = Math.random().toString(36).slice(2)
@@ -191,6 +200,7 @@
 
 	const syncSearchFromValue = () => {
 		if (props.multiple) return
+		suppressMenuOpen.value = true
 		if (!selected.value) {
 			search.value = ''
 			return
@@ -202,7 +212,7 @@
 	const normalizedSearch = computed(() => (search.value || '').toLowerCase())
 
 	const filteredItems = computed(() => {
-		if (!props.filter) return formattedItems.value
+		if (!props.filter || props.loading) return formattedItems.value
 		return formattedItems.value.filter((item) => {
 			const text = String(item[props.plainTextKey || props.textKey] ?? item[props.textKey] ?? '').toLowerCase()
 			return text.includes(normalizedSearch.value)
@@ -215,7 +225,6 @@
 
 	const selectItem = (item: ItemType | string | number | null | undefined) => {
 		markInteracted()
-		suppressOpenOnSearch = true
 		updateValue(item ?? null)
 		if (props.multiple) {
 			suppressNextInput.value = true
@@ -225,16 +234,17 @@
 	}
 
 	watch(() => props.modelValue, (val) => {
-		selected.value = val as SelectValue | SelectArray
-		suppressOpenOnSearch = true
+		selected.value = props.multiple && (val === null || val === undefined)
+			? []
+			: val as SelectValue | SelectArray
 		syncSearchFromValue()
 	}, { immediate: true })
 
 	let debounceHandle: ReturnType<typeof setTimeout> | null = null
 
 	watch(search, () => {
-		if (suppressOpenOnSearch) {
-			suppressOpenOnSearch = false
+		if (suppressMenuOpen.value) {
+			suppressMenuOpen.value = false
 			return
 		}
 
@@ -261,13 +271,15 @@
 	})
 
 	const hasChips = computed(() => props.multiple && props.chips && Array.isArray(selected.value) && selected.value.length > 0)
+	const hasSelectionTextDisplay = computed(() => !!props.selectionText && Array.isArray(selected.value) && (selected.value as SelectArray).length > 0)
+	const hasMultipleSelections = computed(() => props.multiple && !props.chips && !props.selectionText && Array.isArray(selected.value) && (selected.value as SelectArray).length > 0)
+	const hasInlineSelections = computed(() => hasChips.value || hasMultipleSelections.value)
 
 	const displayValue = computed(() => {
 		if (props.multiple && !props.chips) {
-			const selectedItems = Array.isArray(selected.value) ? selected.value : []
-			const selectedTexts: string[] = selectedItems.map(item => getChipLabel(item as ItemType | string | number))
-			const prefix = selectedTexts.length > 0 ? selectedTexts.join(', ') + ', ' : ''
-			return prefix + search.value
+			if (props.selectionText || hasMultipleSelections.value) {
+				return search.value
+			}
 		}
 		return search.value
 	})
@@ -328,20 +340,50 @@
 		return (textFieldRef.value?.$el as HTMLElement | undefined)?.querySelector('.v-field') ?? undefined
 	})
 
+	const shouldDisableErrorHandling = computed(() => props.disableErrorHandling)
+
 	const externalErrors = computed(() => props.errorMessages || [])
-	const displayErrors = computed(() => externalErrors.value.length > 0 ? externalErrors.value : (hasInteracted.value ? errorHandling.errors.value : []))
-	const displayWarnings = computed(() => hasInteracted.value ? errorHandling.warnings.value : [])
-	const displaySuccesses = computed(() => hasInteracted.value ? errorHandling.successes.value : [])
-	const displayHasError = computed(() => externalErrors.value.length > 0 || (hasInteracted.value && errorHandling.hasError.value))
-	const displayHasWarning = computed(() => hasInteracted.value && errorHandling.hasWarning.value)
-	const displayHasSuccess = computed(() => hasInteracted.value && errorHandling.hasSuccess.value)
+	const displayErrors = computed(() => {
+		if (shouldDisableErrorHandling.value) return []
+		return externalErrors.value.length > 0
+			? externalErrors.value
+			: (hasInteracted.value ? errorHandling.errors.value : [])
+	})
+	const displayWarnings = computed(() => {
+		if (shouldDisableErrorHandling.value) return []
+		return hasInteracted.value ? errorHandling.warnings.value : []
+	})
+	const displaySuccesses = computed(() => {
+		if (shouldDisableErrorHandling.value) return []
+		return hasInteracted.value ? errorHandling.successes.value : []
+	})
+	const displayHasError = computed(() => {
+		if (shouldDisableErrorHandling.value) return false
+		return externalErrors.value.length > 0 || (hasInteracted.value && errorHandling.hasError.value)
+	})
+	const displayHasWarning = computed(() => {
+		if (shouldDisableErrorHandling.value) return false
+		return hasInteracted.value && errorHandling.hasWarning.value
+	})
+	const displayHasSuccess = computed(() => {
+		if (shouldDisableErrorHandling.value) return false
+		return hasInteracted.value && errorHandling.hasSuccess.value
+	})
 
 	const validateOnSubmit = () => {
 		markInteracted()
 		return errorHandling.validateOnSubmit()
 	}
 
-	const checkErrorOnBlur = () => {
+	const checkErrorOnBlur = (event?: FocusEvent) => {
+		const relatedTarget = event?.relatedTarget as HTMLElement | null | undefined
+		if (relatedTarget?.closest('.sy-autocomplete__chip') || relatedTarget?.closest('.sy-autocomplete__clear-button')) {
+			isOpen.value = true
+			nextTick(() => {
+				focusInput(textFieldRef)
+			})
+			return
+		}
 		markInteracted()
 		return errorHandling.checkErrorOnBlur()
 	}
@@ -363,36 +405,17 @@
 		const inputValue = getInputValue(value)
 		if (inputValue === null) return
 
-		if (props.multiple && !props.chips) {
-			const selectedItems = Array.isArray(selected.value) ? selected.value : []
-			const labels = selectedItems.map(item =>
-				getChipLabel(item as ItemType | string | number),
-			)
-
-			const parts = inputValue.split(',').map(p => p.trim())
-			let matched = 0
-			for (let i = 0; i < Math.min(parts.length, labels.length); i++) {
-				if (parts[i] === labels[i]) {
-					matched++
-				}
-				else {
-					break
-				}
-			}
+		// Ignore outside emissions (e.g. SyTextField.checkErrorOnBlur re-emitting
+		// the current value after a programmatic update): no actual user input occurred.
+		if (inputValue === search.value) return
 
-			if (matched < selectedItems.length) {
-				const kept = selectedItems.slice(0, matched)
-				selected.value = kept
-				emit('update:modelValue', kept)
-			}
+		search.value = inputValue
 
-			const remainingParts = parts.slice(matched).filter(p => p !== '')
-			search.value = remainingParts.join(', ')
-		}
-		else {
-			search.value = inputValue
+		if (!inputValue && !props.multiple && selected.value != null) {
+			updateValue(null)
 		}
 
+		emit('search', inputValue)
 		openAndFocus()
 	}
 
@@ -405,6 +428,7 @@
 	const getOptionId = (index: number) => `${optionIdPrefixed.value}-${index}`
 
 	const resultsLiveText = computed(() => {
+		if (!hasInteracted.value) return
 		if (props.loading) return 'Chargement des résultats'
 		const count = filteredItems.value.length
 		if (!props.filter) return ''
@@ -424,7 +448,6 @@
 
 	watch(isOpen, (open) => {
 		if (!open && props.multiple) {
-			suppressOpenOnSearch = true
 			search.value = ''
 		}
 	})
@@ -440,7 +463,10 @@
 </script>
 
 <template>
-	<div class="sy-autocomplete">
+	<div
+		class="sy-autocomplete"
+		:class="{ 'sy-autocomplete--has-selection-text': hasSelectionTextDisplay }"
+	>
 		<VMenu
 			v-model="isOpen"
 			transition="slide-y-transition"
@@ -459,12 +485,13 @@
 					ref="textFieldRef"
 					:model-value="displayValue"
 					:label="hasChips ? '' : label"
-					:placeholder="hasChips ? '' : placeholder"
+					:placeholder="hasInlineSelections || hasSelectionTextDisplay ? '' : placeholder"
+					:is-active="hasInlineSelections || hasSelectionTextDisplay"
 					:readonly="readonly"
 					:bg-color="bgColor"
 					:density="density"
 					:autocomplete="'off'"
-					:class="{ 'sy-autocomplete--clearable': clearable }"
+					:class="{ 'sy-autocomplete--clearable': clearable, 'sy-autocomplete__field--has-chips': hasInlineSelections }"
 					:error-messages="displayErrors"
 					:warning-messages="displayWarnings"
 					:success-messages="displaySuccesses"
@@ -473,7 +500,10 @@
 					:has-success="displayHasSuccess"
 					:required="required"
 					:display-asterisk="required && displayAsterisk"
-					:aria-label="hasChips ? label : undefined"
+					:disable-error-handling="disableErrorHandling"
+					:loading="loading"
+					:are-details-hidden="hideDetails"
+					:aria-label="hasInlineSelections ? label : undefined"
 					@click="openAndFocus"
 					@update:model-value="handleInput"
 					@blur="checkErrorOnBlur"
@@ -481,10 +511,10 @@
 				>
 					<template #append-inner>
 						<button
-							v-if="clearable && hasSelectionToClear && !hasChips"
+							v-if="clearable && hasSelectionToClear"
 							type="button"
 							class="sy-autocomplete__clear-button"
-							:aria-label="'Réinitialiser la sélection'"
+							:aria-label="locales.clearSelection"
 							@click.stop.prevent="selectItem(null)"
 						>
 							<SyIcon
@@ -499,23 +529,37 @@
 							decorative
 						/>
 					</template>
+					<template v-if="hasChips">
+						<VChip
+							v-for="(item, index) in selected as SelectArray"
+							:key="getChipKey(item, index)"
+							size="small"
+							class="sy-autocomplete__chip"
+							closable
+							:close-label="locales.removeChip(getChipLabel(item as ItemType))"
+							@click:close.stop.prevent="() => selectItem(item as ItemType)"
+							@keydown.enter.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
+							@keydown.space.capture.stop.prevent="(event) => (event.target as HTMLElement | null)?.closest('.v-chip__close') && selectItem(item as ItemType)"
+						>
+							{{ getChipLabel(item as ItemType) }}
+						</VChip>
+					</template>
+					<template v-else-if="hasMultipleSelections">
+						<span
+							v-for="(item, index) in selected as SelectArray"
+							:key="getChipKey(item, index)"
+							class="sy-autocomplete__label"
+						>
+							{{ getChipLabel(item as ItemType) }}
+						</span>
+					</template>
 					<template
-						v-if="hasChips"
+						v-if="hasSelectionTextDisplay"
 						#prepend-inner
 					>
-						<div class="sy-autocomplete__chips">
-							<VChip
-								v-for="(item, index) in selected as SelectArray"
-								:key="getChipKey(item, index)"
-								size="small"
-								class="ma-1"
-								closable
-								:close-label="`Supprimer ${getChipLabel(item as ItemType)}`"
-								@click:close="() => selectItem(item as ItemType)"
-							>
-								{{ getChipLabel(item as ItemType) }}
-							</VChip>
-						</div>
+						<span class="sy-autocomplete__selection-text">
+							{{ selectionText!(selected as SelectArray) }}
+						</span>
 					</template>
 				</SyTextField>
 			</template>
@@ -524,21 +568,14 @@
 				:id="uniqueMenuId"
 				ref="listRef"
 				role="listbox"
-				:aria-label="label"
-				:aria-labelledby="`${uniqueMenuId}-input`"
+				:aria-labelledby="`${uniqueMenuId}-input-label`"
 				:aria-multiselectable="multiple ? 'true' : undefined"
 				:style="{ minWidth: `${textFieldRef?.$el?.offsetWidth || 0}px` }"
 				tag="ul"
 				tabindex="-1"
 				@click.stop
 			>
-				<template v-if="loading">
-					<VListItem
-						title="Chargement..."
-						tag="li"
-					/>
-				</template>
-				<template v-else-if="filteredItems.length === 0 && !hideNoData">
+				<template v-if="filteredItems.length === 0 && !hideNoData && !loading">
 					<VListItem
 						:title="noDataText"
 						disabled
@@ -619,14 +656,55 @@
 }
 
 .sy-autocomplete__clear-icon {
-	color: rgb(0 0 0 / 54%);
+	color: rgb(var(--v-theme-iconBase));
 }
 
-.sy-autocomplete__chips {
-	display: flex;
-	flex-direction: row !important;
-	gap: 4px;
-	align-items: center;
+.sy-autocomplete__chip {
+	margin: 2px;
+	align-self: center;
+	flex-shrink: 0;
+}
+
+/* Style spécifique pour les chips */
+:deep(.sy-autocomplete__chip .v-chip__close .v-icon__svg) {
+	fill: inherit !important;
+}
+
+.sy-autocomplete__label {
+	align-self: center;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-size: inherit;
+
+	&:not(:last-of-type)::after {
+		content: ',';
+		margin-right: 4px;
+	}
+}
+
+:deep(.sy-autocomplete__field--has-chips .v-field) {
+	height: auto;
+	min-height: var(--v-input-control-height, 56px);
+}
+
+:deep(.sy-autocomplete__field--has-chips .v-field__input) {
+	flex-wrap: wrap;
+}
+
+:deep(.sy-autocomplete__field--has-chips .v-field__input input) {
+	flex: 1 1 auto;
+	min-width: 64px;
+	align-self: center;
+}
+
+.sy-autocomplete__selection-text {
+	padding: 0 4px;
+	white-space: nowrap;
+	font-size: inherit;
+}
+
+.sy-autocomplete--has-selection-text :deep(input) {
+	caret-color: transparent !important;
 }
 
 .v-list-item.active,
@@ -646,7 +724,7 @@ li:hover {
 .v-list-item.keyboard-focused,
 li:focus-visible,
 li.keyboard-focused {
-	outline: 2px solid tokens.$primary-base;
+	outline: 2px solid rgb(var(--v-theme-accentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }

package/src/components/Customs/Selects/SyAutocomplete/accessibilite/Accessibilite.stories.ts

@@ -1,7 +1,8 @@
 import type { StoryObj } from '@storybook/vue3'
-import { mdiKeyboard } from '@mdi/js'
+import { mdiKeyboard, mdiLoading } from '@mdi/js'
 
 const keyboardIcon = mdiKeyboard
+const loadingIcon = mdiLoading
 
 export default {
 	title: 'Composants/Formulaires/Selects/SyAutocomplete/Accessibility',
@@ -68,3 +69,41 @@ export const ComboboxKeyboardNavigation: StoryObj = {
 		}
 	},
 }
+
+export const LoadingAccessibility: StoryObj = {
+	tags: ['!dev'],
+	render: () => {
+		return {
+			setup() {
+				return { loadingIcon }
+			},
+			template: `
+				<div>
+					<p>Lorsque la prop <code>loading</code> est à <code>true</code>, le composant affiche une barre de progression au bas du champ.</p>
+					<v-table density="compact" style="margin-top: 16px;">
+						<thead>
+							<tr>
+								<th>Comportement</th>
+								<th>Détail</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td>Barre de progression accessible</td>
+								<td>La barre porte un <code>aria-label</code> nommant le champ (<em>« Chargement de [label] »</em>) afin que les lecteurs d’écran annoncent son état.</td>
+							</tr>
+							<tr>
+								<td>Message « Aucune option » masqué</td>
+								<td>Le message d’absence de résultats n’est pas affiché pendant le chargement, pour éviter de signaler à tort que la liste est vide.</td>
+							</tr>
+							<tr>
+								<td>Critère RGAA 4.1 / WCAG 4.1.2</td>
+								<td>Le rôle <code>progressbar</code> et son nom accessible satisfont le critère « Nom, rôle, valeur » pour les composants d’interface.</td>
+							</tr>
+						</tbody>
+					</v-table>
+				</div>
+			`,
+		}
+	},
+}

package/src/components/Customs/Selects/SyAutocomplete/accessibilite/Accessibility.mdx

@@ -73,6 +73,11 @@ import '@/stories/styles/shared.css';
     <Story of={AccessStories.ComboboxKeyboardNavigation} />
   </div>
 
+  <div className="loading-section">
+    <h2>État de chargement</h2>
+    <Story of={AccessStories.LoadingAccessibility} />
+  </div>
+
   <div className="implementation-section">
     <h2>Spécificités d'implémentation</h2>
     <p>
@@ -172,7 +177,8 @@ import '@/stories/styles/shared.css';
     line-height: 1.5;
   }
 
-  .keyboard-section {
+  .keyboard-section,
+  .loading-section {
     background-color: #f0f7ff;
     padding: 20px;
     border-radius: 8px;

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

@@ -0,0 +1,5 @@
+export const locales = {
+	noData: 'Aucune option',
+	clearSelection: 'Réinitialiser la sélection',
+	removeChip: (label: string) => `Supprimer ${label}`,
+}

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

@@ -69,4 +69,100 @@ describe('SyAutocomplete – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations for selectionText with no selection', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [],
+				items,
+				label: 'Colonnes affichées',
+				textKey: 'text',
+				valueKey: 'value',
+				multiple: true,
+				selectionText: (selected: unknown[]) => `${selected.length} colonnes sélectionnées`,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – selectionText empty', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when loading is true', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: null,
+				items,
+				label: 'Choisir une option',
+				textKey: 'text',
+				valueKey: 'value',
+				loading: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – loading state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when loading is true with no label (chips mode)', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: ['1'],
+				items,
+				label: 'Options',
+				textKey: 'text',
+				valueKey: 'value',
+				multiple: true,
+				chips: true,
+				loading: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – loading + chips', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations for selectionText with selection', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [items[0]!.value, items[1]!.value],
+				items,
+				label: 'Colonnes affichées',
+				textKey: 'text',
+				valueKey: 'value',
+				multiple: true,
+				selectionText: (selected: unknown[]) => `${selected.length} colonnes sélectionnées`,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – selectionText with selection', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when hideDetails is true', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: '1',
+				items,
+				label: 'Filtrer par option',
+				textKey: 'text',
+				valueKey: 'value',
+				hideDetails: true,
+				hasSuccess: true,
+				successMessages: ['Sélection valide'],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – hideDetails', {
+			ignoreRules: ['region'],
+		})
+	})
 })