amis-ui 2.0.2 → 2.2.0

package/scss/components/_table.scss

@@ -74,7 +74,16 @@
     background: var(--Table-bg);
     z-index: -1;
     opacity: 0;
-    box-shadow: var(--Table-fixedTop-boxShadow);
+
+    &-shadow {
+      position: absolute;
+      box-shadow: var(--Table-fixedTop-boxShadow);
+      z-index: -1;
+      height: 10px;
+      margin-top: -10px;
+      background-color: transparent;
+      opacity: 0;
+    }
 
     // box-sizing: content-box;
     // padding: var(--gap-base) var(--gap-base) 0 var(--gap-base);
@@ -84,7 +93,8 @@
     //   box-sizing: border-box;
     // }
 
-    &.in {
+    &.in,
+    &.in + .#{$ns}Table-fixedTop-shadow {
       position: fixed;
       opacity: 1;
       z-index: $zindex-affix;
@@ -154,6 +164,7 @@
   &-searchableForm {
     background: var(--Table-searchableForm-backgroundColor);
     border-radius: var(--Table-searchableForm-borderRadius);
+    margin-bottom: 0;
 
     &-footer {
       padding: var(--Panel-footerPadding);
@@ -161,8 +172,9 @@
     }
 
     &-checkbox {
-      & > div > .#{$ns}CheckboxControl {
-        padding-top: 0;
+      &-inner {
+        /* 消除checkbox自身的padding top */
+        padding-top: 0 !important;
       }
     }
   }
@@ -180,7 +192,7 @@
   &-toolbar {
     @include clearfix();
     display: flex;
-    margin: 0 var(--Table-toolbar-marginX) var(--Table-toolbar-marginY);
+    padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
     flex-wrap: wrap;
 
     .#{$ns}DropDown {
@@ -232,6 +244,7 @@
     user-select: none;
     opacity: 0.5;
     z-index: $zindex-top;
+
     &:hover {
       background: var(--primary);
     }
@@ -265,6 +278,10 @@
       text-align: right;
     }
 
+    & td .#{$ns}SwitchControl {
+      padding-top: 0;
+    }
+
     &--withCombine {
       > thead > tr > th,
       > tbody > tr > td {
@@ -309,13 +326,19 @@
       > th {
         background: var(--Table-thead-bg);
         padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
+        text-align: left;
 
         &:first-child {
-          padding-left: var(--TableCell--edge-paddingX);
+          padding-left: px2rem(12px);
+
+          &.#{$ns}Table-checkCell {
+            padding-left: var(--TableCell--edge-paddingX);
+          }
         }
 
         &:last-child {
-          padding-right: var(--TableCell--edge-paddingX);
+          padding-right: px2rem(12px);
+
           .#{$ns}Table-content-colDragLine {
             // 避免出现横向滚动条
             width: 4px;
@@ -327,6 +350,7 @@
           border-right: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
         }
+
         border-bottom: var(--Table-thead-borderWidth) solid
           var(--Table-thead-borderColor);
 
@@ -345,6 +369,14 @@
       }
     }
 
+    > thead > tr > th:first-child {
+      border-top-left-radius: 4px;
+    }
+
+    > thead > tr > th:last-child {
+      border-top-right-radius: 4px;
+    }
+
     > thead > tr + tr {
       border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
     }
@@ -358,6 +390,7 @@
 
       & + tr {
         border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
+
         > th {
           border-top: var(--Table-thead-borderWidth) solid
             var(--Table-thead-borderColor);
@@ -410,6 +443,14 @@
         }
       }
 
+      &:active {
+        background: transparent;
+      }
+
+      &:hover.#{$ns}Table-placeholder {
+        color: var(--text--muted-color);
+      }
+
       &.is-checked {
         background: var(--Table-onChecked-bg);
         border-color: var(--Table-onChecked-borderColor);
@@ -539,7 +580,6 @@
 
     > thead > tr > th.#{$ns}Table-checkCell,
     > tbody > tr > td.#{$ns}Table-checkCell {
-      border-right: 0;
       width: px2rem(1px);
       padding-right: var(--TableCell-paddingX);
       white-space: nowrap;
@@ -549,6 +589,10 @@
       }
     }
 
+    > tbody > tr > td.#{$ns}Table-checkCell {
+      border-right: 0;
+    }
+
     > thead > tr > th.#{$ns}Table-expandCell,
     > tbody > tr > td.#{$ns}Table-expandCell {
       border-right: 0;
