@v-c/tabs 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/TabContext.cjs

@@ -0,0 +1,11 @@
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+var TabContextKey = Symbol("TabContext");
+function provideTabContext(value) {
+	(0, vue.provide)(TabContextKey, value);
+}
+function useTabContext() {
+	return (0, vue.inject)(TabContextKey, {});
+}
+exports.provideTabContext = provideTabContext;
+exports.useTabContext = useTabContext;

package/dist/TabContext.d.ts

@@ -0,0 +1,8 @@
+import { ShallowRef } from 'vue';
+import { Tab } from './interface';
+export interface TabContextProps {
+    tabs: Tab[];
+    prefixCls: string;
+}
+export declare function provideTabContext(value: ShallowRef<TabContextProps>): void;
+export declare function useTabContext(): ShallowRef<TabContextProps> | null;

package/dist/TabContext.js

@@ -0,0 +1,9 @@
+import { inject, provide } from "vue";
+var TabContextKey = Symbol("TabContext");
+function provideTabContext(value) {
+	provide(TabContextKey, value);
+}
+function useTabContext() {
+	return inject(TabContextKey, {});
+}
+export { provideTabContext, useTabContext };

package/dist/TabNavList/AddButton.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_AddButton_vue_vue_type_script_setup_true_lang = require("./AddButton.vue_vue_type_script_setup_true_lang.cjs");
+var AddButton_default = require_AddButton_vue_vue_type_script_setup_true_lang.default;
+exports.default = AddButton_default;

package/dist/TabNavList/AddButton.js

@@ -0,0 +1,3 @@
+import AddButton_vue_vue_type_script_setup_true_lang_default from "./AddButton.vue_vue_type_script_setup_true_lang.js";
+var AddButton_default = AddButton_vue_vue_type_script_setup_true_lang_default;
+export { AddButton_default as default };

