@element-plus/nightly 0.0.20220102 → 0.0.20220106

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

@@ -86,6 +86,14 @@
     var(--el-transition-duration) padding-top ease-in-out,
     var(--el-transition-duration) padding-bottom ease-in-out;
 }
+
+.el-collapse-transition-leave-active,
+.el-collapse-transition-enter-active {
+  transition: var(--el-transition-duration) max-height ease-in-out,
+    var(--el-transition-duration) padding-top ease-in-out,
+    var(--el-transition-duration) padding-bottom ease-in-out;
+}
+
 .horizontal-collapse-transition {
   transition: var(--el-transition-duration) width ease-in-out,
     var(--el-transition-duration) padding-left ease-in-out,

package/theme-chalk/src/dropdown.scss

@@ -165,8 +165,7 @@ $dropdown-menu-padding-vertical: map.merge(
     color: var(--el-text-color-regular);
     cursor: pointer;
     outline: none;
-    &:not(.is-disabled):hover,
-    &:focus {
+    &:not(.is-disabled):focus {
       background-color: var(--el-dropdown-menuItem-hover-fill);
       color: var(--el-dropdown-menuItem-hover-color);
     }

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

@@ -125,9 +125,8 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
   @each $size in (large, small) {
     @include m($size) {
       @include e(wrapper) {
-        &,
-        #{$selector}__input-wrapper {
-          height: map.get($input-height, $size);
+        #{$selector}__combobox-input {
+          height: map.get($input-height, $size) - 6px;
         }
       }
       @include e(caret) {

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

@@ -18,7 +18,6 @@
   background-color: $color-white;
   box-shadow: map.get($dropdown, 'menu-box-shadow');
   box-sizing: border-box;
-  margin: 2px 0;
 
   /** used for dropdown mode */
   @include e(list) {

package/theme-chalk/src/table.scss

@@ -19,6 +19,19 @@
   font-size: 14px;
   color: var(--el-table-text-color);
 
+  @include e(inner-wrapper) {
+    position: relative;
+    // 表格底部伪 border，总是有的
+    &::before {
+      @include extend-rule(border-pseudo);
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+      z-index: 3;
+    }
+  }
+
   // when data is empty
   @include e(empty-block) {
     min-height: 60px;
@@ -102,7 +115,7 @@
 
   @include m(scrollable-y) {
     .#{$namespace}-table__body-wrapper {
-      overflow-y: auto;
+      overflow-y: scroll;
     }
   }
 
@@ -125,7 +138,7 @@
     vertical-align: middle;
     position: relative;
     text-align: left;
-
+    z-index: 1;
     @include when(center) {
       text-align: center;
     }
@@ -193,7 +206,6 @@
   }
 
   th.#{$namespace}-table__cell {
-    overflow: hidden;
     user-select: none;
     background-color: var(--el-table-header-bg-color);
 
@@ -233,7 +245,19 @@
 
   // 拥有多级表头
   @include m((group, border)) {
-    border: var(--el-table-border);
+    @include e((inner-wrapper, footer-wrapper)) {
+      tr:first-child {
+        td,
+        th {
+          &:first-child {
+            border-left: var(--el-table-border);
+          }
+        }
+      }
+    }
+    @include e((footer-wrapper)) {
+      border-top: var(--el-table-border);
+    }
 
     @include share-rule(border-pseudo) {
       content: '';
@@ -241,30 +265,56 @@
       background-color: var(--el-table-border-color);
       z-index: 1;
     }
+  }
+
+  // table--border
+  @include m(border) {
+    @include e(inner-wrapper) {
+      &::after {
+        @include extend-rule(border-pseudo);
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 1px;
+        z-index: 3;
+      }
+    }
+
+    &::before {
+      @include extend-rule(border-pseudo);
+      top: -1px;
+      left: 0;
+      width: 1px;
+      height: 100%;
+      z-index: 3;
+    }
 
-    // 表格右部伪 border
     &::after {
       @include extend-rule(border-pseudo);
-      top: 0;
+      top: -1px;
       right: 0;
       width: 1px;
       height: 100%;
+      z-index: 3;
     }
-  }
 
-  // 表格底部伪 border，总是有的
-  &::before {
-    @include extend-rule(border-pseudo);
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px;
-  }
+    @include e(inner-wrapper) {
+      border-right: none;
+      border-bottom: none;
+    }
 
-  // table--border
-  @include m(border) {
-    border-right: none;
-    border-bottom: none;
+    @include e(footer-wrapper) {
+      position: relative;
+    }
+
+    @include e(footer-wrapper) {
+      margin-top: -2px;
+      td.#{$namespace}-table__cell {
+        &.last {
+          border-right: none;
+        }
+      }
+    }
 
     // fix: #1013
     // &.#{$namespace}-loading-parent--relative {
@@ -273,6 +323,9 @@
 
     .#{$namespace}-table__cell {
       border-right: var(--el-table-border);
+      &:first-child .cell {
+        padding-left: 10px;
+      }
     }
 
     th.#{$namespace}-table__cell.gutter:last-of-type {
@@ -289,83 +342,50 @@
     visibility: hidden;
   }
 
-  @include e((fixed, fixed-right)) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    box-shadow: var(--el-table-fixed-box-shadow);
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 1px;
-      background-color: var(--el-border-color-lighter);
-      z-index: 4;
-    }
-  }
-
-  @include e(fixed-right-patch) {
-    position: absolute;
-    top: -1px;
-    right: 0;
-    background-color: var(--el-table-header-bg-color);
-    border-bottom: var(--el-table-border);
-  }
-
-  @include e(fixed-right) {
-    top: 0;
-    left: auto;
-    right: 0;
-
-    .#{$namespace}-table__fixed-header-wrapper,
-    .#{$namespace}-table__fixed-body-wrapper,
-    .#{$namespace}-table__fixed-footer-wrapper {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  @include e(fixed-header-wrapper) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 3;
-  }
-
-  @include e(fixed-footer-wrapper) {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 3;
-
-    & tbody td.#{$namespace}-table__cell {
-      border-top: var(--el-table-border);
-      background-color: var(--el-table-row-hover-bg-color);
-      color: var(--el-table-text-color);
-    }
-  }
-
-  @include e(fixed-body-wrapper) {
-    position: absolute;
-    left: 0;
-    top: 37px;
-    overflow: hidden;
-    z-index: 3;
-  }
-
   @include e((header-wrapper, body-wrapper, footer-wrapper)) {
     width: 100%;
-  }
-
-  @include e(footer-wrapper) {
-    margin-top: -1px;
-    td.#{$namespace}-table__cell {
-      border-top: var(--el-table-border);
+    tr {
+      td,
+      th {
+        &.#{$namespace}-table-fixed-column--left,
+        &.#{$namespace}-table-fixed-column--right {
+          position: sticky !important;
+          z-index: 2;
+          background: #fff;
+          &.is-last-column,
+          &.is-first-column {
+            &::before {
+              content: '';
+              position: absolute;
+              top: 0px;
+              width: 10px;
+              bottom: -1px;
+              overflow-x: hidden;
+              overflow-y: hidden;
+              box-shadow: inset -10px 0 10px -10px rgb(0 0 0 / 15%);
+              touch-action: none;
+              pointer-events: none;
+            }
+          }
+          &.is-first-column {
+            &::before {
+              left: -10px;
+            }
+          }
+          &.is-last-column {
+            &::before {
+              right: -10px;
+              box-shadow: inset 10px 0 10px -10px rgb(0 0 0 / 15%);
+            }
+          }
+        }
+        &.#{$namespace}-table__fixed-right-patch {
+          position: sticky !important;
+          z-index: 2;
+          background: #fff;
+          right: 0;
+        }
+      }
     }
   }
 
