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

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

@@ -6,6 +6,7 @@
 
 /* 标签页 */
 .ele-tabs.el-tabs > .el-tabs__header {
+  flex-shrink: 0;
   margin: 0;
 
   .el-tabs__nav-wrap {
@@ -38,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;
 
@@ -49,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 {
@@ -59,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');
@@ -121,11 +116,6 @@
     }
   }
 
-  /* 拖动 */
-  .el-tabs__item.sortable-ghost {
-    opacity: 0;
-  }
-
   /* 左右箭头 */
   .el-tabs__nav-prev,
   .el-tabs__nav-next {
@@ -184,6 +174,12 @@
   .el-tabs__nav-next {
     order: 1;
   }
+
+  /* 左右反圆角 */
+  .ele-tab-corner-left,
+  .ele-tab-corner-right {
+    display: none;
+  }
 }
 
 /* 小型尺寸 */
@@ -391,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');
+      }
     }
   }
 
@@ -445,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');
   }
 }
 
@@ -596,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,
@@ -609,6 +590,11 @@
         display: none;
       }
     }
+
+    .el-tabs__active-bar,
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
   }
 
   &.is-small > .el-tabs__header {
@@ -730,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;
@@ -739,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;
@@ -801,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');
+      }
     }
   }
 
@@ -873,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');
       }
     }
   }
@@ -1056,3 +1039,36 @@
     }
   }
 }
+
+/* 内部表格高度铺满 */
+.ele-tabs.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .el-tabs__content {
+    flex: 1;
+    overflow: auto;
+
+    & > .el-tab-pane {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+
+      & > .ele-pro-table {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        & > .ele-pro-table-view {
+          flex: 1;
+          height: 100%;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}

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

@@ -1,4 +1,3 @@
-import type SortableJs from 'sortablejs';
 import type { ElTabPaneProps } from '../ele-app/el';
 import type { DropdownItem } from '../ele-dropdown/types';
 
@@ -10,6 +9,8 @@ export interface TabPaneItem extends ElTabPaneProps {
   slot?: string;
   /** 元数据 */
   meta?: any;
+  /** 唯一标识 */
+  key?: string | number | symbol;
 }
 
 /**
@@ -35,9 +36,9 @@ export type TabType =
  */
 export interface TabEventOption {
   /** 页签标识 */
-  name?: string | number;
+  name?: string | number | null;
   /** 页签数据 */
-  item?: TabPaneItem;
+  item?: TabPaneItem | null;
   /** 当前选中的页签标识 */
   active?: string | number;
   /** 事件标识 */
@@ -47,7 +48,10 @@ export interface TabEventOption {
 /**
  * 获取右键菜单方法
  */
-export type ContextMenusFunc = (item?: TabPaneItem) => DropdownItem[];
+export type ContextMenusFunc = (
+  item?: TabPaneItem,
+  tabName?: string | number
+) => DropdownItem[] | undefined;
 
 /**
  * 右键菜单属性
@@ -55,21 +59,31 @@ export type ContextMenusFunc = (item?: TabPaneItem) => DropdownItem[];
 export type ContextMenus = DropdownItem[] | ContextMenusFunc;
 
 /**
- * 页签实例数据
+ * 页签实例方法
  */
-export interface TabCurrent {
-  /** 拖拽排序实例 */
-  sortIns?: SortableJs | null;
-  /** 鼠标滚轮事件节流 */
-  isScroll?: boolean;
+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-text/index.d.ts

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<{
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('./types').TextIcon>;
     iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     tag: {
         type: StringConstructor;
@@ -25,7 +25,7 @@ declare const _default: import('vue').DefineComponent<{
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('./types').TextIcon>;
     iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }>>, {
     tag: string;
     underline: boolean;

package/es/ele-text/props.d.ts

@@ -1,4 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { ElIconProps } from '../ele-app/el';
 import { TextType, TextSize, TextIcon } from './types';
 
@@ -28,7 +29,7 @@ export declare const textProps: {
     /** 图标属性 */
     iconProps: PropType<ElIconProps>;
     /** 图标样式 */
-    iconStyle: PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: PropType<StyleValue>;
 };
 export type TextProps = ExtractPropTypes<typeof textProps>;
 export type TextPropKeys = Array<keyof typeof textProps>;

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

@@ -3,10 +3,11 @@ import { EleTooltipProps } from '../ele-app/plus';
 declare const _default: import('vue').DefineComponent<{
     title: StringConstructor;
     placement: {
-        type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: import('vue').PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     disabled: BooleanConstructor;
+    clickHideTooltip: BooleanConstructor;
 }, {
     handleClick: (e: MouseEvent) => void;
     handleMouseover: (e: MouseEvent) => void;
@@ -17,14 +18,16 @@ declare const _default: import('vue').DefineComponent<{
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: StringConstructor;
     placement: {
-        type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: import('vue').PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     disabled: BooleanConstructor;
+    clickHideTooltip: BooleanConstructor;
 }>> & {
     onClick?: ((_e: MouseEvent) => any) | undefined;
 }, {
     placement: import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined;
     disabled: boolean;
+    clickHideTooltip: boolean;
 }, {}>;
 export default _default;

package/es/ele-tool/index.js

@@ -18,9 +18,11 @@ const _sfc_main = defineComponent({
       toolbarProvide.hideTooltip && toolbarProvide.hideTooltip();
     };
     const handleClick = (e) => {
-      startHideTipTimer(() => {
-        hideTooltip();
-      });
+      if (props.clickHideTooltip) {
+        startHideTipTimer(() => {
+          hideTooltip();
+        });
+      }
       emit("click", e);
     };
     const handleMouseover = (e) => {

package/es/ele-tool/props.d.ts

@@ -1,4 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { EleTooltipProps } from '../ele-app/plus';
 
 /**
  * 属性
@@ -8,11 +9,13 @@ export declare const toolProps: {
     title: StringConstructor;
     /** 提示方向 */
     placement: {
-        type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     /** 是否禁用提示 */
     disabled: BooleanConstructor;
+    /** 是否点击时关闭提示 */
+    clickHideTooltip: BooleanConstructor;
 };
 export type ToolProps = ExtractPropTypes<typeof toolProps>;
 /**

package/es/ele-tool/props.js

@@ -7,7 +7,9 @@ const toolProps = {
     default: "top"
   },
   /** 是否禁用提示 */
-  disabled: Boolean
+  disabled: Boolean,
+  /** 是否点击时关闭提示 */
+  clickHideTooltip: Boolean
 };
 const toolEmits = {
   /** 点击事件 */

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

@@ -32,6 +32,19 @@
     line-height: inherit;
     position: static;
   }
+
+  .el-tooltip__trigger {
+    position: static;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
 }
 
 .ele-toolbar .ele-tool {