amis 1.9.1-beta.12 → 1.9.1-beta.21

package/scss/components/_modal.scss

@@ -158,7 +158,7 @@
     border-bottom-right-radius: var(--Modal-content-borderRadius);
 
     .#{$ns}Button {
-      width: var(--Modal-footer-button-width);
+      min-width: var(--Modal-footer-button-width);
       margin-left: var(--gap-sm);
     }
   }

package/scss/components/_result-box.scss

@@ -126,13 +126,14 @@
     color: var(--ResultBox-value-color);
     font-size: var(--Form-input-fontSize);
     padding: 0 var(--gap-xs);
-    min-height: px2rem(24px);
+    min-height: var(--ResultBox-tag-height);
     flex-wrap: nowrap;
     display: inline-flex;
     align-items: center;
     margin-right: var(--gap-xs);
-    margin-bottom: px2rem(2px);
+    margin-bottom: var(--ResultBox-tag-marginBottom);
     user-select: none;
+    border-radius: #{px2rem(2px)};
 
     > a {
       cursor: pointer;
@@ -199,6 +200,37 @@
     }
   }
 
+  &-overflow {
+    &-wrapper {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+      align-items: center;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: calc(
+        (var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5
+      );
+    }
+
+    &.#{$ns}Tooltip--dark {
+      .#{$ns}ResultBox-overflow-wrapper {
+        .#{$ns}ResultBox-value {
+          color: var(--white);
+          background-color: var(--Form-select-value-bgColor--dark);
+
+          &:hover {
+            background-color: var(--ResultBox-value--onHover-bg--dark);
+          }
+
+          & > a {
+            color: var(--Form-select-valueIcon-color--dark);
+          }
+        }
+      }
+    }
+  }
+
   &.is-mobile {
     min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
     border: none;

package/scss/components/form/_checks.scss

@@ -230,14 +230,12 @@
         }
       }
 
-      &:checked[disabled] + i{
+      &:checked[disabled] + i {
         width: var(--Checkbox-inner-size);
         height: var(--Checkbox-inner-size);
         background: var(--Checkbox-onDisabled-bg);
       }
-
     }
-
   }
   &--button.#{$ns}Checkbox--checkbox {
     text-align: center;
@@ -256,67 +254,72 @@
     border-radius: calc(var(--Checkbox-borderRadius) * 2);
     min-width: var(--Checkbox-button-min-width);
 
