amis-ui 3.5.2 → 3.6.0

package/scss/components/_tabs.scss

@@ -18,10 +18,10 @@
 
     .#{$ns}Tabs-addable {
       display: flex;
-      margin-left: var(--Tabs-add-margin);
       align-items: center;
-      justify-content: flex-start;
-      padding: var(--Tabs--line-addPadding);
+      margin-left: var(--Tabs-add-margin);
+      margin-bottom: px2rem(3px);
+      padding-bottom: px2rem(8px);
       white-space: nowrap;
       cursor: pointer;
 
@@ -60,16 +60,19 @@
       // }
 
       &-arrow {
-        margin: var(--Tabs--line-addPadding);
         width: 16px;
         height: 100%;
         display: flex;
         align-items: center;
         cursor: pointer;
         box-sizing: content-box;
+        margin-bottom: px2rem(3px);
+        padding-bottom: px2rem(8px);
 
-        .iconfont {
-          font-size: var(--Remark-icon-fontSize);
+        .icon {
+          top: 0;
+          width: var(--Remark-icon-fontSize);
+          height: var(--Remark-icon-fontSize);
         }
         &:hover {
           color: var(--icon-onHover-color);
@@ -77,6 +80,9 @@
 
         &--left {
           padding-right: 16px;
+          svg {
+            transform: rotate(180deg);
+          }
         }
 
         &--right {
@@ -242,6 +248,10 @@
         border-color: var(--Tabs-onActive-borderColor);
         border-bottom-color: transparent;
       }
+
+      &.has-error > a:first-child {
+        color: var(--Tabs-onError-color) !important;
+      }
     }
   }
 
@@ -672,6 +682,7 @@
       .#{$ns}Tabs-addable {
         padding: 0 var(--Tabs--tiled-add-gap);
         margin-left: 0;
+        margin-bottom: 0;
         white-space: nowrap;
         border-style: solid;
         border-color: var(--Tabs-borderColor);
@@ -1112,6 +1123,7 @@
       & > .#{$ns}Tabs-linksContainer {
         > .#{$ns}Tabs-linksContainer-arrow {
           margin-bottom: 0;
+          padding: 0;
         }
 
         > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
@@ -1224,21 +1236,6 @@
       > .#{$ns}Tabs-linksContainer {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
 
-        &.#{$ns}Tabs-linksContainer--overflow
-          > .#{$ns}Tabs-linksContainer-main
-          > .#{$ns}Tabs-links
-          > .#{$ns}Tabs-link {
-          &:first-of-type {
-            border-left-width: 0;
-            border-top-left-radius: 0;
-          }
-
-          &:last-of-type {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-          }
-        }
-
         .#{$ns}Tabs-linksContainer-arrow {
           width: var(--Tabs--strong-arrow-size);
           margin-bottom: 0;
@@ -1250,14 +1247,14 @@
 
           &--left {
             padding-right: 0;
-            border-right-width: 0;
             border-top-left-radius: var(--Tabs-borderRadius);
+            margin-right: px2rem(8px);
           }
 
           &--right {
             padding-left: 0;
-            border-left-width: 0;
-            border-top-right-radius: var(--Tabs-borderRadius);
+            border-top-left-radius: var(--Tabs-borderRadius);
+            margin-left: px2rem(8px);
           }
         }
 

package/scss/components/form/_combo.scss

@@ -258,6 +258,12 @@
         var(--combo-vertical-paddingRight) var(--combo-vertical-paddingBottom)
         var(--combo-vertical-paddingLeft);
       position: relative;
+
+      &.has-error {
+        border-color: var(
+          --Combo--vertical-item--onError-borderColor
+        ) !important; // 因为下面的规则权重更高 &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover
+      }
     }
 
     > .#{$ns}Combo-items > .#{$ns}Combo-item {

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

@@ -257,12 +257,9 @@
 }
 
 .#{$ns}DateRangePicker-popover {
-  margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 .#{$ns}DateRangePicker-popup {

package/scss/components/form/_date.scss

@@ -200,11 +200,9 @@
 
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 // 移动端输入框样式

package/scss/components/form/_excel.scss

@@ -9,11 +9,11 @@
   }
 
   &-container > p {
-    font-size: 1rem;
+    font-size: px2rem(16px);
   }
 
   &-container > em {
-    font-size: 0.8rem;
+    font-size: px2rem(12px);
   }
 
   &-dropzone {

package/scss/components/form/_fieldset.scss

@@ -47,11 +47,11 @@ fieldset.#{$ns}Collapse {
       var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
       var(--fieldSet-legend-paddingLeft);
     cursor: pointer;
-    border-bottom: none !important;
     background: transparent;
     display: inline-flex !important;
     flex-direction: row-reverse;
     justify-content: flex-end;
+    box-sizing: content-box;
     // width: 100%;
 
     .#{$ns}TplField {

package/scss/components/form/_form.scss

@@ -61,6 +61,7 @@
 
   > span {
     position: relative;
+    display: inline-block;
   }
 }
 
