amis-ui 2.9.0 → 3.1.0

package/scss/components/form/_fieldset.scss

@@ -33,14 +33,15 @@
 fieldset.#{$ns}Collapse {
   border: none;
   > legend {
-    font-weight: var(--fontWeightNormal);
-    padding: var(--gap-xs) 0;
-    font-size: var(--fontSizeMd);
-    color: var(--text--loud-color);
-    border-left: var(--primary) px2rem(4px) solid;
-    line-height: 1.2;
-    margin: var(--gap-base) 0;
-    padding: 0 0 0 14px;
+    border-left: var(--fieldSet-legend-border-color)
+      var(--fieldSet-legend-border-width) solid;
+    height: var(--fieldSet-legend-height);
+    line-height: var(--fieldSet-legend-height);
+    margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight)
+      var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft);
+    padding: var(--fieldSet-legend-paddingTop)
+      var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
+      var(--fieldSet-legend-paddingLeft);
     cursor: pointer;
     border-bottom: none !important;
     background: transparent;
@@ -48,6 +49,13 @@ fieldset.#{$ns}Collapse {
     flex-direction: row-reverse;
     justify-content: flex-end;
     // width: 100%;
+
+    .#{$ns}TplField {
+      font-weight: var(--fieldSet-legend-fontWeight);
+      font-size: var(--fieldSet-legend-fontSize);
+      color: var(--fieldSet-legend-color);
+    }
+
     &:hover {
       background: transparent;
     }
@@ -55,103 +63,129 @@ fieldset.#{$ns}Collapse {
 
   &--xs {
     @extend %fieldSetBase;
-    padding: 20px 5px 5px 5px;
+    padding: var(--fieldSet-size-xs-paddingTop)
+      var(--fieldSet-size-xs-paddingRight) var(--fieldSet-size-xs-paddingBottom)
+      var(--fieldSet-size-xs-paddingLeft);
 
     > legend {
-      left: 5px;
-      font-size: var(--fontSizeXs);
+      left: var(--fieldSet-size-xs-paddingLeft);
       padding: 0 3px;
       margin: 0 0 0 -3px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-xs-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 6px;
+      top: calc(var(--fieldSet-size-xs-fontSize) / 2);
     }
   }
 
   &--sm {
     @extend %fieldSetBase;
 
-    padding: 25px 10px 10px 10px;
+    padding: var(--fieldSet-size-sm-paddingTop)
+      var(--fieldSet-size-sm-paddingRight) var(--fieldSet-size-sm-paddingBottom)
+      var(--fieldSet-size-sm-paddingLeft);
 
     > legend {
-      left: 10px;
-      font-size: var(--fontSizeSm);
+      left: var(--fieldSet-size-sm-paddingLeft);
       padding: 0 5px;
       margin: 0 0 0 -5px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-sm-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 6px;
+      top: calc(var(--fieldSet-size-sm-fontSize) / 2);
     }
   }
 
   &--base {
     @extend %fieldSetBase;
 
-    padding: 30px var(--gap-md) var(--gap-md) var(--gap-md);
+    padding: var(--fieldSet-size-base-paddingTop)
+      var(--fieldSet-size-base-paddingRight)
+      var(--fieldSet-size-base-paddingBottom)
+      var(--fieldSet-size-base-paddingLeft);
 
     > legend {
-      left: var(--gap-md);
-      font-size: var(--fontSizeBase);
+      left: var(--fieldSet-size-base-paddingLeft);
       padding: 0 8px;
       margin: 0 0 0 -8px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-base-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 7px;
+      top: calc(var(--fieldSet-size-base-fontSize) / 2);
     }
   }
 
   &--md {
     @extend %fieldSetBase;
-    padding: 30px 20px 20px 20px;
+    padding: var(--fieldSet-size-md-paddingTop)
+      var(--fieldSet-size-md-paddingRight) var(--fieldSet-size-md-paddingBottom)
+      var(--fieldSet-size-md-paddingLeft);
 
     > legend {
-      left: 20px;
-      font-size: var(--fontSizeMd);
+      left: var(--fieldSet-size-md-paddingLeft);
       padding: 0 10px;
       margin: 0 0 0 -10px;
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-md-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 7px;
+      top: calc(var(--fieldSet-size-md-fontSize) / 2);
     }
   }
 
   &--lg {
     @extend %fieldSetBase;
-    padding: 40px 30px 30px 30px;
+    padding: var(--fieldSet-size-lg-paddingTop)
+      var(--fieldSet-size-lg-paddingRight) var(--fieldSet-size-lg-paddingBottom)
+      var(--fieldSet-size-lg-paddingLeft);
 
     > legend {
-      left: 30px;
-      font-size: var(--fontSizeLg);
+      left: var(--fieldSet-size-lg-paddingLeft);
       padding: 0 var(--gap-md);
       margin: 0 0 0 calc(var(--gap-md) * -1);
 
+      .#{$ns}TplField {
+        font-size: var(--fieldSet-size-lg-fontSize);
+      }
+
       &:hover {
         background-color: var(--white);
       }
     }
 
     &:after {
-      top: 9px;
+      top: calc(var(--fieldSet-size-lg-fontSize) / 2);
     }
   }
 }

