amis-ui 3.2.0 → 3.3.0

package/scss/components/_table.scss

@@ -8,82 +8,24 @@
     margin-bottom: var(--gap-sm);
   }
 
-  &-fixedLeft,
-  &-fixedRight {
-    position: absolute;
-    background: var(--Table-bg);
-    z-index: var(--Table-fixed-zIndex);
-    top: auto;
-    box-shadow: none;
-
-    &--autoFillHeight {
-      & > table thead {
-        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
-        top: 0;
-        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
-      }
-    }
-  }
-
-  &-fixedLeft {
-    // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复
-    left: 0;
-    top: -999999px;
-
-    &.in {
-      box-shadow: var(--Table-fixedLeft-boxShadow);
-      top: auto;
-    }
-
-    & > .#{$ns}Table-table {
-      > thead > tr > th:last-child,
-      > tbody > tr > td:last-child {
-        padding-right: var(--TableCell-paddingX);
-      }
-
-      // > thead > tr > th:last-child {
-      //   border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
-      // }
-    }
-  }
-
-  &-fixedRight {
-    // 还是改成默认不显示，footable 展示的时候，配置 固定列还没修复
-    right: 0;
-    top: -999999px;
-
-    &.in {
-      box-shadow: var(--Table-fixedRight-boxShadow);
-      top: auto;
-    }
-
-    & > .#{$ns}Table-table {
-      > thead > tr > th:first-child,
-      > tbody > tr > td:first-child {
-        padding-left: var(--TableCell-paddingX);
-      }
-
-      // > thead > tr > th:first-child {
-      //   border-left: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor);
-      // }
-    }
-  }
-
   &-fixedTop {
-    position: absolute;
+    position: sticky;
     background: var(--Table-bg);
-    z-index: -1;
-    opacity: 0;
+    display: block;
+    opacity: 1;
+    z-index: $zindex-sticky;
 
     &:after {
       content: '';
       position: absolute;
       width: 100%;
       box-shadow: var(--Table-fixedTop-boxShadow);
-      z-index: 10;
-      height: 1px;
-      margin-top: -3px;
+      z-index: 30;
+      height: 30px;
+      top: 100%;
+      pointer-events: none;
       background-color: transparent;
+      margin-top: -2px;
     }
 
     // box-sizing: content-box;
@@ -94,22 +36,11 @@
     //   box-sizing: border-box;
     // }
 
-    &.in {
-      position: fixed;
-      opacity: 1;
-      z-index: $zindex-affix;
-    }
-
-    > .#{$ns}Table-fixedLeft,
-    > .#{$ns}Table-fixedRight {
-      z-index: $zindex-affix + 10;
-      // box-shadow: none;
-      background: transparent;
-    }
+    // &.in {
+    //   // position: fixed;
+    // }
 
     &.is-fakeHide {
-      > .#{$ns}Table-fixedLeft,
-      > .#{$ns}Table-fixedRight,
       > .#{$ns}Table-wrapper {
         visibility: hidden;
         position: absolute;
@@ -236,10 +167,6 @@
     min-height: 0.01%;
     overflow-x: auto;
     transform: translateZ(0);
-
-    th {
-      position: relative;
-    }
   }
 
   &-content-colDragLine {
@@ -251,9 +178,10 @@
     cursor: col-resize;
     user-select: none;
     opacity: 0.5;
-    z-index: $zindex-top;
+    z-index: 15;
 
-    &:hover {
+    &:hover,
+    &.is-resizing {
       background: var(--primary);
     }
   }
@@ -266,12 +194,54 @@
     color: var(--Table-color);
     background: var(--Table-bg);
     border-spacing: 0;
-    border-collapse: collapse;
-    border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
+    border-collapse: separate;
 
     & th,
     & td {
       text-align: left;
+      border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
+
+      &.is-sticky {
+        position: sticky !important;
+        z-index: 20;
+        background: inherit;
+      }
+
+      &.is-sticky-last-left:after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -1px;
+        width: 30px;
+        transform: translateX(100%);
+        transition: box-shadow 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+
+      &.is-sticky-first-right:after {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        left: 0;
+        width: 30px;
+        transform: translateX(-100%);
+        transition: box-shadow 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+
+    &.table-fixed-left .is-sticky-last-left:after {
+      box-shadow: var(--Table-fixedLeft-boxShadow);
+    }
+
+    &.table-fixed-right .is-sticky-first-right:after {
+      box-shadow: var(--Table-fixedRight-boxShadow);
+    }
+
+    & th {
+      position: relative;
     }
 
     & th.text-center,
@@ -290,6 +260,10 @@
       padding-top: 0;
     }
 
+    &--affixHeader thead {
+      visibility: collapse;
+    }
+
     &--withCombine {
       > thead > tr > th,
       > tbody > tr > td {
@@ -304,7 +278,7 @@
 
       // reset
       > tbody > tr {
-        @if $Table-strip-bg !=transparent {
+        @if $Table-strip-bg != transparent {
           &.#{$ns}Table-tr--odd {
             background: transparent;
           }
@@ -331,8 +305,9 @@
     }
 
     > thead > tr {
+      background: var(--Table-thead-bg);
       > th {
-        background: var(--Table-thead-bg);
+        background: inherit;
         padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
         text-align: left;
 
@@ -399,6 +374,7 @@
 
     > tbody > tr {
       position: relative;
+      background: var(--Table-bg);
 
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
@@ -415,6 +391,7 @@
         color: var(--Table-thead-color);
         font-weight: var(--fontWeightNormal);
         white-space: nowrap;
+
         border-right: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
       }
@@ -456,7 +433,7 @@
       }
 
       &:active {
-        background: transparent;
+        background: var(--Table-onHover-bg);
       }
 
       &:hover.#{$ns}Table-placeholder {
@@ -533,51 +510,48 @@
       }
     }
 
+    .#{$ns}Table-divider2 {
+      content: '';
+      position: absolute;
+      height: px2rem(1px);
+      top: 50%;
+      width: px2rem(10px);
+      background: var(--Table-tree-borderColor);
+    }
+
+    .#{$ns}Table-divider3 {
+      position: absolute;
+      width: px2rem(1px);
+      top: 0;
+      bottom: 0;
+      height: 100%;
+      background: var(--Table-tree-borderColor);
+    }
+
     @for $i from 2 through 10 {
       tr.#{$ns}Table-tr--#{$i}th.is-expanded {
         .#{$ns}Table-expandCell:before {
-          right: px2rem(7px) + px2rem(-18px) * ($i - 1);
+          left: px2rem(23px) + px2rem(18px) * ($i - 1);
         }
       }
 
       tr.#{$ns}Table-tr--#{$i}th {
         .#{$ns}Table-expandBtn {
           position: relative;
-          right: -(px2rem(18px)) * ($i - 1);
+          left: px2rem(1px) + (px2rem(18px)) * ($i - 1);
         }
 
