@feugene/granularity 0.19.0 → 0.21.0

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

@@ -1,860 +0,0 @@
-import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
-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-Cn-Wiz5d.js";
-import { vClickOutside } from "../../../directives/clickOutside.js";
-import { r as isComposingEvent } from "../../../chunks/keyboard-DE2yhz_b.js";
-import { t as loader_circle_default } from "../../../chunks/loader-circle-CfVLz7lb.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 { useComboboxNavigation } from "../../../composables/useComboboxNavigation.js";
-import { a as resolveSelectedOptions, t as filterOptions } from "../../../chunks/optionFilter-DYw9XPPx.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 { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
-import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.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: "inline-block h-4 w-4 shrink-0",
-	"aria-hidden": "true"
-};
-var _hoisted_14 = { class: "truncate" };
-var _hoisted_15 = {
-	key: 0,
-	"data-gr-autocomplete-loading": "",
-	class: "flex items-center gap-2"
-};
-var _hoisted_16 = {
-	key: 1,
-	"data-gr-autocomplete-hint": ""
-};
-var _hoisted_17 = {
-	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)
-							}, [createVNode(unref(x_default), {
-								class: "block h-3 w-3",
-								"aria-hidden": "true"
-							})], 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, [createVNode(unref(loader_circle_default), {
-						class: "block h-4 w-4 animate-spin",
-						"aria-hidden": "true"
-					})])) : 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
-					}, [createVNode(unref(x_default), {
-						class: "block h-4 w-4",
-						"aria-hidden": "true"
-					})], 8, _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(unref(chevron_down_default), {
-						class: "block h-4 w-4",
-						"aria-hidden": "true"
-					})]))
-				], 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", _hoisted_13, [isSelected(option.value) ? (openBlock(), createBlock(unref(check_default), {
-							key: 0,
-							class: "block h-4 w-4 text-[var(--gr-primary)]"
-						})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_14, 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_15, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(loader_circle_default), {
-						class: "block h-4 w-4 animate-spin",
-						"aria-hidden": "true"
-					}), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : belowMinQuery.value ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(resolvedTypeMoreText.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_17, [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-06fe398b"]]);
-//#endregion
-export { GrAutocomplete_default as t };