@@ -666,6 +667,7 @@
       flex: 1;
       flex-wrap: wrap;
       font-size: var(--fontSizeLg);
+      min-width: 0;
 
       .#{$ns}ColorPicker {
         > input {

package/scss/components/form/_location.scss

@@ -44,7 +44,7 @@
 
     .#{$ns}LocationPicker-toggler {
       svg {
-        top: 0.125rem;
+        top: px2rem(2px);
       }
     }
   }
@@ -132,6 +132,13 @@
   max-width: 100%;
   margin-top: -1px;
   border-color: var(--Form-input-onFocused-borderColor);
+
+  &.#{$ns}PopOver--v-top {
+    margin-top: px2rem(4px);
+  }
+  &.#{$ns}PopOver--v-bottom {
+    margin-bottom: px2rem(4px);
+  }
 }
 
 .#{$ns}MapPicker {
@@ -186,3 +193,14 @@
 .tangram-suggestion-main {
   display: none !important;
 }
+
+@media screen and (min-width: 768px) {
+  .#{$ns}LocationPicker {
+    &-value {
+      margin-right: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@
   .#{$ns}NestedSelect-menu {
     padding-top: px2rem(4px);
     padding-bottom: px2rem(4px);
-    box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
+    box-shadow: var(--Form-select-outer-boxShadow);
   }
 }
 
@@ -18,8 +18,6 @@
 
   &-optionArrowRight {
     display: inline-block;
-    padding-right: var(--Form-select-icon-rigin);
-
     svg {
       width: px2rem(10px);
       height: px2rem(10px);
@@ -29,6 +27,12 @@
     }
   }
 
+  &-optionArrowRight.is-disabled {
+    svg {
+      color: var(--text--muted-color);
+    }
+  }
+
   &-menuOuter {
     display: flex;
   }
@@ -56,19 +60,23 @@
     max-height: px2rem(175px);
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
-    border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+    border-radius: var(--borderRadius);
     box-shadow: var(--Form-select-outer-boxShadow);
     overflow-y: auto;
     overflow-x: hidden;
-
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
     &:not(:first-child) {
       border-left: 0;
+      margin-left: px2rem(4px);
     }
 
     .#{$ns}NestedSelect-option {
       position: relative;
-      padding-left: var(--gap-md);
+      padding: var(--select-base-default-option-paddingTop)
+        var(--select-base-default-option-paddingRight)
+        var(--select-base-default-option-paddingBottom)
+        var(--select-base-default-option-paddingLeft);
       min-height: var(--select-base-default-option-line-height);
       line-height: var(--select-base-default-option-line-height);
       cursor: pointer;
@@ -122,3 +130,8 @@
     height: px2rem(340px);
   }
 }
+
+.#{$ns}NestedSelect-popover {
+  border: none;
+  box-shadow: none;
+}

package/scss/components/form/_picker.scss

@@ -93,6 +93,7 @@
     border-color: var(--Pick-base-top-border-color)
       var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
       var(--Pick-base-left-border-color);
+    overflow: auto;
   }
 
   .#{$ns}Picker-values {
@@ -105,7 +106,7 @@
     padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 
     > input {
-      width: 1rem;
+      width: px2rem(16px);
       display: inline-block;
     }
   }
@@ -143,6 +144,7 @@
     width: var(--Pick-base-icon-size);
     height: var(--Pick-base-icon-size);
     content: var(--Pick-base-icon);
+    display: flex;
   }
 
   &-clear {

package/scss/components/form/_range.scss

@@ -206,10 +206,10 @@
   }
 
   &-track--background {
-    left: 0.5rem;
+    left: px2rem(8px);
     margin-top: calc(-0.5 * var(--InputRange-track-height));
     position: absolute;
-    right: 0.5rem;
+    right: px2rem(8px);
     top: 50%;
   }
 

package/scss/components/form/_rating.scss

@@ -16,11 +16,14 @@
   }
 
   &-star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--Rating-star-size);
+    height: var(--Rating-star-size);
     position: relative;
-    margin-right: var(--Rating-star-margin);
     overflow: hidden;
-    display: block;
-    font-size: var(--Rating-star-size);
+    font-size: var(--Rating-star-icon-size);
     line-height: 1;
     cursor: pointer;
     user-select: none;
@@ -71,7 +74,18 @@
 }
 
 .Rating-star-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--Rating-star-size);
+  height: var(--Rating-star-size);
   content: var(--Rating-star-icon);
+
+  & > svg.icon {
+    width: var(--Rating-star-icon-size);
+    height: var(--Rating-star-icon-size);
+    top: 0;
+  }
 }
 
 .#{$ns}RatingControl {

package/scss/components/form/_select.scss

@@ -584,26 +584,15 @@
 }
 
 .#{$ns}Select-popover {
-  margin-top: calc(var(--Form-select-outer-borderWidth) * -1);
-
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
   border: var(--Form-select-outer-borderWidth) solid
     var(--Form-input-onFocused-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   // min-width: px2rem(100px);
 
   // PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
   // z-index: 10;
-
-  &.#{$ns}PopOver--leftTopLeftBottom {
-    margin-top: calc(
-      (var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)) *
-        -1
-    );
-  }
 }
 
 .#{$ns}SelectControl {

package/scss/components/form/_selection.scss

@@ -217,6 +217,7 @@
 
   &-item {
     position: relative;
+    margin-bottom: 2px;
   }
   &-item.is-expanded > &-sublist {
     display: block;
@@ -444,7 +445,7 @@
 .#{$ns}DropDownSelection {
   position: relative;
   display: inline-block;
-  margin: 0.1875rem;
+  margin: px2rem(3px);
   vertical-align: middle;
 
   &-caret {

package/scss/components/form/_switch.scss

@@ -153,6 +153,44 @@
       border-radius: 10px;
     }
   }
+
+  &-spinner {
+    position: absolute;
+    top: var(--Switch-slider-margin);
+    bottom: var(--Switch-slider-margin);
+    left: var(--Switch-slider-margin);
+
+    & > &-icon > svg.icon {
+      width: var(--Switch-spinner-icon-width);
+      height: var(--Switch-spinner-icon-width);
+    }
+
+    &--sm {
+      position: absolute;
+      top: var(--switch-size-sm-slider-margin);
+      bottom: var(--switch-size-sm-slider-margin);
+      left: var(--switch-spinner-left--sm);
+
+      & > .#{$ns}Switch-spinner-icon > svg.icon {
+        width: var(--Switch-spinner-icon-width--sm);
+        height: var(--Switch-spinner-icon-width--sm);
+      }
+    }
+
+    &.#{$ns}Switch-spinner--checked {
+      left: calc(
+        100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
+      );
+      right: var(--Switch-slider-margin);
+
+      &.#{$ns}Switch-spinner--sm {
+        left: calc(
+          100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin)
+        );
+        right: var(--Switch-slider-margin);
+      }
+    }
+  }
 }
 
 .#{$ns}Switch-option {

package/scss/components/form/_text.scss

@@ -319,7 +319,10 @@
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
     border-radius: px2rem(2px);
-    box-shadow: var(--menu-box-shadow);
+    box-shadow: var(--Form-select-outer-boxShadow);
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
+    padding: px2rem(4px) 0;
   }
 
   &-sugs {
@@ -328,13 +331,11 @@
   }
 
   &-sugItem {
-    padding: calc(
-        (
-            var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize) - #{px2rem(2px)}
-          ) / 2
-      )
-      px2rem(12px);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
+    line-height: var(--select-base-default-option-line-height);
 
     svg {
       width: px2rem(16px);

package/scss/components/form/_textarea.scss

@@ -48,6 +48,10 @@
     color: var(--input-count-multi-color);
     font-size: var(--input-count-multi-fontSize);
 
+    > i {
+      font-style: normal;
+    }
+
     &.is-empty {
       color: var(--input-count-multi-color);
     }

package/scss/components/form/_transfer.scss

@@ -39,6 +39,42 @@
     }
   }
 
+  &-footer {
+    border-top: 1px solid var(--transfer-base-footer-border-color);
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    padding: var(--gap-sm);
+
+    /* 底部空间较小，让Pagination紧凑一些 */
+    &-pagination {
+      & > ul {
+        &.#{$ns}Pagination-item {
+          margin-left: 0;
+        }
+
+        & > li {
+          --Pagination-minWidth: #{px2rem(22px)};
+          --Pagination-height: #{px2rem(22px)};
+          --Pagination-padding: 0 #{px2rem(6px)};
+        }
+      }
+
+      .#{$ns}Pagination-perpage {
+        --select-base-default-paddingTop: 0;
+        --select-base-default-paddingBottom: 0;
+        --select-base-default-paddingLeft: #{px2rem(6px)};
+        --select-base-default-paddingRight: #{px2rem(6px)};
+
+        margin-left: 0;
+
+        .#{$ns}Select-valueWrap {
+          line-height: #{px2rem(22px)};
+        }
+      }
+    }
+  }
+
   &-select,
   &-result {
     overflow: hidden;
@@ -64,6 +100,10 @@
       var(--transfer-base-top-right-border-radius)
       var(--transfer-base-bottom-right-border-radius)
       var(--transfer-base-bottom-left-border-radius);
+
+    &--pagination {
+      max-height: px2rem(475px);
+    }
   }
 
   &-select > &-selection,