-        .#{$ns}Table-expandCell + td {
-          position: relative;
-
-          &::before {
-            content: '';
-            position: absolute;
-            width: px2rem(1px);
-            top: 0;
-            bottom: 0;
-            left: px2rem(-8px) + px2rem(18px) * ($i - 2);
-            height: auto;
-            background: var(--Table-tree-borderColor);
-          }
-
-          &::after {
-            content: '';
-            position: absolute;
-            height: px2rem(1px);
-            top: 50%;
-            left: px2rem(-8px) + px2rem(18px) * ($i - 2);
-            width: px2rem(10px);
-            background: var(--Table-tree-borderColor);
-          }
+        .#{$ns}Table-divider2 {
+          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
+        }
 
-          padding-left: px2rem(18px) * $i - px2rem(18px);
+        .#{$ns}Table-divider3 {
+          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
         }
       }
 
-      tr.#{$ns}Table-tr--#{$i}th.is-expandable {
-        .#{$ns}Table-expandCell + td {
-          padding-left: px2rem(18px) * ($i - 1);
-        }
+      tr.#{$ns}Table-tr--#{$i}th.is-last .#{$ns}Table-divider3 {
+        height: 50%;
       }
 
       tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
@@ -636,7 +610,7 @@
           bottom: 0;
           height: 100%;
           background: var(--Table-tree-borderColor);
-          right: px2rem(7px) + px2rem(-18px) * ($i - 1);
+          left: px2rem(23px) + px2rem(18px) * ($i - 1);
         }
       }
     }
