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

package/es/ele-tabs/style/index.scss

@@ -39,7 +39,7 @@
     color: eleVar('tab', 'color');
     font-size: eleVar('tab', 'font-size');
     transition-duration: $transition-base;
-    transition-property: eleVar('tab', 'transition');
+    transition-property: (color, background-color, border-color, box-shadow);
     border: none;
     margin: 0;
 
@@ -50,6 +50,10 @@
     &.is-active {
       color: eleVar('tab', 'active-color');
     }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
   }
 
   .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav {
@@ -60,16 +64,6 @@
     }
   }
 
-  /* 右键菜单 */
-  .el-tabs__item > .el-dropdown {
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    position: static;
-    cursor: inherit;
-    display: block;
-  }
-
   /* 标题 */
   .ele-tab-title {
     padding: 0 eleVar('tab', 'padding');
@@ -122,17 +116,6 @@
     }
   }
 
-  /* 拖动 */
-  .el-tabs__item {
-    &.sortable-chosen {
-      user-select: none;
-    }
-
-    &.sortable-ghost {
-      opacity: 0;
-    }
-  }
-
   /* 左右箭头 */
   .el-tabs__nav-prev,
   .el-tabs__nav-next {
@@ -191,6 +174,12 @@
   .el-tabs__nav-next {
     order: 1;
   }
+
+  /* 左右反圆角 */
+  .ele-tab-corner-left,
+  .ele-tab-corner-right {
+    display: none;
+  }
 }
 
 /* 小型尺寸 */
@@ -398,29 +387,48 @@
     }
   }
 
-  /* 加左右间距为反圆角留点位置 */
+  /* 第一个和最后一个页签预留反圆角位置 */
   .el-tabs__nav {
-    padding: 0 $angle-size;
+    & > .el-tabs__item {
+      border-left: $angle-size solid transparent;
+      border-right: $angle-size solid transparent;
+
+      & + .el-tabs__item {
+        margin-left: calc(#{$angle-size} * -2);
+      }
+    }
   }
 }
 
 .ele-tabs.is-simple > .el-tabs__header,
