@cnamts/synapse 1.0.19 → 1.0.21

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

@@ -0,0 +1,653 @@
+<script setup lang="ts">
+	import { computed, 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'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+	import { ariaManager } from './utils/ariaManager'
+	import { useFormFieldErrorHandling } from '@/composables/useFormFieldErrorHandling'
+	import { type ValidationRule } from '@/composables/validation/useValidation'
+	import type { ItemType, SelectValue, SelectArray } from './types'
+	import { useItemUtils } from './utils/useItemUtils'
+	import { useSelectionLogic } from './utils/useSelectionLogic'
+	import { useSyAutocompleteKeyboard } from './utils/useKeyboardHandler'
+
+	const props = defineProps({
+		bgColor: {
+			type: String,
+			default: 'white',
+		},
+		chips: {
+			type: Boolean,
+			default: false,
+		},
+		clearable: {
+			type: Boolean,
+			default: false,
+		},
+		customRules: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		customSuccessRules: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		customWarningRules: {
+			type: Array as PropType<ValidationRule[]>,
+			default: () => [],
+		},
+		debounce: {
+			type: Number,
+			default: 200,
+		},
+		density: {
+			type: String as PropType<'default' | 'comfortable' | 'compact' | undefined>,
+			default: 'default',
+		},
+		disableErrorHandling: {
+			type: Boolean,
+			default: false,
+		},
+		displayAsterisk: {
+			type: Boolean,
+			default: false,
+		},
+		errorMessages: {
+			type: Array as PropType<string[] | null>,
+			default: null,
+		},
+		filter: {
+			type: Boolean,
+			default: true,
+		},
+		hasError: {
+			type: Boolean,
+			default: false,
+		},
+		hasSuccess: {
+			type: Boolean,
+			default: false,
+		},
+		hasWarning: {
+			type: Boolean,
+			default: false,
+		},
+		hideNoData: {
+			type: Boolean,
+			default: false,
+		},
+		isValidateOnBlur: {
+			type: Boolean,
+			default: false,
+		},
+		items: {
+			type: Array as PropType<ItemType[]>,
+			default: () => [],
+		},
+		label: {
+			type: String,
+			default: 'Rechercher',
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		menuId: {
+			type: String,
+			default: 'sy-autocomplete-menu',
+		},
+		modelValue: {
+			type: [Object, String, Number, Array, null] as PropType<SelectValue | SelectArray>,
+			default: null,
+		},
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		noDataText: {
+			type: String,
+			default: 'Aucune option',
+		},
+		placeholder: {
+			type: String,
+			default: '',
+		},
+		plainTextKey: {
+			type: String,
+			default: '',
+		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		returnObject: {
+			type: Boolean,
+			default: false,
+		},
+		showSuccessMessages: {
+			type: Boolean,
+			default: true,
+		},
+		successMessages: {
+			type: Array as PropType<string[] | null>,
+			default: null,
+		},
+		textKey: {
+			type: String,
+			default: 'text',
+		},
+		valueKey: {
+			type: String,
+			default: 'value',
+		},
+		warningMessages: {
+			type: Array as PropType<string[] | null>,
+			default: null,
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue'])
+
+	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
+	type SyTextFieldInstance = InstanceType<typeof SyTextField> & { $refs?: { input?: HTMLInputElement } }
+	const textFieldRef = ref<SyTextFieldInstance | null>(null)
+	const randomId = Math.random().toString(36).slice(2)
+	const uniqueMenuId = computed(() => props.menuId === 'sy-autocomplete-menu' ? `sy-autocomplete-menu-${randomId}` : props.menuId)
+	const optionIdPrefixed = computed(() => `${uniqueMenuId.value}-option`)
+	const activeDescendantId = ref('')
+
+	const errorHandling = useFormFieldErrorHandling(props, selected)
+
+	const formattedItems = computed(() => props.items.map((item) => {
+		if (typeof item === 'string') {
+			return { [props.textKey]: item, [props.valueKey]: item }
+		}
+		return item
+	}))
+
+	const { getItemText, getPlainText, getValueKey, getStoredValue, getChipLabel } = useItemUtils({
+		textKey: props.textKey,
+		valueKey: props.valueKey,
+		plainTextKey: props.plainTextKey,
+		returnObject: props.returnObject,
+	}, formattedItems)
+
+	const { updateValue } = useSelectionLogic({
+		multiple: props.multiple,
+		returnObject: props.returnObject,
+		valueKey: props.valueKey,
+	}, getValueKey, getStoredValue, getPlainText, selected, search, emit)
+
+	const syncSearchFromValue = () => {
+		if (props.multiple) return
+		if (!selected.value) {
+			search.value = ''
+			return
+		}
+		const found = formattedItems.value.find(i => props.returnObject ? i[props.valueKey] === (selected.value as ItemType)[props.valueKey] : i[props.valueKey] === selected.value)
+		search.value = found ? getPlainText(found) : ''
+	}
+
+	const normalizedSearch = computed(() => (search.value || '').toLowerCase())
+
+	const filteredItems = computed(() => {
+		if (!props.filter) 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)
+		})
+	})
+
+	const markInteracted = () => {
+		hasInteracted.value = true
+	}
+
+	const selectItem = (item: ItemType | string | number | null | undefined) => {
+		markInteracted()
+		suppressOpenOnSearch = true
+		updateValue(item ?? null)
+		if (props.multiple) {
+			suppressNextInput.value = true
+			search.value = ''
+		}
+		if (!props.multiple) isOpen.value = false
+	}
+
+	watch(() => props.modelValue, (val) => {
+		selected.value = val as SelectValue | SelectArray
+		suppressOpenOnSearch = true
+		syncSearchFromValue()
+	}, { immediate: true })
+
+	let debounceHandle: ReturnType<typeof setTimeout> | null = null
+
+	watch(search, () => {
+		if (suppressOpenOnSearch) {
+			suppressOpenOnSearch = false
+			return
+		}
+
+		if (!isOpen.value) {
+			isOpen.value = true
+		}
+
+		focusInput(textFieldRef)
+
+		if (!props.filter) return
+
+		if (debounceHandle) {
+			clearTimeout(debounceHandle)
+		}
+
+		debounceHandle = setTimeout(() => {
+		}, props.debounce)
+	})
+
+	const hasSelectionToClear = computed(() => {
+		return props.multiple
+			? Array.isArray(selected.value) && selected.value.length > 0
+			: selected.value != null
+	})
+
+	const hasChips = computed(() => props.multiple && props.chips && Array.isArray(selected.value) && selected.value.length > 0)
+
+	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
+		}
+		return search.value
+	})
+
+	const isItemSelected = (item: ItemType) => {
+		if (!selected.value) return false
+		if (props.multiple && Array.isArray(selected.value)) {
+			return selected.value.some(sel => props.returnObject ? (sel as ItemType)[props.valueKey] === item[props.valueKey] : sel === item[props.valueKey])
+		}
+		return props.returnObject
+			? (selected.value as ItemType)[props.valueKey] === item[props.valueKey]
+			: selected.value === item[props.valueKey]
+	}
+
+	const getItemKey = (item: ItemType, index: number): string | number => {
+		const raw = item[props.valueKey]
+		if (raw === undefined || raw === null) return index
+		return typeof raw === 'string' || typeof raw === 'number' ? raw : index
+	}
+
+	const getChipKey = (
+		item: ItemType | string | number,
+		index: number,
+	): string | number => {
+		if (typeof item !== 'object') return item
+
+		const raw = item?.[props.valueKey]
+		return typeof raw === 'string' || typeof raw === 'number'
+			? raw
+			: index
+	}
+
+	const { focusInput, keyboardActiveId, handleTabKey } = useSyAutocompleteKeyboard({
+		multiple: props.multiple,
+		chips: props.chips,
+	}, {
+		search,
+		selected,
+		isOpen,
+		selectItem,
+		getItemText,
+		filteredItems,
+		uniqueMenuId,
+		focusListItem: false,
+	})
+
+	watch(keyboardActiveId, (val) => {
+		activeDescendantId.value = val
+	})
+
+	watch(textFieldRef, (tf) => {
+		if (tf) {
+			focusInput(textFieldRef, true)
+		}
+	}, { immediate: true })
+
+	const menuTarget = computed<HTMLElement | undefined>(() => {
+		return (textFieldRef.value?.$el as HTMLElement | undefined)?.querySelector('.v-field') ?? undefined
+	})
+
+	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 validateOnSubmit = () => {
+		markInteracted()
+		return errorHandling.validateOnSubmit()
+	}
+
+	const checkErrorOnBlur = () => {
+		markInteracted()
+		return errorHandling.checkErrorOnBlur()
+	}
+
+	const getInputValue = (value: string | Event): string | null => {
+		if (typeof value === 'string') return value
+		if (value instanceof Event && value.target instanceof HTMLInputElement) {
+			return value.target.value
+		}
+		return null
+	}
+
+	const handleInput = (value: string | Event) => {
+		if (suppressNextInput.value) {
+			suppressNextInput.value = false
+			return
+		}
+
+		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
+				}
+			}
+
+			if (matched < selectedItems.length) {
+				const kept = selectedItems.slice(0, matched)
+				selected.value = kept
+				emit('update:modelValue', kept)
+			}
+
+			const remainingParts = parts.slice(matched).filter(p => p !== '')
+			search.value = remainingParts.join(', ')
+		}
+		else {
+			search.value = inputValue
+		}
+
+		openAndFocus()
+	}
+
+	const openAndFocus = () => {
+		markInteracted()
+		isOpen.value = true
+		focusInput(textFieldRef)
+	}
+
+	const getOptionId = (index: number) => `${optionIdPrefixed.value}-${index}`
+
+	const resultsLiveText = computed(() => {
+		if (props.loading) return 'Chargement des résultats'
+		const count = filteredItems.value.length
+		if (!props.filter) return ''
+		if (count === 0) return props.hideNoData ? 'Aucun résultat' : props.noDataText
+		return `${count} option${count > 1 ? 's' : ''} disponible${count > 1 ? 's' : ''}`
+	})
+
+	onMounted(() => {
+		syncSearchFromValue()
+		ariaManager.setupAriaAttributesForAutocomplete(textFieldRef, isOpen, uniqueMenuId.value, activeDescendantId, props.loading, props.label)
+		focusInput(textFieldRef, true)
+	})
+
+	watch([isOpen, activeDescendantId, () => props.loading], () => {
+		ariaManager.setupAriaAttributesForAutocomplete(textFieldRef, isOpen, uniqueMenuId.value, activeDescendantId, props.loading, props.label)
+	}, { flush: 'post' })
+
+	watch(isOpen, (open) => {
+		if (!open && props.multiple) {
+			suppressOpenOnSearch = true
+			search.value = ''
+		}
+	})
+
+	defineExpose({
+		validation: errorHandling.validation,
+		validateOnSubmit,
+		checkErrorOnBlur,
+		isOpen,
+		selectItem,
+		search,
+	})
+</script>
+
+<template>
+	<div class="sy-autocomplete">
+		<VMenu
+			v-model="isOpen"
+			transition="slide-y-transition"
+			max-height="300px"
+			location="bottom"
+			offset="4"
+			origin="top"
+			:open-on-click="false"
+			:open-on-focus="false"
+			:close-on-content-click="false"
+			:target="menuTarget"
+		>
+			<template #activator>
+				<SyTextField
+					:id="`${uniqueMenuId}-input`"
+					ref="textFieldRef"
+					:model-value="displayValue"
+					:label="hasChips ? '' : label"
+					:placeholder="hasChips ? '' : placeholder"
+					:readonly="readonly"
+					:bg-color="bgColor"
+					:density="density"
+					:autocomplete="'off'"
+					:class="{ 'sy-autocomplete--clearable': clearable }"
+					:error-messages="displayErrors"
+					:warning-messages="displayWarnings"
+					:success-messages="displaySuccesses"
+					:has-error="displayHasError"
+					:has-warning="displayHasWarning"
+					:has-success="displayHasSuccess"
+					:required="required"
+					:display-asterisk="required && displayAsterisk"
+					:aria-label="hasChips ? label : undefined"
+					@click="openAndFocus"
+					@update:model-value="handleInput"
+					@blur="checkErrorOnBlur"
+					@keydown.tab="handleTabKey"
+				>
+					<template #append-inner>
+						<button
+							v-if="clearable && hasSelectionToClear && !hasChips"
+							type="button"
+							class="sy-autocomplete__clear-button"
+							:aria-label="'Réinitialiser la sélection'"
+							@click.stop.prevent="selectItem(null)"
+						>
+							<SyIcon
+								:icon="mdiCloseCircle"
+								decorative
+								class="sy-autocomplete__clear-icon"
+							/>
+						</button>
+						<SyIcon
+							class="arrow"
+							:icon="mdiChevronDown"
+							decorative
+						/>
+					</template>
+					<template
+						v-if="hasChips"
+						#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>
+					</template>
+				</SyTextField>
+			</template>
+
+			<VList
+				:id="uniqueMenuId"
+				ref="listRef"
+				role="listbox"
+				:aria-label="label"
+				:aria-labelledby="`${uniqueMenuId}-input`"
+				: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">
+					<VListItem
+						:title="noDataText"
+						disabled
+						tag="li"
+					/>
+				</template>
+				<template v-else>
+					<VListItem
+						v-for="(item, index) in filteredItems"
+						:id="getOptionId(index)"
+						:key="getItemKey(item, index)"
+						role="option"
+						:aria-selected="isItemSelected(item) ? 'true' : 'false'"
+						:class="{ active: isItemSelected(item) || getOptionId(index) === activeDescendantId }"
+						tag="li"
+						@mousedown.prevent.stop="() => selectItem(item)"
+					>
+						<template
+							v-if="multiple"
+							#prepend
+						>
+							<SyCheckbox
+								:model-value="isItemSelected(item)"
+								density="compact"
+								hide-details
+								color="primary"
+								class="mt-0 pt-0 mr-1"
+								:title="getItemText(item) as string"
+								:aria-label="getItemText(item) as string"
+								@mousedown.stop.prevent="() => selectItem(item)"
+							/>
+						</template>
+						<VListItemTitle>
+							{{ getItemText(item) }}
+						</VListItemTitle>
+					</VListItem>
+				</template>
+			</VList>
+		</VMenu>
+		<div
+			class="sy-autocomplete__sr-only"
+			role="status"
+			aria-live="polite"
+			aria-atomic="true"
+		>
+			{{ resultsLiveText }}
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/tokens';
+
+.sy-autocomplete {
+	width: 100%;
+	position: relative;
+}
+
+.sy-autocomplete__sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
+.sy-autocomplete__clear-button {
+	background: transparent;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.sy-autocomplete__clear-icon {
+	color: rgb(0 0 0 / 54%);
+}
+
+.sy-autocomplete__chips {
+	display: flex;
+	flex-direction: row !important;
+	gap: 4px;
+	align-items: center;
+}
+
+.v-list-item.active,
+.v-list-item[aria-selected='true'],
+li.active,
+li[aria-selected='true'] {
+	background-color: rgb(0 0 0 / 8%);
+}
+
+.v-list-item:hover,
+li:hover {
+	background-color: rgb(0 0 0 / 4%);
+}
+
+/* Ensure focus styles match selection styles for keyboard navigation (align with SySelect) */
+.v-list-item:focus-visible,
+.v-list-item.keyboard-focused,
+li:focus-visible,
+li.keyboard-focused {
+	outline: 2px solid tokens.$primary-base;
+	outline-offset: -2px;
+	background-color: rgb(0 0 0 / 8%);
+}
+</style>