@@ -650,7 +624,7 @@
         width: px2rem(1px);
         top: 50%;
         bottom: 0;
-        right: px2rem(7px);
+        left: px2rem(23px);
         height: auto;
         background: var(--Table-tree-borderColor);
       }
@@ -985,14 +959,10 @@
       > .#{$ns}Table-content table thead {
         position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
         top: 0;
-        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+        z-index: 21; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
       }
     }
 
-    > .#{$ns}Table-fixedTop {
-      display: none;
-    }
-
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
@@ -1005,6 +975,11 @@
     display: inline-flex;
     cursor: pointer;
 
+    &:hover {
+      color: var(--link-color);
+      font-size: var(--Button--sm-fontSize);
+    }
+
     &-arrow {
       width: var(--gap-md);
       text-align: center;

package/scss/components/_timeline.scss

@@ -103,10 +103,11 @@
           color: var(--Timeline-detail-icon-color);
           width: var(--TimelineItem-detail-arrow-width);
           height: var(--TimelineItem-detail-arrow-width);
+          transition: transform var(--animation-duration);
         }
 
         .#{$ns}TimelineItem-detail-arrow-top {
-          transform: rotateX(180deg);
+          transform: rotate(180deg);
         }
 
         .#{$ns}TimelineItem-detail-visible {

package/scss/components/form/_checks.scss

@@ -362,7 +362,9 @@
     margin-right: 0;
     border-radius: calc(var(--Checkbox-borderRadius) * 2);
     min-width: var(--Checkbox-button-min-width);
-
+    > span {
+      line-height: var(--Checkbox-button-line-height);
+    }
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
       border-color: var(--Checkbox-onHover-color);

package/scss/components/form/_date.scss

@@ -487,6 +487,9 @@
     padding: 0 8px;
     border-radius: 2px;
   }
+  .#{$ns}QuickWrapper a {
+    font-size: var(--button-size-sm-fontSize);
+  }
 }
 
 .#{$ns}CalendarInput {

package/scss/components/form/_form.scss

@@ -543,6 +543,10 @@
       margin-bottom: 0;
       font-size: var(--fontSizeLg);
 
+      & + .#{$ns}Form-item-controlBox {
+        max-width: calc(100% - 28%);
+      }
+
       > span {
         line-height: px2rem(32px);
         display: inline-block;
@@ -677,6 +681,9 @@
 
     .#{$ns}Form-item-controlBox {
       flex: 1;
+      max-width: -moz-available;
+      max-width: -webkit-fill-available;
+      max-width: fill-available;
     }
 
     .#{$ns}Form-static {

package/scss/components/form/_list.scss

@@ -167,7 +167,7 @@
         border-style: solid;
         border-width: 0 0 px2rem(2px) px2rem(2px);
         right: px2rem(1px);
-        bottom: var(--gap-xs);
+        bottom: px2rem(6px);
         transform: rotate(-40deg);
       }
     }

package/scss/components/form/_nested-select.scss

@@ -21,10 +21,11 @@
     padding-right: var(--Form-select-icon-rigin);
 
     svg {
-      width: px2rem(12px);
-      height: px2rem(12px);
+      width: px2rem(10px);
+      height: px2rem(10px);
       fill: var(--Form-input-iconColor);
       color: var(--default-icon-color);
+      top: 0;
     }
   }
 

package/scss/components/form/_selection.scss

@@ -189,6 +189,14 @@
 }
 
 .#{$ns}TreeSelection {
+  &.is-scrollable {
+    max-height: px2rem(300px);
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding: var(--gap-xs) 0;
+  }
+
   .#{$ns}Table-expandBtn {
     color: var(--icon-color);
     margin-right: var(--gap-xs);

package/scss/helper/sizing/_width.md

@@ -2,97 +2,108 @@
 title: Width
 ---
 