-.ele-tabs.is-indicator > .el-tabs__header,
-.ele-tabs.is-tag > .el-tabs__header {
+.ele-tabs.is-indicator > .el-tabs__header {
   .el-tabs__item {
+    transition-property: color;
+
+    .ele-tab-title {
+      border-radius: inherit;
+      transition: background-color $transition-base;
+    }
+
     &:hover {
-      $bg: eleVar('tab', 'simple-hover-bg');
       color: eleVar('tab', 'simple-hover-color');
       z-index: eleVar('tab', 'hover-index');
-      background: $bg;
+      background: transparent;
+
+      .ele-tab-title {
+        background: eleVar('tab', 'simple-hover-bg');
+      }
     }
 
     &.is-active {
-      $bg: eleVar('tab', 'simple-active-bg');
       color: eleVar('tab', 'simple-active-color');
       font-weight: eleVar('tab', 'simple-active-weight');
       z-index: eleVar('tab', 'active-index');
-      background: $bg;
+      background: transparent;
+
+      .ele-tab-title {
+        background: eleVar('tab', 'simple-active-bg');
+      }
     }
   }
 
@@ -452,82 +460,33 @@
 /* 简约风格两侧反圆角 */
 .ele-tabs.is-simple > .el-tabs__header .el-tabs__item,
 .ele-tabs.is-indicator > .el-tabs__header .el-tabs__item {
-  & > .el-dropdown {
-    $size: eleVar('tab', 'simple-angle-size');
-    $bg-size: calc(#{$size} * 2);
-    $bg: transparent;
-
-    &::after,
-    &::before {
-      content: '';
-      width: $size;
-      height: $size;
-      display: eleVar('tab', 'simple-angle-display');
-      transition: all $transition-base;
-      pointer-events: none;
-      position: absolute;
-      bottom: 0;
-    }
-
-    &::before {
-      left: calc(0px - $size);
-      background: radial-gradient(
-        #{$bg-size} at left top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
-
-    &::after {
-      right: calc(0px - $size);
-      background: radial-gradient(
-        #{$bg-size} at right top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
+  .ele-tab-corner-left,
+  .ele-tab-corner-right {
+    color: transparent;
+    font-size: eleVar('tab', 'simple-angle-size');
+    display: eleVar('tab', 'simple-angle-display');
+    transition: color $transition-base;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0;
   }
 
-  &:hover > .el-dropdown {
-    $bg: eleVar('tab', 'simple-hover-bg');
-    $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
-
-    &::before {
-      background: radial-gradient(
-        #{$bg-size} at left top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
-
-    &::after {
-      background: radial-gradient(
-        #{$bg-size} at right top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
+  .ele-tab-corner-left {
+    left: calc(eleVar('tab', 'simple-angle-size') * -1);
   }
 
-  &.is-active > .el-dropdown {
-    $bg: eleVar('tab', 'simple-active-bg');
-    $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
+  .ele-tab-corner-right {
+    right: calc(eleVar('tab', 'simple-angle-size') * -1);
+  }
 
-    &::before {
-      background: radial-gradient(
-        #{$bg-size} at left top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
+  &:hover .ele-tab-corner-left,
+  &:hover .ele-tab-corner-right {
+    color: eleVar('tab', 'simple-hover-bg');
+  }
 
-    &::after {
-      background: radial-gradient(
-        #{$bg-size} at right top,
-        transparent 50%,
-        #{$bg} 0
-      );
-    }
+  &.is-active .ele-tab-corner-left,
+  &.is-active .ele-tab-corner-right {
+    color: eleVar('tab', 'simple-active-bg');
   }
 }
 
@@ -603,6 +562,21 @@
       & + .el-tabs__item {
         margin-left: $space;
       }
+
+      &:hover {
+        $bg: eleVar('tab', 'simple-hover-bg');
+        color: eleVar('tab', 'simple-hover-color');
+        z-index: eleVar('tab', 'hover-index');
+        background: $bg;
+      }
+
+      &.is-active {
+        $bg: eleVar('tab', 'simple-active-bg');
+        color: eleVar('tab', 'simple-active-color');
+        font-weight: eleVar('tab', 'simple-active-weight');
+        z-index: eleVar('tab', 'active-index');
+        background: $bg;
+      }
     }
 
     .el-tabs__nav-prev,
@@ -616,6 +590,11 @@
         display: none;
       }
     }
+
+    .el-tabs__active-bar,
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
   }
 
   &.is-small > .el-tabs__header {
@@ -737,6 +716,44 @@
   }
 }
 
+/* 拖动 */
+.ele-tabs.is-sortable {
+  & > .el-tabs__header .el-tabs__item {
+    user-select: none;
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
+
+    &.sortable-chosen {
+      background: elVar('bg-color');
+      cursor: move;
+    }
+  }
+
+  &.is-simple > .el-tabs__header .el-tabs__item.sortable-chosen,
+  &.is-indicator > .el-tabs__header .el-tabs__item.sortable-chosen {
+    background: none;
+
+    .ele-tab-title {
+      background: eleVar('tab', 'simple-active-bg');
+    }
+
+    .ele-tab-corner-left,
+    .ele-tab-corner-right {
+      color: eleVar('tab', 'simple-active-bg');
+    }
+  }
+
+  &.is-button > .el-tabs__header .el-tabs__item.sortable-chosen {
+    background: eleVar('tab', 'button-active-bg');
+  }
+
+  &.is-tag > .el-tabs__header .el-tabs__item.sortable-chosen {
+    background: eleVar('tab', 'simple-active-bg');
+  }
+}
+
 /* 页签操作按钮 */
 .ele-tab-tool {
   flex-shrink: 0;
@@ -746,7 +763,7 @@
   text-align: center;
   color: eleVar('tab', 'tool-color');
   font-size: eleVar('tab', 'tool-font-size');
-  transition-property: eleVar('tab', 'transition');
+  transition-property: (color, background-color, border-color, box-shadow);
   transition-duration: $transition-base;
   position: relative;
   cursor: pointer;
@@ -808,13 +825,20 @@
     }
   }
 
-  /* 取消反圆角预留间距 */
-  .ele-tab-tool.is-tab + .ele-tabs.is-simple,
-  .ele-tab-tool.is-tab + .ele-tabs.is-indicator {
-    margin-left: calc(0px - eleVar('tab', 'simple-angle-size'));
+  /* 抵消反圆角预留间距 */
+  .ele-tab-tool.is-tab {
+    .ele-tab-corner-left,
+    .ele-tab-corner-right {
+      display: none;
+    }
+
+    & + .ele-tabs.is-simple,
+    & + .ele-tabs.is-indicator {
+      margin-left: calc(0px - eleVar('tab', 'simple-angle-size'));
 
-    .el-tabs__nav-wrap.is-scrollable {
-      padding-left: eleVar('tab', 'simple-angle-size');
+      .el-tabs__nav-wrap.is-scrollable {
+        padding-left: eleVar('tab', 'simple-angle-size');
+      }
     }
   }
 
@@ -880,81 +904,33 @@
 
     &.is-tab {
       /* 两侧反圆角 */
-      & > .el-dropdown {
-        $size: eleVar('tab', 'simple-angle-size');
-        $bg-size: calc(#{$size} * 2);
-        $bg: transparent;
-
-        &::after,
-        &::before {
-          content: '';
-          width: $size;
-          height: $size;
-          display: eleVar('tab', 'simple-angle-display');
-          transition: all $transition-base;
-          position: absolute;
-          bottom: 0;
-        }
-
-        &::before {
-          left: calc(0px - $size);
-          background: radial-gradient(
-            #{$bg-size} at left top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
-
-        &::after {
-          right: calc(0px - $size);
-          background: radial-gradient(
-            #{$bg-size} at right top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
+      .ele-tab-corner-left,
+      .ele-tab-corner-right {
+        color: transparent;
+        font-size: eleVar('tab', 'simple-angle-size');
+        display: eleVar('tab', 'simple-angle-display');
+        transition: color $transition-base;
+        pointer-events: none;
+        position: absolute;
+        bottom: 0;
       }
 
-      &:hover > .el-dropdown {
-        $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
-        $bg: eleVar('tab', 'simple-hover-bg');
-
-        &::before {
-          background: radial-gradient(
-            #{$bg-size} at left top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
-
-        &::after {
-          background: radial-gradient(
-            #{$bg-size} at right top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
+      .ele-tab-corner-left {
+        left: calc(eleVar('tab', 'simple-angle-size') * -1);
       }
 
-      &.is-active > .el-dropdown {
-        $bg-size: calc(#{eleVar('tab', 'simple-angle-size')} * 2);
-        $bg: eleVar('tab', 'simple-active-bg');
+      .ele-tab-corner-right {
+        right: calc(eleVar('tab', 'simple-angle-size') * -1);
+      }
 
-        &::before {
-          background: radial-gradient(
-            #{$bg-size} at left top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
+      &:hover .ele-tab-corner-left,
+      &:hover .ele-tab-corner-right {
+        color: eleVar('tab', 'simple-hover-bg');
+      }
 
-        &::after {
-          background: radial-gradient(
-            #{$bg-size} at right top,
-            transparent 50%,
-            #{$bg} 0
-          );
-        }
+      &.is-active .ele-tab-corner-left,
+      &.is-active .ele-tab-corner-right {
+        color: eleVar('tab', 'simple-active-bg');
       }
     }
   }

package/es/ele-tabs/types.d.ts

@@ -9,8 +9,8 @@ export interface TabPaneItem extends ElTabPaneProps {
   slot?: string;
   /** 元数据 */
   meta?: any;
-  /** 显示条件 */
-  vIf?: any;
+  /** 唯一标识 */
+  key?: string | number | symbol;
 }
 
 /**
@@ -36,9 +36,9 @@ export type TabType =
  */
 export interface TabEventOption {
   /** 页签标识 */
-  name?: string | number;
+  name?: string | number | null;
   /** 页签数据 */
-  item?: TabPaneItem;
+  item?: TabPaneItem | null;
   /** 当前选中的页签标识 */
   active?: string | number;
   /** 事件标识 */
@@ -48,19 +48,42 @@ export interface TabEventOption {
 /**
  * 获取右键菜单方法
  */
-export type ContextMenusFunc = (item?: TabPaneItem) => DropdownItem[];
+export type ContextMenusFunc = (
+  item?: TabPaneItem,
+  tabName?: string | number
+) => DropdownItem[] | undefined;
 
 /**
  * 右键菜单属性
  */
 export type ContextMenus = DropdownItem[] | ContextMenusFunc;
 
+/**
+ * 页签实例方法
+ */
+export interface TabMethods {
+  /** 触发页签项点击事件 */
+  triggerTabItemClick?: (
+    item: TabPaneItem | undefined,
+    tabName: string | number | undefined,
+    e: MouseEvent
+  ) => void;
+  /** 触发页签项右键菜单事件 */
+  triggerItemContextMenu?: (
+    item: TabPaneItem | undefined,
+    tabName: string | number | undefined,
+    e: MouseEvent
+  ) => void;
+}
+
 /**
  * 标签页容器属性
  */
-export interface TabWrapProvide {
+export interface TabWrapProvide extends TabMethods {
   /** 尺寸 */
   size?: TabSize;
   /** 风格类型 */
   type?: TabType;
+  /** 设置页签实例方法 */
+  setTabMethods?: (methods: TabMethods) => void;
 }

package/es/ele-tool/index.js

@@ -1,4 +1,5 @@
 import { defineComponent, inject, watch, openBlock, createElementBlock, createElementVNode, renderSlot } from "vue";
+import { useTimer } from "../utils/hook";
 import { TOOLBAR_KEY } from "../ele-toolbar/props";
 import { toolProps, toolEmits } from "./props";
 const _sfc_main = defineComponent({
@@ -7,6 +8,7 @@ const _sfc_main = defineComponent({
   emits: toolEmits,
   setup(props, { emit }) {
     const toolbarProvide = inject(TOOLBAR_KEY, {});
+    const [startHideTipTimer, stopHideTipTimer] = useTimer(200);
     const showTooltip = (text, el, options) => {
       if (toolbarProvide.showTooltip) {
         toolbarProvide.showTooltip(text, el, options);
@@ -17,12 +19,15 @@ const _sfc_main = defineComponent({
     };
     const handleClick = (e) => {
       if (props.clickHideTooltip) {
-        hideTooltip();
+        startHideTipTimer(() => {
+          hideTooltip();
+        });
       }
       emit("click", e);
     };
     const handleMouseover = (e) => {
       if (props.title && !props.disabled) {
+        stopHideTipTimer();
         showTooltip(props.title, e.currentTarget, {
           placement: props.placement,
           offset: 10

package/es/ele-toolbar/index.d.ts

@@ -22,24 +22,25 @@ declare const _default: import('vue').DefineComponent<{
         teleported?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
         disabled?: boolean | undefined;
         offset?: number | undefined;
+        persistent?: boolean | undefined;
+        visible?: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null) | ((new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null))[], unknown, unknown> | undefined;
+        trigger?: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>) | ((new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>))[], unknown, unknown> | undefined;
         popperOptions?: {
             placement?: import('element-plus').Placement | undefined;
             modifiers?: {
                 name?: any;
                 enabled?: boolean | undefined;
                 phase?: import('@popperjs/core').ModifierPhases | undefined;
-                requires?: Array<string>;
-                requiresIfExists?: Array<string>;
+                requires?: Array<string> | undefined;
+                requiresIfExists?: Array<string> | undefined;
                 fn?: ((arg0: import('@popperjs/core').ModifierArguments<any>) => import('@popperjs/core').State | void) | undefined;
                 effect?: ((arg0: import('@popperjs/core').ModifierArguments<any>) => (() => void) | void) | undefined;
                 options?: Partial<any> | undefined;
-                data?: import('@popperjs/core').Obj;
+                data?: import('@popperjs/core').Obj | undefined;
             }[] | undefined;
             strategy?: import('@popperjs/core').PositioningStrategy | undefined;
-            onFirstUpdate?: (arg0: Partial<import('@popperjs/core').State>) => void;
+            onFirstUpdate?: ((arg0: Partial<import('@popperjs/core').State>) => void) | undefined;
         } | undefined;
-        visible?: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null) | ((new (...args: any[]) => (boolean | null) & {}) | (() => boolean | null))[], unknown, unknown> | undefined;
-        trigger?: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>) | ((new (...args: any[]) => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType> & {}) | (() => import('element-plus/es/utils/typescript').Arrayable<import('element-plus').TooltipTriggerType>))[], unknown, unknown> | undefined;
         triggerKeys?: string[] | undefined;
         content?: string | undefined;
         enterable?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -47,11 +48,10 @@ declare const _default: import('vue').DefineComponent<{
         hideAfter?: number | undefined;
         autoClose?: number | undefined;
         showArrow?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
-        persistent?: boolean | undefined;
-        gpuAcceleration?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
         arrowOffset?: number | undefined;
         virtualTriggering?: boolean | undefined;
-        rawContent?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
+        rawContent?: boolean | undefined;
+        gpuAcceleration?: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
         isPopover?: boolean | undefined;
         ariaLabel?: string | undefined;
         popperClass?: string | undefined;