@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/tabs-CezuYzIu.js

@@ -0,0 +1,874 @@
+import "./src-DNBBthjO.js";
+import { b as e, s as t, t as n } from "./foundation-Cawx37mp.js";
+import { t as r } from "./Tooltip-Bq7HZwnS.js";
+import { t as i } from "./config-context-CyynTtDb.js";
+import { t as a } from "./Button-RCaDTqHh.js";
+import { Comment as o, Fragment as s, Text as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, getCurrentInstance as _, guardReactiveProps as v, h as ee, inject as y, isVNode as b, markRaw as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeProps as te, normalizeStyle as T, onBeforeUnmount as ne, onBeforeUpdate as E, onMounted as re, openBlock as D, provide as O, renderList as k, renderSlot as A, shallowReactive as j, shallowRef as M, toDisplayString as ie, unref as N, useAttrs as P, useSlots as ae, useTemplateRef as F, watch as I, withCtx as L } from "vue";
+import { IconChevronDown as oe, IconChevronLeft as R, IconChevronRight as z, IconClose as B, IconTick as se } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var ce = class extends n {
+	constructor(n) {
+		super({ ...n }), this.destroy = e.default, this.handlePrevent = (e) => {
+			e.stopPropagation(), e.preventDefault();
+		}, this.handleKeyDown = (e, n, r) => {
+			let { preventScroll: i } = this.getProps(), a = [...e.target.parentNode.childNodes].filter((e) => (0, t.default)(e, "attributes.data-tabkey.value", "").includes("semiTab") && (0, t.default)(e, "attributes.aria-disabled.value", "") !== "true");
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowRight":
+				case "ArrowUp":
+				case "ArrowDown":
+					this.determineOrientation(e, a);
+					break;
+				case "Backspace":
+				case "Delete":
+					this.handleDeleteKeyDown(e, a, n, r);
+					break;
+				case "Enter":
+				case " ":
+					this.handleTabClick(n, e), this.handlePrevent(e);
+					break;
+				case "Home":
+					a[0].focus({ preventScroll: i }), this.handlePrevent(e);
+					break;
+				case "End": a[a.length - 1].focus({ preventScroll: i }), this.handlePrevent(e);
+			}
+		};
+	}
+	init() {
+		this._adapter.collectPane();
+	}
+	_notifyChange(e) {
+		let { activeKey: t } = this.getStates();
+		t !== e && this._adapter.notifyChange(e);
+	}
+	handleTabClick(e, t) {
+		this._isInProps("activeKey") ? this._notifyChange(e) : (this._notifyChange(e), this.handleNewActiveKey(e)), this._adapter.notifyTabClick(e, t);
+	}
+	handleNewActiveKey(e) {
+		let { activeKey: t } = this.getStates();
+		t !== e && this._adapter.setNewActiveKey(e);
+	}
+	getDefaultActiveKey() {
+		let e, t = this.getProps();
+		return e = "activeKey" in t ? t.activeKey : "defaultActiveKey" in t ? t.defaultActiveKey : this._adapter.getDefaultActiveKeyFromChildren(), e;
+	}
+	handleTabListChange() {
+		this._adapter.collectPane();
+	}
+	handleTabPanesChange() {
+		this._adapter.collectPane(), this._adapter.collectActiveKey();
+	}
+	handleTabDelete(e) {
+		this._adapter.notifyTabDelete(e);
+	}
+	determineOrientation(e, t) {
+		let { tabPosition: n } = this.getProps();
+		n === "left" ? (e.key === "ArrowUp" || e.key === "ArrowDown") && (this.switchTabOnArrowPress(e, t), this.handlePrevent(e)) : (e.key === "ArrowLeft" || e.key === "ArrowRight") && (this.switchTabOnArrowPress(e, t), this.handlePrevent(e));
+	}
+	handleDeleteKeyDown(e, t, n, r) {
+		let { preventScroll: i } = this.getProps();
+		if (r) {
+			this.handleTabDelete(n);
+			let r = t.indexOf(e.target);
+			t.length !== 1 && t[r + 1 >= t.length ? r - 1 : r + 1].focus({ preventScroll: i });
+		}
+	}
+	switchTabOnArrowPress(e, t) {
+		let { preventScroll: n } = this.getProps(), r = t.indexOf(e.target), i = {
+			ArrowLeft: -1,
+			ArrowUp: -1,
+			ArrowRight: 1,
+			ArrowDown: 1
+		};
+		i[e.key] && r !== void 0 && (t[r + i[e.key]] ? t[r + i[e.key]].focus({ preventScroll: n }) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? t[t.length - 1].focus({ preventScroll: n }) : (e.key === "ArrowRight" || e.key == "ArrowDown") && t[0].focus({ preventScroll: n }));
+	}
+}, V = g({
+	name: "TabsNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup(e) {
+		return () => e.content;
+	}
+}), H = [
+	"id",
+	"aria-controls",
+	"aria-disabled",
+	"aria-selected",
+	"data-tabkey",
+	"tabindex"
+], U = {
+	key: 0,
+	class: "semi-tabs-bar-icon"
+}, W = /* @__PURE__ */ g({
+	name: "TabItem",
+	inheritAttrs: !1,
+	__name: "TabItem",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "large" },
+		style: {},
+		tabPosition: { default: "top" },
+		type: { default: "line" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		itemKey: {},
+		tab: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		closable: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"click",
+		"keyDown",
+		"close"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = P(), a = ae(), o = l(() => a.tab?.() ?? n.tab), s = l(() => a.icon?.() ?? n.icon), c = l(() => [
+			"semi-tabs-tab",
+			`semi-tabs-tab-${n.type}`,
+			`semi-tabs-tab-${n.tabPosition}`,
+			"semi-tabs-tab-single",
+			n.selected ? "semi-tabs-tab-active" : void 0,
+			n.disabled ? "semi-tabs-tab-disabled" : void 0,
+			n.size === "small" ? "semi-tabs-tab-small" : void 0,
+			n.size === "medium" ? "semi-tabs-tab-medium" : void 0,
+			n.class,
+			n.className,
+			i.class
+		]), p = l(() => Object.fromEntries(Object.entries(i).filter(([e]) => e !== "class" && e !== "style")));
+		function m(e) {
+			n.disabled || r("click", n.itemKey, e);
+		}
+		function g(e) {
+			r("keyDown", e, n.itemKey, n.closable);
+		}
+		function _(e) {
+			e.stopPropagation(), r("close", n.itemKey, e);
+		}
+		return (t, n) => (D(), f("div", S(p.value, {
+			id: `semiTab${e.itemKey}`,
+			"aria-controls": `semiTabPanel${e.itemKey}`,
+			"aria-disabled": e.disabled ? "true" : "false",
+			"aria-selected": e.selected ? "true" : "false",
+			class: c.value,
+			"data-tabkey": `semiTab${e.itemKey}`,
+			role: "tab",
+			style: [e.style, N(i).style],
+			tabindex: e.selected ? 0 : -1,
+			onClick: m,
+			onKeydown: g
+		}), [
+			s.value ? (D(), f("span", U, [h(N(V), { content: s.value }, null, 8, ["content"])])) : d("", !0),
+			h(N(V), { content: o.value }, null, 8, ["content"]),
+			e.closable ? (D(), u(N(B), {
+				key: 1,
+				"aria-label": "Close",
+				class: "semi-tabs-tab-icon-close",
+				role: "button",
+				onClick: _
+			})) : d("", !0)
+		], 16, H));
+	}
+}), G = {
+	class: "semi-dropdown-content",
+	"x-semi-prop": "render"
+}, K = {
+	"aria-orientation": "vertical",
+	class: "semi-dropdown-menu",
+	role: "menu"
+}, q = ["aria-disabled", "onClick"], J = {
+	key: 0,
+	class: "semi-dropdown-item-icon"
+}, Y = /* @__PURE__ */ g({
+	__name: "TabsDropdown",
+	props: {
+		activeKey: {},
+		className: { default: "" },
+		items: {},
+		options: { default: () => ({}) }
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let n = e, i = t, a = M(!1), o = l(() => n.options.trigger ?? "hover"), c = l(() => n.options.position ?? "bottomLeft");
+		function m(e, t) {
+			e.disabled || (a.value = !1, i("select", e.itemKey, t));
+		}
+		return (t, n) => (D(), u(r, {
+			visible: a.value,
+			"onUpdate:visible": n[0] ||= (e) => a.value = e,
+			class: w(e.className),
+			"click-to-hide": "",
+			"click-trigger-to-hide": "",
+			"disable-focus-listener": "",
+			motion: !1,
+			position: c.value,
+			"prefix-cls": "semi-dropdown",
+			"show-arrow": !1,
+			spacing: 4,
+			trigger: o.value
+		}, {
+			content: L(() => [p("div", {
+				class: "semi-dropdown",
+				style: T(e.options.style)
+			}, [p("div", G, [p("ul", K, [(D(!0), f(s, null, k(e.items, (t) => (D(), f("li", {
+				key: t.itemKey,
+				"aria-disabled": t.disabled ? "true" : "false",
+				class: w([
+					"semi-dropdown-item",
+					"semi-dropdown-item-withTick",
+					t.itemKey === e.activeKey ? "semi-dropdown-item-active" : void 0,
+					t.disabled ? "semi-dropdown-item-disabled" : void 0
+				]),
+				role: "menuitem",
+				tabindex: "-1",
+				onClick: (e) => m(t, e)
+			}, [
+				h(N(se), { style: T(t.itemKey === e.activeKey ? void 0 : { color: "transparent" }) }, null, 8, ["style"]),
+				t.icon ? (D(), f("div", J, [h(N(V), { content: t.icon }, null, 8, ["content"])])) : d("", !0),
+				h(N(V), { content: t.tab }, null, 8, ["content"])
+			], 10, q))), 128))])])], 4)]),
+			default: L(() => [A(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"visible",
+			"class",
+			"position",
+			"trigger"
+		]));
+	}
+}), X = ["aria-orientation", "data-uuid"], le = {
+	key: 0,
+	class: "semi-overflow-list semi-tabs-bar-overflow-list"
+}, ue = {
+	key: 0,
+	class: "semi-tabs-bar-arrow semi-tabs-bar-arrow-start",
+	role: "presentation"
+}, Z = {
+	key: 1,
+	class: "semi-tabs-bar-arrow semi-tabs-bar-arrow-end",
+	role: "presentation"
+}, de = { class: "semi-tabs-bar-more-trigger-content" }, fe = /* @__PURE__ */ g({
+	name: "TabsTabBar",
+	inheritAttrs: !1,
+	__name: "TabBar",
+	props: {
+		activeKey: {},
+		arrowPosition: {},
+		className: {},
+		collapsible: { type: [Boolean, String] },
+		dropdownProps: {},
+		list: {},
+		more: {},
+		showRestInDropdown: { type: Boolean },
+		size: {},
+		style: {},
+		tabBarExtraContent: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		tabPosition: {},
+		type: {},
+		visibleTabsStyle: {}
+	},
+	emits: [
+		"close",
+		"keyDown",
+		"select",
+		"visibleChange"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = ae(), o = F("bar"), c = F("scroller"), m = M(""), g = M(n.collapsible === !0), _ = j(/* @__PURE__ */ new Map()), v, y, b = l(() => n.collapsible === !0 || n.collapsible === "auto" && g.value), x = l(() => typeof n.more == "number" ? Math.min(Math.max(n.more, 0), n.list.length) : n.more && typeof n.more == "object" ? Math.min(Math.max(n.more.count, 0), n.list.length) : 0), te = l(() => x.value ? n.list.slice(0, n.list.length - x.value) : n.list), E = l(() => x.value ? n.list.slice(n.list.length - x.value) : []), O = l(() => n.list.filter((e) => _.get(e.itemKey) === !1).filter((e) => {
+			let t = n.list.findIndex((e) => e.itemKey === n.activeKey);
+			return n.list.indexOf(e) < Math.max(t, 1);
+		})), P = l(() => n.list.filter((e) => _.get(e.itemKey) === !1 && !O.value.includes(e))), B = l(() => i.tabBarExtraContent?.() ?? n.tabBarExtraContent), se = l(() => [
+			"semi-tabs-bar",
+			`semi-tabs-bar-${n.type}`,
+			`semi-tabs-bar-${n.tabPosition}`,
+			b.value ? "semi-tabs-bar-collapse" : void 0,
+			n.className
+		]), ce = l(() => [
+			"semi-tabs-bar-extra",
+			`semi-tabs-bar-${n.type}-extra`,
+			`semi-tabs-bar-${n.type}-extra-${n.size}`
+		]);
+		function H() {
+			return new Map(n.list.map((e) => [e.itemKey, !0]));
+		}
+		function U() {
+			let e = c.value;
+			if (!b.value || !e) {
+				let e = H();
+				_.clear(), e.forEach((e, t) => _.set(t, e)), r("visibleChange", e);
+				return;
+			}
+			let t = e.getBoundingClientRect(), n = document.documentElement.clientHeight;
+			if (t.bottom <= 0 || t.top >= n) {
+				let e = H();
+				_.clear(), e.forEach((e, t) => _.set(t, e)), r("visibleChange", e);
+				return;
+			}
+			let i = /* @__PURE__ */ new Map();
+			e.querySelectorAll(".semi-tabs-tab[data-item-key]").forEach((e) => {
+				let n = e.getBoundingClientRect();
+				i.set(e.dataset.itemKey ?? "", n.left >= t.left - .5 && n.right <= t.right + .5);
+			}), _.clear(), i.forEach((e, t) => _.set(t, e)), r("visibleChange", i);
+		}
+		function G() {
+			let e = o.value;
+			if (e) {
+				if (n.collapsible === "auto") {
+					let t = Array.from(e.querySelectorAll(".semi-tabs-tab")), n = t[0]?.offsetTop, r = typeof n == "number" && t.some((e) => e.offsetTop !== n);
+					g.value = r || e.scrollWidth > e.clientWidth + 1;
+				}
+				C(U);
+			}
+		}
+		function K(e) {
+			let t = c.value;
+			if (!t) return;
+			let n = Math.max(t.clientWidth * .6, 80);
+			t.scrollBy({
+				left: e === "start" ? -n : n,
+				behavior: "smooth"
+			}), requestAnimationFrame(U);
+		}
+		function q() {
+			c.value?.querySelector(`[data-item-key="${CSS.escape(n.activeKey)}"]`)?.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest",
+				inline: "nearest"
+			}), requestAnimationFrame(U);
+		}
+		function J(e, t) {
+			r("select", e, t);
+		}
+		function fe(e, t) {
+			r("close", e, t);
+		}
+		function Q(e, t, n) {
+			r("keyDown", e, t, n);
+		}
+		function $(e) {
+			return ee(e === "start" ? R : z);
+		}
+		return re(() => {
+			m.value = globalThis.crypto?.randomUUID?.() ?? `tabs-${Math.random().toString(36).slice(2)}`, typeof ResizeObserver < "u" && o.value && (v = new ResizeObserver(G), v.observe(o.value)), typeof IntersectionObserver < "u" && c.value && (y = new IntersectionObserver(U, { threshold: [0, .75] }), y.observe(c.value)), c.value?.addEventListener("scroll", U, { passive: !0 }), G(), requestAnimationFrame(G);
+		}), ne(() => {
+			v?.disconnect(), y?.disconnect(), c.value?.removeEventListener("scroll", U);
+		}), I(() => n.list, () => C(G), { deep: !0 }), I(() => n.activeKey, () => b.value && C(q)), I(() => n.collapsible, () => C(G)), (t, n) => (D(), f("div", {
+			ref_key: "bar",
+			ref: o,
+			"aria-orientation": e.tabPosition === "left" ? "vertical" : "horizontal",
+			class: w(se.value),
+			"data-uuid": m.value,
+			role: "tablist",
+			style: T(e.style)
+		}, [b.value ? (D(), f("div", le, [
+			e.arrowPosition === "both" || e.arrowPosition === "start" ? (D(), f("div", ue, [t.$slots.arrow ? A(t.$slots, "arrow", {
+				click: () => K("start"),
+				defaultNode: $("start"),
+				items: O.value,
+				position: "start"
+			}, void 0, void 0, 0) : e.showRestInDropdown ? (D(), u(Y, {
+				key: 1,
+				"active-key": e.activeKey,
+				"class-name": "semi-tabs-bar-dropdown",
+				items: O.value,
+				options: e.dropdownProps?.start,
+				onSelect: J
+			}, {
+				default: L(() => [h(a, {
+					disabled: O.value.length === 0,
+					theme: "borderless",
+					onClick: n[0] ||= (e) => K("start")
+				}, {
+					icon: L(() => [h(N(R))]),
+					_: 1
+				}, 8, ["disabled"])]),
+				_: 1
+			}, 8, [
+				"active-key",
+				"items",
+				"options"
+			])) : (D(), u(a, {
+				key: 2,
+				disabled: O.value.length === 0,
+				theme: "borderless",
+				onClick: n[1] ||= (e) => K("start")
+			}, {
+				icon: L(() => [h(N(R))]),
+				_: 1
+			}, 8, ["disabled"]))])) : d("", !0),
+			p("div", {
+				ref_key: "scroller",
+				ref: c,
+				class: "semi-overflow-list-scroll-wrapper",
+				style: T(e.visibleTabsStyle)
+			}, [(D(!0), f(s, null, k(e.list, (t) => (D(), u(W, S({ key: `${t.itemKey}-bar` }, { ref_for: !0 }, t, {
+				"data-item-key": t.itemKey,
+				"data-scrollkey": `${t.itemKey}-bar`,
+				selected: t.itemKey === e.activeKey,
+				size: e.size,
+				"tab-position": e.tabPosition,
+				type: e.type,
+				onClick: J,
+				onClose: fe,
+				onKeyDown: Q
+			}), null, 16, [
+				"data-item-key",
+				"data-scrollkey",
+				"selected",
+				"size",
+				"tab-position",
+				"type"
+			]))), 128))], 4),
+			e.arrowPosition === "both" || e.arrowPosition === "end" ? (D(), f("div", Z, [t.$slots.arrow ? A(t.$slots, "arrow", {
+				click: () => K("end"),
+				defaultNode: $("end"),
+				items: P.value,
+				position: "end"
+			}, void 0, void 0, 0) : e.showRestInDropdown ? (D(), u(Y, {
+				key: 1,
+				"active-key": e.activeKey,
+				"class-name": "semi-tabs-bar-dropdown",
+				items: P.value,
+				options: e.dropdownProps?.end,
+				onSelect: J
+			}, {
+				default: L(() => [h(a, {
+					disabled: P.value.length === 0,
+					theme: "borderless",
+					onClick: n[2] ||= (e) => K("end")
+				}, {
+					icon: L(() => [h(N(z))]),
+					_: 1
+				}, 8, ["disabled"])]),
+				_: 1
+			}, 8, [
+				"active-key",
+				"items",
+				"options"
+			])) : (D(), u(a, {
+				key: 2,
+				disabled: P.value.length === 0,
+				theme: "borderless",
+				onClick: n[3] ||= (e) => K("end")
+			}, {
+				icon: L(() => [h(N(z))]),
+				_: 1
+			}, 8, ["disabled"]))])) : d("", !0)
+		])) : (D(), f(s, { key: 1 }, [(D(!0), f(s, null, k(te.value, (t) => (D(), u(W, S({ key: `${t.itemKey}-bar` }, { ref_for: !0 }, t, {
+			selected: t.itemKey === e.activeKey,
+			size: e.size,
+			"tab-position": e.tabPosition,
+			type: e.type,
+			onClick: J,
+			onClose: fe,
+			onKeyDown: Q
+		}), null, 16, [
+			"selected",
+			"size",
+			"tab-position",
+			"type"
+		]))), 128)), E.value.length ? (D(), u(Y, {
+			key: 0,
+			"active-key": e.activeKey,
+			"class-name": `semi-tabs-bar-more-dropdown-${e.type}`,
+			items: E.value,
+			options: typeof e.more == "object" ? e.more.dropdownProps : void 0,
+			onSelect: J
+		}, {
+			default: L(() => [t.$slots.more ? A(t.$slots, "more", { hiddenTabs: E.value }, void 0, void 0, 0) : typeof e.more == "object" && e.more.render ? (D(), u(N(V), {
+				key: 1,
+				content: e.more.render()
+			}, null, 8, ["content"])) : (D(), f("div", {
+				key: 2,
+				class: w(["semi-tabs-bar-more-trigger", `semi-tabs-bar-more-trigger-${e.type}`])
+			}, [p("div", de, [p("div", null, ie(t.$attrs["data-more-label"] ?? "更多"), 1), h(N(oe), { class: "semi-tabs-bar-more-trigger-content-icon" })])], 2))]),
+			_: 3
+		}, 8, [
+			"active-key",
+			"class-name",
+			"items",
+			"options"
+		])) : d("", !0)], 64)), B.value ? (D(), f("div", {
+			key: 2,
+			class: w(ce.value),
+			style: { float: "right" },
+			"x-semi-prop": "tabBarExtraContent"
+		}, [h(N(V), { content: B.value }, null, 8, ["content"])], 2)) : d("", !0)], 14, X));
+	}
+}), Q = Symbol("tabs-context"), $ = [
+	"id",
+	"aria-hidden",
+	"aria-labelledby",
+	"tabindex"
+], pe = /* @__PURE__ */ g({
+	name: "TabPane",
+	inheritAttrs: !1,
+	__name: "TabPane",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		style: {},
+		tabIndex: { default: 0 },
+		disabled: { type: Boolean },
+		icon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		itemKey: {},
+		tab: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		closable: { type: Boolean }
+	},
+	setup(e) {
+		let t = e, n = P(), r = y(Q, void 0), i = l(() => !0), a = l(() => r?.activeKey.value === t.itemKey || i.value && !r), o = M(a.value), s = M(""), c, m = l(() => [
+			"semi-tabs-pane",
+			a.value ? "semi-tabs-pane-active" : "semi-tabs-pane-inactive",
+			t.class,
+			t.className,
+			n.class
+		]), h = l(() => !r?.lazyRender.value || o.value), g = l(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "class" && e !== "style" && e.startsWith("data-"))));
+		function _() {
+			if (!r) return "";
+			let e = r.panes.value.findIndex((e) => e.itemKey === r.activeKey.value), n = r.panes.value.findIndex((e) => e.itemKey === t.itemKey), i = r.panes.value.findIndex((e) => e.itemKey === r.prevActiveKey.value), a = e === n ? i > e : n < e;
+			return r.tabPosition.value === "left" ? a ? "semi-tabs-pane-animate-bottomShow" : "semi-tabs-pane-animate-topShow" : a ? "semi-tabs-pane-animate-rightShow" : "semi-tabs-pane-animate-leftShow";
+		}
+		return I(a, (e, t) => {
+			e && (o.value = !0), e && t === !1 && r?.tabPaneMotion.value && !r.forceDisableMotion.value && typeof window < "u" && (s.value = _(), c && clearTimeout(c), c = setTimeout(() => {
+				s.value = "";
+			}, 200));
+		}, { immediate: !0 }), ne(() => {
+			c && clearTimeout(c);
+		}), (t, r) => (D(), f("div", S(g.value, {
+			id: `semiTabPanel${e.itemKey}`,
+			"aria-hidden": a.value ? "false" : "true",
+			"aria-labelledby": `semiTab${e.itemKey}`,
+			class: m.value,
+			role: "tabpanel",
+			style: [e.style, N(n).style],
+			tabindex: e.tabIndex || 0,
+			"x-semi-prop": "children"
+		}), [p("div", {
+			class: w(["semi-tabs-pane-motion-overlay", s.value]),
+			"x-semi-prop": "children"
+		}, [h.value ? (D(), u(N(V), {
+			key: 0,
+			content: t.$slots.default?.()
+		}, null, 8, ["content"])) : d("", !0)], 2)], 16, $));
+	}
+}), me = /* @__PURE__ */ g({
+	name: "Tabs",
+	inheritAttrs: !1,
+	__name: "Tabs",
+	props: {
+		activeKey: {},
+		modelValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		collapsible: {
+			type: [Boolean, String],
+			default: !1
+		},
+		contentStyle: {},
+		defaultActiveKey: {},
+		keepDOM: {
+			type: Boolean,
+			default: !0
+		},
+		lazyRender: {
+			type: Boolean,
+			default: !1
+		},
+		showRestInDropdown: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "large" },
+		style: {},
+		tabBarClassName: {},
+		tabBarExtraContent: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		tabBarStyle: {},
+		tabList: {},
+		tabPaneMotion: {
+			type: Boolean,
+			default: !0
+		},
+		tabPosition: { default: "top" },
+		type: { default: "line" },
+		preventScroll: {
+			type: Boolean,
+			default: !1
+		},
+		more: {},
+		visibleTabsStyle: {},
+		arrowPosition: { default: "both" },
+		dropdownProps: {}
+	},
+	emits: [
+		"change",
+		"tabClick",
+		"tabClose",
+		"visibleTabsChange",
+		"update:activeKey",
+		"update:modelValue"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = P(), d = ae(), h = _(), g = y(i, void 0), ee = l(() => g ? g.value : {
+			direction: "ltr",
+			locale: { code: "zh-CN" }
+		});
+		function C(e) {
+			let t = h?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+			return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+		}
+		function re(e) {
+			let t = [], n = (e) => {
+				if (Array.isArray(e)) {
+					e.forEach(n);
+					return;
+				}
+				if (!(!b(e) || e.type === o)) {
+					if (e.type === s && Array.isArray(e.children)) {
+						e.children.forEach((e) => n(e));
+						return;
+					}
+					(e.type !== c || String(e.children ?? "").trim() !== "") && t.push(e);
+				}
+			};
+			return e.forEach(n), t;
+		}
+		function M() {
+			return re(d.default?.() ?? []);
+		}
+		function ie(e) {
+			if (e.type === pe) return !0;
+			if (typeof e.type != "object" && typeof e.type != "function") return !1;
+			let t = e.type;
+			return t.name === "TabPane" || t.__name === "TabPane";
+		}
+		function F(e, t) {
+			if (!e.children || typeof e.children != "object" || Array.isArray(e.children)) return;
+			let n = e.children[t];
+			return typeof n == "function" ? n() : void 0;
+		}
+		let oe = j({ value: 0 }), R = l(() => (oe.value, M()));
+		E(() => {
+			oe.value += 1;
+		});
+		let z = l(() => Array.isArray(n.tabList) && n.tabList.length ? n.tabList : R.value.filter(ie).map((e) => ({
+			closable: e.props?.closable === "" || e.props?.closable === !0,
+			disabled: e.props?.disabled === "" || e.props?.disabled === !0,
+			icon: F(e, "icon") ?? e.props?.icon,
+			itemKey: String(e.props?.itemKey ?? e.props?.["item-key"] ?? ""),
+			tab: F(e, "tab") ?? e.props?.tab
+		}))), B = l(() => C("modelValue")), se = l(() => C("activeKey")), H = l(() => B.value || se.value), U = l(() => B.value ? n.modelValue : n.activeKey), W = () => z.value.find((e) => !e.disabled)?.itemKey ?? "", G = j({
+			activeKey: U.value ?? n.defaultActiveKey ?? "",
+			forceDisableMotion: !1,
+			panes: [],
+			prevActiveKey: null
+		}), K = /* @__PURE__ */ new Map();
+		function q() {
+			let e = {};
+			return Object.assign(e, n), H.value ? e.activeKey = U.value ?? "" : delete e.activeKey, e;
+		}
+		let J = x(new ce({
+			getContext: () => void 0,
+			getContexts: () => void 0,
+			getProp: (e) => q()[e],
+			getProps: q,
+			getState: (e) => e === "activeKey" ? Y.value : G[e],
+			getStates: () => ({
+				...G,
+				activeKey: Y.value,
+				panes: z.value
+			}),
+			setState: (e, t) => {
+				Object.assign(G, e), t?.();
+			},
+			getCache: (e) => K.get(e),
+			getCaches: () => K,
+			setCache: (e, t) => K.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			collectPane: () => {
+				G.panes = z.value;
+			},
+			collectActiveKey: () => {
+				H.value || G.panes.some((e) => e.itemKey === G.activeKey) || (G.activeKey = W());
+			},
+			notifyTabClick: (e, t) => r("tabClick", e, t),
+			notifyChange: (e) => {
+				r("change", e), r("update:activeKey", e), r("update:modelValue", e);
+			},
+			setNewActiveKey: (e) => {
+				G.prevActiveKey = G.activeKey, G.activeKey = e;
+			},
+			getDefaultActiveKeyFromChildren: W,
+			notifyTabDelete: (e) => r("tabClose", e)
+		}));
+		ne(() => J.destroy()), I(U, (e) => {
+			!H.value || e === void 0 || e === G.activeKey || (G.prevActiveKey = G.activeKey, G.activeKey = e);
+		});
+		let Y = l(() => H.value ? U.value ?? "" : z.value.some((e) => e.itemKey === G.activeKey) ? G.activeKey : W()), X = l(() => z.value), le = l(() => n.lazyRender), ue = l(() => n.tabPaneMotion && n.keepDOM), Z = l(() => n.tabPosition), de = l(() => G.prevActiveKey), $ = l(() => G.forceDisableMotion);
+		O(Q, {
+			activeKey: Y,
+			forceDisableMotion: $,
+			lazyRender: le,
+			panes: X,
+			prevActiveKey: de,
+			tabPaneMotion: ue,
+			tabPosition: Z
+		});
+		let me = l(() => n.tabList?.length || n.keepDOM ? R.value : R.value.filter((e) => !ie(e) || String(e.props?.itemKey ?? e.props?.["item-key"] ?? "") === Y.value)), he = l(() => [
+			"semi-tabs",
+			`semi-tabs-${n.tabPosition}`,
+			n.class,
+			n.className,
+			a.class
+		]), ge = l(() => Object.fromEntries(Object.entries(a).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-")))), _e = l(() => ee.value.locale.Tabs?.more ?? (ee.value.locale.code === "en-US" ? "More" : "更多"));
+		function ve(e, t) {
+			J.handleTabClick(e, t);
+		}
+		function ye(e, t) {
+			t.stopPropagation(), J.handleTabDelete(e);
+		}
+		function be(e, t, n) {
+			J.handleKeyDown(e, t, n);
+		}
+		return (t, n) => (D(), f("div", S(ge.value, {
+			class: he.value,
+			style: [e.style, N(a).style]
+		}), [t.$slots.tabBar ? A(t.$slots, "tabBar", {
+			activeKey: Y.value,
+			list: X.value,
+			onTabClick: ve
+		}, void 0, void 0, 0) : (D(), u(fe, {
+			key: 1,
+			"active-key": Y.value,
+			"arrow-position": e.arrowPosition,
+			"class-name": e.tabBarClassName,
+			collapsible: e.collapsible,
+			"data-more-label": _e.value,
+			"dropdown-props": e.dropdownProps,
+			list: X.value,
+			more: e.more,
+			"show-rest-in-dropdown": e.showRestInDropdown,
+			size: e.size,
+			style: T(e.tabBarStyle),
+			"tab-bar-extra-content": e.tabBarExtraContent,
+			"tab-position": Z.value,
+			type: e.type,
+			"visible-tabs-style": e.visibleTabsStyle,
+			onClose: ye,
+			onKeyDown: be,
+			onSelect: ve,
+			onVisibleChange: n[0] ||= (e) => r("visibleTabsChange", e)
+		}, m({ _: 2 }, [
+			t.$slots.tabBarExtraContent ? {
+				name: "tabBarExtraContent",
+				fn: L(() => [A(t.$slots, "tabBarExtraContent")]),
+				key: "0"
+			} : void 0,
+			t.$slots.more ? {
+				name: "more",
+				fn: L((e) => [A(t.$slots, "more", te(v(e)))]),
+				key: "1"
+			} : void 0,
+			t.$slots.arrow ? {
+				name: "arrow",
+				fn: L((e) => [A(t.$slots, "arrow", te(v(e)))]),
+				key: "2"
+			} : void 0
+		]), 1032, [
+			"active-key",
+			"arrow-position",
+			"class-name",
+			"collapsible",
+			"data-more-label",
+			"dropdown-props",
+			"list",
+			"more",
+			"show-rest-in-dropdown",
+			"size",
+			"style",
+			"tab-bar-extra-content",
+			"tab-position",
+			"type",
+			"visible-tabs-style"
+		])), p("div", {
+			class: w(["semi-tabs-content", `semi-tabs-content-${Z.value}`]),
+			style: T(e.contentStyle)
+		}, [(D(!0), f(s, null, k(me.value, (e, t) => (D(), u(N(V), {
+			key: e.key ?? t,
+			content: e
+		}, null, 8, ["content"]))), 128))], 6)], 16));
+	}
+}), he = me;
+//#endregion
+export { W as i, me as n, pe as r, he as t };