@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrTreeSelect/chunks/GrTreeSelect-DZp7CqqW.js

@@ -0,0 +1,623 @@
+import { 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 { useFloating } from "../../../composables/useFloating.js";
+import { useOverlayLayer } from "../../../composables/useOverlayLayer.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 { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-2wd7Crs0.js";
+import { t as GrTree_default } from "../../GrTree/chunks/GrTree-CaYK8dGZ.js";
+import { a as grTreeSelectStateClass, i as grTreeSelectPanelClass, o as paddingX, r as grTreeSelectClass, s as trailingZoneWidth } from "../../../chunks/config-DCFvmHEv2.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+//#region src/components/GrTreeSelect/GrTreeSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["name", "value"];
+var _hoisted_2 = { class: "relative" };
+var _hoisted_3 = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby",
+	"aria-label"
+];
+var _hoisted_4 = ["aria-label"];
+var _hoisted_5 = {
+	key: 2,
+	"data-testid": "gr-tree-select-chevron",
+	"data-gr-tree-select-chevron": "",
+	class: "absolute top-1/2 -translate-y-1/2 right-3 text-[var(--gr-muted-fg)] pointer-events-none"
+};
+var _hoisted_6 = {
+	key: 0,
+	class: "p-2 border-b border-[var(--gr-brd)]"
+};
+var _hoisted_7 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_8 = { class: "truncate" };
+//#endregion
+//#region src/components/GrTreeSelect/GrTreeSelect.vue
+var GrTreeSelect_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTreeSelect",
+	props: {
+		modelValue: {},
+		data: {},
+		props: { default: () => ({
+			children: "children",
+			label: "label"
+		}) },
+		nodeKey: { default: "id" },
+		defaultExpandedKeys: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: { default: void 0 },
+		size: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		state: { default: "default" },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		showCheckbox: {
+			type: Boolean,
+			default: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		name: { default: void 0 },
+		valueDisplay: { default: "label" },
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+		filterPlaceholder: { default: void 0 },
+		filterInputmode: { default: void 0 },
+		filterNodeMethod: {
+			type: Function,
+			default: void 0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		dropdownMaxHeight: { default: 320 },
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		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",
+		"change",
+		"update:open",
+		"visibleChange",
+		"clear",
+		"nodeClick",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const emit = __emit;
+		const rootEl = ref(null);
+		const triggerEl = ref(null);
+		const treeId = `gr-tree-select-tree-${useId()}`;
+		const field = useGrFormFieldContext();
+		const fieldId = computed(() => field?.id.value);
+		const describedBy = computed(() => field?.describedById.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		function focus() {
+			triggerEl.value?.focus();
+		}
+		function blur() {
+			triggerEl.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const filterInputRef = ref(null);
+		const treeRef = ref(null);
+		const panelEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event),
+			containers: () => [panelEl.value]
+		});
+		const clickOutsideExclude = [() => panelEl.value];
+		let hadPointerDownOnTrigger = false;
+		const { open, setOpen: setOpenState } = useControlledOpen(() => props.open, (next) => {
+			emit("update:open", next);
+			emit("visibleChange", next);
+		});
+		const filterValue = ref("");
+		const { floatingStyle } = useFloating(rootEl, panelEl, open, {
+			placement: "bottom-start",
+			matchWidth: true,
+			zIndexVar: "--gr-z-dropdown"
+		});
+		const closeOnSelectResolved = computed(() => {
+			return props.closeOnSelect ?? !props.multiple;
+		});
+		function getChildrenKey() {
+			return props.props.children ?? "children";
+		}
+		function getLabelKey() {
+			return props.props.label ?? "label";
+		}
+		function nodeLabel(data) {
+			const v = data[getLabelKey()];
+			return v == null ? "" : String(v);
+		}
+		function nodeChildren(data) {
+			const v = data[getChildrenKey()];
+			return Array.isArray(v) ? v : [];
+		}
+		function nodeKeyOf(data, index, parentKey) {
+			const v = data[props.nodeKey];
+			if (v != null) return v;
+			return parentKey == null ? index : `${String(parentKey)}:${index}`;
+		}
+		const labelByKey = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			const walk = (items, parentKey) => {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i];
+					const key = nodeKeyOf(item, i, parentKey);
+					map.set(key, nodeLabel(item));
+					walk(nodeChildren(item), key);
+				}
+			};
+			walk(props.data ?? [], void 0);
+			return map;
+		});
+		const pathLabelsByKey = computed(() => {
+			const map = /* @__PURE__ */ new Map();
+			const walk = (items, parentKey, parentPath) => {
+				for (let i = 0; i < items.length; i++) {
+					const item = items[i];
+					const key = nodeKeyOf(item, i, parentKey);
+					const label = nodeLabel(item);
+					const path = [...parentPath, label];
+					map.set(key, path);
+					walk(nodeChildren(item), key, path);
+				}
+			};
+			walk(props.data ?? [], void 0, []);
+			return map;
+		});
+		const selectedKeys = computed(() => {
+			if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
+			const v = props.modelValue;
+			if (v == null || Array.isArray(v)) return [];
+			return [v];
+		});
+		const selectedKeySet = computed(() => new Set(selectedKeys.value));
+		const selectedLabels = computed(() => {
+			const map = labelByKey.value;
+			return selectedKeys.value.map((k) => map.get(k) ?? String(k));
+		});
+		const selectedPathLabels = computed(() => {
+			if (props.multiple) return void 0;
+			const key = selectedKeys.value[0];
+			if (key == null) return void 0;
+			const path = pathLabelsByKey.value.get(key);
+			if (path?.length) return path;
+			const labels = selectedLabels.value;
+			return labels.length ? [labels[0]] : void 0;
+		});
+		const displayValue = computed(() => {
+			const labels = selectedLabels.value;
+			if (labels.length === 0) return "";
+			if (!props.multiple) {
+				if (props.valueDisplay === "path") {
+					const path = selectedPathLabels.value;
+					if (path?.length) return path.join(" / ");
+				}
+				return labels[0];
+			}
+			if (labels.length === 1) return labels[0];
+			return `${labels[0]} +${labels.length - 1}`;
+		});
+		const hasSelection = computed(() => selectedKeys.value.length > 0);
+		/** Дерево рендерится только когда есть что показать — ссылаться иначе не на что. */
+		const hasTree = computed(() => !props.loading && (props.data?.length ?? 0) > 0);
+		const resolvedFilterPlaceholder = computed(() => {
+			return props.filterPlaceholder ?? t("gr.treeSelect.filterPlaceholder", "Search…");
+		});
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTreeSelect" });
+		const className = computed(() => {
+			return grTreeSelectClass({
+				size: resolvedSize.value,
+				state: props.state,
+				invalid: isInvalid.value,
+				disabled: isDisabled.value
+			});
+		});
+		const panelClasses = computed(() => {
+			return grTreeSelectPanelClass;
+		});
+		const ADDON_MIN_WIDTH_BY_SIZE = {
+			xs: "2rem",
+			sm: "2.25rem",
+			md: "2.5rem",
+			lg: "3rem"
+		};
+		const slots = useSlots();
+		const { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixStyle, suffixStyle, fieldPadding: triggerStyle } = useControlAddons(() => props, {
+			defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],
+			paddingX: () => paddingX[resolvedSize.value],
+			trailingReserve: () => slots.suffix ? trailingZoneWidth : "0px"
+		});
+		const valueOverlayStyle = computed(() => ({
+			left: hasPrefix.value ? triggerStyle.value.paddingLeft : void 0,
+			right: hasSuffix.value ? triggerStyle.value.paddingRight : void 0
+		}));
+		function setOpen(next) {
+			if (isDisabled.value || isReadonly.value) return;
+			setOpenState(next);
+		}
+		function onClickOutside() {
+			setOpen(false);
+		}
+		function openDropdown() {
+			setOpen(true);
+		}
+		/**
+		* Стек слоёв возвращает фокус на триггер сразу после закрытия, а у триггера
+		* открытие висит на `focus`. Без флага `Escape` из дерева закрывал бы панель и
+		* тем же движением открывал её заново.
+		*/
+		let suppressFocusOpen = false;
+		function closeDropdown() {
+			suppressFocusOpen = true;
+			setOpen(false);
+			setTimeout(() => {
+				suppressFocusOpen = false;
+			}, 0);
+		}
+		function toggleDropdown() {
+			setOpen(!open.value);
+		}
+		function onTriggerPointerDown() {
+			hadPointerDownOnTrigger = true;
+			setTimeout(() => {
+				hadPointerDownOnTrigger = false;
+			}, 0);
+		}
+		function onTriggerFocus() {
+			if (hadPointerDownOnTrigger || suppressFocusOpen) return;
+			openDropdown();
+		}
+		useOverlayLayer(open, closeDropdown, { root: panelEl });
+		watch(open, async (isOpen) => {
+			if (!isOpen) {
+				if (filterValue.value.trim().length > 0) filterValue.value = "";
+				return;
+			}
+			if (!props.multiple) {
+				const v = props.modelValue;
+				if (v != null && !Array.isArray(v)) treeRef.value?.setCurrentKey(v);
+			}
+			if (props.filterable) {
+				await nextTick();
+				filterInputRef.value?.focus();
+			}
+		}, { immediate: true });
+		watch(() => props.modelValue, (v) => {
+			if (props.multiple) return;
+			if (v == null || Array.isArray(v)) {
+				treeRef.value?.setCurrentKey(void 0);
+				return;
+			}
+			treeRef.value?.setCurrentKey(v);
+		});
+		watch(filterValue, (v) => {
+			treeRef.value?.filter(v);
+		});
+		function emitModel(next) {
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		function clear() {
+			if (isDisabled.value || isReadonly.value) return;
+			emitModel(props.multiple ? [] : null);
+			emit("clear");
+			if (!props.multiple) treeRef.value?.setCurrentKey(void 0);
+		}
+		/**
+		* Отдаёт клавиатуру дереву. Панель под `v-show`, поэтому дерево уже в DOM, но
+		* скрытый элемент сфокусировать нельзя — сначала открытие, потом кадр, потом
+		* фокус. Дальше работают клавиши `GrTree`, а `Escape` возвращает фокус на
+		* триггер силами общего стека слоёв.
+		*/
+		async function focusTree() {
+			if (!open.value) return false;
+			await nextTick();
+			return treeRef.value?.focus() ?? false;
+		}
+		function onTriggerKeydown(e) {
+			if (isDisabled.value) return;
+			if (e.key === "Escape") {
+				e.preventDefault();
+				closeDropdown();
+				return;
+			}
+			if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				openDropdown();
+				if (!props.filterable) focusTree();
+			}
+		}
+		/** Стрелка из поля поиска — единственный путь из фильтра в дерево. */
+		function onFilterKeydown(e) {
+			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			e.preventDefault();
+			focusTree();
+		}
+		/** `Tab` уводит из панели — оставлять её открытой за спиной незачем. */
+		function onPanelKeydown(e) {
+			if (e.key === "Tab") closeDropdown();
+		}
+		const checkboxMode = computed(() => props.multiple && props.showCheckbox);
+		function onCheckedKeys(keys) {
+			if (isDisabled.value || isReadonly.value) return;
+			emitModel([...keys]);
+		}
+		function onNodeClick(data, node) {
+			emit("nodeClick", data, node);
+			if (isDisabled.value) return;
+			if (checkboxMode.value) {
+				treeRef.value?.setChecked(node.key, !selectedKeySet.value.has(node.key));
+				return;
+			}
+			if (props.multiple) {
+				const next = new Set(selectedKeySet.value);
+				if (next.has(node.key)) next.delete(node.key);
+				else next.add(node.key);
+				emitModel([...next]);
+				if (closeOnSelectResolved.value) closeDropdown();
+				return;
+			}
+			emitModel(node.key);
+			if (closeOnSelectResolved.value) closeDropdown();
+		}
+		const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget();
+		const themeAttrs = useGrThemeAttrs();
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-tree-select": "",
+				class: "relative",
+				onFocusin: _cache[1] || (_cache[1] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[2] || (_cache[2] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [
+				__props.name ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selectedKeys.value, (key) => {
+					return openBlock(), createElementBlock("input", {
+						key: `hidden-${String(key)}`,
+						type: "hidden",
+						name: __props.name,
+						value: String(key)
+					}, null, 8, _hoisted_1);
+				}), 128)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_2, [
+					unref(hasPrefix) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_key: "prefixEl",
+						ref: prefixEl,
+						"data-gr-tree-select-prefix": "",
+						class: "absolute inset-y-px left-px flex items-center justify-center rounded-l-[var(--gr-radius-control)] border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate",
+						style: normalizeStyle(unref(prefixStyle)),
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "prefix")], 4)) : createCommentVNode("", true),
+					createElementVNode("input", {
+						id: fieldId.value,
+						ref_key: "triggerEl",
+						ref: triggerEl,
+						"data-testid": "gr-tree-select-trigger",
+						"data-gr-tree-select-trigger": "",
+						type: "text",
+						value: displayValue.value,
+						placeholder: __props.placeholder,
+						disabled: unref(isDisabled),
+						readonly: "",
+						role: "combobox",
+						"aria-readonly": "true",
+						"aria-haspopup": "tree",
+						"aria-expanded": unref(open) ? "true" : "false",
+						"aria-controls": unref(open) && hasTree.value ? treeId : void 0,
+						"aria-invalid": unref(isInvalid) ? "true" : void 0,
+						"aria-required": unref(isRequired) ? "true" : void 0,
+						"aria-describedby": describedBy.value,
+						"aria-label": __props.ariaLabel,
+						class: normalizeClass(["w-full rounded-[var(--gr-radius-control)] border placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]", [className.value, _ctx.$slots.value ? "text-transparent placeholder:text-transparent" : ""]]),
+						style: normalizeStyle(unref(triggerStyle)),
+						onPointerdown: onTriggerPointerDown,
+						onClick: toggleDropdown,
+						onFocus: onTriggerFocus,
+						onKeydown: onTriggerKeydown
+					}, null, 46, _hoisted_3),
+					__props.clearable && hasSelection.value && !__props.disabled && !unref(isReadonly) ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						"data-testid": "gr-tree-select-clear",
+						"data-gr-tree-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-[var(--gr-radius-control)] text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] hover:bg-[color-mix(in_srgb,var(--gr-muted)_25%,transparent)]",
+						"aria-label": unref(t)("gr.common.clear", "Clear"),
+						onClick: withModifiers(clear, ["stop"])
+					}, [..._cache[3] || (_cache[3] = [createElementVNode("span", { class: "i-lucide-x inline-block h-4 w-4" }, null, -1)])], 8, _hoisted_4)) : (openBlock(), createElementBlock("span", _hoisted_5, [createElementVNode("span", { class: normalizeClass(["i-lucide-chevron-down inline-block h-4 w-4 transition-transform duration-[var(--gr-duration-fast)]", unref(open) ? "rotate-180" : ""]) }, null, 2)])),
+					unref(hasSuffix) ? (openBlock(), createElementBlock("div", {
+						key: 3,
+						ref_key: "suffixEl",
+						ref: suffixEl,
+						"data-gr-tree-select-suffix": "",
+						class: normalizeClass(["absolute inset-y-px right-9 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
+						style: normalizeStyle(unref(suffixStyle)),
+						"aria-hidden": "true"
+					}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true),
+					_ctx.$slots.value ? (openBlock(), createElementBlock("div", {
+						key: 4,
+						class: "absolute inset-y-0 left-3 right-9 flex items-center pointer-events-none",
+						style: normalizeStyle(valueOverlayStyle.value)
+					}, [renderSlot(_ctx.$slots, "value", {
+						value: __props.modelValue,
+						labels: selectedLabels.value,
+						displayValue: displayValue.value,
+						pathLabels: selectedPathLabels.value
+					})], 4)) : 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-tree-select-panel"
+					}, unref(themeAttrs), {
+						"data-gr-tree-select-panel": "",
+						"data-gr-overlay-root": "",
+						style: unref(floatingStyle),
+						onKeydown: onPanelKeydown
+					}), [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [__props.filterable ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(GrInput_default, {
+						ref_key: "filterInputRef",
+						ref: filterInputRef,
+						modelValue: filterValue.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterValue.value = $event),
+						"data-testid": "gr-tree-select-filter",
+						"data-gr-tree-select-filter": "",
+						type: "search",
+						inputmode: __props.filterInputmode,
+						placeholder: resolvedFilterPlaceholder.value,
+						size: "sm",
+						onKeydown: onFilterKeydown
+					}, null, 8, [
+						"modelValue",
+						"inputmode",
+						"placeholder"
+					])])) : createCommentVNode("", true), createElementVNode("div", {
+						class: normalizeClass(["p-1", __props.virtual ? "" : "overflow-auto"]),
+						style: normalizeStyle(__props.virtual ? void 0 : { maxHeight: `${__props.dropdownMaxHeight}px` })
+					}, [__props.loading ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-tree-select-loading": "",
+						role: "status",
+						class: normalizeClass(unref(grTreeSelectStateClass))
+					}, [renderSlot(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = createElementVNode("span", {
+						class: "i-lucide-loader-circle block h-4 w-4 animate-spin",
+						"aria-hidden": "true"
+					}, null, -1)), createElementVNode("span", null, toDisplayString(unref(t)("gr.treeSelect.loading", "Loading…")), 1)])], 2)) : (__props.data?.length ?? 0) === 0 ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(grTreeSelectStateClass))
+					}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t)("gr.treeSelect.empty", "No data")), 1)])], 2)) : (openBlock(), createBlock(unref(GrTree_default), {
+						key: 2,
+						id: treeId,
+						ref_key: "treeRef",
+						ref: treeRef,
+						size: unref(resolvedSize),
+						data: __props.data,
+						props: props.props,
+						"node-key": __props.nodeKey,
+						"default-expanded-keys": __props.defaultExpandedKeys,
+						"filter-node-method": __props.filterNodeMethod,
+						"highlight-current": !__props.multiple,
+						virtual: __props.virtual,
+						"max-height": __props.dropdownMaxHeight,
+						"show-checkbox": checkboxMode.value,
+						"check-strictly": __props.checkStrictly,
+						"checked-keys": selectedKeys.value,
+						onNodeClick,
+						"onUpdate:checkedKeys": onCheckedKeys
+					}, {
+						default: withCtx(({ node, data }) => [renderSlot(_ctx.$slots, "node", {
+							node,
+							data,
+							selected: selectedKeySet.value.has(node.key)
+						}, () => [createElementVNode("div", _hoisted_7, [!checkboxMode.value ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							"data-gr-tree-select-check": "",
+							class: normalizeClass(["inline-block h-4 w-4 shrink-0", selectedKeySet.value.has(node.key) ? "i-lucide-check text-[var(--gr-primary)]" : ""]),
+							"aria-hidden": "true"
+						}, null, 2)) : createCommentVNode("", true), createElementVNode("span", _hoisted_8, toDisplayString(node.label), 1)])])]),
+						_: 3
+					}, 8, [
+						"size",
+						"data",
+						"props",
+						"node-key",
+						"default-expanded-keys",
+						"filter-node-method",
+						"highlight-current",
+						"virtual",
+						"max-height",
+						"show-checkbox",
+						"check-strictly",
+						"checked-keys"
+					]))], 6)], 2)], 16), [[vShow, unref(open)]])]),
+					_: 3
+				})], 8, ["to", "disabled"]))
+			], 32)), [[unref(vClickOutside), {
+				handler: onClickOutside,
+				enabled: unref(open),
+				exclude: clickOutsideExclude
+			}]]);
+		};
+	}
+});
+//#endregion
+export { GrTreeSelect_default as t };