ele-admin-plus 1.4.1 → 1.5.0-beta.1

package/lib/ele-tabs/index.cjs

@@ -2,7 +2,6 @@
 const vue = require("vue");
 const SortableJs = require("sortablejs");
 const elementPlus = require("element-plus");
-const index = require("../icons/index");
 const common = require("../utils/common");
 const hook = require("../utils/hook");
 const EleDropdown = require("../ele-dropdown/index");
@@ -36,7 +35,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         } else if (param.distanceX && param.distanceX < 80) {
           scrollTabs("next");
         }
-      }
+      },
+      touchstartOptions: { passive: true },
+      touchmoveOptions: { passive: true }
     });
     const [startGhostTimer] = hook.useTimer(100);
     const tabRef = vue.ref(null);
@@ -140,7 +141,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const handleItemContextmenu = (item, tabName, e) => {
       const itemEl = e.currentTarget;
-      if (!props$1.contextMenu || ctxMenuDropdownVirtualRef.value === itemEl) {
+      if (!props$1.contextMenu) {
+        return;
+      }
+      if (ctxMenuDropdownVirtualRef.value === itemEl) {
+        ctxMenuDropdownItems.value = getContextMenus(item, tabName) || [];
         return;
       }
       e.preventDefault();
@@ -199,7 +204,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       sortableIns = new SortableJs(navEl, {
         draggable: ".el-tabs__item",
-        delay: 20,
+        delay: 150,
         onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
           if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
             const data = [...props$1.items];
@@ -301,6 +306,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         initMousewheelEvent();
       }
     );
+    vue.watch(
+      () => props$1.contextMenus,
+      (ctxMenus) => {
+        if (Array.isArray(ctxMenus) && ctxMenuDropdownItems.value !== ctxMenus) {
+          ctxMenuDropdownItems.value = ctxMenus;
+        }
+      },
+      { deep: true }
+    );
     __expose({
       tabRef,
       ctxMenuDropdownRef,
@@ -313,8 +327,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref_key: "tabRef",
         ref: tabRef,
         type: tabType.value === "card" || tabType.value === "border-card" ? tabType.value : void 0,
-        class: [
-          "ele-tabs",
+        class: ["ele-tabs", [
           { "ele-tabs-wrap": isOnlyTab.value },
           { "is-small": tabSize.value === "small" },
           { "is-large": tabSize.value === "large" },
@@ -326,8 +339,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           { "is-tag": tabType.value === "tag" },
           { "is-center": _ctx.center },
           { "is-sortable": _ctx.sortable },
-          { "is-flex-table": _ctx.flexTable }
-        ],
+          { "is-flex-table": _ctx.flexTable && _ctx.flexTable !== "auto" },
+          { "is-flex-auto-table": _ctx.flexTable === "auto" }
+        ]],
         "onUpdate:modelValue": updateModelValue,
         onTabClick: handleTabClick,
         onTabChange: handleTabChange,
@@ -337,10 +351,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         onContextmenu: handleContextmenu
       }), vue.createSlots({
         default: vue.withCtx(() => [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index$1) => {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
             return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTabPane), vue.mergeProps({
               key: [
-                index$1,
+                index,
                 item.name,
                 item.label,
                 !!item.closable,
@@ -362,24 +376,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     vue.createTextVNode(vue.toDisplayString(item.label), 1)
                   ])
                 ], 40, _hoisted_1),
-                tabType.value === "simple" || tabType.value === "indicator" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
-                  key: 0,
-                  class: "ele-tab-corner-left"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(index.CornerLeftFilled))
-                  ]),
-                  _: 1
-                })) : vue.createCommentVNode("", true),
-                tabType.value === "simple" || tabType.value === "indicator" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
-                  key: 1,
-                  class: "ele-tab-corner-right"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(index.CornerRightFilled))
-                  ]),
-                  _: 1
-                })) : vue.createCommentVNode("", true)
+                tabType.value === "simple" || tabType.value === "indicator" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "ele-tab-corner-left" }, null, -1)),
+                  _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "ele-tab-corner-right" }, null, -1))
+                ], 64)) : vue.createCommentVNode("", true)
               ]),
               _: 2
             }, [

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

@@ -27,7 +27,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     sortable: BooleanConstructor;
     mousewheel: BooleanConstructor;
     handleClick: BooleanConstructor;
-    flexTable: BooleanConstructor;
+    flexTable: import('vue').PropType<boolean | "auto">;
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     modelValue: {
@@ -38,7 +38,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     editable: BooleanConstructor;
     tabPosition: {
-        readonly type: import('vue').PropType<"top" | "bottom" | "left" | "right">;
+        readonly type: import('vue').PropType<"bottom" | "left" | "right" | "top">;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -62,8 +62,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     scrollTabs: (direction: "prev" | "next", done?: () => void) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (name: TabPaneName) => void;
-    tabContextMenu: (_opt: import('./types').TabEventOption) => void;
+    edit: (paneName: TabPaneName | undefined, action: "add" | "remove") => void;
     tabItemClick: (_opt: import('./types').TabEventOption) => void;
+    tabContextMenu: (_opt: import('./types').TabEventOption) => void;
     tabContextOpen: (_ref: EleDropdownInstance, _item?: TabPaneItem | null | undefined, _name?: string | number | null | undefined) => void;
     tabSortChange: (_data: TabPaneItem[]) => void;
     tabClick: (pane: {
@@ -72,9 +73,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         slots: import('vue').Slots;
         props: {
             readonly label: string;
-            readonly closable: boolean;
             readonly disabled: boolean;
             readonly lazy: boolean;
+            readonly closable?: boolean | undefined;
             readonly name?: (string | number) | undefined;
         };
         paneName: TabPaneName | undefined;
@@ -84,7 +85,6 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         isFocusInsidePane: () => boolean | undefined;
     }, ev: Event) => void;
     tabChange: (name: TabPaneName) => void;
-    edit: (paneName: TabPaneName | undefined, action: "add" | "remove") => void;
     tabRemove: (name: TabPaneName) => void;
     tabAdd: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -100,7 +100,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     sortable: BooleanConstructor;
     mousewheel: BooleanConstructor;
     handleClick: BooleanConstructor;
-    flexTable: BooleanConstructor;
+    flexTable: import('vue').PropType<boolean | "auto">;
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     modelValue: {
@@ -111,7 +111,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     };
     editable: BooleanConstructor;
     tabPosition: {
-        readonly type: import('vue').PropType<"top" | "bottom" | "left" | "right">;
+        readonly type: import('vue').PropType<"bottom" | "left" | "right" | "top">;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -129,8 +129,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     stretch: BooleanConstructor;
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((name: TabPaneName) => any) | undefined;
-    onTabContextMenu?: ((_opt: import('./types').TabEventOption) => any) | undefined;
+    onEdit?: ((paneName: TabPaneName | undefined, action: "add" | "remove") => any) | undefined;
     onTabItemClick?: ((_opt: import('./types').TabEventOption) => any) | undefined;
+    onTabContextMenu?: ((_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;
     onTabClick?: ((pane: {
@@ -139,9 +140,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         slots: import('vue').Slots;
         props: {
             readonly label: string;
-            readonly closable: boolean;
             readonly disabled: boolean;
             readonly lazy: boolean;
+            readonly closable?: boolean | undefined;
             readonly name?: (string | number) | undefined;
         };
         paneName: TabPaneName | undefined;
@@ -151,21 +152,19 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         isFocusInsidePane: () => boolean | undefined;
     }, ev: Event) => any) | undefined;
     onTabChange?: ((name: TabPaneName) => any) | undefined;
-    onEdit?: ((paneName: TabPaneName | undefined, action: "add" | "remove") => any) | undefined;
     onTabRemove?: ((name: TabPaneName) => any) | undefined;
     onTabAdd?: (() => any) | undefined;
 }>, {
-    mousewheel: boolean;
     closable: boolean;
     center: boolean;
     sortable: boolean;
     addable: boolean;
     editable: boolean;
-    tabPosition: "top" | "bottom" | "left" | "right";
+    tabPosition: "bottom" | "left" | "right" | "top";
     beforeLeave: (newName: TabPaneName, oldName: TabPaneName) => boolean | void | Promise<boolean | void>;
     stretch: boolean;
     handleClick: boolean;
-    flexTable: boolean;
+    mousewheel: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/ele-tabs/props.cjs

@@ -25,7 +25,7 @@ const tabsProps = {
   /** 是否自己处理页签点击事件 */
   handleClick: Boolean,
   /** 内部表格是否弹性布局 */
-  flexTable: Boolean
+  flexTable: [Boolean, String]
 };
 const tabsEmits = {
   ...elementPlus.tabsEmits,

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

@@ -29,7 +29,7 @@ export declare const tabsProps: {
     /** 是否自己处理页签点击事件 */
     handleClick: BooleanConstructor;
     /** 内部表格是否弹性布局 */
-    flexTable: BooleanConstructor;
+    flexTable: PropType<boolean | "auto">;
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     modelValue: {
@@ -40,7 +40,7 @@ export declare const tabsProps: {
     };
     editable: BooleanConstructor;
     tabPosition: {
-        readonly type: PropType<"top" | "bottom" | "left" | "right">;
+        readonly type: PropType<"bottom" | "left" | "right" | "top">;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

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

@@ -1,5 +1,6 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
+@use '../../ele-pro-table/style/css-var.scss' as *;
 @use './css-var.scss' as *;
 
 @include set-tab-var($ele);
@@ -67,6 +68,7 @@
 
   /* 标题 */
   .ele-tab-title {
+    height: 100%;
     padding: 0 eleVar('tab', 'padding');
     box-sizing: border-box;
     position: static;
@@ -391,46 +393,25 @@
 
   /* 第一个和最后一个页签预留反圆角位置 */
   .el-tabs__nav {
-    & > .el-tabs__item {
-      border-left: $angle-size solid transparent;
-      border-right: $angle-size solid transparent;
-
-      & + .el-tabs__item {
-        margin-left: calc(#{$angle-size} * -2);
-      }
-    }
+    padding-left: $angle-size;
+    padding-right: $angle-size;
   }
 }
 
 .ele-tabs.is-simple > .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 {
       color: eleVar('tab', 'simple-hover-color');
+      background: eleVar('tab', 'simple-hover-bg');
       z-index: eleVar('tab', 'hover-index');
-      background: transparent;
-
-      .ele-tab-title {
-        background: eleVar('tab', 'simple-hover-bg');
-      }
     }
 
     &.is-active {
       color: eleVar('tab', 'simple-active-color');
+      background: eleVar('tab', 'simple-active-bg');
       font-weight: eleVar('tab', 'simple-active-weight');
       z-index: eleVar('tab', 'active-index');
-      background: transparent;
-
-      .ele-tab-title {
-        background: eleVar('tab', 'simple-active-bg');
-      }
     }
   }
 
@@ -464,40 +445,46 @@
 .ele-tabs.is-indicator > .el-tabs__header .el-tabs__item {
   .ele-tab-corner-left,
   .ele-tab-corner-right {
-    color: transparent;
-    font-size: eleVar('tab', 'simple-angle-size');
+    width: eleVar('tab', 'simple-angle-size');
+    height: eleVar('tab', 'simple-angle-size');
     display: eleVar('tab', 'simple-angle-display');
-    transition: color $transition-base;
+    align-items: flex-end;
     pointer-events: none;
+    overflow: hidden;
     position: absolute;
     bottom: 0;
+
+    &::after {
+      content: '';
+      flex-shrink: 0;
+      width: 200%;
+      height: 200%;
+      border-radius: 50%;
+      box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size') transparent;
+      transition: box-shadow $transition-base;
+    }
   }
 
   .ele-tab-corner-left {
-    left: calc(eleVar('tab', 'simple-angle-size') * -1);
+    right: 100%;
+    justify-content: flex-end;
   }
 
   .ele-tab-corner-right {
-    right: calc(eleVar('tab', 'simple-angle-size') * -1);
+    left: 100%;
+    justify-content: flex-start;
   }
 
-  &:hover .ele-tab-corner-left,
-  &:hover .ele-tab-corner-right {
-    color: eleVar('tab', 'simple-hover-bg');
+  &:hover .ele-tab-corner-left::after,
+  &:hover .ele-tab-corner-right::after {
+    box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size')
+      eleVar('tab', 'simple-hover-bg');
   }
 
-  &.is-active .ele-tab-corner-left,
-  &.is-active .ele-tab-corner-right {
-    color: eleVar('tab', 'simple-active-bg');
-  }
-
-  .ele-tab-title::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: calc(eleVar('tab', 'simple-angle-size') * -1);
-    right: calc(eleVar('tab', 'simple-angle-size') * -1);
-    bottom: 0;
+  &.is-active .ele-tab-corner-left::after,
+  &.is-active .ele-tab-corner-right::after {
+    box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size')
+      eleVar('tab', 'simple-active-bg');
   }
 }
 
@@ -644,13 +631,14 @@
 /* 按钮风格 */
 .ele-tabs.is-button {
   $space: eleVar('tab', 'button-space');
+  $padding: eleVar('tab', 'button-padding');
 
   & > .el-tabs__header {
-    $height: calc(#{eleVar('tab', 'height')} - #{$space});
+    $height: calc(#{eleVar('tab', 'height')} - #{$padding});
 
     .el-tabs__nav {
-      padding-top: $space;
-      padding-bottom: $space;
+      padding-top: $padding;
+      padding-bottom: $padding;
     }
 
     .el-tabs__item {
@@ -681,7 +669,7 @@
       width: $height;
       height: $height;
       line-height: $height;
-      margin-top: $space;
+      margin-top: $padding;
 
       &::before {
         display: none;
@@ -695,7 +683,7 @@
   }
 
   &.is-small > .el-tabs__header {
-    $height: calc(#{eleVar('tab', 'sm-height')} - #{$space});
+    $height: calc(#{eleVar('tab', 'sm-height')} - #{$padding});
 
     .el-tabs__item {
       height: $height;
@@ -711,7 +699,7 @@
   }
 
   &.is-large > .el-tabs__header {
-    $height: calc(#{eleVar('tab', 'lg-height')} - #{$space});
+    $height: calc(#{eleVar('tab', 'lg-height')} - #{$padding});
 
     .el-tabs__item {
       height: $height;
@@ -743,15 +731,12 @@
 
   &.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');
-    }
+    background: eleVar('tab', 'simple-active-bg');
 
-    .ele-tab-corner-left,
-    .ele-tab-corner-right {
-      color: eleVar('tab', 'simple-active-bg');
+    .ele-tab-corner-left::after,
+    .ele-tab-corner-right::after {
+      box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size')
+        eleVar('tab', 'simple-active-bg');
     }
   }
 
@@ -798,6 +783,7 @@
 
   /* 标题 */
   .ele-tab-title {
+    height: 100%;
     padding: 0 eleVar('tab', 'padding');
     box-sizing: border-box;
     outline: none;
@@ -844,7 +830,7 @@
 
     & + .ele-tabs.is-simple,
     & + .ele-tabs.is-indicator {
-      margin-left: calc(0px - eleVar('tab', 'simple-angle-size'));
+      margin-left: calc(eleVar('tab', 'simple-angle-size') * -1);
 
       .el-tabs__nav-wrap.is-scrollable {
         padding-left: eleVar('tab', 'simple-angle-size');
@@ -913,34 +899,51 @@
     border-radius: eleVar('tab', 'simple-radius');
 
     &.is-tab {
+      z-index: eleVar('tab', 'hover-index');
+
       /* 两侧反圆角 */
       .ele-tab-corner-left,
       .ele-tab-corner-right {
-        color: transparent;
-        font-size: eleVar('tab', 'simple-angle-size');
+        width: eleVar('tab', 'simple-angle-size');
+        height: eleVar('tab', 'simple-angle-size');
         display: eleVar('tab', 'simple-angle-display');
-        transition: color $transition-base;
+        align-items: flex-end;
         pointer-events: none;
+        overflow: hidden;
         position: absolute;
         bottom: 0;
+
+        &::after {
+          content: '';
+          flex-shrink: 0;
+          width: 200%;
+          height: 200%;
+          border-radius: 50%;
+          box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size') transparent;
+          transition: box-shadow $transition-base;
+        }
       }
 
       .ele-tab-corner-left {
-        left: calc(eleVar('tab', 'simple-angle-size') * -1);
+        right: 100%;
+        justify-content: flex-end;
       }
 
       .ele-tab-corner-right {
-        right: calc(eleVar('tab', 'simple-angle-size') * -1);
+        left: 100%;
+        justify-content: flex-start;
       }
 
-      &:hover .ele-tab-corner-left,
-      &:hover .ele-tab-corner-right {
-        color: eleVar('tab', 'simple-hover-bg');
+      &:hover .ele-tab-corner-left::after,
+      &:hover .ele-tab-corner-right::after {
+        box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size')
+          eleVar('tab', 'simple-hover-bg');
       }
 
-      &.is-active .ele-tab-corner-left,
-      &.is-active .ele-tab-corner-right {
-        color: eleVar('tab', 'simple-active-bg');
+      &.is-active .ele-tab-corner-left::after,
+      &.is-active .ele-tab-corner-right::after {
+        box-shadow: 0 0 0 eleVar('tab', 'simple-angle-size')
+          eleVar('tab', 'simple-active-bg');
       }
     }
   }
@@ -998,16 +1001,17 @@
   /* 按钮风格 */
   &.is-button {
     $space: eleVar('tab', 'button-space');
+    $padding: eleVar('tab', 'button-padding');
 
     .ele-tab-tool {
       $height: eleVar('tab', 'height');
-      height: calc(#{$height} - #{$space});
-      line-height: calc(#{$height} - #{$space});
-      min-width: calc(#{$height} - #{$space});
+      height: calc(#{$height} - #{$padding});
+      line-height: calc(#{$height} - #{$padding});
+      min-width: calc(#{$height} - #{$padding});
       border-radius: eleVar('tab', 'button-radius');
       background: eleVar('tab', 'button-hover-bg');
-      margin-top: $space;
-      margin-bottom: $space;
+      margin-top: $padding;
+      margin-bottom: $padding;
 
       & + .ele-tab-tool {
         margin-left: $space;
@@ -1036,16 +1040,16 @@
 
     &.is-small .ele-tab-tool {
       $height: eleVar('tab', 'sm-height');
-      height: calc(#{$height} - #{$space});
-      line-height: calc(#{$height} - #{$space});
-      min-width: calc(#{$height} - #{$space});
+      height: calc(#{$height} - #{$padding});
+      line-height: calc(#{$height} - #{$padding});
+      min-width: calc(#{$height} - #{$padding});
     }
 
     &.is-large .ele-tab-tool {
       $height: eleVar('tab', 'lg-height');
-      height: calc(#{$height} - #{$space});
-      line-height: calc(#{$height} - #{$space});
-      min-width: calc(#{$height} - #{$space});
+      height: calc(#{$height} - #{$padding});
+      line-height: calc(#{$height} - #{$padding});
+      min-width: calc(#{$height} - #{$padding});
     }
   }
 }
@@ -1053,11 +1057,11 @@
 /* 内部表格高度铺满 */
 .ele-tabs.is-flex-table {
   flex: 1;
-  overflow: auto;
+  overflow: hidden;
 
   & > .el-tabs__content {
     flex: 1;
-    overflow: auto;
+    overflow: hidden;
 
     & > .el-tab-pane {
       height: 100%;
@@ -1066,18 +1070,24 @@
       box-sizing: border-box;
       overflow: auto;
 
-      & > .ele-pro-table {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
+      @include flex-pro-table();
+    }
+  }
+}
 
-        & > .ele-pro-table-view {
-          flex: 1;
-          height: 100%;
-          overflow: hidden;
-        }
-      }
+.ele-tabs.is-flex-auto-table {
+  flex: auto;
+
+  & > .el-tabs__content {
+    flex: auto;
+
+    & > .el-tab-pane {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+
+      @include flex-auto-pro-table();
     }
   }
 }

package/lib/ele-text/index.cjs

@@ -9,8 +9,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag || "div"), {
-        class: vue.normalizeClass([
-          "ele-text",
+        class: vue.normalizeClass(["ele-text", [
           { "is-heading": _ctx.type === "heading" },
           { "is-regular": _ctx.type === "regular" },
           { "is-secondary": _ctx.type === "secondary" },
@@ -33,7 +32,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           { "is-strong": _ctx.strong },
           { "is-italic": _ctx.italic },
           { "is-icon": !!_ctx.icon }
-        ])
+        ]])
       }, {
         default: vue.withCtx(() => [
           _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.iconProps || {})), {