-    &:hover:not(:disabled){
+    &:hover:not(:disabled) {
       color: var(--Checkbox-onHover-color);
     }
 
     &:hover {
       input:checked + i {
         background: transparent;
-            border-color: var(--Button--primary-onHover-bg) transparent transparent var(--Button--primary-onHover-bg);
+        border-color: var(--Button--primary-onHover-bg) transparent transparent
+          var(--Button--primary-onHover-bg);
       }
     }
 
     &:active {
       input:checked + i {
         background: transparent;
-        border-color: var(--Switch-checked-onHover-bgColor) transparent transparent var(--Switch-checked-onHover-bgColor);
+        border-color: var(--Switch-checked-onHover-bgColor) transparent
+          transparent var(--Switch-checked-onHover-bgColor);
       }
     }
 
     input {
-        &:checked + i {
-          background: transparent;
+      &:checked + i {
+        background: transparent;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 0;
+        border-width: px2rem(8px);
+        border-color: var(--Checkbox-onHover-color) transparent transparent
+          var(--Checkbox-onHover-color);
+        border-radius: 0;
+
+        &:before {
+          position: absolute;
           top: 0;
           left: 0;
-          width: 0;
-          height: 0;
-          border-width: px2rem(8px);
-          border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
-          border-radius: 0;
-
-          &:before {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: var(--Checkbox--full-inner-size);
-            height: calc(var(--Checkbox--full-inner-size) / 2);
-            transform: translate(-80%, -160%) rotate(-50deg);
-            background: transparent;
-          }
-        }
-
-        &[disabled] + i {
-          border-color: var(--Checkbox-onDisabled-color);
+          width: var(--Checkbox--full-inner-size);
+          height: calc(var(--Checkbox--full-inner-size) / 2);
+          transform: translate(-80%, -160%) rotate(-50deg);
           background: transparent;
-            &:before {
-              background: transparent;
-          }
         }
+      }
 
-        &:checked[disabled] + i {
+      &[disabled] + i {
+        border-color: var(--Checkbox-onDisabled-color);
+        background: transparent;
+        &:before {
           background: transparent;
-          border-width: px2rem(8px);
-          border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color);
         }
+      }
+
+      &:checked[disabled] + i {
+        background: transparent;
+        border-width: px2rem(8px);
+        border-color: var(--Checkbox-onHover-color) transparent transparent
+          var(--Checkbox-onHover-color);
+      }
     }
     > i {
       position: absolute;
       top: 0;
-      left:0;
+      left: 0;
       margin-left: 0;
       border: 0;
       border-style: solid;
+      background: transparent;
 
       + span {
         max-width: px2rem(100px);
@@ -330,14 +333,14 @@
     border-color: var(--Checkbox-onHover-color);
     color: var(--Checkbox-onHover-color);
 
-      &:hover {
-        border-color: var(--menu-active-color);
-        color: var(--menu-active-color);
-      }
-      &:active {
-        border-color: var(--Switch-checked-onHover-bgColor);
-        color: var(--Switch-checked-onHover-bgColor);
-      }
+    &:hover {
+      border-color: var(--menu-active-color);
+      color: var(--menu-active-color);
+    }
+    &:active {
+      border-color: var(--Switch-checked-onHover-bgColor);
+      color: var(--Switch-checked-onHover-bgColor);
+    }
   }
   &--button--disabled--unchecked.#{$ns}Checkbox--checkbox.#{$ns}Checkbox--full {
     i {
@@ -391,7 +394,7 @@
       border-radius: 50%;
     }
 
-    &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full{
+    &.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
       background: none;
 
       i {
@@ -464,7 +467,7 @@
     display: block;
     margin-bottom: var(--Form-label-paddingTop);
   }
-  
+
   .#{$ns}Checkbox--button {
     margin-bottom: 0;
 

package/scss/components/form/_date.scss

@@ -92,22 +92,22 @@
   display: flex;
 }
 
-.#{$ns}DateControl {
-  width: auto !important; // 因为这里要撑开父容器
-  &.is-date > .#{$ns}DatePicker {
-    min-width: calc(var(--DatePicker-minWidth) + var(--fontSizeLg) * 2);
-  }
+// .#{$ns}DateControl {
+//   width: auto !important; // 因为这里要撑开父容器
+//   &.is-date > .#{$ns}DatePicker {
+//     min-width: calc(var(--DatePicker-minWidth) + var(--fontSizeLg) * 2);
+//   }
 
-  &.is-datetime > .#{$ns}DatePicker {
-    min-width: calc(var(--DatePicker-minWidth) + var(--fontSizeLg) * 6);
-  }
-}
+//   &.is-datetime > .#{$ns}DatePicker {
+//     min-width: calc(var(--DatePicker-minWidth) + var(--fontSizeLg) * 6);
+//   }
+// }
 
 .#{$ns}DatePicker-shortcuts {
   margin: 0;
   padding-left: px2rem(10px);
   list-style: none;
-  background: #F7F7F9;
+  background: #f7f7f9;
   line-height: px2rem(32px);
 }
 
@@ -274,8 +274,8 @@
     .rdtDisabled.rdtToday,
     .rdtOld.rdtToday,
     .rdtNew.rdtToday {
-      >span {
-        border-color: #E8E9EB;
+      > span {
+        border-color: #e8e9eb;
       }
     }
 
@@ -290,7 +290,7 @@
       color: #151b26;
       > span {
         background: transparent;
-        border-color: #144BCC;
+        border-color: #144bcc;
       }
     }
 
@@ -584,7 +584,6 @@
 td.rdtMonth,
 td.rdtYear,
 td.rdtQuarter {
-
   > span {
     display: inline-block;
   }
@@ -607,21 +606,31 @@ td.rdtQuarter {
   &.rdtDisabled,
   &.rdtDisabled:hover {
     background: var(--Calendar-cell-onDisabled-bg);
-    color: #B8BABF;
+    color: #b8babf;
   }
-  
 }
 
 .#{$ns}DateRangePicker-start {
   .rdtPicker .rdtActive.rdtBetween {
-    background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%);
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      transparent 50%,
+      var(--Calendar-cell-onBetween-bg) 51%,
+      var(--Calendar-cell-onBetween-bg) 100%
+    );
   }
 }
 