package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+var _hoisted_1 = ["aria-label"];
+var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "AddButton",
+	inheritAttrs: false,
+	__name: "AddButton",
+	props: {
+		prefixCls: {},
+		editable: {},
+		locale: {},
+		style: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const { prefixCls, editable, locale, style } = (0, vue.toRefs)(__props);
+		const buttonRef = (0, vue.ref)();
+		function handleClick(event) {
+			editable.value?.onEdit("add", { event });
+		}
+		__expose({ buttonRef });
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(editable) && (0, vue.unref)(editable).showAdd !== false ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+				key: 0,
+				ref_key: "buttonRef",
+				ref: buttonRef,
+				type: "button",
+				class: (0, vue.normalizeClass)(`${(0, vue.unref)(prefixCls)}-nav-add`),
+				style: (0, vue.normalizeStyle)((0, vue.unref)(style)),
+				"aria-label": (0, vue.unref)(locale)?.addAriaLabel || "Add tab",
+				onClick: handleClick
+			}, [(0, vue.createVNode)((0, vue.unref)(__v_c_util.RenderComponent), { render: (0, vue.unref)(editable).addIcon || "+" }, null, 8, ["render"])], 14, _hoisted_1)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+exports.default = AddButton_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/AddButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, toRefs, unref } from "vue";
+import { RenderComponent } from "@v-c/util";
+var _hoisted_1 = ["aria-label"];
+var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AddButton",
+	inheritAttrs: false,
+	__name: "AddButton",
+	props: {
+		prefixCls: {},
+		editable: {},
+		locale: {},
+		style: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const { prefixCls, editable, locale, style } = toRefs(__props);
+		const buttonRef = ref();
+		function handleClick(event) {
+			editable.value?.onEdit("add", { event });
+		}
+		__expose({ buttonRef });
+		return (_ctx, _cache) => {
+			return unref(editable) && unref(editable).showAdd !== false ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				ref_key: "buttonRef",
+				ref: buttonRef,
+				type: "button",
+				class: normalizeClass(`${unref(prefixCls)}-nav-add`),
+				style: normalizeStyle(unref(style)),
+				"aria-label": unref(locale)?.addAriaLabel || "Add tab",
+				onClick: handleClick
+			}, [createVNode(unref(RenderComponent), { render: unref(editable).addIcon || "+" }, null, 8, ["render"])], 14, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+export { AddButton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/ExtraContent.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_ExtraContent_vue_vue_type_script_setup_true_lang = require("./ExtraContent.vue_vue_type_script_setup_true_lang.cjs");
+var ExtraContent_default = require_ExtraContent_vue_vue_type_script_setup_true_lang.default;
+exports.default = ExtraContent_default;

package/dist/TabNavList/ExtraContent.js

@@ -0,0 +1,3 @@
+import ExtraContent_vue_vue_type_script_setup_true_lang_default from "./ExtraContent.vue_vue_type_script_setup_true_lang.js";
+var ExtraContent_default = ExtraContent_vue_vue_type_script_setup_true_lang_default;
+export { ExtraContent_default as default };

package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,51 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
+__v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(__v_c_util_dist_RenderComponent);
+let __v_c_util_dist_vnode = require("@v-c/util/dist/vnode");
+var ExtraContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ExtraContent",
+	props: {
+		position: {},
+		prefixCls: {},
+		extra: { type: [
+			Object,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		] }
+	},
+	setup(__props, { expose: __expose }) {
+		const { position, prefixCls, extra } = (0, vue.toRefs)(__props);
+		const extraContentRef = (0, vue.ref)();
+		const isValidExtra = (0, vue.computed)(() => {
+			if (typeof extra.value === "object" && (0, vue.isVNode)(extra.value) && (0, __v_c_util_dist_vnode.ensureValidVNode)(Array.isArray(extra.value) ? extra.value : [extra.value])) return true;
+			if ([
+				"string",
+				"number",
+				"boolean",
+				"object"
+			].includes(typeof extra.value)) return true;
+			return false;
+		});
+		const childrenNodes = (0, vue.computed)(() => {
+			if (!extra.value) return null;
+			let assertExtra = {};
+			if (typeof extra.value === "object" && !(0, vue.isVNode)(extra.value)) assertExtra = extra.value;
+			else assertExtra.right = extra.value;
+			return position.value === "right" ? assertExtra.right : assertExtra.left;
+		});
+		__expose({ extraContentRef });
+		return (_ctx, _cache) => {
+			return isValidExtra.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				ref_key: "extraContentRef",
+				ref: extraContentRef,
+				class: (0, vue.normalizeClass)([`${(0, vue.unref)(prefixCls)}-extra-content`])
+			}, [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: childrenNodes.value }, null, 8, ["render"])], 2)) : (0, vue.createCommentVNode)("", true);
+		};
+	}
+});
+exports.default = ExtraContent_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/ExtraContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, isVNode, normalizeClass, openBlock, ref, toRefs, unref } from "vue";
+import RenderComponent from "@v-c/util/dist/RenderComponent";
+import { ensureValidVNode } from "@v-c/util/dist/vnode";
+var ExtraContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ExtraContent",
+	props: {
+		position: {},
+		prefixCls: {},
+		extra: { type: [
+			Object,
+			String,
+			Number,
+			null,
+			Boolean,
+			Array
+		] }
+	},
+	setup(__props, { expose: __expose }) {
+		const { position, prefixCls, extra } = toRefs(__props);
+		const extraContentRef = ref();
+		const isValidExtra = computed(() => {
+			if (typeof extra.value === "object" && isVNode(extra.value) && ensureValidVNode(Array.isArray(extra.value) ? extra.value : [extra.value])) return true;
+			if ([
+				"string",
+				"number",
+				"boolean",
+				"object"
+			].includes(typeof extra.value)) return true;
+			return false;
+		});
+		const childrenNodes = computed(() => {
+			if (!extra.value) return null;
+			let assertExtra = {};
+			if (typeof extra.value === "object" && !isVNode(extra.value)) assertExtra = extra.value;
+			else assertExtra.right = extra.value;
+			return position.value === "right" ? assertExtra.right : assertExtra.left;
+		});
+		__expose({ extraContentRef });
+		return (_ctx, _cache) => {
+			return isValidExtra.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "extraContentRef",
+				ref: extraContentRef,
+				class: normalizeClass([`${unref(prefixCls)}-extra-content`])
+			}, [createVNode(unref(RenderComponent), { render: childrenNodes.value }, null, 8, ["render"])], 2)) : createCommentVNode("", true);
+		};
+	}
+});
+export { ExtraContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/TabNavList/OperationNode.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_OperationNode_vue_vue_type_script_setup_true_lang = require("./OperationNode.vue_vue_type_script_setup_true_lang.cjs");
+var OperationNode_default = require_OperationNode_vue_vue_type_script_setup_true_lang.default;
+exports.default = OperationNode_default;

package/dist/TabNavList/OperationNode.js

@@ -0,0 +1,3 @@
+import OperationNode_vue_vue_type_script_setup_true_lang_default from "./OperationNode.vue_vue_type_script_setup_true_lang.js";
+var OperationNode_default = OperationNode_vue_vue_type_script_setup_true_lang_default;
+export { OperationNode_default as default };

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,210 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_utils = require("../utils.cjs");
+const require_AddButton = require("./AddButton.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_RenderComponent = require("@v-c/util/dist/RenderComponent");
+__v_c_util_dist_RenderComponent = require_rolldown_runtime.__toESM(__v_c_util_dist_RenderComponent);
+let __v_c_dropdown = require("@v-c/dropdown");
+__v_c_dropdown = require_rolldown_runtime.__toESM(__v_c_dropdown);
+let __v_c_menu = require("@v-c/menu");
+__v_c_menu = require_rolldown_runtime.__toESM(__v_c_menu);
+let __v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+__v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(__v_c_util_dist_KeyCode);
+var _hoisted_1 = [
+	"id",
+	"aria-controls",
+	"aria-expanded"
+];
+var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "OperationNode",
+	props: {
+		prefixCls: {},
+		className: {},
+		style: {},
+		id: {},
+		tabs: {},
+		rtl: { type: Boolean },
+		tabBarGutter: {},
+		activeKey: {},
+		mobile: { type: Boolean },
+		more: { default: () => ({}) },
+		editable: {},
+		locale: {},
+		removeAriaLabel: {},
+		onTabClick: {},
+		tabMoving: { type: Boolean },
+		getPopupContainer: {},
+		popupClassName: {},
+		popupStyle: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const MenuItem = __v_c_menu.default.Item;
+		const { more: moreProps, tabBarGutter, getPopupContainer, popupStyle, popupClassName, rtl, removeAriaLabel, onTabClick, locale, mobile, id, prefixCls, editable, style, className } = (0, vue.toRefs)(props);
+		const open = (0, vue.ref)(false);
+		const selectedKey = (0, vue.ref)(null);
+		const operationNodeRef = (0, vue.useTemplateRef)("operationNodeRef");
+		const popupId = (0, vue.computed)(() => `${id.value}-more-popup`);
+		const dropdownPrefix = (0, vue.computed)(() => `${prefixCls.value}-dropdown`);
+		const selectedItemId = (0, vue.computed)(() => selectedKey.value !== null ? `${popupId.value}-${selectedKey.value}` : null);
+		const dropdownAriaLabel = (0, vue.computed)(() => locale.value?.dropdownAriaLabel);
+		function onRemoveTab(event, key) {
+			event.preventDefault();
+			event.stopPropagation();
+			editable.value && editable.value.onEdit("remove", {
+				key,
+				event
+			});
+		}
+		const menuNode = (0, vue.computed)(() => {
+			return (0, vue.h)(__v_c_menu.default, {
+				"prefixCls": `${dropdownPrefix.value}-menu`,
+				"id": popupId.value,
+				"tabIndex": -1,
+				"role": "listbox",
+				"aria-activedescendant": selectedItemId.value,
+				"selectedKeys": selectedKey.value ? [selectedKey.value] : void 0,
+				"aria-label": dropdownAriaLabel.value !== void 0 ? dropdownAriaLabel.value : "expanded dropdown",
+				"onClick": ({ key, domEvent }) => {
+					onTabClick.value?.(key, domEvent);
+					open.value = false;
+				}
+			}, { default: () => props.tabs.map((tab) => {
+				const { closable, closeIcon, disabled, key, label } = tab;
+				const removable = require_utils.getRemovable(closable, closeIcon, editable.value, disabled);
+				return (0, vue.h)(MenuItem, {
+					"key": key,
+					"id": `${popupId.value}-${key}`,
+					"role": "option",
+					"aria-controls": id.value && `${id.value}-panel-${key}`,
+					"disabled": disabled
+				}, { default: () => [(0, vue.h)("span", {}, [label]), removable ? (0, vue.h)("button", {
+					"type": "button",
+					"aria-label": removeAriaLabel.value || "remove",
+					"tabindex": 0,
+					"class": `${dropdownPrefix.value}-menu-item-remove`,
+					"onClick": (e) => {
+						e.stopPropagation();
+						onRemoveTab(e, key);
+					}
+				}, [closeIcon || editable.value?.removeIcon || "×"]) : null] });
+			}) });
+		});
+		const overlayClassName = (0, vue.computed)(() => {
+			return (0, __v_c_util.clsx)({
+				[popupClassName.value]: popupClassName.value,
+				[`${dropdownPrefix.value}-rtl`]: rtl.value
+			});
+		});
+		const moreIconNode = (0, vue.computed)(() => moreProps.value?.icon || "More");
+		const moreStyle = (0, vue.computed)(() => {
+			const style$1 = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
+			if (!props.tabs.length) {
+				style$1.visibility = "hidden";
+				style$1.order = 1;
+			}
+			return style$1;
+		});
+		function selectOffset(offset) {
+			const enabledTabs = props.tabs.filter((tab) => !tab.disabled);
+			let selectedIndex = enabledTabs.findIndex((tab) => tab.key === selectedKey.value) || 0;
+			const len = enabledTabs.length;
+			for (let i = 0; i < len; i += 1) {
+				selectedIndex = (selectedIndex + offset + len) % len;
+				const tab = enabledTabs[selectedIndex];
+				if (!tab.disabled) {
+					selectedKey.value = tab.key;
+					return;
+				}
+			}
+		}
+		function onKeyDown(e) {
+			const { which } = e;
+			if (!open.value) {
+				if ([
+					__v_c_util_dist_KeyCode.default.DOWN,
+					__v_c_util_dist_KeyCode.default.SPACE,
+					__v_c_util_dist_KeyCode.default.ENTER
+				].includes(which)) {
+					open.value = true;
+					e.preventDefault();
+				}
+				return;
+			}
+			switch (which) {
+				case __v_c_util_dist_KeyCode.default.UP:
+					selectOffset(-1);
+					e.preventDefault();
+					break;
+				case __v_c_util_dist_KeyCode.default.DOWN:
+					selectOffset(1);
+					e.preventDefault();
+					break;
+				case __v_c_util_dist_KeyCode.default.ESC:
+					open.value = false;
+					break;
+				case __v_c_util_dist_KeyCode.default.SPACE:
+				case __v_c_util_dist_KeyCode.default.ENTER:
+					if (selectedKey.value !== null) onTabClick.value?.(selectedKey.value, e);
+					break;
+			}
+		}
+		(0, vue.watch)(() => open.value, (visible) => {
+			if (!visible) selectedKey.value = null;
+		});
+		(0, vue.watch)([() => selectedItemId.value, () => selectedKey.value], () => {
+			if (selectedItemId.value) {
+				const ele = document.getElementById(selectedItemId.value);
+				if (ele?.scrollIntoView) ele.scrollIntoView(false);
+			}
+		});
+		__expose({ operationNodeRef });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "operationNodeRef",
+				ref: operationNodeRef,
+				class: (0, vue.normalizeClass)([`${(0, vue.unref)(prefixCls)}-nav-operations`, (0, vue.unref)(className)]),
+				style: (0, vue.normalizeStyle)((0, vue.unref)(style))
+			}, [!(0, vue.unref)(mobile) ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(__v_c_dropdown.default), (0, vue.mergeProps)({
+				key: 0,
+				"prefix-cls": dropdownPrefix.value,
+				overlay: menuNode.value,
+				visible: __props.tabs.length ? open.value : false,
+				"overlay-class-name": overlayClassName.value,
+				"overlay-style": (0, vue.unref)(popupStyle),
+				"mouse-enter-delay": .1,
+				"mouse-leave-delay": .1,
+				"get-popup-container": (0, vue.unref)(getPopupContainer)
+			}, (0, vue.unref)(moreProps), { onVisibleChange: _cache[0] || (_cache[0] = ($event) => open.value = $event) }), {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("button", {
+					id: `${(0, vue.unref)(id)}-more`,
+					type: "button",
+					class: (0, vue.normalizeClass)(`${(0, vue.unref)(prefixCls)}-nav-more`),
+					style: (0, vue.normalizeStyle)(moreStyle.value),
+					"aria-haspopup": "listbox",
+					"aria-controls": popupId.value,
+					"aria-expanded": open.value,
+					onKeydown: onKeyDown
+				}, [(0, vue.createVNode)((0, vue.unref)(__v_c_util_dist_RenderComponent.default), { render: moreIconNode.value }, null, 8, ["render"])], 46, _hoisted_1)]),
+				_: 1
+			}, 16, [
+				"prefix-cls",
+				"overlay",
+				"visible",
+				"overlay-class-name",
+				"overlay-style",
+				"get-popup-container"
+			])) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)(require_AddButton.default, {
+				"prefix-cls": (0, vue.unref)(prefixCls),
+				locale: (0, vue.unref)(locale),
+				editable: (0, vue.unref)(editable)
+			}, null, 8, [
+				"prefix-cls",
+				"locale",
+				"editable"
+			])], 6);
+		};
+	}
+});
+exports.default = OperationNode_vue_vue_type_script_setup_true_lang_default;

