element-plus 2.1.7 → 2.1.10

package/theme-chalk/src/result.scss

@@ -2,8 +2,6 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
-$types: success, warning, danger, info, error;
-
 @include b(result) {
   @include set-component-css-var('result', $result);
 }

package/theme-chalk/src/select/common.scss

@@ -1,6 +1,6 @@
 @use '../mixins/mixins' as *;
 
-// same style in select & selevt-v2
+// same style in select & select-v2
 @mixin select-common($name) {
   .#{$namespace}-#{$name}__tags-text {
     text-overflow: ellipsis;

package/theme-chalk/src/select-v2.scss

@@ -257,7 +257,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
   }
 
   @include e(wrapper) {
-    background-color: #fff;
+    background-color: getCssVar('fill-color', 'blank');
     border: 1px solid getCssVar('border-color');
     border-radius: var(--el-border-radius-base);
     position: relative;

package/theme-chalk/src/select.scss

@@ -7,6 +7,14 @@
 @use './select-dropdown.scss';
 @use './select/common.scss' as *;
 
+@mixin select-tag-normal {
+  white-space: normal;
+  z-index: var(--el-index-normal);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 @include b(select) {
   @include set-component-css-var('select', $select);
 }
@@ -46,18 +54,17 @@
   }
 
   &:hover:not(.#{$namespace}-select--disabled) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset;
     }
   }
 
   @include select-common(select);
 
-  .#{$namespace}-input__inner {
+  .#{$namespace}-input__wrapper {
     cursor: pointer;
-    display: inline-flex;
 
-    &:focus {
+    @include when(focus) {
       @include inset-input-border(
         var(--el-select-input-focus-border-color),
         true
@@ -65,6 +72,10 @@
     }
   }
 
+  .#{$namespace}-input__inner {
+    cursor: pointer;
+  }
+
   .#{$namespace}-input {
     display: flex;
 
@@ -100,19 +111,22 @@
     }
 
     &.is-disabled {
-      & .#{$namespace}-input__inner {
+      & .#{$namespace}-input__wrapper {
         cursor: not-allowed;
 
         &:hover {
           @include inset-input-border(var(--el-select-disabled-border));
         }
       }
+      & .#{$namespace}-input__inner {
+        cursor: not-allowed;
+      }
       & .#{$namespace}-select__caret {
         cursor: not-allowed;
       }
     }
 
-    &.is-focus .#{$namespace}-input__inner {
+    &.is-focus .#{$namespace}-input__wrapper {
       @include inset-input-border(
         var(--el-select-input-focus-border-color),
         true
@@ -150,21 +164,13 @@
   @include e(tags) {
     position: absolute;
     line-height: normal;
-    white-space: normal;
-    z-index: var(--el-index-normal);
     top: 50%;
     transform: translateY(-50%);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    @include select-tag-normal;
   }
 
   @include e(collapse-tags) {
-    white-space: normal;
-    z-index: var(--el-index-normal);
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    @include select-tag-normal;
   }
 
   @include e(collapse-tag) {

package/theme-chalk/src/step.scss

@@ -62,7 +62,7 @@
     height: 24px;
     font-size: 14px;
     box-sizing: border-box;
-    background: $color-white;
+    background: getCssVar('bg-color', 'overlay');
     transition: 0.15s ease-out;
 
     @include when(text) {

package/theme-chalk/src/table-column.scss

@@ -69,7 +69,7 @@
       }
 
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
       }
     }

package/theme-chalk/src/table-v2.scss