-
 .#{$ns}DateRangePicker-end {
   .rdtPicker .rdtActive.rdtBetween {
-    background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%);
+    background: linear-gradient(
+      to right,
+      var(--Calendar-cell-onBetween-bg) 0%,
+      var(--Calendar-cell-onBetween-bg) 50%,
+      transparent 51%,
+      transparent 100%
+    );
   }
 }
 

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

@@ -4,19 +4,20 @@
   &-placeholder {
     color: var(--Form-input-placeholderColor);
     user-select: none;
-    position: absolute;
-    left: var(--Form-input-paddingX);
-    top: var(--Form-input-paddingY);
-    margin-top: calc(2 * var(--Form-input-borderWidth));
     line-height: var(--Form-input-lineHeight);
+    position: absolute;
+    left: 2px;
+    overflow: hidden;
+    width: 100%;
   }
 
   &-valueWrap {
-    display: flex;
     justify-content: space-between;
     flex-grow: 1;
     line-height: 1;
     white-space: nowrap;
+    width: 100%;
+    position: relative;
 
     > input {
       display: inline-block;
@@ -28,6 +29,7 @@
   &-input--withAC {
     position: relative;
     flex-wrap: wrap;
+    width: 100%;
 
     > input {
       width: auto;
@@ -98,7 +100,9 @@
     );
     vertical-align: middle;
     display: inline-block;
-
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
     > i {
       display: inline-block;
       margin-right: var(--IconPicker-selectedIcon-marginRight);

package/scss/components/form/_select.scss

@@ -1,6 +1,42 @@
 .#{$ns}Select {
   display: inline-flex;
 
+  /* select 标签样式 */
+  @mixin select-value {
+    .#{$ns}Select-value {
+      position: static;
+      white-space: normal;
+      user-select: none;
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      display: inline-block;
+      vertical-align: middle;
+      font-size: var(--Form-selectValue-fontSize);
+      background: var(--Form-select-value-bgColor);
+      border: px2rem(1px) solid var(--Form-select-value-borderColor);
+      border-radius: px2rem(2px);
+      margin-right: var(--gap-xs);
+      margin-bottom: var(--gap-xs);
+
+      &:hover {
+        background-color: var(--Form-selectValue-onHover-bgColor);
+      }
+    }
+
+    .#{$ns}Select-valueLabel {
+      display: inline-block;
+      max-width: var(--Form-valueLabel-maxWidth);
+      padding: 0 var(--gap-xs);
+      overflow: hidden;
+      vertical-align: top;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   &--block {
     display: flex;
   }
@@ -117,38 +153,7 @@
       transform: translateY(0);
     }
 
-    .#{$ns}Select-value {
-      position: static;
-      white-space: normal;
-      user-select: none;
-      line-height: calc(
-        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
-            2px
-          )}
-      );
-      display: inline-block;
-      vertical-align: middle;
-      font-size: var(--Form-selectValue-fontSize);
-      background: var(--Form-select-value-bgColor);
-      border: px2rem(1px) solid var(--Form-select-value-borderColor);
-      border-radius: px2rem(2px);
-      margin-right: var(--gap-xs);
-      margin-bottom: var(--gap-xs);
-
-      &:hover {
-        background-color: var(--Form-selectValue-onHover-bgColor);
-      }
-    }
-
-    .#{$ns}Select-valueLabel {
-      display: inline-block;
-      max-width: var(--Form-valueLabel-maxWidth);
-      padding: 0 var(--gap-xs);
-      overflow: hidden;
-      vertical-align: top;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+    @include select-value();
   }
   &-valueIcon {
     cursor: pointer;
@@ -261,6 +266,7 @@
     }
 
     > input {
+      width: 100%;
       outline: none;
       border: none;
       flex-grow: 1;
@@ -272,7 +278,7 @@
 
   &-option {
     cursor: pointer;
-    min-width: px2rem(120px);
+    // min-width: px2rem(120px);
     padding: calc(
         (
             var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
@@ -389,6 +395,43 @@
   &-popup {
     height: px2rem(320px);
   }
+
+  &-overflow {
+    &-wrapper {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+      align-items: center;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: calc(
+        (
+            var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+                2px
+              )} + var(--gap-xs)
+          ) * 5
+      );
+
+      @include select-value();
+    }
+
+    &.#{$ns}Tooltip--dark {
+      .#{$ns}Select-overflow-wrapper {
+        .#{$ns}Select-value {
+          background-color: var(--Form-select-value-bgColor--dark);
+          border: none;
+
+          &:hover {
+            background-color: var(--ResultBox-value--onHover-bg--dark);
+          }
+
+          .#{$ns}Select-valueIcon {
+            color: var(--Form-select-valueIcon-color--dark);
+          }
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}Select-popover {
@@ -401,7 +444,7 @@
   box-shadow: var(--Form-select-outer-boxShadow);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  min-width: px2rem(100px);
+  // min-width: px2rem(100px);
 
   // PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
   // z-index: 10;

package/scss/components/form/_selection.scss

@@ -46,7 +46,6 @@
   user-select: none;
   padding: var(--gap-xs) 0;
 
-
   &-group > &-itemLabel {
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
@@ -78,10 +77,10 @@
 
     &:hover {
       background: var(--Tree-item-onHover-bg);
-      
-        i {
-          border: 1px solid var(--menu-active-color);
-        }
+
+      i {
+        border: 1px solid var(--menu-active-color);
+      }
     }
 
     &.is-disabled {
@@ -117,6 +116,10 @@
     border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
   }
 
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
     font-size: var(--fontSizeSm);
@@ -347,4 +350,4 @@
     float: right;
     cursor: pointer;
   }
-}
+}