@@ -562,6 +606,7 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+
       > svg {
         vertical-align: middle;
         top: 0;
@@ -653,11 +698,13 @@
     &--default {
       &.is-active {
         color: var(--text--muted-color);
+
         &:hover {
           color: var(--TableCell-searchBtn--onActive-color);
         }
       }
     }
+
     &--up,
     &--down {
       &.is-active {
@@ -675,12 +722,13 @@
       height: 12px;
     }
 
-    &:hover {
-      color: var(--text-color);
-    }
     &.is-active {
       color: var(--TableCell-searchBtn--onActive-color);
     }
+
+    &.is-opened {
+      color: var(--Button--default-onActive-border);
+    }
   }
 
   &Cell-searchPopOver {
@@ -802,6 +850,10 @@
     color: var(--info);
   }
 
+  &-foot {
+    background: var(--Table-thead-bg);
+  }
+
   &-footTable {
     position: relative;
     width: 100%;
@@ -849,10 +901,11 @@
       width: px2rem(10px);
       height: px2rem(10px);
       top: 0;
+      transform: rotate(90deg);
     }
 
     &.is-active > svg {
-      transform: rotate(90deg);
+      transform: rotate(-90deg);
     }
 
     &:hover {
@@ -871,6 +924,7 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+
     > svg {
       vertical-align: -2px;
     }
@@ -895,23 +949,76 @@
 
   &--autoFillHeight {
     margin-bottom: 0;
+
     > .#{$ns}Table-contentWrap {
       > .#{$ns}Table-content table {
         border-top: none; // 不然会导致拖动时顶部露出内容
       }
+
       > .#{$ns}Table-content table thead {
         position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
         top: 0;
         z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
       }
     }
+
     > .#{$ns}Table-fixedTop {
       display: none;
     }
+
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
   }
+
+  &-SFToggler {
+    color: var(--text-color);
+    font-size: var(--Button--sm-fontSize);
+    margin-left: var(--gap-sm);
+    display: inline-flex;
+    cursor: pointer;
+
+    &-arrow {
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      transform: rotate(90deg);
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
+    &.is-expanded {
+      color: var(--Tabs-onActive-color);
+
+      .#{$ns}Table-SFToggler-arrow > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+.#{$ns}InputTable {
+  .#{$ns}Field--quickEditable svg {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-onHover);
+    }
+
+    &:active {
+      color: var(--primary-onActive);
+    }
+  }
 }
 
 .#{$ns}InputTable-toolbar {
@@ -919,6 +1026,11 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
+
+  .#{$ns}Button {
+    border: none;
+    color: var(--Button--link-color);
+  }
 }
 
 .#{$ns}InputTable-pager {

package/scss/components/{_table-v2.scss → _table2.scss}

@@ -1,4 +1,4 @@
-.#{$ns}Table-v2 {
+.#{$ns}Table2 {
   position: relative;
   border-radius: var(--Table-borderRadius);
 

package/scss/components/_tabs.scss

@@ -144,9 +144,17 @@
         outline: none;
       }
 
+      &:hover .#{$ns}Tabs-link-close {
+        width: var(--Tabs-close-size);
+        margin-left: var(--Tabs-close-margin);
+      }
+
       .#{$ns}Tabs-link-close {
-        margin: var(--Tabs-close-marginTop) 0 0 var(--Tabs-close-margin);
+        width: 0;
+        margin: var(--Tabs-close-marginTop) 0 0;
         fill: var(--Tabs-gray-color);
+        transition: all var(--Tabs-animation-duration) linear;
+        overflow: hidden;
         cursor: pointer;
 
         .#{$ns}Tabs-link-close-icon {
@@ -170,6 +178,20 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+
+        > .#{$ns}Icon {
+          margin-right: var(--Tabs-icon-gap);
+          vertical-align: unset;
+        }
+
+        > img.#{$ns}Icon {
+          position: relative;
+          top: 0.125em;
+        }
+      }
+
+      > a.#{$ns}Tabs-togglor {
+        display: flex;
       }
 
       > .#{$ns}Combo-toolbarBtn {
@@ -212,6 +234,45 @@
     }
   }
 
