amis-ui 2.8.0 → 3.0.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

@@ -413,11 +413,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-picker.scss

@@ -21,7 +21,7 @@
 
     > input {
       display: inline-block;
-      width: auto;
+      width: 100% !important;
       vertical-align: middle;
     }
   }
@@ -94,6 +94,7 @@
   }
 
   &-value {
+    position: absolute;
     user-select: none;
     line-height: calc(
       var(--Form-input-lineHeight) * var(--Form-input-fontSize)

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,19 @@
       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%;
+        }
+      }
     }
 
     &-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);
@@ -19,6 +25,20 @@
       var(--inputImage-base-default-bottom-left-border-radius);
     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),
@@ -83,36 +103,48 @@
       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 +171,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 +185,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)
@@ -167,7 +199,7 @@
   }
 
   &-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,6 +214,10 @@
       border-color: var(--FileControl-danger-color);
     }
 
+    &-errorTip {
+      color: var(--FileControl-danger-color);
+    }
+
     svg.icon-refresh {
       transform: rotate(180deg);
     }

package/scss/components/form/_location.scss

@@ -56,7 +56,9 @@
   &-toggler {
     cursor: pointer;
     color: var(--colors-neutral-text-5);
-
+    svg {
+      top: 0;
+    }
     &:hover {
       color: var(--colors-brand-5);
     }
@@ -66,6 +68,9 @@
     @include input-clear();
     line-height: 1;
     margin-right: var(--gap-xs);
+    svg {
+      top: 0;
+    }
   }
 }
 

package/scss/components/form/_number.scss

@@ -246,6 +246,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 {
@@ -292,14 +297,6 @@
   &:not(.is-inline) > .#{$ns}Number {
     display: block;
   }
-
-  .#{$ns}Select {
-    min-width: var(--inputNumber-base-default-unit-width);
-    padding: var(--inputNumber-base-default-unit-paddingTop)
-      var(--inputNumber-base-default-unit-paddingRight)
-      var(--inputNumber-base-default-unit-paddingBottom)
-      var(--inputNumber-base-default-unit-paddingLeft);
-  }
 }
 
 .#{$ns}Number--borderHalf,
@@ -311,11 +308,69 @@
 
 .#{$ns}NumberControl--withUnit {
   display: flex;
+
+  &:hover {
+    .#{$ns}Number,
+    .#{$ns}NumberControl-unit {
+      border-width: var(--inputNumber-base-hover-top-border-width)
+        var(--inputNumber-base-hover-right-border-width)
+        var(--inputNumber-base-hover-bottom-border-width)
+        var(--inputNumber-base-hover-left-border-width);
+      border-style: var(--inputNumber-base-hover-top-border-style)
+        var(--inputNumber-base-hover-right-border-style)
+        var(--inputNumber-base-hover-bottom-border-style)
+        var(--inputNumber-base-hover-left-border-style);
+      border-color: var(--inputNumber-base-hover-top-border-color)
+        var(--inputNumber-base-hover-right-border-color)
+        var(--inputNumber-base-hover-bottom-border-color)
+        var(--inputNumber-base-hover-left-border-color);
+      border-radius: var(--inputNumber-base-hover-top-left-border-radius)
+        var(--inputNumber-base-hover-top-right-border-radius)
+        var(--inputNumber-base-hover-bottom-right-border-radius)
+        var(--inputNumber-base-hover-bottom-left-border-radius);
+    }
+  }
   .#{$ns}Number {
     flex-grow: 1;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
   }
-  .#{$ns}Select {
-    border-left: 0;
+
+  .#{$ns}Number-focused + .#{$ns}NumberControl-unit {
+    border-width: var(--inputNumber-base-active-top-border-width)
+      var(--inputNumber-base-active-right-border-width)
+      var(--inputNumber-base-active-bottom-border-width)
+      var(--inputNumber-base-active-left-border-width);
+    border-style: var(--inputNumber-base-active-top-border-style)
+      var(--inputNumber-base-active-right-border-style)
+      var(--inputNumber-base-active-bottom-border-style)
+      var(--inputNumber-base-active-left-border-style);
+    border-color: var(--inputNumber-base-active-top-border-color)
+      var(--inputNumber-base-active-right-border-color)
+      var(--inputNumber-base-active-bottom-border-color)
+      var(--inputNumber-base-active-left-border-color);
+    border-radius: var(--inputNumber-base-active-top-left-border-radius)
+      var(--inputNumber-base-active-top-right-border-radius)
+      var(--inputNumber-base-active-bottom-right-border-radius)
+      var(--inputNumber-base-active-bottom-left-border-radius);
+  }
+
+  & .#{$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)
+      var(--inputNumber-base-default-unit-paddingBottom)
+      var(--inputNumber-base-default-unit-paddingLeft);
+  }
+  .#{$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);
     }
   }
 
@@ -88,16 +170,33 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    svg {
+      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;
     margin-right: var(--gap-xs);
+    svg {
+      top: 0;
+    }
   }
 }