package/scss/components/form/_switch.scss

@@ -10,6 +10,7 @@
   margin: 0;
   vertical-align: middle;
   text-align: left;
+  transition: all 0.5s ease;
 
   &.is-disabled {
     cursor: not-allowed;

package/scss/components/form/_text.scss

@@ -285,6 +285,8 @@
 
   &-revealPassword {
     font-size: 0;
+    display: inline-flex;
+    align-items: center;
 
     .icon {
       width: var(--Form-input-password-icon-size);

package/scss/components/form/_transfer.scss

@@ -70,7 +70,8 @@
     .#{$ns}ChainedSelection-col {
       height: 100%;
       overflow: auto;
-      min-width: px2rem(130px);
+      min-width: unset;
+      flex: 1 1 0;
     }
   }
 

package/scss/themes/_cxd-variables.scss

@@ -81,7 +81,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --fontSizeMd: #{$T3};
   --fontSizeLg: #{$T4};
   --fontSizeXl: #{$T5};
-  --fontSizeBase: var(--fontSizeSm);
+  --fontSizeBase: var(--fontSizeMd);
 
   --borderColor: #{$G8};
   --borderRadius: #{$R3};
@@ -185,7 +185,9 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form-selectValue-color: var(--primary);
   --Form-select-value-borderColor: #{$G9};
   --Form-select-valueIcon-color: #{$G4};
+  --Form-select-valueIcon-color--dark: #{$G8};
   --Form-select-multiple-bgColor: #{$G10};
+  --Form-select-value-bgColor--dark: #{$G4};
 
   --InputGroup-select-borderWidth: #{px2rem(1px)};
   --InputGroup-select-onFocused-bg: #eaf6fe;

package/scss/themes/cxd.scss

@@ -124,8 +124,6 @@
   }
 }
 
-
-
 .#{$ns}Toast {
   .#{$ns}Toast-icon {
     margin-right: #{px2rem(8px)};
@@ -185,10 +183,15 @@
 
 .#{$ns}Transfer {
   &-title {
-    flex: 0 0 #{px2rem(38px)};
-    height: #{px2rem(38px)};
-    padding-left: var(--gap-base);
-    padding-right: var(--gap-base);
+    height: px2rem(32px);
+    flex: 0 0 px2rem(32px);
+    padding-left: #{px2rem(12px)};
+    padding-right: #{px2rem(12px)};
+
+    &--light {
+      height: px2rem(40px);
+      flex: 0 0 px2rem(40px);
+    }
   }
 
   &-result {