package/scss/components/form/_form.scss

@@ -262,7 +262,14 @@
       }
 
       > .#{$ns}Form-label {
-        line-height: px2rem(32px);
+        padding-top: calc(
+          (
+              var(--Form-input-height) - var(--Form-item-lineHeight) *
+                var(--Form-item-fontSize)
+            ) / 2
+        );
+        word-break: break-word;
+        line-height: var(--Form-item-lineHeight);
         margin: 0;
         margin-right: var(--Form--horizontal-label-gap);
         flex-shrink: 0;
@@ -318,8 +325,14 @@
       vertical-align: top;
 
       > .#{$ns}Form-label {
-        height: px2rem(32px);
-        line-height: px2rem(32px);
+        padding-top: calc(
+          (
+              var(--Form-input-height) - var(--Form-item-lineHeight) *
+                var(--Form-item-fontSize)
+            ) / 2
+        );
+        word-break: break-word;
+        line-height: var(--Form-item-lineHeight);
         margin: 0;
         margin-right: var(--Form-mode-inline-label-gap);
 
@@ -413,11 +426,27 @@
   flex-wrap: wrap;
   margin-left: calc(var(--Form-group-gutterWidth) / -2);
   margin-right: calc(var(--Form-group-gutterWidth) / -2);
+
   > .#{$ns}Form-item {
     flex-shrink: 0;
     flex-grow: 1;
     padding-left: calc(var(--Form-group-gutterWidth) / 2);
     padding-right: calc(var(--Form-group-gutterWidth) / 2);
+
+    &.#{$ns}Form-item--inline {
+      /* 设置columnCount之后，margin-right自动计算，如果设置了会导致flex自动wrap */
+      margin-right: unset;
+      display: inline-flex;
+
+      & > .#{$ns}Form-value {
+        flex: 1;
+
+        /* 如果size设置了full就占满剩余空间 */
+        .#{$ns}Form-control:first-child.is-full {
+          width: -webkit-fill-available;
+        }
+      }
+    }
   }
 }
 

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

@@ -17,6 +17,11 @@
       margin-left: var(--IconSelect-base-margin);
     }
 