+  .#{$ns}Tabs-togglor {
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    cursor: pointer;
+
+    &-arrow {
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      transform: rotate(90deg);
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
+    &.is-opened {
+      color: var(--Tabs-onActive-color);
+
+      .#{$ns}Tabs-togglor-arrow > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-PopOver.#{$ns}PopOver {
+    border: 0;
+    border-radius: 0;
+  }
+
   &-content {
     background: var(--Tabs-content-bg);
     border-style: solid;
@@ -236,8 +297,17 @@
 
   &--line {
     > .#{$ns}Tabs-linksContainer-wrapper {
-      border-bottom: var(--Tabs-borderWidth) solid
-        var(--Tabs--simple-split-color);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        border-bottom: var(--Tabs-borderWidth) solid
+          var(--Tabs--simple-split-color);
+      }
 
       &--toolbar {
         .#{$ns}Tabs-link {
@@ -292,6 +362,11 @@
           .#{$ns}Tabs-link-close {
             fill: var(--primary);
           }
+
+          > a:first-child:hover:active {
+            color: #144bcc;
+            border-color: #144bcc;
+          }
         }
 
         &:last-child {
@@ -676,6 +751,8 @@
             font-size: var(--Tabs--sidebar-iconSize);
             height: var(--Tabs--sidebar-iconSize);
             margin-bottom: var(--Tabs--sidebar-iconMargin);
+            margin-right: 0;
+            top: 0;
           }
         }
         &.is-active > a:first-child,
@@ -754,7 +831,7 @@
           }
         }
 
-        &:after {
+        &:not(:last-child):after {
           content: '';
           width: 1px;
           height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
@@ -852,7 +929,6 @@
             }
 
             & > .#{$ns}Tabs-link-close {
-              padding-top: var(--Tabs--simple-split-width);
               cursor: pointer;
             }
 
@@ -868,6 +944,11 @@
                 color: var(--Tabs--line-onHover-color);
                 border: none;
               }
+
+              > a:first-child:hover:active {
+                color: #144bcc;
+                border-color: #144bcc;
+              }
             }
 
             &:not(.is-disabled):hover .#{$ns}Tabs-link-close {
@@ -987,6 +1068,11 @@
             > a:first-child:focus {
               color: var(--Tabs--line-onHover-color);
             }
+
+            > a:first-child:hover:active {
+              color: #144bcc;
+              border-color: #144bcc;
+            }
           }
 
           &:not(.is-disabled):hover .#{$ns}Tabs-link-close {

package/scss/components/_timeline.scss

@@ -24,6 +24,9 @@
         left: var(--TimelineItem--left-line-left);
         top: var(--TimelineItem--left-line-top);
         background-color: var(--TimelineItem--line-bg);
+        &-icon {
+          left: var(--TimelineItem--icon-left-line-left);
+        }
       }
 
       .#{$ns}TimelineItem-round {
@@ -72,9 +75,16 @@
       }
 
       .#{$ns}TimelineItem-title {
+        display: flex;
         color: var(--TimelineItem--text-primary-color);
         font-size: var(--Timeline--font-size);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+        .#{$ns}PlainField {
+          padding-right: var(--TimelineItem-custem-time-padding-right);
+        }
+        .#{$ns}Button {
+          margin-left: var(--TimelineItem-custem-button-margin-left);
+        }
       }
 
       .#{$ns}TimelineItem-detail {
@@ -98,6 +108,7 @@
 
         .#{$ns}TimelineItem-detail-visible {
           display: block;
+          border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
           font-size: var(--Timeline--font-size);
           padding: var(--TimelineItem-detail-visible-padding);
@@ -155,7 +166,7 @@
         position: absolute;
         height: var(--TimelineItem--left-line-width);
         width: calc(100% - var(--TimelineItem--left-line-left));
-        left:  var(--TimelineItem--left-line-top);
+        left:  var(--TimelineItem--horizontal-left-line-top);
         top: var(--TimelineItem--left-line-left);
         background-color: var(--TimelineItem--line-bg);
       }
@@ -195,6 +206,7 @@
       }
     }
     &-content {
+      margin-top: var(--Timeline-horizontal-content-margin-top);
       padding-bottom: var(--TimelineItem--content-padding-bottom);
       margin-left: var(--TimelineItem--content-margin-left);
 
@@ -208,6 +220,7 @@
         color: var(--TimelineItem--text-primary-color);
         font-size: var(--Timeline--font-size);
         margin-bottom: var(--TimelineItem--content-title-margin-bottom);
+       
       }
 
       .#{$ns}TimelineItem-detail {
@@ -231,6 +244,7 @@
 
         .#{$ns}TimelineItem-detail-visible {
           display: block;
