amis-ui 2.9.0 → 3.0.0

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-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/_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 {
@@ -303,6 +308,7 @@
 
 .#{$ns}NumberControl--withUnit {
   display: flex;
+
   &:hover {
     .#{$ns}Number,
     .#{$ns}NumberControl-unit {
@@ -353,6 +359,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 +368,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;
       }
     }
   }

package/scss/components/form/_rich-text.scss

@@ -13,7 +13,22 @@
 
   min-height: px2rem(200px);
   height: auto;
-  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  border-width: var(--inputRichText-default-top-border-width)
+    var(--inputRichText-default-right-border-width)
+    var(--inputRichText-default-bottom-border-width)
+    var(--inputRichText-default-left-border-width);
+  border-style: var(--inputRichText-default-top-border-style)
+    var(--inputRichText-default-right-border-style)
+    var(--inputRichText-default-bottom-border-style)
+    var(--inputRichText-default-left-border-style);
+  border-color: var(--inputRichText-default-top-border-color)
+    var(--inputRichText-default-right-border-color)
+    var(--inputRichText-default-bottom-border-color)
+    var(--inputRichText-default-left-border-color);
+  border-radius: var(--inputRichText-default-top-left-border-radius)
+    var(--inputRichText-default-top-right-border-radius)
+    var(--inputRichText-default-bottom-right-border-radius)
+    var(--inputRichText-default-bottom-left-border-radius);
   width: 100%;
 
   @include input-border();
@@ -36,41 +51,42 @@
     border: none;
   }
 
