@feugene/granularity 0.12.0 → 0.16.0

package/dist/components/GrAutocomplete/chunks/GrAutocomplete-CQ9T7Lly.js

@@ -0,0 +1,851 @@
+import { a as useGrComponentProp, c as useGrThemeAttrs, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-RyzEgNTb.js";
+import { vClickOutside } from "../../../directives/clickOutside.js";
+import { n as isComposingEvent } from "../../../chunks/keyboard-zYvvyHd4.js";
+import { useFloating } from "../../../composables/useFloating.js";
+import { useDismissible } from "../../../composables/useDismissible.js";
+import { useVirtualList } from "../../../composables/useVirtualList.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
+import { a as resolveSelectedOptions, o as useComboboxNavigation, t as filterOptions } from "../../../chunks/optionFilter-BVY988pC.js";
+import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
+import { t as GrBadge_default } from "../../GrBadge/chunks/GrBadge-B1tgqfGQ.js";
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { a as autocompleteShellClass, i as autocompletePanelClasses, o as autocompleteStateClass, r as autocompleteOptionClass } from "../../../chunks/config-BbY2SKGE.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import '../styles.css';//#region src/components/GrAutocomplete/GrAutocomplete.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "inline-flex max-w-full items-center gap-1 align-middle" };
+var _hoisted_2 = { class: "truncate" };
+var _hoisted_3 = [
+	"aria-label",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_4 = [
+	"id",
+	"value",
+	"disabled",
+	"placeholder",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly",
+	"readonly",
+	"aria-autocomplete",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-expanded"
+];
+var _hoisted_5 = {
+	key: 3,
+	"data-gr-autocomplete-spinner": "",
+	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)]"
+};
+var _hoisted_6 = ["aria-label"];
+var _hoisted_7 = {
+	key: 5,
+	"data-testid": "gr-autocomplete-chevron",
+	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
+};
+var _hoisted_8 = ["name", "value"];
+var _hoisted_9 = [
+	"id",
+	"data-gr-virtual",
+	"aria-multiselectable"
+];
+var _hoisted_10 = ["id"];
+var _hoisted_11 = [
+	"id",
+	"disabled",
+	"aria-selected",
+	"aria-disabled",
+	"onClick",
+	"onMousemove"
+];
+var _hoisted_12 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_13 = { class: "truncate" };
+var _hoisted_14 = {
+	key: 0,
+	"data-gr-autocomplete-loading": "",
+	class: "flex items-center gap-2"
+};
+var _hoisted_15 = {
+	key: 1,
+	"data-gr-autocomplete-hint": ""
+};
+var _hoisted_16 = {
+	key: 2,
+	"data-gr-autocomplete-empty": ""
+};
+var OPTION_SIZE_ESTIMATE = 36;
+//#endregion
+//#region src/components/GrAutocomplete/GrAutocomplete.vue
+var GrAutocomplete_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "GrAutocomplete",
+	props: {
+		modelValue: {},
+		options: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		tagTone: { default: "neutral" },
+		tagDark: {
+			type: Boolean,
+			default: false
+		},
+		tagSize: { default: "sm" },
+		tagRadius: { default: "round" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: void 0 },
+		placeholder: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		filterable: {
+			type: Boolean,
+			default: true
+		},
+		filter: {
+			type: Function,
+			default: void 0
+		},
+		fetchOptions: {
+			type: Function,
+			default: void 0
+		},
+		minQueryLength: { default: 0 },
+		debounce: { default: 250 },
+		allowCustomValue: {
+			type: Boolean,
+			default: false
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: true
+		},
+		dropdownMaxHeight: { default: 280 },
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
+		noResultsText: { default: void 0 },
+		clearLabel: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		prefixMinWidth: { default: void 0 },
+		prefixMaxWidth: { default: void 0 },
+		suffixMinWidth: { default: void 0 },
+		suffixMaxWidth: { default: void 0 },
+		prefixFixed: {
+			type: Boolean,
+			default: false
+		},
+		suffixFixed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"search",
+		"searchError",
+		"change",
+		"update:open",
+		"clear",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		/** Ширина аддона по умолчанию — та же лестница, что у `GrInput`. */
+		const ADDON_MIN_WIDTH_BY_SIZE = {
+			xs: "2rem",
+			sm: "2.25rem",
+			md: "2.5rem",
+			lg: "3rem"
+		};
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrAutocomplete" });
+		const resolvedClearable = useGrComponentProp("GrAutocomplete", "clearable", () => props.clearable, false);
+		/**
+		* Аддоны живут флекс-соседями поля, а не поверх него: оболочка автокомплита —
+		* флекс-строка с чипами, поэтому резервировать место паддингом не нужно.
+		* Контракт ширин остаётся общим (`useControlAddons`).
+		*/
+		const { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixStyle, suffixStyle } = useControlAddons(() => props, {
+			defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],
+			paddingX: () => "0px"
+		});
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.autocomplete.loading", "Loading…"));
+		const resolvedNoResultsText = computed(() => props.noResultsText ?? t("gr.autocomplete.noResults", "No results"));
+		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.common.clear", "Clear"));
+		const resolvedTypeMoreText = computed(() => t("gr.autocomplete.typeMore", "Type at least {n} characters", {
+			n: props.minQueryLength,
+			count: props.minQueryLength
+		}));
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => field?.id.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const describedBy = computed(() => field?.describedById.value);
+		const locked = computed(() => isDisabled.value || isReadonly.value);
+		const remoteOptions = shallowRef([]);
+		const remoteAnswered = ref(false);
+		const remoteLoading = ref(false);
+		const optionsResolved = computed(() => props.fetchOptions && remoteAnswered.value ? remoteOptions.value : props.options ?? []);
+		/**
+		* Подпись состава стартового списка. Сравнивать идентичность массива нельзя:
+		* инлайн-литерал `:options="[...]"` пересоздаётся каждым ререндером родителя —
+		* в том числе тем, который вызвал сам компонент своим `update:modelValue`, —
+		* и remote-результаты исчезали бы прямо посреди выбора.
+		*/
+		function optionsSignature(options) {
+			return (options ?? []).map((o) => `${String(o.value)}\u0000${o.label}`).join("
");
+		}
+		watch(() => optionsSignature(props.options), () => {
+			if (!props.fetchOptions) return;
+			cancelSearch();
+			remoteAnswered.value = false;
+			remoteOptions.value = [];
+		});
+		const isLoading = computed(() => props.loading || remoteLoading.value);
+		/** `0` — валидное значение, поэтому «пусто» проверяется явно, а не через falsy. */
+		function isEmptyValue(value) {
+			return value === void 0 || value === null || value === "";
+		}
+		function toArray(value) {
+			if (Array.isArray(value)) return value;
+			if (isEmptyValue(value)) return [];
+			return [value];
+		}
+		const modelSingle = computed(() => {
+			const raw = Array.isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
+			return isEmptyValue(raw) ? "" : raw;
+		});
+		const selectedValues = computed(() => props.multiple ? toArray(props.modelValue) : isEmptyValue(modelSingle.value) ? [] : [modelSingle.value]);
+		const hasSelection = computed(() => selectedValues.value.length > 0);
+		function labelFor(value) {
+			return optionsResolved.value.find((o) => o.value === value)?.label ?? String(value);
+		}
+		/** Опции выбранных значений (для chips в multiple). Неизвестные значения показываем как есть. */
+		const selectedOptions = computed(() => resolveSelectedOptions(selectedValues.value, optionsResolved.value));
+		const singleSelectedLabel = computed(() => props.multiple || isEmptyValue(modelSingle.value) ? "" : labelFor(modelSingle.value));
+		const query = ref("");
+		const dirty = ref(false);
+		const { open, setOpen } = useControlledOpen(() => props.open, (next) => emit("update:open", next));
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const listboxEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event),
+			containers: () => [panelEl.value]
+		});
+		const inputEl = ref(null);
+		function focus() {
+			inputEl.value?.focus();
+		}
+		function blur() {
+			inputEl.value?.blur();
+		}
+		__expose({
+			focus,
+			blur,
+			open: () => openDropdown(),
+			close: () => closeDropdown()
+		});
+		const clickOutsideExclude = [() => panelEl.value];
+		const { floatingStyle } = useFloating(rootEl, panelEl, open, {
+			placement: "bottom-start",
+			matchWidth: true,
+			zIndexVar: "--gr-z-dropdown"
+		});
+		useDismissible(open, closeDropdown);
+		const searchQuery = computed(() => {
+			if (!props.filterable || props.fetchOptions) return "";
+			if (!props.multiple && !dirty.value) return "";
+			return query.value.trim();
+		});
+		const filteredOptions = computed(() => filterOptions(optionsResolved.value, searchQuery.value, props.filter));
+		const belowMinQuery = computed(() => props.minQueryLength > 0 && query.value.trim().length < props.minQueryLength);
+		/**
+		* Опции к показу и навигации. Ниже `minQueryLength` — пусто: список ещё
+		* относится к прошлому запросу, показывать его под подсказкой «введите ещё N»
+		* значит дезинформировать.
+		*/
+		const effectiveOptions = computed(() => belowMinQuery.value ? [] : filteredOptions.value);
+		const canAddCustom = computed(() => {
+			if (!props.allowCustomValue) return false;
+			const v = query.value.trim();
+			if (!v) return false;
+			if (props.multiple && selectedValues.value.includes(v)) return false;
+			if (!props.multiple && v === modelSingle.value) return false;
+			return !optionsResolved.value.some((o) => o.value === v || o.label === v);
+		});
+		const showEmpty = computed(() => !isLoading.value && effectiveOptions.value.length === 0 && !canAddCustom.value);
+		const listboxId = useId();
+		/**
+		* Id опции строится от позиции, а не от значения: значение с пробелом дало бы
+		* невалидный `id`, а `aria-activedescendant` — два токена вместо одной ссылки,
+		* и активная опция перестала бы объявляться.
+		*/
+		function optionDomId(index) {
+			return `${listboxId}-opt-${index}`;
+		}
+		const addOptionDomId = computed(() => `${listboxId}-add`);
+		/**
+		* Виртуализация панели.
+		*
+		* Набор — `[«Add …»?] + filteredOptions`, тот же, по которому ходит клавиатура
+		* (`navigableItems` ниже). Иначе верхняя распорка вытолкнула бы строку «Add …»
+		* вниз: она отрисована внутри listbox'а первой и является полноценной опцией.
+		*/
+		/** Оценка высоты опции: `py-2` вокруг строки кегля `sm`. Уточняется замером. */
+		const addOffset = computed(() => canAddCustom.value ? 1 : 0);
+		const virtualCount = computed(() => effectiveOptions.value.length + addOffset.value);
+		const virtualizer = useVirtualList({
+			container: listboxEl,
+			count: () => props.virtual ? virtualCount.value : 0,
+			source: () => effectiveOptions.value,
+			itemSize: OPTION_SIZE_ESTIMATE,
+			viewportSize: () => props.dropdownMaxHeight
+		});
+		/** Виден ли «Add …»: вне виртуального окна его рисовать нельзя — он элемент набора. */
+		const showAddOption = computed(() => {
+			if (!canAddCustom.value) return false;
+			return !props.virtual || virtualizer.range.value.start === 0;
+		});
+		/** Опции к отрисовке вместе с их абсолютным индексом в `filteredOptions`. */
+		const renderedOptions = computed(() => {
+			const all = effectiveOptions.value;
+			if (!props.virtual) return all.map((option, index) => ({
+				option,
+				index
+			}));
+			const { start, end } = virtualizer.range.value;
+			const from = Math.max(0, start - addOffset.value);
+			const to = Math.max(0, end - addOffset.value);
+			return all.slice(from, to).map((option, offset) => ({
+				option,
+				index: from + offset
+			}));
+		});
+		/**
+		* Размер набора и позиция в нём объявляются только при виртуализации: в обычном
+		* режиме диктор выводит их из DOM, а при неполном наборе получил бы «3 из 15»
+		* на списке в десять тысяч.
+		*/
+		function optionSetProps(virtualIndex) {
+			if (!props.virtual) return void 0;
+			return {
+				"aria-setsize": virtualCount.value,
+				"aria-posinset": virtualIndex + 1
+			};
+		}
+		const listboxStyle = computed(() => {
+			const base = { maxHeight: `${props.dropdownMaxHeight}px` };
+			if (!props.virtual) return base;
+			return {
+				...base,
+				...virtualizer.spacerStyle.value
+			};
+		});
+		/**
+		* Клавиатурная навигация ходит и по опциям, и по варианту «добавить своё»:
+		* иначе при непустом списке Enter всегда уходил бы в активную опцию, и
+		* закоммитить произвольное значение с клавиатуры было бы нечем.
+		*/
+		const navigableItems = computed(() => {
+			const items = canAddCustom.value ? [{ kind: "add" }] : [];
+			effectiveOptions.value.forEach((option, index) => {
+				if (!option.disabled) items.push({
+					kind: "option",
+					option,
+					index
+				});
+			});
+			return items;
+		});
+		function isSelected(value) {
+			return selectedValues.value.includes(value);
+		}
+		function navigableIndexOf(value) {
+			return navigableItems.value.findIndex((item) => item.kind === "option" && item.option.value === value);
+		}
+		/** Прокрутка к активному: сперва окно виртуального списка, затем доводка. */
+		async function scrollActiveIntoView(item) {
+			if (props.virtual) virtualizer.scrollToIndex(item.kind === "add" ? 0 : item.index + addOffset.value);
+			await nextTick();
+			const id = item.kind === "add" ? addOptionDomId.value : optionDomId(item.index);
+			document.getElementById(id)?.scrollIntoView?.({ block: "nearest" });
+		}
+		const { activeIndex, activeItem, activeDescendantId, init: initActiveIndex, reset: resetActive, handleNavigationKeys } = useComboboxNavigation({
+			items: () => navigableItems.value,
+			open: () => open.value,
+			idOf: (item) => item.kind === "add" ? addOptionDomId.value : optionDomId(item.index),
+			initialIndex: () => navigableItems.value.findIndex((item) => item.kind === "option" && isSelected(item.option.value)),
+			scrollTo: (item) => scrollActiveIntoView(item)
+		});
+		const activeValue = computed(() => activeItem.value?.kind === "option" ? activeItem.value.option.value : void 0);
+		function openDropdown() {
+			if (locked.value || open.value) return;
+			setOpen(true);
+		}
+		function closeDropdown() {
+			setOpen(false);
+		}
+		function focusInput() {
+			inputEl.value?.focus();
+		}
+		let searchTimer = null;
+		let searchSeq = 0;
+		let inflight = null;
+		function isAbortError(error) {
+			return error instanceof Error && error.name === "AbortError";
+		}
+		async function runFetch(query) {
+			const fetchOptions = props.fetchOptions;
+			if (!fetchOptions) return;
+			inflight?.abort();
+			const controller = new AbortController();
+			inflight = controller;
+			const seq = ++searchSeq;
+			remoteLoading.value = true;
+			try {
+				const result = await fetchOptions(query, controller.signal);
+				if (seq !== searchSeq) return;
+				remoteOptions.value = result;
+				remoteAnswered.value = true;
+			} catch (error) {
+				if (seq !== searchSeq || isAbortError(error)) return;
+				remoteOptions.value = [];
+				remoteAnswered.value = true;
+				emit("searchError", error);
+			} finally {
+				if (seq === searchSeq) remoteLoading.value = false;
+			}
+		}
+		function scheduleSearch(value) {
+			if (searchTimer) clearTimeout(searchTimer);
+			searchTimer = setTimeout(() => {
+				if (props.minQueryLength > 0 && value.trim().length < props.minQueryLength) return;
+				emit("search", value.trim());
+				runFetch(value.trim());
+			}, props.debounce);
+		}
+		/**
+		* Снять запланированный и летящий запрос. Инкремент `searchSeq` обязателен
+		* вместе со снятием `remoteLoading`: после него `finally` в `runFetch` считает
+		* себя устаревшим и флаг не тронет — спиннер остался бы навсегда.
+		*/
+		function cancelSearch() {
+			if (searchTimer) clearTimeout(searchTimer);
+			searchTimer = null;
+			inflight?.abort();
+			inflight = null;
+			searchSeq += 1;
+			remoteLoading.value = false;
+		}
+		onBeforeUnmount(cancelSearch);
+		function onInput(event) {
+			const value = event.target.value;
+			query.value = value;
+			dirty.value = true;
+			openDropdown();
+			scheduleSearch(value);
+		}
+		function onFocus() {
+			if (locked.value) return;
+			openDropdown();
+		}
+		function setQuery(value) {
+			query.value = value;
+			dirty.value = false;
+		}
+		function selectSingle(value, label) {
+			emit("update:modelValue", value);
+			emit("change", value);
+			setQuery(label);
+			closeDropdown();
+		}
+		function toggleMultiple(value) {
+			const next = selectedValues.value.slice();
+			const idx = next.indexOf(value);
+			if (idx >= 0) next.splice(idx, 1);
+			else next.push(value);
+			emit("update:modelValue", next);
+			emit("change", next);
+			setQuery("");
+			if (props.closeOnSelect) closeDropdown();
+			else nextTick(focusInput);
+		}
+		function chooseOption(option) {
+			if (locked.value || option.disabled) return;
+			if (props.multiple) toggleMultiple(option.value);
+			else selectSingle(option.value, option.label);
+		}
+		function commitCustom() {
+			if (locked.value) return;
+			const v = query.value.trim();
+			if (!v) return;
+			if (props.multiple) toggleMultiple(v);
+			else selectSingle(v, String(v));
+		}
+		function removeValue(value, focusAfter = focusInput) {
+			if (locked.value) return;
+			const next = selectedValues.value.filter((v) => v !== value);
+			emit("update:modelValue", next);
+			emit("change", next);
+			nextTick(focusAfter);
+		}
+		function clearSelection() {
+			if (locked.value) return;
+			const next = props.multiple ? [] : "";
+			emit("update:modelValue", next);
+			emit("change", next);
+			emit("clear");
+			setQuery("");
+			nextTick(focusInput);
+		}
+		const showClear = computed(() => resolvedClearable.value && !locked.value && (hasSelection.value || query.value.length > 0));
+		function chipRemoveButtons() {
+			return [...rootEl.value?.querySelectorAll("[data-gr-autocomplete-chip-remove]") ?? []];
+		}
+		function focusChip(index) {
+			const buttons = chipRemoveButtons();
+			if (!buttons.length) {
+				focusInput();
+				return;
+			}
+			buttons[Math.min(Math.max(index, 0), buttons.length - 1)].focus();
+		}
+		function onChipKeydown(event, index, value) {
+			switch (event.key) {
+				case "ArrowLeft":
+					event.preventDefault();
+					focusChip(index - 1);
+					break;
+				case "ArrowRight":
+					event.preventDefault();
+					if (index >= chipRemoveButtons().length - 1) focusInput();
+					else focusChip(index + 1);
+					break;
+				case "Home":
+					event.preventDefault();
+					focusChip(0);
+					break;
+				case "End":
+					event.preventDefault();
+					focusChip(chipRemoveButtons().length - 1);
+					break;
+				case "Delete":
+				case "Backspace":
+					event.preventDefault();
+					removeValue(value, () => focusChip(index));
+					break;
+				case "Escape":
+					event.preventDefault();
+					focusInput();
+					break;
+				default: if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) focusInput();
+			}
+		}
+		function onKeydown(event) {
+			if (isComposingEvent(event)) return;
+			if (locked.value) return;
+			if (event.key === "ArrowLeft" && props.multiple && query.value === "" && selectedValues.value.length) {
+				event.preventDefault();
+				closeDropdown();
+				focusChip(selectedValues.value.length - 1);
+				return;
+			}
+			if (!open.value && ["ArrowDown", "ArrowUp"].includes(event.key)) {
+				event.preventDefault();
+				openDropdown();
+				return;
+			}
+			if (open.value && handleNavigationKeys(event)) return;
+			switch (event.key) {
+				case "Enter": {
+					if (!open.value) break;
+					event.preventDefault();
+					const item = activeItem.value;
+					if (item?.kind === "option") chooseOption(item.option);
+					else if (item?.kind === "add" || canAddCustom.value) commitCustom();
+					break;
+				}
+				case "Backspace":
+					if (props.multiple && query.value === "" && selectedValues.value.length) {
+						event.preventDefault();
+						removeValue(selectedValues.value[selectedValues.value.length - 1]);
+					}
+					break;
+				case "Tab":
+					closeDropdown();
+					break;
+			}
+		}
+		watch([singleSelectedLabel, () => props.multiple], ([label, multiple]) => {
+			if (multiple) return;
+			if (open.value || dirty.value) return;
+			setQuery(label);
+		}, { immediate: true });
+		watch(open, (isOpen) => {
+			if (isOpen) {
+				initActiveIndex();
+				return;
+			}
+			resetActive();
+			if (props.multiple) setQuery("");
+			else setQuery(singleSelectedLabel.value);
+		});
+		const ariaAutocomplete = computed(() => props.allowCustomValue ? "both" : "list");
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const themeAttrs = useGrThemeAttrs();
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-autocomplete": "",
+				class: "relative w-full",
+				onFocusin: _cache[3] || (_cache[3] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[4] || (_cache[4] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				createElementVNode("div", {
+					"data-gr-autocomplete-shell": "",
+					class: normalizeClass(unref(autocompleteShellClass)({
+						size: unref(resolvedSize),
+						disabled: unref(isDisabled),
+						invalid: unref(isInvalid)
+					})),
+					onMousedown: withModifiers(focusInput, ["self", "prevent"])
+				}, [
+					unref(hasPrefix) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						ref_key: "prefixEl",
+						ref: prefixEl,
+						"data-gr-autocomplete-prefix": "",
+						class: "inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]",
+						style: normalizeStyle(unref(prefixStyle))
+					}, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)], 4)) : createCommentVNode("", true),
+					__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(selectedOptions.value, (option, chipIndex) => {
+						return openBlock(), createBlock(GrBadge_default, {
+							key: option.value,
+							"data-gr-autocomplete-chip": "",
+							tone: __props.tagTone,
+							dark: __props.tagDark,
+							size: __props.tagSize,
+							radius: __props.tagRadius
+						}, {
+							default: withCtx(() => [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, toDisplayString(option.label), 1), !locked.value ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								"data-gr-autocomplete-chip-remove": "",
+								class: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-[var(--gr-radius-full)] text-current focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
+								"aria-label": unref(t)("gr.autocomplete.removeValue", "Remove {label}", { label: option.label }),
+								tabindex: "-1",
+								onClick: ($event) => removeValue(option.value),
+								onKeydown: ($event) => onChipKeydown($event, chipIndex, option.value)
+							}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
+								class: "i-lucide-x block h-3 w-3",
+								"aria-hidden": "true"
+							}, null, -1)])], 40, _hoisted_3)) : createCommentVNode("", true)])]),
+							_: 2
+						}, 1032, [
+							"tone",
+							"dark",
+							"size",
+							"radius"
+						]);
+					}), 128)) : createCommentVNode("", true),
+					createElementVNode("input", {
+						id: resolvedId.value,
+						ref_key: "inputEl",
+						ref: inputEl,
+						"data-gr-autocomplete-input": "",
+						"data-testid": "gr-autocomplete-input",
+						type: "text",
+						autocomplete: "off",
+						spellcheck: "false",
+						role: "combobox",
+						value: query.value,
+						disabled: unref(isDisabled),
+						placeholder: hasSelection.value && __props.multiple ? void 0 : __props.placeholder,
+						"aria-label": __props.ariaLabel,
+						"aria-invalid": unref(isInvalid) ? "true" : void 0,
+						"aria-describedby": describedBy.value,
+						"aria-required": unref(isRequired) ? "true" : void 0,
+						"aria-readonly": unref(isReadonly) ? "true" : void 0,
+						readonly: unref(isReadonly),
+						"aria-haspopup": "listbox",
+						"aria-autocomplete": ariaAutocomplete.value,
+						"aria-controls": unref(open) ? unref(listboxId) : void 0,
+						"aria-activedescendant": unref(activeDescendantId),
+						"aria-expanded": unref(open) ? "true" : "false",
+						class: "min-w-0 flex-1 bg-transparent text-inherit placeholder:text-[var(--gr-muted-fg)] focus:outline-none disabled:cursor-not-allowed",
+						onInput,
+						onFocus,
+						onKeydown
+					}, null, 40, _hoisted_4),
+					unref(hasSuffix) ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						ref_key: "suffixEl",
+						ref: suffixEl,
+						"data-gr-autocomplete-suffix": "",
+						class: "inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]",
+						style: normalizeStyle(unref(suffixStyle))
+					}, [renderSlot(_ctx.$slots, "suffix", {}, void 0, true)], 4)) : createCommentVNode("", true),
+					isLoading.value ? (openBlock(), createElementBlock("span", _hoisted_5, [..._cache[6] || (_cache[6] = [createElementVNode("span", {
+						class: "i-lucide-loader-2 block h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}, null, -1)])])) : showClear.value ? (openBlock(), createElementBlock("button", {
+						key: 4,
+						type: "button",
+						"data-testid": "gr-autocomplete-clear",
+						"data-gr-autocomplete-clear": "",
+						class: "shrink-0 inline-flex h-5 w-5 items-center justify-center rounded-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]",
+						"aria-label": resolvedClearLabel.value,
+						onClick: clearSelection
+					}, [..._cache[7] || (_cache[7] = [createElementVNode("span", {
+						class: "i-lucide-x block h-4 w-4",
+						"aria-hidden": "true"
+					}, null, -1)])], 8, _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_7, [..._cache[8] || (_cache[8] = [createElementVNode("span", {
+						class: "i-lucide-chevron-down block h-4 w-4",
+						"aria-hidden": "true"
+					}, null, -1)])]))
+				], 34),
+				__props.name ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectedValues.value, (value) => {
+					return openBlock(), createElementBlock("input", {
+						key: `hidden-${String(value)}`,
+						type: "hidden",
+						name: __props.name,
+						value: String(value)
+					}, null, 8, _hoisted_8);
+				}), 128)) : createCommentVNode("", true),
+				(openBlock(), createBlock(Teleport, {
+					to: unref(portalTarget),
+					disabled: !unref(teleportEnabled)
+				}, [createVNode(Transition, {
+					"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
+					"enter-from-class": "transform opacity-0 scale-95",
+					"enter-to-class": "transform opacity-100 scale-100",
+					"leave-active-class": "transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]",
+					"leave-from-class": "transform opacity-100 scale-100",
+					"leave-to-class": "transform opacity-0 scale-95"
+				}, {
+					default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
+						ref_key: "panelEl",
+						ref: panelEl,
+						"data-testid": "gr-autocomplete-panel"
+					}, unref(themeAttrs), {
+						"data-gr-autocomplete-panel": "",
+						"data-gr-overlay-root": "",
+						style: unref(floatingStyle)
+					}), [createElementVNode("div", { class: normalizeClass(unref(autocompletePanelClasses)) }, [showAddOption.value || renderedOptions.value.length ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: unref(listboxId),
+						ref_key: "listboxEl",
+						ref: listboxEl,
+						"data-gr-autocomplete-listbox": "",
+						"data-gr-virtual": __props.virtual ? "" : void 0,
+						class: normalizeClass(["p-1 overflow-auto", __props.virtual ? "flex flex-col" : ""]),
+						style: normalizeStyle(listboxStyle.value),
+						role: "listbox",
+						"aria-multiselectable": __props.multiple ? "true" : void 0
+					}, [showAddOption.value ? (openBlock(), createElementBlock("button", mergeProps({
+						key: 0,
+						id: addOptionDomId.value,
+						type: "button",
+						role: "option",
+						"aria-selected": "false",
+						tabindex: "-1"
+					}, optionSetProps(0), {
+						"data-testid": "gr-autocomplete-add-option",
+						"data-gr-autocomplete-add-option": "",
+						class: unref(autocompleteOptionClass)({
+							disabled: false,
+							active: unref(activeItem)?.kind === "add"
+						}),
+						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+						onClick: commitCustom,
+						onMousemove: _cache[1] || (_cache[1] = ($event) => activeIndex.value = 0)
+					}), toDisplayString(unref(t)("gr.autocomplete.addOption", "Add \"{value}\"", { value: query.value.trim() })), 17, _hoisted_10)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(renderedOptions.value, ({ option, index: optionIndex }) => {
+						return openBlock(), createElementBlock("button", mergeProps({
+							id: optionDomId(optionIndex),
+							key: option.value,
+							ref_for: true,
+							ref: (el) => __props.virtual && unref(virtualizer).measure(optionIndex + addOffset.value, el),
+							"data-gr-autocomplete-option": "",
+							type: "button",
+							role: "option",
+							tabindex: "-1"
+						}, { ref_for: true }, optionSetProps(optionIndex + addOffset.value), {
+							disabled: option.disabled,
+							"aria-selected": isSelected(option.value) ? "true" : "false",
+							"aria-disabled": option.disabled ? "true" : void 0,
+							class: unref(autocompleteOptionClass)({
+								disabled: !!option.disabled,
+								active: activeValue.value === option.value
+							}),
+							onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+							onClick: ($event) => chooseOption(option),
+							onMousemove: ($event) => activeIndex.value = navigableIndexOf(option.value)
+						}), [renderSlot(_ctx.$slots, "option", {
+							option,
+							selected: isSelected(option.value)
+						}, () => [createElementVNode("span", _hoisted_12, [createElementVNode("span", {
+							class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+							"aria-hidden": "true"
+						}, null, 2), createElementVNode("span", _hoisted_13, toDisplayString(option.label), 1)])], true)], 16, _hoisted_11);
+					}), 128))], 14, _hoisted_9)) : createCommentVNode("", true), isLoading.value || belowMinQuery.value || showEmpty.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						"data-gr-autocomplete-status": "",
+						role: "status",
+						"aria-live": "polite",
+						class: normalizeClass(unref(autocompleteStateClass))
+					}, [isLoading.value ? (openBlock(), createElementBlock("span", _hoisted_14, [renderSlot(_ctx.$slots, "loading", {}, () => [_cache[9] || (_cache[9] = createElementVNode("span", {
+						class: "i-lucide-loader-2 block h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}, null, -1)), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : belowMinQuery.value ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(resolvedTypeMoreText.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_16, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)]))], 2)) : createCommentVNode("", true)], 2)], 16), [[vShow, unref(open)]])]),
+					_: 3
+				})], 8, ["to", "disabled"]))
+			], 32)), [[unref(vClickOutside), {
+				handler: closeDropdown,
+				enabled: unref(open),
+				exclude: clickOutsideExclude
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-2a9c29c9"]]);
+//#endregion
+export { GrAutocomplete_default as t };