@@ -383,44 +403,57 @@
     }
   }
 
-  @include e(body-wrapper) {
-    overflow: hidden;
-    position: relative;
-
-    @include when(scrolling-none) {
-      ~ .#{$namespace}-table__fixed,
-      ~ .#{$namespace}-table__fixed-right {
+  @include when(scrolling-left) {
+    .#{$namespace}-table-fixed-column--left.is-last-column {
+      &::before {
         box-shadow: none;
       }
     }
-
-    @include when(scrolling-left) {
-      ~ .#{$namespace}-table__fixed {
-        box-shadow: none;
+    &.#{$namespace}-table--border {
+      .#{$namespace}-table-fixed-column--left {
+        &.is-last-column {
+          &.#{$namespace}-table__cell {
+            border-right: var(--el-table-border);
+          }
+        }
       }
     }
+  }
 
-    @include when(scrolling-right) {
-      ~ .#{$namespace}-table__fixed-right {
+  @include when(scrolling-right) {
+    .#{$namespace}-table-fixed-column--right.is-first-column {
+      &::before {
         box-shadow: none;
       }
     }
+    .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
+      border-right: none;
+    }
+  }
 
-    .#{$namespace}-table--border {
-      @include when(scrolling-right) {
-        ~ .#{$namespace}-table__fixed-right {
-          border-left: var(--el-table-border);
-        }
-      }
+  @include when(scrolling-middle) {
+    .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
+      border-right: none;
+    }
+  }
 
-      @include when(scrolling-left) {
-        ~ .#{$namespace}-table__fixed {
-          border-right: var(--el-table-border);
+  @include when(scrolling-none) {
+    .#{$namespace}-table-fixed-column--left,
+    .#{$namespace}-table-fixed-column--right {
+      &.is-first-column,
+      &.is-last-column {
+        &::before {
+          box-shadow: none;
         }
       }
     }
   }
 
+  @include e(body-wrapper) {
+    overflow: hidden;
+    position: relative;
+  }
+
   .caret-wrapper {
     display: inline-flex;
     flex-direction: column;
@@ -519,6 +552,33 @@
     }
   }
 
+  @include e(border-left-patch) {
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+    z-index: 3;
+    position: absolute;
+    background-color: var(--el-table-border-color);
+  }
+
+  @include e(border-bottom-patch) {
+    left: 0;
+    height: 1px;
+    z-index: 3;
+    position: absolute;
+    background-color: var(--el-table-border-color);
+  }
+
+  @include e(border-right-patch) {
+    top: 0;
+    height: 100%;
+    width: 1px;
+    z-index: 3;
+    position: absolute;
+    background-color: var(--el-table-border-color);
+  }
+
   @include m(enable-row-transition) {
     .#{$namespace}-table__body td.#{$namespace}-table__cell {
       transition: background-color 0.25s ease;
@@ -531,14 +591,6 @@
     }
   }
 
-  @include m(fluid-height) {
-    .#{$namespace}-table__fixed,
-    .#{$namespace}-table__fixed-right {
-      bottom: 0;
-      overflow: hidden;
-    }
-  }
-
   [class*='#{$namespace}-table__row--level'] {
     .#{$namespace}-table__expand-icon {
       display: inline-block;