-  .fr-toolbar .fr-command.fr-btn,
-  .fr-popup .fr-command.fr-btn {
-    color: var(--Button--default-color);
-  }
-
-  .fr-toolbar .fr-command.fr-btn.fr-active,
-  .fr-popup .fr-command.fr-btn.fr-active {
-    color: var(--info);
-    background: var(--Form-select-onHover-bg);
-  }
-
-  .fr-desktop .fr-command:hover,
-  .fr-desktop .fr-command:focus {
-    background: var(--Form-select-onHover-bg);
-  }
-
-  .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
-  .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
-    background: var(--Form-select-onHover-bg);
-  }
-
-  .fr-command.fr-btn
-    + .fr-dropdown-menu
-    .fr-dropdown-wrapper
-    .fr-dropdown-content
-    ul.fr-dropdown-list
-    li
-    a.fr-active {
-    background: var(--info);
-    color: #fff;
+  &:hover {
+    border-width: var(--inputRichText-hover-top-border-width)
+      var(--inputRichText-hover-right-border-width)
+      var(--inputRichText-hover-bottom-border-width)
+      var(--inputRichText-hover-left-border-width);
+    border-style: var(--inputRichText-hover-top-border-style)
+      var(--inputRichText-hover-right-border-style)
+      var(--inputRichText-hover-bottom-border-style)
+      var(--inputRichText-hover-left-border-style);
+    border-color: var(--inputRichText-hover-top-border-color)
+      var(--inputRichText-hover-right-border-color)
+      var(--inputRichText-hover-bottom-border-color)
+      var(--inputRichText-hover-left-border-color);
+    border-radius: var(--inputRichText-hover-top-left-border-radius)
+      var(--inputRichText-hover-top-right-border-radius)
+      var(--inputRichText-hover-bottom-right-border-radius)
+      var(--inputRichText-hover-bottom-left-border-radius);
   }
 
   &.is-focused {
-    border: var(--Form-input-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+    border-width: var(--inputRichText-active-top-border-width)
+      var(--inputRichText-active-right-border-width)
+      var(--inputRichText-active-bottom-border-width)
+      var(--inputRichText-active-left-border-width);
+    border-style: var(--inputRichText-active-top-border-style)
+      var(--inputRichText-active-right-border-style)
+      var(--inputRichText-active-bottom-border-style)
+      var(--inputRichText-active-left-border-style);
+    border-color: var(--inputRichText-active-top-border-color)
+      var(--inputRichText-active-right-border-color)
+      var(--inputRichText-active-bottom-border-color)
+      var(--inputRichText-active-left-border-color);
+    border-radius: var(--inputRichText-active-top-left-border-radius)
+      var(--inputRichText-active-top-right-border-radius)
+      var(--inputRichText-active-bottom-right-border-radius)
+      var(--inputRichText-active-bottom-left-border-radius);
   }
 
   .fr-box.fr-basic .fr-element {
@@ -82,12 +98,42 @@
   }
 
   &.is-disabled {
-    border-color: var(--Form-input-onDisabled-borderColor);
+    border-width: var(--inputRichText-disabled-top-border-width)
+      var(--inputRichText-disabled-right-border-width)
+      var(--inputRichText-disabled-bottom-border-width)
+      var(--inputRichText-disabled-left-border-width);
+    border-style: var(--inputRichText-disabled-top-border-style)
+      var(--inputRichText-disabled-right-border-style)
+      var(--inputRichText-disabled-bottom-border-style)
+      var(--inputRichText-disabled-left-border-style);
+    border-color: var(--inputRichText-disabled-top-border-color)
+      var(--inputRichText-disabled-right-border-color)
+      var(--inputRichText-disabled-bottom-border-color)
+      var(--inputRichText-disabled-left-border-color);
+    border-radius: var(--inputRichText-disabled-top-left-border-radius)
+      var(--inputRichText-disabled-top-right-border-radius)
+      var(--inputRichText-disabled-bottom-right-border-radius)
+      var(--inputRichText-disabled-bottom-left-border-radius);
     pointer-events: none;
     opacity: 0.6;
 
     .fr-box.fr-basic.fr-top .fr-wrapper {
-      border-color: var(--Form-input-onDisabled-borderColor);
+      border-width: var(--inputRichText-disabled-top-border-width)
+        var(--inputRichText-disabled-right-border-width)
+        var(--inputRichText-disabled-bottom-border-width)
+        var(--inputRichText-disabled-left-border-width);
+      border-style: var(--inputRichText-disabled-top-border-style)
+        var(--inputRichText-disabled-right-border-style)
+        var(--inputRichText-disabled-bottom-border-style)
+        var(--inputRichText-disabled-left-border-style);
+      border-color: var(--inputRichText-disabled-top-border-color)
+        var(--inputRichText-disabled-right-border-color)
+        var(--inputRichText-disabled-bottom-border-color)
+        var(--inputRichText-disabled-left-border-color);
+      border-radius: var(--inputRichText-disabled-top-left-border-radius)
+        var(--inputRichText-disabled-top-right-border-radius)
+        var(--inputRichText-disabled-bottom-right-border-radius)
+        var(--inputRichText-disabled-bottom-left-border-radius);
     }
   }
 

package/scss/components/form/_tag.scss

@@ -15,9 +15,7 @@
     padding: 0;
     border: none;
     width: 100%;
-    margin-top: calc(
-      var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)
-    );
+    margin-top: px2rem(4px);
 
     &.#{$ns}PopOver--leftBottomLeftTop {
       top: 100% !important;
@@ -63,14 +61,41 @@
 
       @include button-variant(
         var(--TagControl-sugBtn-bg),
-        var(--TagControl-sugBtn-border),
         var(--TagControl-sugBtn-color),
+        var(--TagControl-sugBtn-border),
+        var(--TagControl-sugBtn-border),
+        var(--TagControl-sugBtn-border),
+        var(--TagControl-sugBtn-border),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        solid,
+        solid,
+        solid,
+        solid,
+        none,
         var(--TagControl-sugBtn-onHover-bg),
-        var(--TagControl-sugBtn-onHover-border),
         var(--TagControl-sugBtn-onHover-color),
+        var(--TagControl-sugBtn-onHover-border),
+        var(--TagControl-sugBtn-onHover-border),
+        var(--TagControl-sugBtn-onHover-border),
+        var(--TagControl-sugBtn-onHover-border),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        var(--TagControl-sugBtn-borderWidth),
+        solid,
+        solid,
+        solid,
+        solid,
+        none,
         var(--TagControl-sugBtn-onActive-bg),
+        var(--TagControl-sugBtn-onActive-color),
         var(--TagControl-sugBtn-onActive-border),
-        var(--TagControl-sugBtn-onActive-color)
+        var(--TagControl-sugBtn-onActive-border),
+        var(--TagControl-sugBtn-onActive-border),
+        var(--TagControl-sugBtn-onActive-border)
       );
 
       &.is-disabled {
@@ -79,6 +104,10 @@
       }
     }
   }
+  &.is-error > .#{$ns}ResultBox {
+    border-color: var(--Form-input-onError-borderColor);
+    background: var(--Form-input-onError-bg);
+  }
 }
 
 .#{$ns}TagControl-popover {
@@ -91,4 +120,25 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
+
+  .#{$ns}ListMenu {
+    padding: px2rem(4px) 0;
+  }
+
+  .#{$ns}ListMenu-item {
+    height: var(--inputTag-option-height);
+    color: var(--inputTag-option-color);
+    font-size: var(--inputTag-option-fontSize);
+    line-height: var(--inputTag-option-lineHeight);
+    font-weight: var(--inputTag-option-fontWeight);
+    padding: var(--inputTag-option-paddingTop)
+      var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom)
+      var(--inputTag-option-paddingLeft);
+    background: var(--inputTag-option-bg-color);
+
+    &:hover {
+      color: var(--inputTag-option-hover-color);
+      background: var(--inputTag-option-hover-bg-color);
+    }
+  }
 }

package/scss/components/form/_text.scss

@@ -45,6 +45,14 @@
       var(--input-default-default-paddingLeft);
     background: var(--input-default-default-bg-color);
     height: var(--input-size-default-height);
+    align-items: center;
+
+    input {
+      color: var(--input-default-default-color);
+      font-size: var(--input-default-default-fontSize);
+      font-weight: var(--input-default-default-fontWeight);
+      line-height: var(--input-default-default-lineHeight);
+    }
 
     &:hover,
     &.hover {