-| Class       | Properties               |
-| ----------- | ------------------------ |
-| w-px | width: 0.0625rem |
-| w-0 | width: 0 |
-| w-none | width: 0 |
-| w-0\.5 | width: 0.125rem |
-| w-1 | width: 0.25rem |
-| w-1\.5 | width: 0.375rem |
-| w-2 | width: 0.5rem |
-| w-2\.5 | width: 0.625rem |
-| w-3 | width: 0.75rem |
-| w-3\.5 | width: 0.875rem |
-| w-4 | width: 1rem |
-| w-5 | width: 1.25rem |
-| w-6 | width: 1.5rem |
-| w-7 | width: 1.75rem |
-| w-8 | width: 2rem |
-| w-9 | width: 2.25rem |
-| w-10 | width: 2.5rem |
-| w-11 | width: 2.75rem |
-| w-12 | width: 3rem |
-| w-14 | width: 3.5rem |
-| w-16 | width: 4rem |
-| w-18 | width: 4.5rem |
-| w-20 | width: 5rem |
-| w-24 | width: 6rem |
-| w-28 | width: 7rem |
-| w-32 | width: 8rem |
-| w-36 | width: 9rem |
-| w-40 | width: 10rem |
-| w-44 | width: 11rem |
-| w-48 | width: 12rem |
-| w-52 | width: 13rem |
-| w-56 | width: 14rem |
-| w-60 | width: 15rem |
-| w-64 | width: 16rem |
-| w-72 | width: 18rem |
-| w-80 | width: 20rem |
-| w-96 | width: 24rem |
-| w-auto | width: auto |
-| w-1x | width: 1em |
-| w-2x | width: 2em |
-| w-3x | width: 3em |
-| w-1\/2 | width: 50% |
-| w-1\/3 | width: 33.333333% |
-| w-2\/3 | width: 66.666667% |
-| w-1\/4 | width: 25% |
-| w-2\/4 | width: 50% |
-| w-3\/4 | width: 75% |
-| w-1\/5 | width: 20% |
-| w-2\/5 | width: 40% |
-| w-3\/5 | width: 60% |
-| w-4\/5 | width: 80% |
-| w-1\/6 | width: 16.666667% |
-| w-2\/6 | width: 33.333333% |
-| w-3\/6 | width: 50% |
-| w-4\/6 | width: 66.666667% |
-| w-5\/6 | width: 83.333333% |
-| w-1\/12 | width: 8.333333% |
-| w-2\/12 | width: 16.666667% |
-| w-3\/12 | width: 25% |
-| w-4\/12 | width: 33.333333% |
-| w-5\/12 | width: 41.666667% |
-| w-6\/12 | width: 50% |
-| w-7\/12 | width: 58.333333% |
-| w-8\/12 | width: 66.666667% |
-| w-9\/12 | width: 75% |
-| w-10\/12 | width: 83.333333% |
-| w-11\/12 | width: 91.666667% |
-| w-full | width: 100% |
-| w-screen | width: 100vw |
-| w-min | width: min-content |
-| w-max | width: max-content |
-| min-w-0 | min-width: 0px |
-| min-w-full | min-width: 100% |
-| min-w-min | min-width: min-content |
-| min-w-max | min-width: max-content |
-| max-w-none | max-width: none |
-| max-w-0 | max-width: 0rem |
-| max-w-xs | max-width: 20rem |
-| max-w-sm | max-width: 24rem |
-| max-w-md | max-width: 28rem |
-| max-w-lg | max-width: 32rem |
-| max-w-xl | max-width: 36rem |
-| max-w-2xl | max-width: 42rem |
-| max-w-3xl | max-width: 48rem |
-| max-w-4xl | max-width: 56rem |
-| max-w-5xl | max-width: 64rem |
-| max-w-6xl | max-width: 72rem |
-| max-w-7xl | max-width: 80rem |
-| max-w-full | max-width: 100% |
-| max-w-min | max-width: min-content |
-| max-w-max | max-width: max-content |
-| max-w-prose | max-width: 65ch |
+| Class       | Properties             |
+| ----------- | ---------------------- |
+| w-px        | width: 0.0625rem       |
+| w-0         | width: 0               |
+| w-none      | width: 0               |
+| w-0\.5      | width: 0.125rem        |
+| w-1         | width: 0.25rem         |
+| w-1\.5      | width: 0.375rem        |
+| w-2         | width: 0.5rem          |
+| w-2\.5      | width: 0.625rem        |
+| w-3         | width: 0.75rem         |
+| w-3\.5      | width: 0.875rem        |
+| w-4         | width: 1rem            |
+| w-5         | width: 1.25rem         |
+| w-6         | width: 1.5rem          |
+| w-7         | width: 1.75rem         |
+| w-8         | width: 2rem            |
+| w-9         | width: 2.25rem         |
+| w-10        | width: 2.5rem          |
+| w-11        | width: 2.75rem         |
+| w-12        | width: 3rem            |
+| w-14        | width: 3.5rem          |
+| w-16        | width: 4rem            |
+| w-18        | width: 4.5rem          |
+| w-20        | width: 5rem            |
+| w-24        | width: 6rem            |
+| w-28        | width: 7rem            |
+| w-32        | width: 8rem            |
+| w-36        | width: 9rem            |
+| w-40        | width: 10rem           |
+| w-44        | width: 11rem           |
+| w-48        | width: 12rem           |
+| w-52        | width: 13rem           |
+| w-56        | width: 14rem           |
+| w-60        | width: 15rem           |
+| w-64        | width: 16rem           |
+| w-72        | width: 18rem           |
+| w-80        | width: 20rem           |
+| w-96        | width: 24rem           |
+| w-auto      | width: auto            |
+| w-1x        | width: 1em             |
+| w-2x        | width: 2em             |
+| w-3x        | width: 3em             |
+| w-1\/2      | width: 50%             |
+| w-1\/3      | width: 33.333333%      |
+| w-2\/3      | width: 66.666667%      |
+| w-1\/4      | width: 25%             |
+| w-2\/4      | width: 50%             |
+| w-3\/4      | width: 75%             |
+| w-1\/5      | width: 20%             |
+| w-2\/5      | width: 40%             |
+| w-3\/5      | width: 60%             |
+| w-4\/5      | width: 80%             |
+| w-1\/6      | width: 16.666667%      |
+| w-2\/6      | width: 33.333333%      |
+| w-3\/6      | width: 50%             |
+| w-4\/6      | width: 66.666667%      |
+| w-5\/6      | width: 83.333333%      |
+| w-1\/12     | width: 8.333333%       |
+| w-2\/12     | width: 16.666667%      |
+| w-3\/12     | width: 25%             |
+| w-4\/12     | width: 33.333333%      |
+| w-5\/12     | width: 41.666667%      |
+| w-6\/12     | width: 50%             |
+| w-7\/12     | width: 58.333333%      |
+| w-8\/12     | width: 66.666667%      |
+| w-9\/12     | width: 75%             |
+| w-10\/12    | width: 83.333333%      |
+| w-11\/12    | width: 91.666667%      |
+| w-full      | width: 100%            |
+| w-screen    | width: 100vw           |
+| min-w-none  | min-width: none        |
+| min-w-0     | min-width: 0rem        |
+| min-w-xs    | min-width: 20rem       |
+| min-w-sm    | min-width: 24rem       |
+| min-w-md    | min-width: 28rem       |
+| min-w-lg    | min-width: 32rem       |
+| min-w-xl    | min-width: 36rem       |
+| min-w-2xl   | min-width: 42rem       |
+| min-w-3xl   | min-width: 48rem       |
+| min-w-4xl   | min-width: 56rem       |
+| min-w-5xl   | min-width: 64rem       |
+| min-w-6xl   | min-width: 72rem       |
+| min-w-7xl   | min-width: 80rem       |
+| min-w-full  | min-width: 100%        |
+| min-w-min   | min-width: min-content |
+| min-w-max   | min-width: max-content |
+| min-w-prose | min-width: 65ch        |
+| max-w-none  | max-width: none        |
+| max-w-0     | max-width: 0rem        |
+| max-w-xs    | max-width: 20rem       |
+| max-w-sm    | max-width: 24rem       |
+| max-w-md    | max-width: 28rem       |
+| max-w-lg    | max-width: 32rem       |
+| max-w-xl    | max-width: 36rem       |
+| max-w-2xl   | max-width: 42rem       |
+| max-w-3xl   | max-width: 48rem       |
+| max-w-4xl   | max-width: 56rem       |
+| max-w-5xl   | max-width: 64rem       |
+| max-w-6xl   | max-width: 72rem       |
+| max-w-7xl   | max-width: 80rem       |
+| max-w-full  | max-width: 100%        |
+| max-w-min   | max-width: min-content |
+| max-w-max   | max-width: max-content |
+| max-w-prose | max-width: 65ch        |