+    &-func {
+      display: inline-block;
+      margin-left: 12px;
+    }
+
     &-content {
       display: flex;
       position: relative;
@@ -48,6 +53,22 @@
       align-items: center;
       justify-content: flex-start;
       overflow: hidden;
+
+      img.icon {
+        height: var(--sizes-size-7);
+        margin-right: var(--sizes-size-4);
+      }
+
+      &-str-svg {
+        height: var(--fontSizeBase);
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &-iconfont {
+        margin-right: var(--sizes-size-4);
+      }
     }
 
     &-wrapper {

package/scss/components/form/_image.scss

@@ -5,7 +5,13 @@
     outline: none;
   }
 
+  .ImageControl-addBtn-icon {
+    z-index: 1;
+    content: var(--inputImage-base-default-icon);
+  }
+
   &-addBtn {
+    position: relative;
     margin: 0;
     width: px2rem(120px);
     height: px2rem(120px);
@@ -20,6 +26,20 @@
     cursor: pointer;
     margin-right: var(--gap-base);
 
+    &-bg {
+      position: absolute;
+      z-index: 0;
+      overflow: hidden;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      .#{$ns}Image {
+        border: 0;
+      }
+    }
+
     @include button-variant(
       var(--ImageControl-addBtn-bg),
       var(--ImageControl-addBtn-color),
@@ -83,36 +103,47 @@
       var(--shadows-shadow-none)
     );
 
-    > svg {
+    svg {
       top: 0;
       margin-bottom: var(--inputImage-base-default-icon-margin);
       font-size: var(--inputImage-base-default-icon-size);
       color: var(--inputImage-base-default-icon-color);
+      width: var(--inputImage-base-default-icon-size);
+      height: var(--inputImage-base-default-icon-size);
     }
 
     &-text {
+      z-index: 1;
       font-size: var(--inputImage-base-default-fontSize);
       font-weight: var(--inputImage-base-default-fontWeight);
     }
 
     &:not(:disabled):not(.is-disabled) {
+      &.is-invalid:hover {
+        border-color: var(--FileControl-danger-color);
+      }
+
       &:hover {
-        > svg {
+        svg {
           color: var(--inputImage-base-hover-icon-color);
         }
       }
 
       &:hover:active {
-        > svg {
+        svg {
           color: var(--inputImage-base-active-icon-color);
         }
       }
     }
 
+    &.is-invalid {
+      border-color: var(--FileControl-danger-color);
+    }
+
     &.is-disabled {
       pointer-events: none;
 
-      > svg {
+      svg {
         color: var(--inputImage-base-disabled-icon-color);
       }
     }
@@ -139,7 +170,7 @@
     margin: 30px 0 0 var(--Tooltip--attr-gap);
   }
 
-  &-dropzone:focus &-addBtn {
+  &-dropzone:focus &-addBtn:not(.is-invalid) {
     border-color: var(--inputImage-base-hover-top-border-color)
       var(--inputImage-base-hover-right-border-color)
       var(--inputImage-base-hover-bottom-border-color)
@@ -153,7 +184,7 @@
   }
 
   &-dropzone:hover {
-    &-addBtn:not(.is-disabled) {
+    &-addBtn:not(.is-disabled):not(.is-invalid) {
       border-color: var(--inputImage-base-hover-top-border-color)
         var(--inputImage-base-hover-right-border-color)
         var(--inputImage-base-hover-bottom-border-color)
@@ -166,8 +197,12 @@
     }
   }
 
+  &-itemList {
+    display: inline;
+  }
+
   &-item {
-    // border: var(--borderWidth) solid var(--borderColor);
+    border: var(--borderWidth) solid var(--borderColor);
     border-radius: var(--ImageControl-addBtn-borderRadius);
     vertical-align: top;
     padding: var(--gap-xs);
@@ -182,9 +217,17 @@
       border-color: var(--FileControl-danger-color);
     }
 
+    &-errorTip {
+      color: var(--FileControl-danger-color);
+    }
+
     svg.icon-refresh {
       transform: rotate(180deg);
     }
+
+    &--dragging {
+      border: var(--borderWidth) solid var(--colors-brand-5);
+    }
   }
 
   &-filename {

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

@@ -45,6 +45,7 @@
 
   &-menu {
     width: px2rem(160px);
+    min-width: px2rem(100px);
     min-height: px2rem(32px);
     max-height: px2rem(175px);
     background: var(--Form-select-menu-bg);
@@ -76,6 +77,7 @@
         height: px2rem(32px);
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
         &.is-disabled {
           cursor: not-allowed;
           color: var(--text--muted-color);

package/scss/components/form/_number.scss

@@ -48,12 +48,6 @@
       var(--inputNumber-base-hover-bottom-right-border-radius)
       var(--inputNumber-base-hover-bottom-left-border-radius);
     background: var(--inputNumber-base-hover-bg-color);
-    .#{$ns}Number-input {
-      padding-right: calc(
-        var(--Number-handler-width) +
-          var(--inputNumber-base-default-paddingRight)
-      );
-    }
   }
 
   &-focused {
@@ -202,6 +196,10 @@
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
       height: 100%;
+      // 为了实现handle出现后，不遮挡内容，自然的留出padding的位置的效果
+      outline: var(--inputNumber-base-default-paddingRight)
+        var(--inputNumber-base-default-bg-color)
+        solid;
     }
 
     &-handler {
@@ -246,6 +244,11 @@
     color: var(--Number-handler-onDisabled-color);
   }
 
+  .is-error > & {
+    border-color: var(--Form-input-onError-borderColor);
+    background: var(--Form-input-onError-bg);
+  }
+
   &-disabled {
     border-color: var(--Form-input-onDisabled-borderColor);
     .#{$ns}Number-input {
@@ -303,6 +306,7 @@
 
 .#{$ns}NumberControl--withUnit {
   display: flex;
+
   &:hover {
     .#{$ns}Number,
     .#{$ns}NumberControl-unit {
@@ -353,6 +357,7 @@
   & .#{$ns}NumberControl-unit {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
+    background-color: var(--inputNumber-base-unit-bg-color);
     min-width: var(--inputNumber-base-default-unit-width);
     padding: var(--inputNumber-base-default-unit-paddingTop)
       var(--inputNumber-base-default-unit-paddingRight)
@@ -361,6 +366,9 @@
   }
   .#{$ns}NumberControl-single-unit {
     cursor: default;
+    text-align: center;
+    min-width: unset;
+    padding: 0 var(--inputNumber-base-default-unit-paddingLeft);
   }
 }
 .#{$ns}Number--enhance {

package/scss/components/form/_picker.scss

@@ -2,24 +2,80 @@
   @include input-text();
   outline: none;
 
-  &.is-focus > &-input {
-    border-color: var(--Form-input-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
-    background: var(--Form-input-onFocused-bg);
+  &-input:hover {
+    background: var(--Pick-status-hover-bgColor);
+    border-width: var(--Pick-status-hover-top-border-width)
+      var(--Pick-status-hover-right-border-width)
+      var(--Pick-status-hover-bottom-border-width)
+      var(--Pick-status-hover-left-border-width);
+    border-style: var(--Pick-status-hover-top-border-style)
+      var(--Pick-status-hover-right-border-style)
+      var(--Pick-status-hover-bottom-border-style)
+      var(--Pick-status-hover-left-border-style);
+    border-color: var(--Pick-status-hover-top-border-color)
+      var(--Pick-status-hover-right-border-color)
+      var(--Pick-status-hover-bottom-border-color)
+      var(--Pick-status-hover-left-border-color);
+  }
+
+  &.is-focused {
+    & > .#{$ns}Picker-input {
+      box-shadow: var(--Form-input-boxShadow);
+      background-color: var(--Pick-status-focus-bgColor);
+      border-width: var(--Pick-status-focus-top-border-width)
+        var(--Pick-status-focus-right-border-width)
+        var(--Pick-status-focus-bottom-border-width)
+        var(--Pick-status-focus-left-border-width);
+      border-style: var(--Pick-status-focus-top-border-style)
+        var(--Pick-status-focus-right-border-style)
+        var(--Pick-status-focus-bottom-border-style)
+        var(--Pick-status-focus-left-border-style);
+      border-color: var(--Pick-status-focus-top-border-color)
+        var(--Pick-status-focus-right-border-color)
+        var(--Pick-status-focus-bottom-border-color)
+        var(--Pick-status-focus-left-border-color);
+    }
   }
 
   &.is-disabled {
     pointer-events: none;
     opacity: var(--Button-onDisabled-opacity);
+
+    .#{$ns}Picker-placeholder {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+    }
+    & > .#{$ns}Picker-input {
+      color: var(--Pick-status-disabled-color);
+      font-size: var(--Pick-status-disabled-fontSize);
+      font-weight: var(--Pick-status-disabled-fontWeight);
+      background-color: var(--Pick-status-disabled-bgColor);
+      border-width: var(--Pick-status-disabled-top-border-width)
+        var(--Pick-status-disabled-right-border-width)
+        var(--Pick-status-disabled-bottom-border-width)
+        var(--Pick-status-disabled-left-border-width);
+      border-style: var(--Pick-status-disabled-top-border-style)
+        var(--Pick-status-disabled-right-border-style)
+        var(--Pick-status-disabled-bottom-border-style)
+        var(--Pick-status-disabled-left-border-style);
+      border-color: var(--Pick-status-disabled-top-border-color)
+        var(--Pick-status-disabled-right-border-color)
+        var(--Pick-status-disabled-bottom-border-color)
+        var(--Pick-status-disabled-left-border-color);
+    }
   }
 
   &-placeholder {
-    color: var(--Form-input-placeholderColor);
+    color: var(--Pick-base-placeholder-color);
+    font-size: var(--Pick-base-placeholder-fontSize);
+    font-weight: var(--Pick-base-placeholder-fontWeight);
     user-select: none;
     position: absolute;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
-    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
+      var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft);
   }
 
   &-input {
@@ -27,6 +83,16 @@
     height: auto;
     padding: 0;
     flex-wrap: nowrap;
+    background-color: var(--Pick-base-bgColor);
+    border-width: var(--Pick-base-top-border-width)
+      var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width)
+      var(--Pick-base-left-border-width);
+    border-style: var(--Pick-base-top-border-style)
+      var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style)
+      var(--Pick-base-left-border-style);
+    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);
   }
 
   .#{$ns}Picker-values {
@@ -58,22 +124,38 @@
       var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
     );
     display: inline-block;