@@ -0,0 +1,189 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@mixin center-flex() {
+  display: flex;
+  align-items: center;
+}
+
+@mixin cell-padding() {
+  padding: 0 8px;
+}
+
+@mixin safe-padding() {
+  padding-inline-end: var(--#{$namespace}-table-scrollbar-size);
+}
+
+@mixin cell-alignment() {
+  @include when('align-center') {
+    justify-content: center;
+    text-align: center;
+  }
+  @include when('align-right') {
+    justify-content: flex-end;
+    text-align: right;
+  }
+}
+
+@mixin table-root() {
+  display: flex;
+  flex-direction: column-reverse;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  background-color: getCssVar('bg', 'color');
+}
+
+@mixin hidden-scrollbar {
+  .#{$namespace}-virtual-scrollbar {
+    opacity: 0;
+  }
+  .#{$namespace}-vl__vertical,
+  .#{$namespace}-vl__horizontal {
+    z-index: -1;
+  }
+}
+
+@include b('table-v2') {
+  @include set-component-css-var('table', $table);
+}
+
+@include b('table-v2') {
+  * {
+    box-sizing: border-box;
+  }
+
+  @include e('root') {
+    position: relative;
+
+    // for showing the scrollbar when mouse is on the root table
+    &:hover {
+      @include e('main') {
+        .#{$namespace}-virtual-scrollbar {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  @include e('main') {
+    @include table-root;
+    left: 0;
+
+    .#{$namespace}-vl__horizontal,
+    .#{$namespace}-vl__vertical {
+      z-index: 2;
+    }
+  }
+
+  @include e('left') {
+    @include table-root;
+    left: 0;
+    box-shadow: 2px 0 4px 0 rgb(0 0 0 / 6%);
+    @include hidden-scrollbar;
+  }
+
+  @include e('right') {
+    @include table-root;
+    right: 0;
+    box-shadow: -2px 0 4px 0 rgb(0 0 0 / 6%);
+    @include hidden-scrollbar;
+
+    @include e('header-row') {
+      @include safe-padding;
+    }
+
+    @include e('row') {
+      @include safe-padding;
+    }
+  }
+
+  @include e('header-wrapper') {
+    overflow: hidden;
+  }
+
+  @include e('header') {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e('header-row') {
+    display: flex;
+    border-bottom: getCssVar('table', 'border');
+
+    @include e('header-cell') {
+      @include center-flex;
+      @include cell-padding;
+      @include cell-alignment;
+      height: 100%;
+      user-select: none;
+      background-color: getCssVar('table-header', 'bg-color');
+      color: getCssVar('table-header', 'text-color');
+      font-weight: bold;
+
+      @include when(sortable) {
+        cursor: pointer;
+      }
+
+      &:hover {
+        .#{$namespace}-icon {
+          display: block;
+        }
+      }
+    }
+
+    @include e('sort-icon') {
+      transition: opacity, display getCssVar('transition-duration', '');
+      opacity: 0.6;
+      display: none;
+
+      @include when(sorting) {
+        display: block;
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e('row') {
+    @include center-flex;
+    border-bottom: getCssVar('table', 'border');
+    transition: background-color getCssVar('transition-duration', '');
+
+    @include when('hovered') {
+      background-color: getCssVar('table-row', 'hover-bg-color');
+    }
+
+    @include e('row-cell') {
+      height: 100%;
+      overflow: hidden;
+      @include center-flex;
+      @include cell-padding;
+
+      @include e('cell-text') {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      @include cell-alignment;
+    }
+
+    @include e('expand-icon') {
+      margin: 0 4px;
+      cursor: pointer;
+      user-select: none;
+
+      svg {
+        transition: transform getCssVar('transition-duration', '');
+      }
+
+      @include when(expanded) {
+        svg {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/table.scss

@@ -345,7 +345,7 @@
         &.#{$namespace}-table-fixed-column--right {
           position: sticky !important;
           z-index: 2;
-          background: #fff;
+          background: getCssVar('bg-color');
           &.is-last-column,
           &.is-first-column {
             &::before {
@@ -383,6 +383,17 @@
     }
   }
 
+  @include e(header-wrapper) {
+    tr {
+      th {
+        &.#{$namespace}-table-fixed-column--left,
+        &.#{$namespace}-table-fixed-column--right {
+          background-color: var(--el-table-header-bg-color);
+        }
+      }
+    }
+  }
+
   @include e((header, body, footer)) {
     table-layout: fixed;
     border-collapse: separate;
@@ -420,6 +431,9 @@
         }
       }
     }
+    th.#{$namespace}-table-fixed-column--left {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include when(scrolling-right) {
@@ -431,6 +445,9 @@
     .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
       border-right: none;
     }
+    th.#{$namespace}-table-fixed-column--right {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include when(scrolling-middle) {
@@ -459,6 +476,11 @@
         }
       }
     }
+
+    th.#{$namespace}-table-fixed-column--left,
+    th.#{$namespace}-table-fixed-column--right {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include e(body-wrapper) {

package/theme-chalk/src/tabs.scss

@@ -152,7 +152,7 @@
     }
 
     @include when(disabled) {
-      color: var(--el-disabled-text-color);
+      color: getCssVar('disabled-text-color');
       cursor: default;
     }
   }
@@ -223,7 +223,7 @@
     }
   }
   @include m(border-card) {
-    background: $color-white;
+    background: getCssVar('bg-color', 'overlay');
     border: 1px solid getCssVar('border-color');
 
     > .#{$namespace}-tabs__content {
@@ -254,7 +254,7 @@
 
       &.is-active {
         color: var(--el-color-primary);
-        background-color: $color-white;
+        background-color: getCssVar('bg-color', 'overlay');
         border-right-color: getCssVar('border-color');
         border-left-color: getCssVar('border-color');
       }
@@ -262,7 +262,7 @@
         color: var(--el-color-primary);
       }
       &.is-disabled {
-        color: var(--el-disabled-text-color);
+        color: getCssVar('disabled-text-color');
       }
     }
 
@@ -314,7 +314,7 @@
         border: 1px solid transparent;
       }
       .#{$namespace}-tabs__item.is-bottom {
-        margin: 0 -1px -1px -1px;
+        margin: 0 -1px -1px;
       }
     }
   }

package/theme-chalk/src/tag.scss

@@ -21,19 +21,14 @@ $tag-icon-span-gap: map.merge(
 );
 
 @function returnVarList($var, $type: 'primary') {
-  $list: ('color', 'white');
+  $list: ('fill-color', 'blank');
   @if $var != false {
     $list: ('color', $type, $var);
   }
   @return $list;
 }
 // false mean --el-color-white
-@mixin genTheme(
-  $backgroundColorWeight,
-  $borderColorWeight,
-  $textColorWeight,
-  $hoverColorWeight
-) {
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
   @include css-var-from-global(
     ('tag', 'bg-color'),
     returnVarList($backgroundColorWeight)
@@ -42,17 +37,13 @@ $tag-icon-span-gap: map.merge(
     ('tag', 'border-color'),
     returnVarList($borderColorWeight)
   );
-  @include css-var-from-global(
-    ('tag', 'text-color'),
-    returnVarList($textColorWeight)
-  );
   @include css-var-from-global(
     ('tag', 'hover-color'),
     returnVarList($hoverColorWeight)
   );
 
   @each $type in $types {
-    &.#{$namespace}-tag--#{$type} {
+    &.#{bem('tag', '', $type)} {
       @include css-var-from-global(
         ('tag', 'bg-color'),
         returnVarList($backgroundColorWeight, $type)
@@ -61,10 +52,6 @@ $tag-icon-span-gap: map.merge(
         ('tag', 'border-color'),
         returnVarList($borderColorWeight, $type)
       );
-      @include css-var-from-global(
-        ('tag', 'text-color'),
-        returnVarList($textColorWeight, $type)
-      );
       @include css-var-from-global(
         ('tag', 'hover-color'),
         returnVarList($hoverColorWeight, $type)
@@ -74,13 +61,24 @@ $tag-icon-span-gap: map.merge(
 }
 
 @include b(tag) {
-  @include genTheme('light-9', 'light-8', '', '');
+  @include genTheme('light-9', 'light-8', '');
+
+  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include css-var-from-global(('tag', 'text-color'), ('color', $type));
+    }
+  }
+
   @include when(hit) {
     border-color: getCssVar('color', 'primary');
   }
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
 
   .#{$namespace}-tag__close {
-    color: var(--el-tag-text-color);
+    color: getCssVar('tag', 'text-color');
     &:hover {
       color: var(--el-color-white);
       background-color: var(--el-tag-hover-color);
@@ -123,11 +121,20 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(dark) {
-    @include genTheme('', '', false, 'light-3');
+    @include genTheme('', '', 'light-3');
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+    @each $type in $types {
+      &.#{bem('tag', '', $type)} {
+        @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+      }
+    }
   }
 
   @include m(plain) {
-    @include genTheme(false, 'light-5', '', '');
+    @include genTheme(false, 'light-5', '');
+    @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
   }
 
   &.is-closable {

package/theme-chalk/src/tooltip-v2.scss

@@ -0,0 +1,91 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tooltip-v2) {
+  @include e(content) {
+    --el-tooltip-v2-padding: 5px 10px;
+    --el-tooltip-v2-border-radius: 4px;
+    --#{$namespace}-tooltip-v2-border-color: var(--el-border-color);
+
+    border-radius: var(--el-tooltip-v2-border-radius);
+    color: var(--el-color-black);
+    background-color: var(--el-color-white);
+    padding: var(--el-tooltip-v2-padding);
+    border: 1px solid var(--el-border-color);
+
+    $content-selector: &;
+
+    $sides: (
+      'top': 'bottom',
+      'bottom': 'top',
+      'left': 'right',
+      'right': 'left',
+    );
+
+    @include e(arrow) {
+      position: absolute;
+      color: var(--el-color-white);
+      width: var(--#{$namespace}-tooltip-v2-arrow-width);
+      height: var(--#{$namespace}-tooltip-v2-arrow-height);
+      pointer-events: none;
+      left: var(--#{$namespace}-tooltip-v2-arrow-x);
+      top: var(--#{$namespace}-tooltip-v2-arrow-y);
+
+      &::before {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      &::after {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      @each $side, $opposite in $sides {
+        #{$content-selector}[data-side^='#{$side}'] & {
+          #{$opposite}: 0;
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::before {
+          border-#{$side}-color: var(--#{$namespace}-color-white);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: calc(100% - 1px);
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::after {
+          border-#{$side}-color: var(--#{$namespace}-border-color);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: 100%;
+          z-index: -1;
+        }
+      }
+    }
+
+    &.is-dark {
+      --#{$namespace}-tooltip-v2-border-color: transparent;
+      background-color: var(--el-color-black);
+      color: var(--el-color-white);
+      border-color: transparent;
+
+      @include e(arrow) {
+        background-color: var(--el-color-black);
+        border-color: transparent;
+      }
+    }
+  }
+}

package/theme-chalk/src/transfer.scss

@@ -39,7 +39,7 @@
 
 @include b(transfer-panel) {
   overflow: hidden;
-  background: var(--el-color-white);
+  background: getCssVar('bg-color', 'overlay');
   display: inline-block;
   text-align: left;
   vertical-align: middle;
@@ -168,7 +168,7 @@
 
   .#{$namespace}-transfer-panel__footer {
     height: var(--el-transfer-panel-footer-height);
-    background: var(--el-color-white);
+    background: getCssVar('bg-color', 'overlay');
     margin: 0;
     padding: 0;
     border: 1px solid var(--el-transfer-border-color);

package/theme-chalk/src/tree-select.scss

@@ -0,0 +1,36 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tree-select) {
+  @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree-select) {
+  @include e(popper) {
+    // padding-left same with select option
+    .#{$namespace}-tree-node__expand-icon {
+      margin-left: 8px;
+    }
+
+    // remove icon when show checkbox
+    .#{$namespace}-tree-node.is-checked
+      > .#{$namespace}-tree-node__content
+      .#{$namespace}-select-dropdown__item.selected::after {
+      content: none;
+    }
+
+    .#{$namespace}-select-dropdown__item {
+      flex: 1;
+      background: transparent !important;
+
+      // padding-left move to `el-tree-node__expand-icon`
+      padding-left: 0;
+
+      // fix: select height > tree node height
+      // https://github.com/yujinpan/el-select-tree/pull/33
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}

package/theme-chalk/src/tree.scss

@@ -10,7 +10,7 @@
 @include b(tree) {
   position: relative;
   cursor: default;
-  background: var(--el-color-white);
+  background: getCssVar('fill-color', 'blank');
   color: var(--el-tree-text-color);
 
   @include e(empty-block) {