@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrSelect/chunks/GrSelect-Dn3FgJ3Z.js

@@ -1,730 +0,0 @@
-import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-DfWYCBB-.js";
-import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-SH0I--GW.js";
-import { vClickOutside } from "../../../directives/clickOutside.js";
-import { t as useFloating } from "../../../chunks/useFloating-DtM6TyE4.js";
-import { t as useEscapeToClose } from "../../../chunks/useEscapeToClose-C2t_S1gh.js";
-import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-C1VBL0dg.js";
-import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-CwMUQrBZ.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
-//#region src/components/GrSelect/GrSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"id",
-	"multiple",
-	"disabled",
-	"aria-label",
-	"aria-invalid",
-	"aria-describedby",
-	"aria-required"
-];
-var _hoisted_2 = ["selected"];
-var _hoisted_3 = ["value", "selected"];
-var _hoisted_4 = ["label"];
-var _hoisted_5 = [
-	"value",
-	"selected",
-	"disabled"
-];
-var _hoisted_6 = [
-	"value",
-	"selected",
-	"disabled"
-];
-var _hoisted_7 = {
-	key: 1,
-	"data-testid": "gr-select-chevron",
-	class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
-};
-var _hoisted_8 = [
-	"id",
-	"disabled",
-	"aria-label",
-	"aria-invalid",
-	"aria-describedby",
-	"aria-required",
-	"aria-controls",
-	"aria-activedescendant",
-	"aria-expanded"
-];
-var _hoisted_9 = { class: "min-w-0 flex-1" };
-var _hoisted_10 = {
-	key: 0,
-	"data-gr-select-tags": "",
-	class: "flex flex-wrap gap-1 py-0.5"
-};
-var _hoisted_11 = { class: "truncate" };
-var _hoisted_12 = ["aria-label", "onClick"];
-var _hoisted_13 = {
-	key: 0,
-	class: "shrink-0 h-4 w-4",
-	"aria-hidden": "true"
-};
-var _hoisted_14 = {
-	key: 1,
-	"data-testid": "gr-select-chevron",
-	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
-};
-var _hoisted_15 = ["disabled", "aria-label"];
-var _hoisted_16 = {
-	key: 0,
-	class: "p-2 border-b border-[var(--gr-brd)]"
-};
-var _hoisted_17 = {
-	key: 1,
-	"data-gr-select-loading": "",
-	class: "flex items-center justify-center gap-2 px-3 py-4 text-[13px] text-[var(--gr-muted-fg)]",
-	role: "status"
-};
-var _hoisted_18 = ["id", "aria-multiselectable"];
-var _hoisted_19 = [
-	"id",
-	"disabled",
-	"aria-selected",
-	"aria-disabled",
-	"onClick",
-	"onMousemove"
-];
-var _hoisted_20 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_21 = { class: "truncate" };
-var _hoisted_22 = {
-	key: 1,
-	"data-gr-select-empty": "",
-	class: "px-3 py-4 text-center text-[13px] text-[var(--gr-muted-fg)]"
-};
-//#endregion
-//#region src/components/GrSelect/GrSelect.vue
-var GrSelect_default = /* @__PURE__ */ defineComponent({
-	__name: "GrSelect",
-	props: {
-		modelValue: {},
-		options: { default: void 0 },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		ariaLabel: { default: void 0 },
-		view: { default: "default" },
-		size: { default: void 0 },
-		placeholder: { default: void 0 },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		optionsView: { default: "native" },
-		allowCustomValue: {
-			type: Boolean,
-			default: false
-		},
-		filterable: {
-			type: Boolean,
-			default: false
-		},
-		filterPlaceholder: { default: void 0 },
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		loadingText: { default: void 0 },
-		noResultsText: { default: void 0 },
-		tags: {
-			type: Boolean,
-			default: false
-		},
-		customValuePlaceholder: { default: void 0 },
-		dropdownMaxHeight: { default: 280 },
-		closeOnSelect: {
-			type: Boolean,
-			default: true
-		},
-		clearable: {
-			type: Boolean,
-			default: void 0
-		},
-		clearLabel: { default: void 0 },
-		variant: { default: void 0 },
-		underline: { default: void 0 }
-	},
-	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrSelect" });
-		const resolvedVariant = useGrComponentProp("GrSelect", "variant", () => props.variant, "primary");
-		const resolvedUnderline = useGrComponentProp("GrSelect", "underline", () => props.underline, "auto");
-		const resolvedClearable = useGrComponentProp("GrSelect", "clearable", () => props.clearable, false);
-		const { t } = useGranularityTranslations();
-		const resolvedCustomValuePlaceholder = computed(() => {
-			return props.customValuePlaceholder ?? t("gr.select.customValuePlaceholder", "Add value…");
-		});
-		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.common.clear", "Clear"));
-		const resolvedFilterPlaceholder = computed(() => props.filterPlaceholder ?? t("gr.select.searchPlaceholder", "Search…"));
-		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.select.loading", "Loading…"));
-		const resolvedNoResultsText = computed(() => props.noResultsText ?? t("gr.select.noResults", "No results"));
-		const resolvedSearchPlaceholder = computed(() => props.allowCustomValue ? resolvedCustomValuePlaceholder.value : resolvedFilterPlaceholder.value);
-		const baseClassName = computed(() => props.view === "link" ? linkBaseClass : defaultBaseClass);
-		const rootClass = computed(() => props.view === "link" ? "relative inline-block align-baseline" : "relative w-full");
-		const emit = __emit;
-		const field = useGrFormFieldContext();
-		const resolvedId = computed(() => field?.id.value);
-		const isInvalid = computed(() => Boolean(field?.invalid.value));
-		const describedBy = computed(() => field?.describedById.value);
-		const isRequired = computed(() => Boolean(field?.required.value));
-		const optionsResolved = computed(() => props.options ?? []);
-		function isOptionGroup(item) {
-			return Array.isArray(item.options);
-		}
-		/** Плоский список всех опций (группы «развёрнуты»). Используется для всех вычислений по значениям. */
-		const flatOptions = computed(() => {
-			const result = [];
-			for (const item of optionsResolved.value) if (isOptionGroup(item)) result.push(...item.options);
-			else result.push(item);
-			return result;
-		});
-		function modelToArray(value) {
-			if (Array.isArray(value)) return value;
-			if (!value) return [];
-			return [value];
-		}
-		const modelSingle = computed(() => {
-			return Array.isArray(props.modelValue) ? props.modelValue[0] ?? "" : props.modelValue;
-		});
-		const modelMultiple = computed(() => modelToArray(props.modelValue));
-		const selectedValues = computed(() => {
-			return props.multiple ? modelMultiple.value : modelSingle.value ? [modelSingle.value] : [];
-		});
-		const hasSelection = computed(() => selectedValues.value.length > 0);
-		const selectedOptions = computed(() => {
-			const byValue = new Map(flatOptions.value.map((o) => [o.value, o]));
-			return selectedValues.value.map((v) => byValue.get(v) ?? {
-				value: v,
-				label: v
-			});
-		});
-		const hasModelInOptions = computed(() => {
-			if (props.multiple) return false;
-			return flatOptions.value.some((o) => o.value === modelSingle.value);
-		});
-		const displayLabel = computed(() => {
-			if (props.multiple) {
-				if (!selectedValues.value.length) return "";
-				return selectedValues.value.map((v) => flatOptions.value.find((o) => o.value === v)?.label ?? v).join(", ");
-			}
-			return flatOptions.value.find((o) => o.value === modelSingle.value)?.label ?? modelSingle.value;
-		});
-		const displayText = computed(() => {
-			if (hasSelection.value) return displayLabel.value;
-			return props.placeholder ?? "";
-		});
-		const effectiveOptionsView = computed(() => {
-			if (props.view === "link" && props.multiple && props.optionsView === "native") return "panel";
-			if ((props.filterable || props.loading || props.tags) && props.optionsView === "native") return "panel";
-			return props.optionsView;
-		});
-		const showSearchInput = computed(() => (props.filterable || props.allowCustomValue) && effectiveOptionsView.value === "panel");
-		const showTags = computed(() => props.multiple && props.tags && effectiveOptionsView.value === "panel");
-		const nativeCustomOptionVisible = computed(() => {
-			if (!props.allowCustomValue) return false;
-			if (effectiveOptionsView.value !== "native") return false;
-			if (props.multiple) return false;
-			if (!props.options) return false;
-			if (modelSingle.value === "") return false;
-			return !hasModelInOptions.value;
-		});
-		const customValue = ref("");
-		const open = ref(false);
-		const rootEl = ref(null);
-		const panelEl = ref(null);
-		const customInputRef = ref(null);
-		const clickOutsideExclude = [() => panelEl.value];
-		const { floatingStyle, update: updateFloatingPosition } = useFloating(rootEl, panelEl, open, {
-			placement: "bottom-start",
-			matchWidth: () => props.view === "link" ? "min" : true,
-			zIndexVar: "--gr-z-dropdown"
-		});
-		function closeDropdown() {
-			open.value = false;
-		}
-		function toggleDropdown() {
-			if (props.disabled) return;
-			open.value = !open.value;
-		}
-		useEscapeToClose(open, closeDropdown);
-		watch(() => props.view, () => {
-			if (open.value) updateFloatingPosition();
-		});
-		const panelClasses = computed(() => {
-			return grSelectPanelClasses;
-		});
-		function matchesQuery(option, query) {
-			if (!query) return true;
-			return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
-		}
-		/**
-		* Элемент рендера панели: либо заголовок группы, либо опция.
-		* Группировка сохраняется, фильтрация по `customValue` скрывает пустые группы.
-		*/
-		const panelItems = computed(() => {
-			const q = props.allowCustomValue || props.filterable ? customValue.value.trim().toLowerCase() : "";
-			const items = [];
-			if (props.allowCustomValue && !props.multiple && modelSingle.value !== "" && !hasModelInOptions.value) {
-				const custom = {
-					value: modelSingle.value,
-					label: modelSingle.value
-				};
-				if (matchesQuery(custom, q)) items.push({
-					kind: "option",
-					option: custom,
-					key: `__custom__${custom.value}`
-				});
-			}
-			optionsResolved.value.forEach((item, index) => {
-				if (isOptionGroup(item)) {
-					const matched = item.options.filter((o) => matchesQuery(o, q));
-					if (!matched.length) return;
-					items.push({
-						kind: "group",
-						label: item.label,
-						key: `__group__${index}`
-					});
-					for (const option of matched) items.push({
-						kind: "option",
-						option,
-						key: `${index}:${option.value}`
-					});
-					return;
-				}
-				if (matchesQuery(item, q)) items.push({
-					kind: "option",
-					option: item,
-					key: `${index}:${item.value}`
-				});
-			});
-			return items;
-		});
-		const canAddCustom = computed(() => {
-			if (!props.allowCustomValue) return false;
-			if (effectiveOptionsView.value !== "panel") return false;
-			const v = customValue.value.trim();
-			if (!v) return false;
-			if (props.multiple) {
-				if (selectedValues.value.includes(v)) return false;
-				return !flatOptions.value.some((o) => o.value === v);
-			}
-			if (v === modelSingle.value) return false;
-			return !flatOptions.value.some((o) => o.value === v);
-		});
-		function emitValue(value) {
-			emit("update:modelValue", value);
-		}
-		function isSelected(value) {
-			return selectedValues.value.includes(value);
-		}
-		function isOptionDisabled(value) {
-			return flatOptions.value.find((o) => o.value === value)?.disabled === true;
-		}
-		function selectValue(value) {
-			emitValue(value);
-			if (props.closeOnSelect) closeDropdown();
-		}
-		function toggleValue(value) {
-			if (isOptionDisabled(value)) return;
-			if (!props.multiple) {
-				selectValue(value);
-				return;
-			}
-			const next = selectedValues.value.slice();
-			const idx = next.indexOf(value);
-			if (idx >= 0) next.splice(idx, 1);
-			else next.push(value);
-			emitValue(next);
-			if (props.closeOnSelect) closeDropdown();
-		}
-		function addCustom() {
-			const v = customValue.value.trim();
-			if (!v) return;
-			toggleValue(v);
-		}
-		function removeValue(value) {
-			if (props.disabled) return;
-			if (!props.multiple) return;
-			emitValue(selectedValues.value.filter((v) => v !== value));
-		}
-		function tagRemoveLabel(option) {
-			return t("gr.select.removeTag", "Remove {label}", { label: option.label });
-		}
-		const listboxId = useId();
-		const activeIndex = ref(-1);
-		function optionDomId(value) {
-			return `${listboxId}-opt-${value}`;
-		}
-		const navigableValues = computed(() => panelItems.value.filter((item) => item.kind === "option" && !item.option.disabled).map((item) => item.option.value));
-		const activeValue = computed(() => activeIndex.value >= 0 ? navigableValues.value[activeIndex.value] : void 0);
-		const activeDescendantId = computed(() => open.value && activeValue.value !== void 0 ? optionDomId(activeValue.value) : void 0);
-		function clampActive(index) {
-			const len = navigableValues.value.length;
-			if (len === 0) return -1;
-			return (index % len + len) % len;
-		}
-		async function scrollActiveIntoView() {
-			await nextTick();
-			const value = activeValue.value;
-			if (value === void 0) return;
-			document.getElementById(optionDomId(value))?.scrollIntoView?.({ block: "nearest" });
-		}
-		function setActive(index) {
-			activeIndex.value = clampActive(index);
-			scrollActiveIntoView();
-		}
-		function initActiveIndex() {
-			const selectedIdx = navigableValues.value.findIndex((v) => isSelected(v));
-			activeIndex.value = selectedIdx >= 0 ? selectedIdx : navigableValues.value.length ? 0 : -1;
-		}
-		function openDropdown() {
-			if (props.disabled || open.value) return;
-			open.value = true;
-		}
-		let typeaheadBuffer = "";
-		let typeaheadTimer = null;
-		function typeahead(char) {
-			typeaheadBuffer += char.toLowerCase();
-			if (typeaheadTimer) clearTimeout(typeaheadTimer);
-			typeaheadTimer = setTimeout(() => {
-				typeaheadBuffer = "";
-			}, 600);
-			const idx = navigableValues.value.findIndex((v) => {
-				return flatOptions.value.find((o) => o.value === v)?.label.toLowerCase().startsWith(typeaheadBuffer);
-			});
-			if (idx >= 0) setActive(idx);
-		}
-		function onComboKeydown(event) {
-			if (props.disabled) return;
-			if (!open.value) {
-				if ([
-					"ArrowDown",
-					"ArrowUp",
-					"Enter",
-					" "
-				].includes(event.key)) {
-					event.preventDefault();
-					openDropdown();
-				}
-				return;
-			}
-			switch (event.key) {
-				case "ArrowDown":
-					event.preventDefault();
-					setActive(activeIndex.value + 1);
-					break;
-				case "ArrowUp":
-					event.preventDefault();
-					setActive(activeIndex.value - 1);
-					break;
-				case "Home":
-					event.preventDefault();
-					setActive(0);
-					break;
-				case "End":
-					event.preventDefault();
-					setActive(navigableValues.value.length - 1);
-					break;
-				case "Enter":
-					event.preventDefault();
-					if (props.allowCustomValue && canAddCustom.value) addCustom();
-					else if (activeValue.value !== void 0) toggleValue(activeValue.value);
-					break;
-				case "Tab":
-					closeDropdown();
-					break;
-				default: if (!showSearchInput.value && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
-			}
-		}
-		watch(open, async (isOpen) => {
-			if (!isOpen) {
-				customValue.value = "";
-				activeIndex.value = -1;
-				return;
-			}
-			initActiveIndex();
-			if (showSearchInput.value) {
-				await nextTick();
-				customInputRef.value?.focus();
-			}
-		}, { immediate: true });
-		const showNativeChevron = computed(() => {
-			return effectiveOptionsView.value === "native" && props.view !== "link" && !props.multiple;
-		});
-		const nativeClearOptionVisible = computed(() => {
-			if (!resolvedClearable.value) return false;
-			if (effectiveOptionsView.value !== "native") return false;
-			if (props.multiple) return false;
-			if (!props.options) return true;
-			return !flatOptions.value.some((o) => o.value === "");
-		});
-		const panelClearVisible = computed(() => {
-			if (!resolvedClearable.value) return false;
-			if (effectiveOptionsView.value !== "panel") return false;
-			if (props.view === "link") return false;
-			return hasSelection.value;
-		});
-		const nativeClassName = computed(() => {
-			return grSelectNativeClass({
-				view: props.view,
-				size: resolvedSize.value,
-				disabled: props.disabled,
-				variant: resolvedVariant.value,
-				underline: resolvedUnderline.value,
-				showNativeChevron: showNativeChevron.value
-			});
-		});
-		/**
-		* `view="link"` в native-режиме: ширина обёртки должна определяться выбранной опцией,
-		* а не самой длинной (как делает браузер по умолчанию). Поэтому рендерим прозрачный
-		* `<select>`-overlay поверх видимого `<span>` с меткой — overlay принимает клики/клавиатуру,
-		* span задаёт ширину компонента в закрытом состоянии.
-		*/
-		const isLinkNative = computed(() => props.view === "link" && effectiveOptionsView.value === "native");
-		const linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({
-			size: resolvedSize.value,
-			variant: resolvedVariant.value,
-			underline: resolvedUnderline.value,
-			disabled: props.disabled
-		}));
-		const linkNativeDisplayText = computed(() => {
-			return displayText.value || props.placeholder || "\xA0";
-		});
-		const triggerClassName = computed(() => {
-			return grSelectTriggerClass({
-				view: props.view,
-				optionsView: effectiveOptionsView.value,
-				size: resolvedSize.value,
-				disabled: props.disabled,
-				variant: resolvedVariant.value,
-				underline: resolvedUnderline.value
-			});
-		});
-		function onChange(e) {
-			const el = e.target;
-			if (props.multiple) {
-				const values = Array.from(el.selectedOptions, (o) => o.value);
-				emit("update:modelValue", values);
-				return;
-			}
-			emit("update:modelValue", el.value);
-		}
-		function clearSelection() {
-			if (props.disabled) return;
-			emitValue(props.multiple ? [] : "");
-		}
-		return (_ctx, _cache) => {
-			return effectiveOptionsView.value === "native" ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				"data-gr-select": "",
-				class: normalizeClass(rootClass.value)
-			}, [
-				createElementVNode("select", {
-					id: resolvedId.value,
-					"data-gr-select-native": "",
-					multiple: __props.multiple,
-					disabled: __props.disabled,
-					"aria-label": __props.ariaLabel,
-					"aria-invalid": isInvalid.value ? "true" : void 0,
-					"aria-describedby": describedBy.value,
-					"aria-required": isRequired.value ? "true" : void 0,
-					class: normalizeClass(isLinkNative.value ? unref(grSelectLinkNativeOverlayClass) : [baseClassName.value, nativeClassName.value]),
-					onChange
-				}, [nativeClearOptionVisible.value ? (openBlock(), createElementBlock("option", {
-					key: 0,
-					value: "",
-					selected: !__props.multiple && modelSingle.value === ""
-				}, toDisplayString(__props.placeholder || unref(t)("gr.select.clearOption", "None")), 9, _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {}, () => [nativeCustomOptionVisible.value ? (openBlock(), createElementBlock("option", {
-					key: 0,
-					value: modelSingle.value,
-					selected: !__props.multiple
-				}, toDisplayString(modelSingle.value), 9, _hoisted_3)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(optionsResolved.value, (item, index) => {
-					return openBlock(), createElementBlock(Fragment, { key: index }, [isOptionGroup(item) ? (openBlock(), createElementBlock("optgroup", {
-						key: 0,
-						label: item.label
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.options, (opt) => {
-						return openBlock(), createElementBlock("option", {
-							key: `${index}:${opt.value}`,
-							value: opt.value,
-							selected: __props.multiple ? modelMultiple.value.includes(opt.value) : modelSingle.value === opt.value,
-							disabled: opt.disabled
-						}, toDisplayString(opt.label), 9, _hoisted_5);
-					}), 128))], 8, _hoisted_4)) : (openBlock(), createElementBlock("option", {
-						key: 1,
-						value: item.value,
-						selected: __props.multiple ? modelMultiple.value.includes(item.value) : modelSingle.value === item.value,
-						disabled: item.disabled
-					}, toDisplayString(item.label), 9, _hoisted_6))], 64);
-				}), 128))])], 42, _hoisted_1),
-				isLinkNative.value ? (openBlock(), createElementBlock("span", {
-					key: 0,
-					"data-gr-select-link-label": "",
-					"aria-hidden": "true",
-					class: normalizeClass(linkNativeLabelClassName.value)
-				}, toDisplayString(linkNativeDisplayText.value), 3)) : createCommentVNode("", true),
-				showNativeChevron.value ? (openBlock(), createElementBlock("span", _hoisted_7, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
-					class: "i-lucide-chevron-down block h-4 w-4",
-					"aria-hidden": "true"
-				}, null, -1)])])) : createCommentVNode("", true)
-			], 2)) : withDirectives((openBlock(), createElementBlock("div", {
-				key: 1,
-				ref_key: "rootEl",
-				ref: rootEl,
-				"data-gr-select": "",
-				class: normalizeClass(rootClass.value)
-			}, [
-				createElementVNode("button", {
-					id: resolvedId.value,
-					"data-testid": "gr-select-trigger",
-					"data-gr-select-trigger": "",
-					type: "button",
-					disabled: __props.disabled,
-					"aria-label": __props.ariaLabel,
-					"aria-invalid": isInvalid.value ? "true" : void 0,
-					"aria-describedby": describedBy.value,
-					"aria-required": isRequired.value ? "true" : void 0,
-					role: "combobox",
-					"aria-haspopup": "listbox",
-					"aria-controls": open.value ? unref(listboxId) : void 0,
-					"aria-activedescendant": activeDescendantId.value,
-					"aria-expanded": open.value ? "true" : "false",
-					class: normalizeClass([
-						baseClassName.value,
-						triggerClassName.value,
-						showTags.value && hasSelection.value ? "!h-auto min-h-10 !py-1.5" : ""
-					]),
-					onClick: toggleDropdown,
-					onKeydown: onComboKeydown
-				}, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "value", {
-					selectedOptions: selectedOptions.value,
-					selectedValues: selectedValues.value,
-					displayLabel: displayLabel.value,
-					placeholder: __props.placeholder,
-					hasSelection: hasSelection.value
-				}, () => [showTags.value && hasSelection.value ? (openBlock(), createElementBlock("span", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, (opt) => {
-					return openBlock(), createElementBlock("span", {
-						key: opt.value,
-						"data-gr-select-tag": "",
-						class: "inline-flex items-center gap-1 rounded-[6px] bg-[var(--gr-muted)] pl-2 pr-1 py-0.5 text-[12px] text-[var(--gr-fg)] max-w-full"
-					}, [createElementVNode("span", _hoisted_11, toDisplayString(opt.label), 1), !__props.disabled ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						"data-gr-select-tag-remove": "",
-						role: "button",
-						tabindex: "-1",
-						"aria-label": tagRemoveLabel(opt),
-						class: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-fg)_12%,transparent)]",
-						onClick: withModifiers(($event) => removeValue(opt.value), ["stop"])
-					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
-						class: "i-lucide-x block h-3 w-3",
-						"aria-hidden": "true"
-					}, null, -1)])], 8, _hoisted_12)) : createCommentVNode("", true)]);
-				}), 128))])) : (openBlock(), createElementBlock("span", {
-					key: 1,
-					class: normalizeClass(["block truncate", !hasSelection.value ? "text-[var(--gr-muted-fg)]" : ""])
-				}, toDisplayString(displayText.value), 3))])]), panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_13)) : (openBlock(), createElementBlock("span", _hoisted_14, [..._cache[3] || (_cache[3] = [createElementVNode("span", {
-					class: "i-lucide-chevron-down block h-4 w-4",
-					"aria-hidden": "true"
-				}, null, -1)])]))], 42, _hoisted_8),
-				panelClearVisible.value ? (openBlock(), createElementBlock("button", {
-					key: 0,
-					"data-testid": "gr-select-clear",
-					"data-gr-select-clear": "",
-					type: "button",
-					class: "absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)] disabled:opacity-50",
-					disabled: __props.disabled,
-					"aria-label": resolvedClearLabel.value,
-					onClick: withModifiers(clearSelection, ["stop"])
-				}, [..._cache[4] || (_cache[4] = [createElementVNode("span", {
-					class: "i-lucide-x inline-block h-4 w-4",
-					"aria-hidden": "true"
-				}, null, -1)])], 8, _hoisted_15)) : createCommentVNode("", true),
-				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
-					"enter-active-class": "transition ease-out duration-150",
-					"enter-from-class": "transform opacity-0 scale-95",
-					"enter-to-class": "transform opacity-100 scale-100",
-					"leave-active-class": "transition ease-in duration-100",
-					"leave-from-class": "transform opacity-100 scale-100",
-					"leave-to-class": "transform opacity-0 scale-95"
-				}, {
-					default: withCtx(() => [withDirectives(createElementVNode("div", {
-						ref_key: "panelEl",
-						ref: panelEl,
-						"data-testid": "gr-select-panel",
-						"data-gr-select-panel": "",
-						style: normalizeStyle(unref(floatingStyle))
-					}, [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [showSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_16, [createVNode(GrInput_default, {
-						ref_key: "customInputRef",
-						ref: customInputRef,
-						modelValue: customValue.value,
-						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customValue.value = $event),
-						"data-testid": "gr-select-custom-input",
-						"data-gr-select-search": "",
-						type: "text",
-						placeholder: resolvedSearchPlaceholder.value,
-						size: "sm",
-						onKeydown: onComboKeydown
-					}, null, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true), __props.loading ? (openBlock(), createElementBlock("div", _hoisted_17, [_cache[5] || (_cache[5] = createElementVNode("span", {
-						class: "i-lucide-loader-circle block h-4 w-4 animate-spin",
-						"aria-hidden": "true"
-					}, null, -1)), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)])) : (openBlock(), createElementBlock("div", {
-						key: 2,
-						id: unref(listboxId),
-						"data-gr-select-listbox": "",
-						class: "p-1 overflow-auto",
-						style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` }),
-						role: "listbox",
-						"aria-multiselectable": __props.multiple ? "true" : void 0
-					}, [
-						canAddCustom.value ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							"data-testid": "gr-select-add-option",
-							"data-gr-select-add-option": "",
-							type: "button",
-							class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full"]]),
-							onClick: addCustom
-						}, toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 3)) : createCommentVNode("", true),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(panelItems.value, (item) => {
-							return openBlock(), createElementBlock(Fragment, { key: item.key }, [item.kind === "group" ? (openBlock(), createElementBlock("div", {
-								key: 0,
-								"data-gr-select-group-label": "",
-								role: "presentation",
-								class: normalizeClass(["px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
-							}, toDisplayString(item.label), 3)) : (openBlock(), createElementBlock("button", {
-								key: 1,
-								id: optionDomId(item.option.value),
-								"data-gr-select-option": "",
-								type: "button",
-								role: "option",
-								disabled: item.option.disabled,
-								"aria-selected": isSelected(item.option.value) ? "true" : "false",
-								"aria-disabled": item.option.disabled ? "true" : void 0,
-								class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
-									__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full",
-									item.option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]",
-									activeValue.value === item.option.value && !item.option.disabled ? "bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]" : ""
-								]]),
-								onClick: ($event) => toggleValue(item.option.value),
-								onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(item.option.value)
-							}, [renderSlot(_ctx.$slots, "option", {
-								option: item.option,
-								selected: isSelected(item.option.value)
-							}, () => [createElementVNode("span", _hoisted_20, [createElementVNode("span", {
-								class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(item.option.value) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
-								"aria-hidden": "true"
-							}, null, 2), createElementVNode("span", _hoisted_21, toDisplayString(item.option.label), 1)])])], 42, _hoisted_19))], 64);
-						}), 128)),
-						!panelItems.value.length && !canAddCustom.value ? (openBlock(), createElementBlock("div", _hoisted_22, toDisplayString(resolvedNoResultsText.value), 1)) : createCommentVNode("", true)
-					], 12, _hoisted_18))], 2)], 4), [[vShow, open.value]])]),
-					_: 3
-				})]))
-			], 2)), [[unref(vClickOutside), {
-				handler: closeDropdown,
-				enabled: open.value,
-				exclude: clickOutsideExclude
-			}]]);
-		};
-	}
-});
-//#endregion
-export { GrSelect_default as t };