-    font-size: var(--Form-selectValue-fontSize);
-    color: var(--Form-selectValue-color);
-    background: var(--Form-selectValue-bg);
-    border: px2rem(1px) solid var(--Form-selectValue-borderColor);
-    border-radius: 2px;
+    font-size: var(--Pick-base-value-fontSize);
+    color: var(--Pick-base-value-color);
+    font-weight: var(--Pick-base-value-fontWeight);
+    background: var(--Pick-base-value-bgColor);
+    border-width: var(--Pick-base-value-top-border-width)
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
+    border-style: var(--Pick-base-value-top-border-style)
+      var(--Pick-base-value-right-border-style)
+      var(--Pick-base-value-bottom-border-style)
+      var(--Pick-base-value-left-border-style);
+    border-color: var(--Pick-base-value-top-border-color)
+      var(--Pick-base-value-right-border-color)
+      var(--Pick-base-value-bottom-border-color)
+      var(--Pick-base-value-left-border-color);
+    border-radius: var(--Pick-base-top-left-border-radius)
+      var(--Pick-base-top-right-border-radius)
+      var(--Pick-base-bottom-right-border-radius)
+      var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-bottom: var(--gap-xs);
   }
 
   .#{$ns}Picker-valueIcon {
+    color: var(--Pick-base-value-icon-color);
     cursor: pointer;
     border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
     padding: 1px 5px;
 
     &:hover {
-      background: var(--Form-selectValue-onHover-bg);
+      background: var(--Pick-base-value-hover-icon-color);
     }
   }
 
@@ -92,11 +174,22 @@
       top: 0;
     }
 
+    svg {
+      width: var(--Pick-base-icon-size);
+      height: var(--Pick-base-icon-size);
+    }
+
     &:hover {
       color: var(--Picker-onHover-iconColor);
     }
   }
 
+  .Picker-icon {
+    width: var(--Pick-base-icon-size);
+    height: var(--Pick-base-icon-size);
+    content: var(--Pick-base-icon);
+  }
+
   &-clear {
     @include input-clear();
     line-height: 1;

package/scss/components/form/_range.scss

@@ -291,10 +291,16 @@
     div {
       position: absolute;
       top: 0;
+      transform: translateX(-50%);
+
       span {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }