element-plus 2.1.8 → 2.1.11

package/theme-chalk/src/radio-button.scss

@@ -94,10 +94,7 @@
 
     &:disabled {
       & + .#{$namespace}-radio-button__inner {
-        color: var(
-          --el-button-disabled-text-color,
-          map.get($button, 'disabled-text-color')
-        );
+        color: getCssVar('disabled-text-color');
         cursor: not-allowed;
         background-image: none;
         background-color: var(

package/theme-chalk/src/radio.scss

@@ -32,7 +32,6 @@ $radio-font-size: map.merge(
   user-select: none;
   margin-right: 32px;
   height: map.get($radio-height, 'default');
-  user-select: none;
 
   @each $size in (large, small) {
     &.#{$namespace}-radio--#{$size} {

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('fill-color', 'blank');
     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,213 @@
+@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('footer') {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+  }
+
+  @include e('empty') {
+    position: absolute;
+    left: 0;
+  }
+
+  @include e('overlay') {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+  }
+
+  @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 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);
+        }
+      }
+    }
+  }
+
+  &:not(.is-dynamic) {
+    @include e('cell-text') {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

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 {

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;
     }
   }
@@ -209,7 +209,7 @@
         }
       }
       &.is-active {
-        border-bottom-color: $color-white;
+        border-bottom-color: getCssVar('bg-color');
 
         &.is-closable {
           padding-left: 20px;
@@ -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,7 +61,15 @@ $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');
   }
@@ -83,7 +78,7 @@ $tag-icon-span-gap: map.merge(
   }
 
   .#{$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);
@@ -126,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/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.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) {

package/theme-chalk/src/upload.scss

@@ -2,6 +2,23 @@
 @use 'mixins/utils' as *;
 @use 'common/var' as *;
 
+@mixin upload-success($color: null) {
+  right: -15px;
+  top: -6px;
+  width: 40px;
+  height: 24px;
+  background: var(--el-color-success);
+  text-align: center;
+  transform: rotate(45deg);
+
+  i {
+    font-size: 12px;
+    margin-top: 11px;
+    transform: rotate(-45deg);
+    color: $color;
+  }
+}
+
 @include b(upload) {
   @include utils-inline-flex-center;
 
@@ -192,7 +209,7 @@
       display: inline-flex;
       justify-content: center;
       flex-direction: column;
-      width: 100%;
+      width: calc(100% - 30px);
       margin-left: 4px;
     }
 
@@ -247,10 +264,7 @@
 
     padding: 0 4px;
 
-    overflow: hidden;
-    text-overflow: ellipsis;
     transition: color var(--el-transition-duration);
-    white-space: nowrap;
     font-size: var(--el-font-size-base);
 
     .#{$namespace}-icon {
@@ -259,6 +273,12 @@
     }
   }
 
+  @include e(item-file-name) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   @include e(item-status-label) {
     position: absolute;
     right: 5px;
@@ -297,7 +317,7 @@
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       width: getCssVar('upload-list', 'picture-card', 'size');
@@ -341,20 +361,7 @@
     }
 
     .#{bem('upload-list', 'item-status-label')} {
-      position: absolute;
-      right: -15px;
-      top: -6px;
-      width: 40px;
-      height: 24px;
-      background: var(--el-color-success);
-      text-align: center;
-      transform: rotate(45deg);
-
-      i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg);
-      }
+      @include upload-success();
     }
 
     .#{bem('upload-list', 'item-actions')} {
@@ -416,7 +423,7 @@
       overflow: hidden;
       z-index: 0;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       margin-top: 10px;
@@ -510,21 +517,7 @@
   }
 
   @include e(label) {
-    position: absolute;
-    right: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    background: var(--el-color-success);
-    text-align: center;
-    transform: rotate(45deg);
-
-    i {
-      font-size: 12px;
-      margin-top: 11px;
-      transform: rotate(-45deg);
-      color: #fff;
-    }
+    @include upload-success(#fff);
   }
 
   @include e(progress) {