@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system256.js

@@ -0,0 +1,769 @@
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BTreeSelectPlacement as n, BTreeSelectStatus as r, BTreeSelectVariant as i } from "./design-system255.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as ee, mergeModels as te, mergeProps as ne, nextTick as d, normalizeClass as f, normalizeStyle as re, openBlock as p, ref as m, renderList as ie, renderSlot as h, toDisplayString as g, unref as _, useAttrs as ae, useCssVars as oe, useModel as se, watch as ce, withModifiers as v } from "vue";
+//#region src/components/BTreeSelect/BTreeSelect.vue?vue&type=script&setup=true&lang.ts
+var le = [
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-label",
+	"aria-disabled"
+], ue = { class: "b:truncate" }, de = ["aria-label", "onClick"], fe = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-label"
+], pe = {
+	key: 2,
+	class: "b-tree-select__placeholder b:flex-1 b:truncate b:text-[var(--b-tree-select-placeholder-color)]"
+}, me = {
+	key: 0,
+	class: "b-tree-select__value b:flex-1 b:truncate b:text-[color:var(--b-tree-select-color)]"
+}, he = {
+	key: 1,
+	class: "b-tree-select__placeholder b:flex-1 b:truncate b:text-[var(--b-tree-select-placeholder-color)]"
+}, ge = [
+	"value",
+	"disabled",
+	"aria-label"
+], _e = ["id", "aria-label"], ve = ["aria-multiselectable"], ye = [
+	"data-node-key",
+	"aria-expanded",
+	"aria-selected",
+	"aria-checked",
+	"aria-disabled",
+	"aria-level",
+	"tabindex",
+	"onClick",
+	"onDblclick"
+], be = ["onClick"], xe = {
+	key: 1,
+	class: "b-tree-select__switcher-icon b-tree-select__switcher-icon--spin",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true"
+}, Se = {
+	key: 1,
+	class: "b-tree-select__switcher b-tree-select__switcher--leaf",
+	"aria-hidden": "true"
+}, Ce = [
+	"aria-checked",
+	"aria-disabled",
+	"onClick"
+], we = {
+	key: 3,
+	class: "b-tree-select__icon",
+	"aria-hidden": "true"
+}, Te = { class: "b-tree-select__title" }, Ee = {
+	key: 1,
+	class: "b-tree-select__empty"
+}, De = {
+	class: "b-tree-select__sr-only",
+	role: "status",
+	"aria-live": "polite"
+}, Oe = /* @__PURE__ */ ee({
+	inheritAttrs: !1,
+	__name: "BTreeSelect",
+	props: /* @__PURE__ */ te({
+		treeData: { default: () => [] },
+		fieldNames: {},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		treeCheckable: {
+			type: Boolean,
+			default: !1
+		},
+		treeCheckStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		labelInValue: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: () => e.Medium },
+		variant: { default: () => i.Outlined },
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		status: {},
+		defaultOpen: {
+			type: Boolean,
+			default: !1
+		},
+		showSearch: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		treeDefaultExpandAll: {
+			type: Boolean,
+			default: !1
+		},
+		treeDefaultExpandedKeys: { default: () => [] },
+		treeExpandedKeys: {},
+		treeExpandAction: {
+			type: [String, Boolean],
+			default: !1
+		},
+		treeIcon: {
+			type: Boolean,
+			default: !1
+		},
+		treeLine: {
+			type: Boolean,
+			default: !1
+		},
+		loadData: { type: Function },
+		placement: { default: () => n.BottomLeft },
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
+			default: !0
+		},
+		listHeight: { default: 256 },
+		maxTagCount: {},
+		maxTagPlaceholder: { type: [String, Function] },
+		maxCount: {},
+		allowClear: {
+			type: Boolean,
+			default: !1
+		},
+		notFoundContent: { default: "Not Found" },
+		filterTreeNode: {
+			type: [Boolean, Function],
+			default: !0
+		},
+		treeNodeFilterProp: { default: "title" },
+		treeNodeLabelProp: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /* @__PURE__ */ te([
+		"change",
+		"select",
+		"deselect",
+		"treeCheck",
+		"openChange",
+		"popupScroll",
+		"treeExpand",
+		"search",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue", "update:open"]),
+	setup(n, { expose: ee, emit: te }) {
+		oe((e) => ({ v5613f006: Pe.value }));
+		let Oe = ae(), y = te, b = se(n, "modelValue"), x = se(n, "open");
+		n.defaultOpen && !x.value && (x.value = n.defaultOpen);
+		let ke = o(() => n.fieldNames?.label ?? "title"), S = o(() => n.fieldNames?.value ?? "value"), Ae = o(() => n.fieldNames?.children ?? "children"), je = o(() => n.treeNodeLabelProp ?? ke.value);
+		function Me(e) {
+			return String(e[ke.value] ?? "");
+		}
+		function C(e) {
+			let t = e[je.value];
+			return t == null ? Me(e) : String(t);
+		}
+		function w(e) {
+			return e[S.value];
+		}
+		function T(e) {
+			return e.key ?? w(e);
+		}
+		function E(e) {
+			return e[Ae.value];
+		}
+		let { componentUID: Ne } = t(), Pe = o(() => `--b-tree-select-anchor-${Ne.value}`), Fe = o(() => `b-tree-select-tree-${Ne.value}`), D = m(null), O = m(null), k = m(null), Ie = m(null), A = o(() => !!x.value), j = m(""), M = m(/* @__PURE__ */ new Set()), N = o(() => n.treeExpandedKeys !== void 0), P = o(() => N.value ? new Set(n.treeExpandedKeys) : M.value), F = m(null), I = m(/* @__PURE__ */ new Set()), Le = m(/* @__PURE__ */ new Set()), L = o(() => n.multiple || n.treeCheckable);
+		function Re(e, t = 0, n = [], r = !0) {
+			let i = [];
+			for (let a of e) {
+				let e = w(a), o = T(a), s = P.value.has(o);
+				i.push({
+					key: o,
+					value: e,
+					data: a,
+					depth: t,
+					visible: r,
+					parents: n
+				});
+				let c = E(a);
+				c?.length && i.push(...Re(c, t + 1, [...n, e], r && s));
+			}
+			return i;
+		}
+		let R = o(() => Re(n.treeData)), z = o(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of R.value) e.set(t.value, t.data);
+			return e;
+		}), B = o(() => !!n.showSearch);
+		function ze(e, t) {
+			if (!t) return !0;
+			if (typeof n.filterTreeNode == "function") return n.filterTreeNode(t, e);
+			if (n.filterTreeNode === !1) return !0;
+			let r = typeof n.showSearch == "object" && n.showSearch !== null ? n.showSearch : null;
+			if (r?.filter) return r.filter(t, e);
+			let i = e[n.treeNodeFilterProp ?? "title"];
+			return String(i ?? "").toLowerCase().includes(t.toLowerCase());
+		}
+		let V = o(() => {
+			let e = j.value.trim();
+			if (!e) return R.value.filter((e) => e.visible);
+			let t = /* @__PURE__ */ new Set();
+			for (let n of R.value) ze(n.data, e) && (t.add(n.value), n.parents.forEach((e) => t.add(e)));
+			return R.value.filter((e) => t.has(e.value)).map((e) => ({
+				...e,
+				visible: !0
+			}));
+		});
+		function Be(e) {
+			return typeof e == "object" && e ? e.value : e;
+		}
+		let H = o(() => {
+			let e = b.value;
+			return e == null ? [] : Array.isArray(e) ? e.map(Be) : [Be(e)];
+		}), U = o(() => new Set(H.value)), Ve = o(() => {
+			if (!n.treeCheckable || n.treeCheckStrictly) return /* @__PURE__ */ new Set();
+			let e = /* @__PURE__ */ new Set();
+			function t(n) {
+				let r = !0, i = !1;
+				for (let a of n) {
+					let n = w(a), o = E(a);
+					if (o?.length) {
+						let a = t(o);
+						a.all ? i = !0 : a.some ? (e.add(n), r = !1, i = !0) : U.value.has(n) ? i = !0 : r = !1;
+					} else U.value.has(n) ? i = !0 : r = !1;
+				}
+				return {
+					all: r,
+					some: i
+				};
+			}
+			return t(n.treeData), e;
+		}), W = o(() => H.value.map((e) => {
+			let t = z.value.get(e), n = Array.isArray(b.value) ? b.value.find((t) => typeof t == "object" && !!t && "value" in t && t.value === e) : typeof b.value == "object" && b.value !== null && "value" in b.value && b.value.value === e ? b.value : void 0;
+			return {
+				value: e,
+				label: t ? C(t) : n?.label ?? String(e)
+			};
+		})), G = o(() => W.value[0]?.label ?? ""), He = o(() => n.maxTagCount == null || n.maxTagCount === "responsive" ? W.value : W.value.slice(0, n.maxTagCount)), Ue = o(() => n.maxTagCount == null || n.maxTagCount === "responsive" ? [] : W.value.slice(n.maxTagCount)), We = o(() => {
+			let e = Ue.value;
+			return e.length === 0 ? "" : typeof n.maxTagPlaceholder == "function" ? n.maxTagPlaceholder(e) : typeof n.maxTagPlaceholder == "string" ? n.maxTagPlaceholder : `+ ${e.length} ...`;
+		});
+		function Ge(e) {
+			let t = [];
+			for (let n of e) {
+				let e = E(n);
+				e?.length && (t.push(T(n)), t.push(...Ge(e)));
+			}
+			return t;
+		}
+		N.value || (n.treeDefaultExpandAll ? M.value = new Set(Ge(n.treeData)) : n.treeDefaultExpandedKeys.length && (M.value = new Set(n.treeDefaultExpandedKeys)));
+		let Ke = null;
+		function qe(e) {
+			x.value !== e && (x.value = e), y("openChange", e);
+		}
+		function K() {
+			n.disabled || A.value || (Ke = document.activeElement, qe(!0));
+		}
+		function q() {
+			A.value && (qe(!1), j.value = "", d(() => {
+				Ke?.isConnected ? Ke.focus() : D.value?.focus();
+			}));
+		}
+		ce(A, (e) => {
+			e ? d(() => {
+				k.value?.showPopover?.(), B.value && O.value?.focus(), !F.value && V.value[0] && (F.value = V.value[0].key);
+			}) : k.value?.hidePopover?.();
+		});
+		async function J(e) {
+			let t = T(e);
+			if (e.disabled) return;
+			let r = !P.value.has(t);
+			if (r && n.loadData && !Le.value.has(t) && !I.value.has(t)) {
+				I.value.add(t);
+				try {
+					await n.loadData(e), Le.value.add(t);
+				} finally {
+					I.value.delete(t);
+				}
+			}
+			let i;
+			i = N.value ? new Set(n.treeExpandedKeys) : new Set(M.value), r ? i.add(t) : i.delete(t), N.value || (M.value = i), y("treeExpand", [...i]);
+		}
+		function Y(e, t, r = {}) {
+			let i = e.map((e) => {
+				let t = z.value.get(e);
+				return t ? C(t) : String(e);
+			}), a;
+			a = L.value ? n.labelInValue ? e.map((e, t) => ({
+				value: e,
+				label: i[t]
+			})) : [...e] : e.length === 0 ? (n.labelInValue, void 0) : n.labelInValue ? {
+				value: e[0],
+				label: i[0]
+			} : e[0], b.value = a, y("change", a, L.value ? i : i[0] ?? "", {
+				triggerValue: w(t),
+				triggerNode: t,
+				...r
+			});
+		}
+		function Je(e) {
+			if (e.disabled || e.selectable === !1) return;
+			let t = w(e);
+			if (n.treeCheckable) {
+				Ye(e);
+				return;
+			}
+			if (L.value) {
+				let r = H.value.slice(), i = r.indexOf(t);
+				if (i >= 0) r.splice(i, 1), y("deselect", t, e), Y(r, e, { selected: !1 });
+				else {
+					if (n.maxCount != null && r.length >= n.maxCount) return;
+					r.push(t), y("select", t, e), Y(r, e, { selected: !0 });
+				}
+			} else {
+				if (H.value[0] === t) {
+					q();
+					return;
+				}
+				y("select", t, e), Y([t], e, { selected: !0 }), q();
+			}
+		}
+		function Ye(e) {
+			if (e.disabled || e.disableCheckbox) return;
+			let t = w(e), r = new Set(H.value), i = r.has(t);
+			if (n.treeCheckStrictly) if (i) r.delete(t), y("deselect", t, e);
+			else {
+				if (n.maxCount != null && r.size >= n.maxCount) return;
+				r.add(t), y("select", t, e);
+			}
+			else {
+				if (i) {
+					r.delete(t);
+					function n(e) {
+						for (let t of e) {
+							r.delete(w(t));
+							let e = E(t);
+							e?.length && n(e);
+						}
+					}
+					let i = E(e);
+					i?.length && n(i), y("deselect", t, e);
+				} else {
+					if (n.maxCount != null && r.size >= n.maxCount) return;
+					r.add(t);
+					function i(e) {
+						for (let t of e) {
+							!t.disabled && !t.disableCheckbox && r.add(w(t));
+							let e = E(t);
+							e?.length && i(e);
+						}
+					}
+					let a = E(e);
+					a?.length && i(a), y("select", t, e);
+				}
+				function a(e) {
+					let t = !0, n = !1;
+					for (let i of e) {
+						let e = w(i), o = E(i);
+						if (o?.length) {
+							let i = a(o);
+							i.all ? (r.add(e), n = !0) : i.some ? (r.delete(e), t = !1, n = !0) : (r.delete(e), r.has(e) || (t = !1));
+						} else r.has(e) ? n = !0 : t = !1;
+					}
+					return {
+						all: t,
+						some: n
+					};
+				}
+				a(n.treeData);
+			}
+			y("treeCheck", [...r], {
+				checked: !i,
+				node: e
+			}), Y([...r], e, { checked: !i });
+		}
+		function Xe(e, t) {
+			t?.stopPropagation();
+			let r = z.value.get(e);
+			if (n.treeCheckable && r) {
+				Ye(r);
+				return;
+			}
+			let i = H.value.filter((t) => t !== e);
+			r && y("deselect", e, r), Y(i, r ?? { [S.value]: e }, { selected: !1 });
+		}
+		function Ze(e) {
+			e.stopPropagation();
+			let t = { [S.value]: "" };
+			L.value ? b.value = [] : b.value = void 0, j.value = "", y("clear"), y("change", b.value, L.value ? [] : "", {
+				triggerNode: t,
+				triggerValue: void 0
+			});
+		}
+		function Qe() {
+			n.disabled || (A.value ? q() : K());
+		}
+		function $e(e) {
+			let t = e.relatedTarget;
+			k.value?.contains(t) || D.value?.contains(t) || y("blur", e);
+		}
+		function et(e) {
+			y("focus", e);
+		}
+		function tt(e) {
+			let t = e.target;
+			j.value = t.value, y("search", t.value), A.value || K(), d(() => {
+				F.value = V.value[0]?.key ?? null;
+			});
+		}
+		function nt(e) {
+			y("popupScroll", e);
+		}
+		function X(e) {
+			F.value = e, d(() => {
+				let t = String(e).replace(/["\\]/g, "\\$&"), n = Ie.value?.querySelector(`[data-node-key="${t}"]`);
+				n?.focus(), n?.scrollIntoView?.({ block: "nearest" });
+			});
+		}
+		function rt(e) {
+			if (!n.disabled) switch (e.key) {
+				case "Enter":
+				case " ":
+					(!B.value || !A.value) && (e.preventDefault(), A.value ? q() : K());
+					break;
+				case "ArrowDown":
+					e.preventDefault(), A.value || K(), d(() => {
+						let e = V.value[0];
+						e && X(e.key);
+					});
+					break;
+				case "Escape":
+					A.value && (e.preventDefault(), q());
+					break;
+				case "Backspace":
+					if (L.value && !j.value && H.value.length > 0) {
+						let e = H.value[H.value.length - 1];
+						Xe(e);
+					}
+					break;
+				case "Tab":
+					A.value && q();
+					break;
+			}
+		}
+		function it(e) {
+			let t = V.value;
+			if (!t.length) return;
+			let n = t.findIndex((e) => e.key === F.value), r = t[n];
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), X((t[n + 1] ?? t[0]).key);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), X((t[n - 1] ?? t[t.length - 1]).key);
+					break;
+				case "ArrowRight":
+					if (e.preventDefault(), !r) break;
+					Z(r.data) && !P.value.has(r.key) && J(r.data);
+					break;
+				case "ArrowLeft":
+					if (e.preventDefault(), !r) break;
+					P.value.has(r.key) && J(r.data);
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), r && Je(r.data);
+					break;
+				case "Escape":
+					e.preventDefault(), q();
+					break;
+				case "Home":
+					e.preventDefault(), t[0] && X(t[0].key);
+					break;
+				case "End": {
+					e.preventDefault();
+					let n = t[t.length - 1];
+					n && X(n.key);
+					break;
+				}
+				case "Tab":
+					q();
+					break;
+			}
+		}
+		function Z(e) {
+			return !!E(e)?.length || !!n.loadData && !e.isLeaf;
+		}
+		function Q(e) {
+			return P.value.has(e);
+		}
+		function $(e) {
+			return I.value.has(e);
+		}
+		function at(e) {
+			return n.treeCheckable ? e.checkable !== !1 && !e.disabled && !e.disableCheckbox : e.selectable !== !1 && !e.disabled;
+		}
+		ee({
+			focus: () => D.value?.focus(),
+			blur: () => D.value?.blur()
+		});
+		let ot = o(() => !n.allowClear || n.disabled ? !1 : H.value.length > 0), st = o(() => `b-tree-select--${n.size}`), ct = o(() => `b-tree-select--${n.variant}`), lt = o(() => n.status ? `b-tree-select--${n.status}` : ""), ut = o(() => n.treeExpandAction);
+		function dt(e, t) {
+			ut.value === "click" && Z(e) && at(e) && J(e), Je(e);
+		}
+		function ft(e) {
+			ut.value === "doubleClick" && Z(e) && J(e);
+		}
+		return (t, o) => (p(), c("div", { class: f(["b-tree-select b:relative b:inline-flex b:w-full", [
+			st.value,
+			ct.value,
+			lt.value,
+			{
+				"b-tree-select--disabled": n.disabled,
+				"b-tree-select--multiple": L.value,
+				"b-tree-select--open": A.value
+			}
+		]]) }, [
+			l("div", ne({
+				ref_key: "selectorRef",
+				ref: D
+			}, _(Oe), {
+				class: ["b-tree-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none", [
+					{
+						"b:min-h-6 b:px-2 b:text-sm": n.size === _(e).Small,
+						"b:min-h-8 b:px-3 b:text-sm": n.size === _(e).Medium,
+						"b:min-h-10 b:px-3 b:text-base": n.size === _(e).Large
+					},
+					{
+						"b:rounded-lg b:border-1 b:border-[var(--b-tree-select-border-color)] b:bg-[var(--b-tree-select-bg)] b:hover:not-disabled:border-[var(--b-tree-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-tree-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-tree-select-active-outline-color)]": n.variant === _(i).Outlined,
+						"b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-tree-select-filled-bg)] b:focus:not-disabled:border-[var(--b-tree-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-tree-select-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-tree-select-active-outline-color)]": n.variant === _(i).Filled,
+						"b:rounded-lg b:border-1 b:border-transparent b:bg-transparent": n.variant === _(i).Borderless,
+						"b:rounded-none b:border-0 b:border-b-1 b:border-[var(--b-tree-select-border-color)] b:bg-transparent": n.variant === _(i).Underlined
+					},
+					{
+						"b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!": n.status === _(r).Error,
+						"b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!": n.status === _(r).Warning
+					},
+					{ "b:cursor-not-allowed b:opacity-40": n.disabled }
+				]],
+				tabindex: n.disabled ? -1 : 0,
+				role: "combobox",
+				"aria-expanded": A.value,
+				"aria-controls": A.value ? Fe.value : void 0,
+				"aria-haspopup": "tree",
+				"aria-label": n.placeholder ?? "Tree select",
+				"aria-disabled": n.disabled || void 0,
+				onClick: Qe,
+				onKeydown: rt,
+				onFocus: et,
+				onBlur: $e
+			}), [
+				L.value ? (p(), c(a, { key: 0 }, [
+					(p(!0), c(a, null, ie(He.value, (r) => (p(), c("span", {
+						key: String(r.value),
+						class: f(["b-tree-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-tree-select-tag-border-color)] b:bg-[var(--b-tree-select-tag-bg)] b:leading-none", [{
+							"b:h-4 b:px-1 b:text-xs": n.size === _(e).Small,
+							"b:h-6 b:px-1.5 b:text-xs": n.size === _(e).Medium,
+							"b:h-8 b:px-2 b:text-sm": n.size === _(e).Large
+						}]])
+					}, [h(t.$slots, "tagRender", {
+						value: r.value,
+						label: r.label,
+						closable: !n.disabled,
+						onClose: () => Xe(r.value)
+					}, () => [l("span", ue, g(r.label), 1), n.disabled ? s("", !0) : (p(), c("button", {
+						key: 0,
+						type: "button",
+						class: "b-tree-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600",
+						"aria-label": `Remove ${r.label}`,
+						tabindex: "-1",
+						onClick: v((e) => Xe(r.value), ["stop"]),
+						onMousedown: o[0] ||= v(() => {}, ["prevent"])
+					}, [...o[2] ||= [l("svg", {
+						"aria-hidden": "true",
+						width: "8",
+						height: "8",
+						viewBox: "0 0 8 8",
+						fill: "none"
+					}, [l("path", {
+						d: "M1 1l6 6M7 1L1 7",
+						stroke: "currentColor",
+						"stroke-width": "1.5",
+						"stroke-linecap": "round"
+					})], -1)]], 40, de))], !0)], 2))), 128)),
+					Ue.value.length > 0 ? (p(), c("span", {
+						key: 0,
+						class: f(["b-tree-select__tag b-tree-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-tree-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-tree-select-multiple-count-color)]", [{
+							"b:h-4": n.size === _(e).Small,
+							"b:h-6": n.size === _(e).Medium,
+							"b:h-8": n.size === _(e).Large
+						}]])
+					}, g(We.value), 3)) : s("", !0),
+					B.value ? (p(), c("input", {
+						key: 1,
+						ref_key: "searchInputRef",
+						ref: O,
+						class: "b-tree-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-tree-select-placeholder-color)]",
+						value: j.value,
+						placeholder: H.value.length === 0 ? n.placeholder : void 0,
+						disabled: n.disabled,
+						"aria-autocomplete": "list",
+						"aria-label": n.placeholder ?? "Search",
+						autocomplete: "off",
+						onInput: tt
+					}, null, 40, fe)) : H.value.length === 0 ? (p(), c("span", pe, g(n.placeholder), 1)) : s("", !0)
+				], 64)) : (p(), c(a, { key: 1 }, [G.value && !j.value ? (p(), c("span", me, g(G.value), 1)) : !G.value && !j.value ? (p(), c("span", he, g(n.placeholder), 1)) : s("", !0), B.value ? (p(), c("input", {
+					key: 2,
+					ref_key: "searchInputRef",
+					ref: O,
+					class: f(["b-tree-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-tree-select-placeholder-color)]", { "b:opacity-0": !A.value }]),
+					value: j.value,
+					disabled: n.disabled,
+					autocomplete: "off",
+					tabindex: "-1",
+					"aria-autocomplete": "list",
+					"aria-label": n.placeholder ?? "Search",
+					onInput: tt
+				}, null, 42, ge)) : s("", !0)], 64)),
+				ot.value ? (p(), c("button", {
+					key: 2,
+					type: "button",
+					class: "b-tree-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-tree-select-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600",
+					"aria-label": "Clear selection",
+					tabindex: "-1",
+					onClick: Ze,
+					onMousedown: o[1] ||= v(() => {}, ["prevent"])
+				}, [...o[3] ||= [l("svg", {
+					"aria-hidden": "true",
+					width: "8",
+					height: "8",
+					viewBox: "0 0 8 8",
+					fill: "none"
+				}, [l("path", {
+					d: "M1 1l6 6M7 1L1 7",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round"
+				})], -1)]], 32)) : s("", !0),
+				l("span", {
+					class: f(["b-tree-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200", { "b:rotate-180": A.value }]),
+					"aria-hidden": "true"
+				}, [h(t.$slots, "suffixIcon", {}, () => [o[4] ||= l("svg", {
+					width: "12",
+					height: "12",
+					viewBox: "0 0 12 12",
+					fill: "none"
+				}, [l("path", {
+					d: "M2.5 4.5L6 8L9.5 4.5",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				})], -1)], !0)], 2)
+			], 16, le),
+			l("div", {
+				id: Fe.value,
+				ref_key: "popoverRef",
+				ref: k,
+				class: f(["b-tree-select__dropdown", { "b-tree-select__dropdown--match-width": n.popupMatchSelectWidth === !0 }]),
+				style: re([typeof n.popupMatchSelectWidth == "number" ? { width: `${n.popupMatchSelectWidth}px` } : void 0, { maxHeight: `${n.listHeight}px` }]),
+				popover: "",
+				role: "dialog",
+				"aria-modal": "false",
+				"aria-label": n.placeholder ?? "Tree options",
+				onScroll: nt,
+				onKeydown: it
+			}, [l("div", {
+				ref_key: "treeRef",
+				ref: Ie,
+				class: f(["b-tree-select__tree", { "b-tree-select__tree--show-line": n.treeLine }]),
+				role: "tree",
+				"aria-multiselectable": L.value || void 0
+			}, [V.value.length > 0 ? (p(!0), c(a, { key: 0 }, ie(V.value, (e) => (p(), c("div", {
+				key: String(e.key),
+				"data-node-key": String(e.key),
+				class: f(["b-tree-select__node", {
+					"b-tree-select__node--selected": !n.treeCheckable && U.value.has(e.value),
+					"b-tree-select__node--disabled": e.data.disabled,
+					"b-tree-select__node--focused": F.value === e.key,
+					"b-tree-select__node--expanded": Q(e.key)
+				}]),
+				role: "treeitem",
+				"aria-expanded": Z(e.data) ? Q(e.key) : void 0,
+				"aria-selected": !n.treeCheckable && U.value.has(e.value),
+				"aria-checked": n.treeCheckable ? Ve.value.has(e.value) ? "mixed" : U.value.has(e.value) : void 0,
+				"aria-disabled": e.data.disabled || void 0,
+				"aria-level": e.depth + 1,
+				tabindex: F.value === e.key ? 0 : -1,
+				style: re({ "--b-tree-select-node-indent": `${e.depth * 24}px` }),
+				onClick: v((t) => dt(e.data, t), ["stop"]),
+				onDblclick: v((t) => ft(e.data), ["stop"])
+			}, [
+				o[8] ||= l("span", {
+					class: "b-tree-select__indent",
+					"aria-hidden": "true"
+				}, null, -1),
+				Z(e.data) ? (p(), c("span", {
+					key: 0,
+					class: f(["b-tree-select__switcher", {
+						"b-tree-select__switcher--expanded": Q(e.key),
+						"b-tree-select__switcher--loading": $(e.key)
+					}]),
+					"aria-hidden": "true",
+					onClick: v((t) => J(e.data), ["stop"])
+				}, [$(e.key) ? s("", !0) : h(t.$slots, "switcherIcon", {
+					key: 0,
+					node: e.data,
+					expanded: Q(e.key)
+				}, () => [o[5] ||= l("svg", {
+					class: "b-tree-select__switcher-icon",
+					viewBox: "0 0 8 8",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [l("path", { d: "M2 1.5L6 4L2 6.5z" })], -1)], !0), $(e.key) ? (p(), c("svg", xe, [...o[6] ||= [l("circle", {
+					cx: "12",
+					cy: "12",
+					r: "9",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-dasharray": "42",
+					"stroke-dashoffset": "14",
+					"stroke-linecap": "round"
+				}, null, -1)]])) : s("", !0)], 10, be)) : (p(), c("span", Se)),
+				n.treeCheckable && e.data.checkable !== !1 ? (p(), c("span", {
+					key: 2,
+					class: f(["b-tree-select__checkbox", {
+						"b-tree-select__checkbox--checked": U.value.has(e.value),
+						"b-tree-select__checkbox--indeterminate": Ve.value.has(e.value),
+						"b-tree-select__checkbox--disabled": e.data.disabled || e.data.disableCheckbox
+					}]),
+					role: "checkbox",
+					"aria-checked": Ve.value.has(e.value) ? "mixed" : U.value.has(e.value),
+					"aria-disabled": e.data.disabled || e.data.disableCheckbox || void 0,
+					tabindex: "-1",
+					onClick: v((t) => Ye(e.data), ["stop"])
+				}, [...o[7] ||= [l("span", {
+					class: "b-tree-select__checkbox-inner",
+					"aria-hidden": "true"
+				}, null, -1)]], 10, Ce)) : s("", !0),
+				n.treeIcon || t.$slots.treeIcon ? (p(), c("span", we, [h(t.$slots, "treeIcon", { node: e.data }, void 0, !0)])) : s("", !0),
+				l("span", Te, [h(t.$slots, "title", { node: e.data }, () => [u(g(C(e.data)), 1)], !0)])
+			], 46, ye))), 128)) : (p(), c("div", Ee, [h(t.$slots, "notFoundContent", {}, () => [u(g(n.notFoundContent), 1)], !0)]))], 10, ve)], 46, _e),
+			l("span", De, [L.value ? (p(), c(a, { key: 0 }, [u(g(H.value.length) + " selected", 1)], 64)) : G.value ? (p(), c(a, { key: 1 }, [u(g(G.value) + " selected", 1)], 64)) : s("", !0)])
+		], 2));
+	}
+});
+//#endregion
+export { Oe as default };
+
+//# sourceMappingURL=design-system256.js.map