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

package/es/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/es/ele-text/index.js

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

package/es/ele-timeline/index.js

@@ -21,7 +21,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return Math.floor(listWidth.value / props.itemWidth) || 1;
     });
     const lineRows = computed(() => {
-      var _a;
       const rows = [];
       const data = props.data || [];
       const colNum = listColNum.value;
@@ -32,15 +31,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           const index = i * colNum + j;
           const itemData = data[index];
           cells.push({
-            key: (itemData == null ? void 0 : itemData.key) ?? `${i}_${j}`,
+            key: itemData?.key ?? `${i}_${j}`,
             data: itemData,
             dataIndex: index,
-            nextDataType: (_a = data[index + 1]) == null ? void 0 : _a.type,
+            nextDataType: data[index + 1]?.type,
             isFirst: itemData && index === 0,
             isLast: itemData && index === data.length - 1
           });
         }
-        const key = i + "_" + cells.map((d) => (d == null ? void 0 : d.key) ?? "").join();
+        const key = `${i}_${cells.map((d) => d?.key ?? "").join()}`;
         rows.push({
           key,
           items: cells,
@@ -55,8 +54,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const observer = new ResizeObserver(() => {
-      const listEl = listRef.value;
-      listWidth.value = (listEl == null ? void 0 : listEl.clientWidth) || 0;
+      requestAnimationFrame(() => {
+        const listEl = listRef.value;
+        listWidth.value = listEl?.clientWidth || 0;
+      });
     });
     onMounted(() => {
       const listEl = listRef.value;
@@ -80,24 +81,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(row.items, (col) => {
               return openBlock(), createElementBlock("div", {
                 key: col.key,
-                class: normalizeClass([
-                  "ele-time-line-item",
+                class: normalizeClass(["ele-time-line-item", [
                   { "is-first": col.isFirst },
                   { "is-last": col.isLast },
                   { "is-primary": col.data && col.data.type === "primary" },
                   { "is-danger": col.data && col.data.type === "danger" },
                   { "is-placeholder": !col.data }
-                ]),
+                ]]),
                 onClick: (e) => handleItemClick(col.data, e)
               }, [
                 col.data ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                   createElementVNode("div", _hoisted_2, [
                     createElementVNode("div", {
-                      class: normalizeClass([
-                        "ele-time-line-item-line is-start",
+                      class: normalizeClass(["ele-time-line-item-line is-start", [
                         { "is-primary-line": col.data.type === "primary" },
                         { "is-danger-line": col.data.type === "danger" }
-                      ])
+                      ]])
                     }, null, 2),
                     createVNode(unref(ElIcon), mergeProps({ class: "ele-time-line-item-icon-status" }, { ref_for: true }, col.data.iconProps || {}), {
                       default: withCtx(() => [
@@ -119,20 +118,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1040),
                     createElementVNode("div", {
-                      class: normalizeClass([
-                        "ele-time-line-item-line is-end",
+                      class: normalizeClass(["ele-time-line-item-line is-end", [
                         { "is-primary-line": col.nextDataType === "primary" },
                         { "is-danger-line": col.nextDataType === "danger" }
-                      ])
+                      ]])
                     }, null, 2)
                   ]),
                   !col.isLast ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: normalizeClass([
-                      "ele-time-line-item-line-turn",
+                    class: normalizeClass(["ele-time-line-item-line-turn", [
                       { "is-primary-line": col.nextDataType === "primary" },
                       { "is-danger-line": col.nextDataType === "danger" }
-                    ])
+                    ]])
                   }, null, 2)) : createCommentVNode("", true),
                   createElementVNode("div", _hoisted_3, [
                     renderSlot(_ctx.$slots, "itemTitle", {

package/es/ele-toolbar/index.js

@@ -31,11 +31,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          "ele-toolbar",
+        class: normalizeClass(["ele-toolbar", [
           { "is-default": "plain" !== _ctx.theme },
           { "is-plain": "plain" === _ctx.theme }
-        ])
+        ]])
       }, [
         _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("div", {
           key: 0,