ele-admin-plus 1.2.1-beta.3 → 1.2.1-beta.5

package/lib/ele-tabs/index.cjs

@@ -2,19 +2,30 @@
 const vue = require("vue");
 const SortableJs = require("sortablejs");
 const elementPlus = require("element-plus");
+const icons = require("../icons");
 const core = require("../utils/core");
 const hook = require("../utils/hook");
-const TabTitle = require("./components/tab-title");
+const EleDropdown = require("../ele-dropdown/index");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleTabs",
-  components: { ElTabs: elementPlus.ElTabs, ElTabPane: elementPlus.ElTabPane, TabTitle },
+  components: {
+    ElTabs: elementPlus.ElTabs,
+    ElTabPane: elementPlus.ElTabPane,
+    ElIcon: elementPlus.ElIcon,
+    EleDropdown,
+    CornerLeftFilled: icons.CornerLeftFilled,
+    CornerRightFilled: icons.CornerRightFilled
+  },
   props: props.tabsProps,
   emits: props.tabsEmits,
   setup(props$1, { emit }) {
-    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = hook.useTimer(320);
     let sortableIns = null;
+    let currentSortItemId = null;
+    let contextMenuTabItem = null;
+    let contextMenuTabName = null;
     const wrapProps = vue.inject(props.TAB_WRAP_KEY, null);
+    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = hook.useTimer(320);
     const { bindMousewheel, unbindMousewheel } = hook.useMousewheel((param) => {
       const { e, direction } = param;
       scrollTabs(direction === "up" ? "prev" : "next", () => {
@@ -31,9 +42,9 @@ const _sfc_main = vue.defineComponent({
         }
       }
     });
+    const [startGhostTimer] = hook.useTimer(100);
     const tabRef = vue.ref(null);
-    const itemRefs = vue.ref([]);
-    const isWrap = vue.computed(() => wrapProps == null);
+    const isOnlyTab = vue.computed(() => wrapProps == null);
     const tabSize = vue.computed(
       () => wrapProps == null ? props$1.size : wrapProps.size
     );
@@ -43,15 +54,21 @@ const _sfc_main = vue.defineComponent({
     const tabProps = vue.computed(() => {
       return core.pick(props$1, props.tabPropKeys);
     });
-    const getContextMenus = (item) => {
-      if (typeof props$1.contextMenus === "function") {
-        return props$1.contextMenus(item);
-      }
-      return props$1.contextMenus;
-    };
+    const ctxMenuDropdownRef = vue.ref(null);
+    const ctxMenuDropdownItems = vue.shallowRef([]);
+    const ctxMenuDropdownVirtualRef = vue.ref();
     const updateModelValue = (name) => {
       emit("update:modelValue", name);
     };
+    const handleContextmenu = (e) => {
+      if (!props$1.contextMenu) {
+        return;
+      }
+      const el = e.target;
+      if (el && (el.classList.contains("is-icon-close") || el.classList.contains("el-tabs__nav") || el.classList.contains("el-tabs__item"))) {
+        e.preventDefault();
+      }
+    };
     const handleTabClick = (pane, e) => {
       emit("tabClick", pane, e);
     };
@@ -67,41 +84,75 @@ const _sfc_main = vue.defineComponent({
     const handleEdit = (name, action) => {
       emit("edit", name, action);
     };
-    const handleItemClick = (option) => {
-      emit("tabItemClick", option);
+    const handleItemClick = (item, tabName, e) => {
+      if (props$1.handleClick) {
+        e.stopPropagation();
+      }
+      emit("tabItemClick", {
+        item,
+        name: item ? item.name : tabName,
+        active: props$1.modelValue
+      });
     };
-    const handleItemContextMenu = (option) => {
-      emit("tabContextMenu", option);
+    const handleItemCtxMenuVisible = (visible) => {
+      if (visible) {
+        emit(
+          "tabContextOpen",
+          ctxMenuDropdownRef.value,
+          contextMenuTabItem,
+          contextMenuTabName
+        );
+      }
     };
-    const handleItemContextOpen = (ref2) => {
-      if (itemRefs.value) {
-        itemRefs.value.forEach((r) => {
-          if (r && r.dropdownRef && r.dropdownRef !== ref2) {
-            r.dropdownRef.handleClose();
-          }
+    const handleItemCtxMenuClick = (command) => {
+      if (contextMenuTabItem != null || contextMenuTabName != null) {
+        emit("tabContextMenu", {
+          command,
+          item: contextMenuTabItem,
+          name: contextMenuTabItem ? contextMenuTabItem.name : contextMenuTabName,
+          active: props$1.modelValue
         });
       }
-      emit("tabContextOpen", ref2);
     };
-    const handleContextmenu = (e) => {
-      const el = e.target;
-      if (el && el.classList.contains("is-icon-close")) {
-        e.preventDefault();
+    const getContextMenus = (item, tabName) => {
+      if (typeof props$1.contextMenus === "function") {
+        return props$1.contextMenus(item, tabName);
       }
+      return props$1.contextMenus;
     };
     const hideAllDropdown = () => {
-      if (itemRefs.value) {
-        itemRefs.value.forEach((r) => {
-          if (r && r.dropdownRef) {
-            r.dropdownRef.handleClose();
-          }
-        });
+      if (ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleClose();
+      }
+    };
+    const showItemContextMenu = (item, tabName, itemEl) => {
+      if (contextMenuTabItem != null && contextMenuTabItem === item || contextMenuTabName != null && contextMenuTabName === tabName) {
+        return;
+      }
+      hideAllDropdown();
+      vue.nextTick(() => {
+        contextMenuTabItem = item;
+        contextMenuTabName = tabName;
+        ctxMenuDropdownItems.value = getContextMenus(item, tabName) || [];
+        ctxMenuDropdownVirtualRef.value = itemEl;
+        if (props$1.contextMenu && ctxMenuDropdownItems.value.length) {
+          vue.nextTick(() => {
+            ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+          });
+        }
+      });
+    };
+    const handleItemContextmenu = (item, tabName, e) => {
+      const itemEl = e.currentTarget;
+      if (!props$1.contextMenu || ctxMenuDropdownVirtualRef.value === itemEl) {
+        return;
       }
+      e.preventDefault();
+      showItemContextMenu(item, tabName, itemEl);
     };
     const getHeaderEl = () => {
       const tabEl = tabRef.value ? tabRef.value.$el : void 0;
-      const el = tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
-      return el;
+      return tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
     };
     const getNavEl = () => {
       const headerEl = getHeaderEl();
@@ -127,26 +178,34 @@ const _sfc_main = vue.defineComponent({
         }
       }
     };
-    const checkScrollActive = () => {
-      const active = props$1.modelValue;
-      if (props$1.items && active != null) {
-        const index2 = props$1.items.findIndex((item) => item.name === active);
-        if (index2 === 0) {
-          scrollTabs("prev");
-        } else if (index2 === props$1.items.length - 1) {
-          scrollTabs("next");
+    const checkSortGhostTab = () => {
+      const navEl = getNavEl();
+      if (navEl == null) {
+        return;
+      }
+      if (currentSortItemId == null) {
+        const el2 = navEl.querySelector(".el-tabs__item.sortable-ghost");
+        if (el2 != null) {
+          el2.classList.remove("sortable-ghost");
         }
+        return;
+      }
+      const el = navEl.querySelector(
+        `.el-tabs__item[id="${currentSortItemId}"]`
+      );
+      if (el != null) {
+        el.classList.add("sortable-ghost");
       }
     };
     const bindDragSort = () => {
       unbindDragSort();
-      const el = getNavEl();
-      if (!props$1.sortable || !el) {
+      const navEl = getNavEl();
+      if (!props$1.sortable || !navEl) {
         return;
       }
-      sortableIns = new SortableJs(el, {
-        animation: 300,
+      sortableIns = new SortableJs(navEl, {
         draggable: ".el-tabs__item",
+        delay: 20,
         onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
           if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
             const data = [...props$1.items];
@@ -158,6 +217,29 @@ const _sfc_main = vue.defineComponent({
             emit("tabSortChange", data);
           }
         },
+        onStart: (e) => {
+          currentSortItemId = e.item.getAttribute("id");
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
+        onEnd: () => {
+          currentSortItemId = null;
+          checkSortGhostTab();
+        },
+        onChange: () => {
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
+        onMove: () => {
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
         setData: () => {
         }
       });
@@ -165,6 +247,7 @@ const _sfc_main = vue.defineComponent({
     const unbindDragSort = () => {
       sortableIns && sortableIns.destroy();
       sortableIns = null;
+      currentSortItemId = null;
     };
     const initMousewheelEvent = () => {
       const el = getHeaderEl();
@@ -184,15 +267,26 @@ const _sfc_main = vue.defineComponent({
         }
       }
     };
-    vue.onMounted(() => {
-      vue.nextTick(() => {
-        checkScrollActive();
+    if (wrapProps && wrapProps.setTabMethods) {
+      wrapProps.setTabMethods({
+        triggerTabItemClick: handleItemClick,
+        triggerItemContextMenu: handleItemContextmenu
       });
+    }
+    vue.onMounted(() => {
       initMousewheelEvent();
       initTouchEvent();
       bindDragSort();
     });
     vue.onBeforeUnmount(() => {
+      if (wrapProps && wrapProps.setTabMethods) {
+        wrapProps.setTabMethods({
+          triggerTabItemClick: void 0,
+          triggerItemContextMenu: void 0
+        });
+      }
+      contextMenuTabItem = null;
+      contextMenuTabName = null;
       const el = getHeaderEl();
       if (el != null) {
         unbindMousewheel(el);
@@ -213,35 +307,30 @@ const _sfc_main = vue.defineComponent({
         initMousewheelEvent();
       }
     );
-    vue.watch(
-      () => props$1.modelValue,
-      () => {
-        vue.nextTick(() => {
-          checkScrollActive();
-        });
-      }
-    );
     return {
       omit: core.omit,
       tabRef,
-      itemRefs,
-      isWrap,
+      isOnlyTab,
       tabSize,
       tabType,
       tabProps,
-      getContextMenus,
+      ctxMenuDropdownRef,
+      ctxMenuDropdownItems,
+      ctxMenuDropdownVirtualRef,
       updateModelValue,
+      handleContextmenu,
       handleTabClick,
       handleTabChange,
       handleTabRemove,
       handleTabAdd,
       handleEdit,
       handleItemClick,
-      handleItemContextMenu,
-      handleItemContextOpen,
-      handleContextmenu,
+      handleItemCtxMenuVisible,
+      handleItemCtxMenuClick,
+      handleItemContextmenu,
       hideAllDropdown,
-      updateActiveBar
+      updateActiveBar,
+      scrollTabs
     };
   }
 });
@@ -252,16 +341,20 @@ const _export_sfc = (sfc, props2) => {
   }
   return target;
 };
+const _hoisted_1 = ["onClick", "onContextmenu"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_TabTitle = vue.resolveComponent("TabTitle");
+  const _component_CornerLeftFilled = vue.resolveComponent("CornerLeftFilled");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_CornerRightFilled = vue.resolveComponent("CornerRightFilled");
   const _component_ElTabPane = vue.resolveComponent("ElTabPane");
+  const _component_EleDropdown = vue.resolveComponent("EleDropdown");
   const _component_ElTabs = vue.resolveComponent("ElTabs");
   return vue.openBlock(), vue.createBlock(_component_ElTabs, vue.mergeProps(_ctx.tabProps, {
     ref: "tabRef",
     type: _ctx.tabType === "card" || _ctx.tabType === "border-card" ? _ctx.tabType : void 0,
     class: [
       "ele-tabs",
-      { "ele-tabs-wrap": _ctx.isWrap },
+      { "ele-tabs-wrap": _ctx.isOnlyTab },
       { "is-small": _ctx.tabSize === "small" },
       { "is-large": _ctx.tabSize === "large" },
       { "is-default": !_ctx.tabType || _ctx.tabType === "default" },
@@ -271,6 +364,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-button": _ctx.tabType === "button" },
       { "is-tag": _ctx.tabType === "tag" },
       { "is-center": _ctx.center },
+      { "is-sortable": _ctx.sortable },
       { "is-flex-table": _ctx.flexTable }
     ],
     "onUpdate:modelValue": _ctx.updateModelValue,
@@ -283,54 +377,86 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }), vue.createSlots({
     default: vue.withCtx(() => [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          (item.vIf == null ? true : item.vIf) ? (vue.openBlock(), vue.createBlock(_component_ElTabPane, vue.mergeProps({
-            key: index2 + "-" + item.name + "-" + item.label,
-            ref_for: true
-          }, _ctx.omit(item, ["slot", "meta", "vIf"])), vue.createSlots({
-            label: vue.withCtx(() => [
-              vue.createVNode(_component_TabTitle, {
-                ref_for: true,
-                ref: "itemRefs",
+        return vue.openBlock(), vue.createBlock(_component_ElTabPane, vue.mergeProps({
+          key: [
+            index2,
+            item.name,
+            item.label,
+            !!item.closable,
+            !!item.disabled,
+            !!item.lazy
+          ].join("-"),
+          ref_for: true
+        }, _ctx.omit(item, ["slot", "meta"])), vue.createSlots({
+          label: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "ele-tab-title",
+              onClick: (e) => _ctx.handleItemClick(item, void 0, e),
+              onContextmenu: (e) => _ctx.handleItemContextmenu(item, void 0, e)
+            }, [
+              vue.renderSlot(_ctx.$slots, "label", {
                 item,
                 label: item.label,
-                tabName: item.name,
-                active: _ctx.modelValue,
-                handleClick: _ctx.handleClick,
-                contextMenu: _ctx.contextMenu,
-                contextMenus: _ctx.getContextMenus(item),
-                onContextMenu: _ctx.handleItemContextMenu,
-                onContextOpen: _ctx.handleItemContextOpen,
-                onItemClick: _ctx.handleItemClick
-              }, vue.createSlots({ _: 2 }, [
-                _ctx.$slots.label ? {
-                  name: "label",
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, "label", vue.mergeProps({ ref_for: true }, slotProps || {}))
-                  ]),
-                  key: "0"
-                } : void 0,
-                _ctx.$slots.contextMenu ? {
-                  name: "contextMenu",
-                  fn: vue.withCtx((slotProps) => [
-                    vue.renderSlot(_ctx.$slots, "contextMenu", vue.mergeProps({ ref_for: true }, slotProps || {}))
-                  ]),
-                  key: "1"
-                } : void 0
-              ]), 1032, ["item", "label", "tabName", "active", "handleClick", "contextMenu", "contextMenus", "onContextMenu", "onContextOpen", "onItemClick"])
-            ]),
-            _: 2
-          }, [
-            item.name && _ctx.$slots[item.slot || item.name] ? {
-              name: "default",
-              fn: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, item.slot || item.name, { item })
+                active: _ctx.modelValue
+              }, () => [
+                vue.createTextVNode(vue.toDisplayString(item.label), 1)
+              ])
+            ], 40, _hoisted_1),
+            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 0,
+              class: "ele-tab-corner-left"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_CornerLeftFilled)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 1,
+              class: "ele-tab-corner-right"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_CornerRightFilled)
               ]),
-              key: "0"
-            } : void 0
-          ]), 1040)) : vue.createCommentVNode("", true)
-        ], 64);
-      }), 256))
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          item.name && _ctx.$slots[item.slot || item.name] ? {
+            name: "default",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, item.slot || item.name, { item })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040);
+      }), 128)),
+      _ctx.contextMenu ? (vue.openBlock(), vue.createBlock(_component_EleDropdown, vue.mergeProps(
+        {
+          key: 0,
+          triggerKeys: [],
+          persistent: false,
+          placement: "bottom-start",
+          popperClass: "ele-tab-popup",
+          popperOptions: {
+            modifiers: [{ name: "offset", options: { offset: [0, 8] } }]
+          }
+        },
+        !_ctx.contextMenu || typeof _ctx.contextMenu == "boolean" ? {} : _ctx.contextMenu,
+        {
+          ref: "ctxMenuDropdownRef",
+          componentType: "pro",
+          preventContextmenu: true,
+          trigger: "contextmenu",
+          virtualTriggering: true,
+          virtualRef: _ctx.ctxMenuDropdownVirtualRef,
+          disabled: !_ctx.ctxMenuDropdownItems.length,
+          items: _ctx.ctxMenuDropdownItems,
+          onCommand: _ctx.handleItemCtxMenuClick,
+          onVisibleChange: _ctx.handleItemCtxMenuVisible
+        }
+      ), null, 16, ["virtualRef", "disabled", "items", "onCommand", "onVisibleChange"])) : vue.createCommentVNode("", true)
     ]),
     _: 2
   }, [
@@ -340,8 +466,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.renderSlot(_ctx.$slots, "add-icon")
       ]),
       key: "0"
-    } : void 0,
-    _ctx.$slots.addIcon ? {
+    } : _ctx.$slots.addIcon ? {
       name: "addIcon",
       fn: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "addIcon")

package/lib/ele-tabs/index.d.ts

@@ -1,10 +1,9 @@
-import { Ref } from 'vue';
 import { TabPaneName, TabsPaneContext } from 'element-plus';
 import { omit } from '../utils/core';
 import { ElTabsProps, ElTabsInstance } from '../ele-app/el';
 import { EleDropdownInstance } from '../ele-app/plus';
-import { TabPaneItem, TabSize, TabType, TabEventOption, ContextMenusFunc } from './types';
-import { TabTitleInstance } from './props';
+import { DropdownItem } from '../ele-dropdown/types';
+import { TabPaneItem, TabSize, TabType } from './types';
 
 declare const _default: import('vue').DefineComponent<{
     items: {
@@ -42,29 +41,32 @@ declare const _default: import('vue').DefineComponent<{
     stretch: BooleanConstructor;
 }, {
     omit: typeof omit;
-    tabRef: Ref<ElTabsInstance>;
-    itemRefs: Ref<TabTitleInstance[]>;
-    isWrap: import('vue').ComputedRef<boolean>;
+    tabRef: import('vue').Ref<ElTabsInstance>;
+    isOnlyTab: import('vue').ComputedRef<boolean>;
     tabSize: import('vue').ComputedRef<TabSize | undefined>;
     tabType: import('vue').ComputedRef<TabType | undefined>;
     tabProps: import('vue').ComputedRef<Omit<ElTabsProps, "type">>;
-    getContextMenus: ContextMenusFunc;
+    ctxMenuDropdownRef: import('vue').Ref<EleDropdownInstance>;
+    ctxMenuDropdownItems: import('vue').ShallowRef<DropdownItem[]>;
+    ctxMenuDropdownVirtualRef: import('vue').Ref<any>;
     updateModelValue: (name: TabPaneName) => void;
+    handleContextmenu: (e: MouseEvent) => void;
     handleTabClick: (pane: TabsPaneContext, e: Event) => void;
     handleTabChange: (name: TabPaneName) => void;
     handleTabRemove: (name: TabPaneName) => void;
     handleTabAdd: () => void;
     handleEdit: (name: TabPaneName | undefined, action: "remove" | "add") => void;
-    handleItemClick: (option: TabEventOption) => void;
-    handleItemContextMenu: (option: TabEventOption) => void;
-    handleItemContextOpen: (ref: EleDropdownInstance) => void;
-    handleContextmenu: (e: MouseEvent) => void;
+    handleItemClick: (item: TabPaneItem | undefined, tabName: string | number | undefined, e: MouseEvent) => void;
+    handleItemCtxMenuVisible: (visible: boolean) => void;
+    handleItemCtxMenuClick: (command: string) => void;
+    handleItemContextmenu: (item: TabPaneItem | undefined, tabName: string | number | undefined, e: MouseEvent) => void;
     hideAllDropdown: () => void;
     updateActiveBar: () => void;
+    scrollTabs: (direction: "prev" | "next", done?: () => void) => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    tabItemClick: (_opt: TabEventOption) => boolean;
-    tabContextMenu: (_opt: TabEventOption) => boolean;
-    tabContextOpen: (_ref: EleDropdownInstance) => boolean;
+    tabItemClick: (_opt: import('./types').TabEventOption) => boolean;
+    tabContextMenu: (_opt: import('./types').TabEventOption) => boolean;
+    tabContextOpen: (_ref: EleDropdownInstance, _item?: TabPaneItem | null, _name?: string | number | null) => boolean;
     tabSortChange: (_data: TabPaneItem[]) => boolean;
     "update:modelValue": (name: TabPaneName) => boolean;
     tabClick: (pane: TabsPaneContext, ev: Event) => boolean;
@@ -123,23 +125,23 @@ declare const _default: import('vue').DefineComponent<{
         index: string | undefined;
         isClosable: boolean;
     }, ev: Event) => any) | undefined;
+    onTabRemove?: ((name: TabPaneName) => any) | undefined;
     onTabChange?: ((name: TabPaneName) => any) | undefined;
     onEdit?: ((paneName: TabPaneName | undefined, action: "add" | "remove") => any) | undefined;
-    onTabRemove?: ((name: TabPaneName) => any) | undefined;
     onTabAdd?: (() => any) | undefined;
-    onTabContextMenu?: ((_opt: TabEventOption) => any) | undefined;
-    onTabItemClick?: ((_opt: TabEventOption) => any) | undefined;
-    onTabContextOpen?: ((_ref: EleDropdownInstance) => any) | undefined;
+    onTabContextMenu?: ((_opt: import('./types').TabEventOption) => any) | undefined;
+    onTabItemClick?: ((_opt: import('./types').TabEventOption) => any) | undefined;
+    onTabContextOpen?: ((_ref: EleDropdownInstance, _item?: TabPaneItem | null | undefined, _name?: string | number | null | undefined) => any) | undefined;
     onTabSortChange?: ((_data: TabPaneItem[]) => any) | undefined;
 }, {
     mousewheel: boolean;
     closable: boolean;
     center: boolean;
-    beforeLeave: (newName: TabPaneName, oldName: TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>;
     sortable: boolean;
     addable: boolean;
     editable: boolean;
     tabPosition: import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "top" | "bottom" | "right" | "left", unknown>;
+    beforeLeave: (newName: TabPaneName, oldName: TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>;
     stretch: boolean;
     handleClick: boolean;
     flexTable: boolean;

package/lib/ele-tabs/props.cjs

@@ -34,7 +34,7 @@ const tabsEmits = {
   /** 页签右键菜单项点击事件 */
   tabContextMenu: (_opt) => true,
   /** 页签右键菜单打开事件 */
-  tabContextOpen: (_ref) => true,
+  tabContextOpen: (_ref, _item, _name) => true,
   /** 拖动排序改变事件 */
   tabSortChange: (_data) => true
 };

package/lib/ele-tabs/props.d.ts

@@ -1,7 +1,6 @@
 import { PropType, ExtractPropTypes, InjectionKey } from 'vue';
 import { tabsProps as elTabsProps } from 'element-plus';
 import { EleDropdownProps, EleDropdownInstance } from '../ele-app/plus';
-import { default as TabTitle } from './components/tab-title';
 import { TabPaneItem, TabSize, TabType, ContextMenus, TabEventOption, TabWrapProvide } from './types';
 
 /**
@@ -62,7 +61,7 @@ export declare const tabsEmits: {
     /** 页签右键菜单项点击事件 */
     tabContextMenu: (_opt: TabEventOption) => boolean;
     /** 页签右键菜单打开事件 */
-    tabContextOpen: (_ref: EleDropdownInstance) => boolean;
+    tabContextOpen: (_ref: EleDropdownInstance, _item?: TabPaneItem | null, _name?: string | number | null) => boolean;
     /** 拖动排序改变事件 */
     tabSortChange: (_data: TabPaneItem[]) => boolean;
     "update:modelValue": (name: import('element-plus').TabPaneName) => boolean;
@@ -77,10 +76,6 @@ export declare const tabsEmits: {
  */
 export type TabPropKeys = Array<keyof typeof elTabsProps>;
 export declare const tabPropKeys: TabPropKeys;
-/**
- * 页签标题实例
- */
-export type TabTitleInstance = InstanceType<typeof TabTitle> | null;
 /**
  * 标签页容器依赖注入key
  */