+          border-radius: var(--Timeline-visible-border-radius);
           max-width: var(--TimelineItem-detail-visible-max-width);
           font-size: var(--Timeline--font-size);
           padding: var(--TimelineItem-detail-visible-padding);

package/scss/components/form/_checks.scss

@@ -109,8 +109,8 @@
 
     &.#{$ns}Checkbox {
       &:hover {
-        & > i:before {
-          background: var(--Button--primary-onHover-bg);
+        & > input + i {
+          border-color: var(--Button--primary-onHover-bg);
         }
       }
 
@@ -130,6 +130,7 @@
     &:hover {
       input:checked + i {
         background: var(--Button--primary-onHover-bg);
+        border-color: transparent;
 
         &:before {
           background: var(--Button--primary-onHover-bg);
@@ -253,6 +254,10 @@
     &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
       border-color: var(--Checkbox-onHover-color);
+      box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
+      &:first-child {
+        box-shadow: none;
+      }
     }
 
     &:hover {
@@ -333,14 +338,20 @@
   &--button--checked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--button {
     border-color: var(--Checkbox-onHover-color);
     color: var(--Checkbox-onHover-color);
+    box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color);
+    &:first-child {
+      box-shadow: none;
+    }
 
     &:hover {
       border-color: var(--menu-active-color);
       color: var(--menu-active-color);
+      box-shadow: -1px 0 0 0 var(--menu-active-color);
     }
     &:active {
       border-color: var(--Switch-checked-onHover-bgColor);
       color: var(--Switch-checked-onHover-bgColor);
+      box-shadow: -1px 0 0 0 var(--Switch-checked-onHover-bgColor);
     }
   }
   &--button--disabled--unchecked.#{$ns}Checkbox--checkbox {

package/scss/components/form/_date-range.scss

@@ -4,7 +4,7 @@
   flex-wrap: nowrap;
   border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
   font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: 0 var(--DatePicker-paddingX);
   height: var(--DatePicker-height);
   outline: none;
   border-radius: var(--DatePicker-borderRadius);
@@ -17,8 +17,6 @@
   }
 
   &:not(.is-disabled) {
-    cursor: pointer;
-
     &:hover {
       background: var(--DatePicker-onHover-bg);
       border-color: var(--DatePicker-onHover-borderColor);
@@ -31,29 +29,43 @@
         display: none;
       }
     }
-  }
 
-  &.is-focused {
-    border-color: var(--DatePicker-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    &.is-focused {
+      border-color: var(--DatePicker-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+    }
   }
 
   .#{$ns}DateRangePicker-input {
     border: none;
-    border-bottom: 1px solid transparent;
+    border-bottom: 2px solid transparent;
     outline: none;
     padding: 0;
     background: 0;
     flex: 1;
     width: 50%;
+    line-height: px2rem(30px);
+
+    &::placeholder {
+      color: #{$G6};
+    }
   }
 
   .#{$ns}DateRangePicker-input.isActive {
-    border-bottom: 1px solid var(--DatePicker-onFocused-borderColor);
+    border-bottom: var(--DateRangePicker-activeCursor-height) solid
+      var(--DateRangePicker-activeCursor-color);
   }
 
   .#{$ns}DateRangePicker-input-separator {
     margin: 0 var(--gap-sm);
+    display: flex;
+    align-items: center;
+
+    &-line {
+      width: var(--gap-sm);
+      height: 1px;
+      background: #b8babf;
+    }
   }
 
   &.is-disabled {
@@ -87,6 +99,19 @@
     @include input-clear();
     line-height: 1;
   }
+
+  &-activeCursor {
+    bottom: 0;
+    height: var(--DateRangePicker-activeCursor-height);
+    background: var(--DateRangePicker-activeCursor-color);
+    opacity: 0;
+    transition: all var(--animation-duration) ease-in-out;
+    pointer-events: none;
+
+    &.isFocused {
+      opacity: 1;
+    }
+  }
 }
 
 .#{$ns}DateRangePicker-wrap {
@@ -95,10 +120,14 @@
   padding: 0;
 }
 
+.#{$ns}DateRangePicker-picker-wrap {
+  display: flex;
+}
+
 .#{$ns}DateRangePicker-start,
 .#{$ns}DateRangePicker-end {
-  display: inline-block;
-  vertical-align: top;
+  display: flex;
+  flex: 1;
 
   .rdtPicker {
     padding: 0;