package/dist/TabNavList/OperationNode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,205 @@
+import { getRemovable } from "../utils.js";
+import AddButton_default from "./AddButton.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, toRefs, unref, useTemplateRef, watch, withCtx } from "vue";
+import { clsx } from "@v-c/util";
+import RenderComponent$1 from "@v-c/util/dist/RenderComponent";
+import DropDown from "@v-c/dropdown";
+import Menu from "@v-c/menu";
+import KeyCode from "@v-c/util/dist/KeyCode";
+var _hoisted_1 = [
+	"id",
+	"aria-controls",
+	"aria-expanded"
+];
+var OperationNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "OperationNode",
+	props: {
+		prefixCls: {},
+		className: {},
+		style: {},
+		id: {},
+		tabs: {},
+		rtl: { type: Boolean },
+		tabBarGutter: {},
+		activeKey: {},
+		mobile: { type: Boolean },
+		more: { default: () => ({}) },
+		editable: {},
+		locale: {},
+		removeAriaLabel: {},
+		onTabClick: {},
+		tabMoving: { type: Boolean },
+		getPopupContainer: {},
+		popupClassName: {},
+		popupStyle: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const MenuItem = Menu.Item;
+		const { more: moreProps, tabBarGutter, getPopupContainer, popupStyle, popupClassName, rtl, removeAriaLabel, onTabClick, locale, mobile, id, prefixCls, editable, style, className } = toRefs(props);
+		const open = ref(false);
+		const selectedKey = ref(null);
+		const operationNodeRef = useTemplateRef("operationNodeRef");
+		const popupId = computed(() => `${id.value}-more-popup`);
+		const dropdownPrefix = computed(() => `${prefixCls.value}-dropdown`);
+		const selectedItemId = computed(() => selectedKey.value !== null ? `${popupId.value}-${selectedKey.value}` : null);
+		const dropdownAriaLabel = computed(() => locale.value?.dropdownAriaLabel);
+		function onRemoveTab(event, key) {
+			event.preventDefault();
+			event.stopPropagation();
+			editable.value && editable.value.onEdit("remove", {
+				key,
+				event
+			});
+		}
+		const menuNode = computed(() => {
+			return h(Menu, {
+				"prefixCls": `${dropdownPrefix.value}-menu`,
+				"id": popupId.value,
+				"tabIndex": -1,
+				"role": "listbox",
+				"aria-activedescendant": selectedItemId.value,
+				"selectedKeys": selectedKey.value ? [selectedKey.value] : void 0,
+				"aria-label": dropdownAriaLabel.value !== void 0 ? dropdownAriaLabel.value : "expanded dropdown",
+				"onClick": ({ key, domEvent }) => {
+					onTabClick.value?.(key, domEvent);
+					open.value = false;
+				}
+			}, { default: () => props.tabs.map((tab) => {
+				const { closable, closeIcon, disabled, key, label } = tab;
+				const removable = getRemovable(closable, closeIcon, editable.value, disabled);
+				return h(MenuItem, {
+					"key": key,
+					"id": `${popupId.value}-${key}`,
+					"role": "option",
+					"aria-controls": id.value && `${id.value}-panel-${key}`,
+					"disabled": disabled
+				}, { default: () => [h("span", {}, [label]), removable ? h("button", {
+					"type": "button",
+					"aria-label": removeAriaLabel.value || "remove",
+					"tabindex": 0,
+					"class": `${dropdownPrefix.value}-menu-item-remove`,
+					"onClick": (e) => {
+						e.stopPropagation();
+						onRemoveTab(e, key);
+					}
+				}, [closeIcon || editable.value?.removeIcon || "×"]) : null] });
+			}) });
+		});
+		const overlayClassName = computed(() => {
+			return clsx({
+				[popupClassName.value]: popupClassName.value,
+				[`${dropdownPrefix.value}-rtl`]: rtl.value
+			});
+		});
+		const moreIconNode = computed(() => moreProps.value?.icon || "More");
+		const moreStyle = computed(() => {
+			const style$1 = { marginInlineStart: tabBarGutter.value ? `${tabBarGutter.value}px` : "0px" };
+			if (!props.tabs.length) {
+				style$1.visibility = "hidden";
+				style$1.order = 1;
+			}
+			return style$1;
+		});
+		function selectOffset(offset) {
+			const enabledTabs = props.tabs.filter((tab) => !tab.disabled);
+			let selectedIndex = enabledTabs.findIndex((tab) => tab.key === selectedKey.value) || 0;
+			const len = enabledTabs.length;
+			for (let i = 0; i < len; i += 1) {
+				selectedIndex = (selectedIndex + offset + len) % len;
+				const tab = enabledTabs[selectedIndex];
+				if (!tab.disabled) {
+					selectedKey.value = tab.key;
+					return;
+				}
+			}
+		}
+		function onKeyDown(e) {
+			const { which } = e;
+			if (!open.value) {
+				if ([
+					KeyCode.DOWN,
+					KeyCode.SPACE,
+					KeyCode.ENTER
+				].includes(which)) {
+					open.value = true;
+					e.preventDefault();
+				}
+				return;
+			}
+			switch (which) {
+				case KeyCode.UP:
+					selectOffset(-1);
+					e.preventDefault();
+					break;
+				case KeyCode.DOWN:
+					selectOffset(1);
+					e.preventDefault();
+					break;
+				case KeyCode.ESC:
+					open.value = false;
+					break;
+				case KeyCode.SPACE:
+				case KeyCode.ENTER:
+					if (selectedKey.value !== null) onTabClick.value?.(selectedKey.value, e);
+					break;
+			}
+		}
+		watch(() => open.value, (visible) => {
+			if (!visible) selectedKey.value = null;
+		});
+		watch([() => selectedItemId.value, () => selectedKey.value], () => {
+			if (selectedItemId.value) {
+				const ele = document.getElementById(selectedItemId.value);
+				if (ele?.scrollIntoView) ele.scrollIntoView(false);
+			}
+		});
+		__expose({ operationNodeRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "operationNodeRef",
+				ref: operationNodeRef,
+				class: normalizeClass([`${unref(prefixCls)}-nav-operations`, unref(className)]),
+				style: normalizeStyle(unref(style))
+			}, [!unref(mobile) ? (openBlock(), createBlock(unref(DropDown), mergeProps({
+				key: 0,
+				"prefix-cls": dropdownPrefix.value,
+				overlay: menuNode.value,
+				visible: __props.tabs.length ? open.value : false,
+				"overlay-class-name": overlayClassName.value,
+				"overlay-style": unref(popupStyle),
+				"mouse-enter-delay": .1,
+				"mouse-leave-delay": .1,
+				"get-popup-container": unref(getPopupContainer)
+			}, unref(moreProps), { onVisibleChange: _cache[0] || (_cache[0] = ($event) => open.value = $event) }), {
+				default: withCtx(() => [createElementVNode("button", {
+					id: `${unref(id)}-more`,
+					type: "button",
+					class: normalizeClass(`${unref(prefixCls)}-nav-more`),
+					style: normalizeStyle(moreStyle.value),
+					"aria-haspopup": "listbox",
+					"aria-controls": popupId.value,
+					"aria-expanded": open.value,
+					onKeydown: onKeyDown
+				}, [createVNode(unref(RenderComponent$1), { render: moreIconNode.value }, null, 8, ["render"])], 46, _hoisted_1)]),
+				_: 1
+			}, 16, [
+				"prefix-cls",
+				"overlay",
+				"visible",
+				"overlay-class-name",
+				"overlay-style",
+				"get-popup-container"
+			])) : createCommentVNode("", true), createVNode(AddButton_default, {
+				"prefix-cls": unref(prefixCls),
+				locale: unref(locale),
+				editable: unref(editable)
+			}, null, 8, [
+				"prefix-cls",
+				"locale",
+				"editable"
+			])], 6);
+		};
+	}
+});
+export { OperationNode_vue_vue_type_script_setup_true_lang_default as default };