amis-ui 2.0.0 → 2.1.0

package/scss/components/form/_date.scss

@@ -24,6 +24,9 @@
       outline: none;
       box-sizing: none;
     }
+    &::placeholder {
+      color: #{$G6};
+    }
   }
 
   .#{$ns}DatePicker-clear {
@@ -47,11 +50,11 @@
         display: none;
       }
     }
-  }
 
-  &.is-focused {
-    border-color: var(--DatePicker-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    &.is-focused {
+      border-color: var(--DatePicker-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+    }
   }
 
   &.is-disabled {
@@ -254,11 +257,17 @@
     .rdtTimeToggle {
       background: var(--Calendar-cell-bg);
 
-      &:hover {
+      &:hover span {
         background: var(--Calendar-cell-onHover-bg);
       }
     }
 
+    td.rdtToday {
+      &:hover span {
+        background: transparent;
+      }
+    }
+
     td.rdtBetween {
       background: var(--Calendar-cell-onBetween-bg);
     }
@@ -289,12 +298,10 @@
     .rdtActive.rdtToday {
       color: #151b26;
       > span {
-        background: transparent;
         border-color: #144bcc;
       }
     }
 
-    td.rdtDisabled,
     td.rdtDisabled:hover {
       > span {
         background: var(--Calendar-cell-onDisabled-bg);
@@ -334,12 +341,21 @@
   }
 }
 
+.#{$ns}CalendarTimesWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .#{$ns}CalendarInputsWrapper {
+    height: #{px2rem(248px)};
+  }
+}
+
 .#{$ns}CalendarInputWrapper {
   display: inline-block;
   position: relative;
   // padding-top: #{px2rem(4px)};
   width: #{px2rem(64px)};
-  height: #{px2rem(224px)};
+  height: #{px2rem(248px)};
   overflow: auto;
   .#{$ns}CalendarInput-sugs {
     list-style: none;
@@ -350,25 +366,32 @@
     top: 100%;
     z-index: 10;
     &Hours {
-      height: #{px2rem(868px)};
+      height: #{px2rem(892px)};
     }
     &Times {
-      height: #{px2rem(1876px)};
+      height: #{px2rem(1900px)};
       border-left: 1px solid var(--Calendar-input-borderColor);
     }
     &Item {
       text-align: center;
       height: 28px;
       line-height: 28px;
-      &.is-highlight,
-      &:hover {
+      &.is-highlight {
         color: var(--Form-select-menu-onHover-color);
         background: var(--Form-select-menu-onHover-bg);
       }
+      &:hover {
+        color: var(--Form-select-menu-onHover-color);
+        background: #F7F7F9;
+      }
     }
   }
 }
 
+.#{$ns}TimeContentWrapper {
+  display: flex;
+}
+
 .#{$ns}TimeRangeHeaderWrapper {
   height: 40px;
   padding-top: 10px;
@@ -382,6 +405,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
+  border-top: 1px solid var(--Calendar-input-borderColor);
 
   .#{$ns}Button {
     height: 24px;
@@ -565,7 +589,6 @@
   display: table;
   table-layout: fixed;
   border-collapse: separate;
-  border-bottom: 1px solid var(--Calendar-input-borderColor);
   height: 40px;
   width: 100%;
   margin-top: -8px;
@@ -579,6 +602,28 @@
   .rdtSwitch + .rdtSwitch {
     margin-left: var(--gap-xs);
   }
+
+  .date-icon-arrow-left,
+  .date-icon-arrow {
+    width: #{px2rem(10px)};
+    height: #{px2rem(10px)};
+    top: 0;
+  }
+
+  .date-icon-arrow-left {
+    transform: rotate(180deg);
+    transform-origin: 50% 50%;
+  }
+}
+
+.header-line {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 40px;
+  height: 1px;
+  background: var(--Calendar-input-borderColor);
 }
 
 td.rdtMonth,
@@ -592,7 +637,15 @@ td.rdtQuarter {
     background: var(--Calendar-cell-onBetween-bg);
   }
 
-  &:hover,
+  &:hover {
+    background: transparent;
+
+    > span {
+      color: var(--Form-select-menu-onHover-color);
+      background: #F7F7F9;
+    }
+  }
+
   &.rdtActive,
   &.rdtActive:hover {
     background: transparent;
@@ -610,30 +663,41 @@ td.rdtQuarter {
   }
 }
 
-.#{$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%
-    );
-  }
+.rdtPicker .rdtActive.rdtBetween.rdtStartDay {
+  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%
-    );
+.rdt .rdtPicker td.is-disabled {
+  cursor: not-allowed !important;
+  background: var(--Calendar-cell-onDisabled-bg);
+  color: var(--text--muted-color);
+
+  &:hover {
+    background: var(--Calendar-cell-onDisabled-bg);
+    color: var(--text--muted-color);
+    & > span {
+      background: inherit !important;
+      color: inherit !important;
+    }
   }
 }
 
+.rdtPicker .rdtActive.rdtBetween.rdtEndDay {
+  background: linear-gradient(
+    to right,
+    var(--Calendar-cell-onBetween-bg) 0%,
+    var(--Calendar-cell-onBetween-bg) 50%,
+    transparent 51%,
+    transparent 100%
+  );
+}
+
 .#{$ns}DateCalendar {
   display: inline-block;
   border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);

package/scss/components/form/_form.scss

@@ -50,7 +50,7 @@
 
 .#{$ns}Form-label {
   font-weight: var(--fontWeightNormal);
-  margin-bottom: var(--gap-xs);
+  margin-bottom: var(--gap-sm);
   position: relative;
   font-size: var(--Form-item-fontSize);
   color: var(--Form-item-fontColor);
@@ -161,6 +161,13 @@
   &.is-error > .#{$ns}Form-label {
     color: var(--danger);
   }
+
+  .#{$ns}Form-control--withSize {
+    > .#{$ns}ResultBox {
+      // 兼容 @media (min-width: 576px) .cxd-Form-control--sizeLg
+      display: flex;
+    }
+  }
 }
 
 .#{$ns}Form-placeholder {
@@ -387,6 +394,11 @@
   }
 }
 
+.#{$ns}Form--debug {
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
 .#{$ns}Form--quickEdit {
   min-width: var(--Form-control-widthSm);
 }

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

@@ -1,5 +1,11 @@
 .#{$ns}NestedSelectControl {
   position: relative;
+
+  .#{$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);
+  }
 }
 
 .#{$ns}NestedSelect {

package/scss/components/form/_number.scss

@@ -40,6 +40,10 @@
 
   &:hover {
     border-color: var(--Form-input-onFocused-borderColor);
+
+    .#{$ns}Number-handler-wrap {
+      display: block;
+    }
   }
 
   &-disabled:hover {
@@ -104,6 +108,7 @@
 
   @if $Number-handler-mode==vertical {
     &-handler-wrap {
+      display: none;
       float: right;
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
@@ -220,13 +225,13 @@
     color: var(--Form-input-color);
     background: var(--Form-input-bg);
     &:hover {
-        cursor: pointer;
-        background: var(--Form-input-bg);
-        color: var(--Form-input-onHover-borderColor);
+      cursor: pointer;
+      background: var(--Form-input-bg);
+      color: var(--Form-input-onHover-borderColor);
     }
     &-focused {
-        background: var(--Form-input-bg);
-        color: var(--Form-input-onFocused-borderColor);
+      background: var(--Form-input-bg);
+      color: var(--Form-input-onFocused-borderColor);
     }
     & > svg {
       width: var(--fontSizeSm);
@@ -258,13 +263,13 @@
     border-color: var(--Form-input-onFocused-borderColor);
   }
   .#{$ns}Number--enhance-border-min,
-  .#{$ns}Number--enhance-border-max{
+  .#{$ns}Number--enhance-border-max {
     background: var(--Number-handler-onDisabled-bg);
     pointer-events: none;
     color: var(--Number-handler-onDisabled-color);
     &:hover {
-        background: var(--Number-handler-onDisabled-bg);
-        color: var(--Number-handler-onDisabled-color);
+      background: var(--Number-handler-onDisabled-bg);
+      color: var(--Number-handler-onDisabled-color);
     }
   }
   .#{$ns}Number--enhance-border-disabled {
@@ -272,15 +277,15 @@
     color: var(--Form-inputNumber-strong-disabled-color);
     cursor: not-allowed;
     &:hover {
-        cursor: not-allowed;
-        background: var(--Form-input-onDisabled-bg);
-        color: var(--Form-inputNumber-strong-disabled-color);
+      cursor: not-allowed;
+      background: var(--Form-input-onDisabled-bg);
+      color: var(--Form-inputNumber-strong-disabled-color);
     }
   }
   .#{$ns}Number--enhance-border-readOnly,
   .#{$ns}Number--enhance-border-readOnly {
     &:hover {
-      color: var(--Number-handler-onHover-color);;
+      color: var(--Number-handler-onHover-color);
     }
   }
 }
@@ -296,7 +301,7 @@
   }
 }
 
-.#{$ns}Number--enhance-disabled{
+.#{$ns}Number--enhance-disabled {
   border-color: var(--Form-input-onDisabled-borderColor);
   .#{$ns}Number--enhance-input {
     border-color: var(--Form-input-onDisabled-borderColor);

package/scss/components/form/_picker.scss

@@ -19,11 +19,14 @@
     position: absolute;
     // margin-top: 2 * var(--Form-input-borderWidth);
     line-height: var(--Form-input-lineHeight);
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
   }
 
   &-input {
     min-height: var(--Form-input-height);
     height: auto;
+    padding: 0;
+    flex-wrap: nowrap;
   }
 
   .#{$ns}Picker-values {
@@ -33,6 +36,7 @@
   &-valueWrap {
     flex-grow: 1;
     position: relative;
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
 
     > input {
       width: 1rem;
@@ -80,6 +84,10 @@
   &-btn {
     cursor: pointer;
     color: var(--Picker-iconColor);
+    flex: 30px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
       color: var(--Picker-onHover-iconColor);

package/scss/components/form/_rating.scss

@@ -54,8 +54,8 @@
   }
 
   &-text {
-    font-size: var(--fontSizeSm);
-    color: var(--text-color);
+    font-size: var(--fontSizeMd);
+    color: var(--Rating-text-color);
     font-weight: var(--fontWeightNormal);
 
     &--left {

package/scss/components/form/_select.scss

@@ -62,13 +62,17 @@
 
   &:hover {
     background: var(--Form-select-onHover-bg);
-    border-color: var(--Form-select-onHover-borderColor);
+    border-color: var(--Form-input-onHover-borderColor);
 
     .#{$ns}Select-arrow:before {
       color: var(--Form-select-caret-onHover-iconColor);
     }
   }
 
+  &:active {
+    border-color: var(--Button--default-onActive-border);
+  }
+
   &.is-disabled {
     color: var(--text--muted-color);
     background: var(--Form-input-onDisabled-bg);
@@ -80,6 +84,7 @@
   }
 
   .#{$ns}PopOver.#{$ns}Select-popover {
+    margin-top: px2rem(4px);
     .#{$ns}Select-menu {
       overflow-x: hidden;
 
@@ -313,6 +318,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
+          width: 100%;
         }
       }
     }
@@ -506,6 +512,33 @@
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);
   }
+
+  .#{$ns}TransferDropDown-popover {
+    border: none;
+
+    .#{$ns}Tree-list {
+      .#{$ns}Tree-item {
+        .#{$ns}Tree-itemLabel,
+        .#{$ns}Tree-item--isLeaf {
+          &:hover {
+            background-color: transparent;
+            .#{$ns}Tree-itemText {
+              background: var(--Transfer-title-bg);
+            }
+          }
+          &:active {
+            background-color: transparent;
+            .#{$ns}Tree-itemText {
+              background: var(--Tree-item-onChekced-bg);
+            }
+          }
+          &.is-checked {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}Select.is-error {

package/scss/components/form/_selection.scss

@@ -47,6 +47,7 @@
   padding: var(--gap-xs) 0;
 
   &-group > &-itemLabel {
+    height: px2rem(32px);
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
   }

package/scss/components/form/_text.scss

@@ -1,6 +1,12 @@
 .#{$ns}TextControl {
   @include input-text();
 
+  &-input input {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   &-placeholder {
     color: var(--Form-input-placeholderColor);
     user-select: none;

package/scss/components/form/_textarea.scss

@@ -4,6 +4,11 @@
 
   position: relative;
 
+  > textarea.#{$ns}TextareaControl-input--counter {
+    // 23 px 是计数器 counter 的高度
+    padding-bottom: 23px;
+  }
+
   > textarea {
     @include input-border();
 
@@ -30,23 +35,22 @@
 
   &-counter {
     position: absolute;
-    right: var(--Form-input-paddingX);
-    bottom: var(--Form-input-paddingY);
+    left: 1px;
+    bottom: 1px;
+    right: var(--scrollbar-width);
+    padding-bottom: var(--Form-input-paddingY);
+    background-color: #fff;
+    text-align: right;
+    // right: var(--Form-input-paddingX);
+    // bottom: var(--Form-input-paddingY);
     font-size: var(--fontSizeSm);
-    padding: 0 5px;
+    // padding: 0 5px;
     border-radius: 3px;
     color: #84868c;
 
     &.is-empty {
       color: #84868c;
     }
-
-    &.is-clearable {
-      right: calc(
-        var(--Form-input-paddingX) + var(--Form-input-clearBtn-size) +
-          var(--Form-input-clearBtn-padding) * 2 + #{px2rem(5px)}
-      );
-    }
   }
 
   .has-error--maxLength &-counter {
@@ -57,6 +61,6 @@
     @include input-clear();
     position: absolute;
     right: var(--Form-input-paddingX);
-    bottom: var(--Form-input-paddingY);
+    top: var(--Form-input-paddingY);
   }
 }

package/scss/components/form/_transfer.scss

@@ -61,12 +61,13 @@
     max-height: 100%;
     overflow: auto;
     position: relative; // 貌似不加 relative 会有 bug。
+    padding: 0;
   }
 
   &-select > .#{$ns}ChainedSelection {
     min-height: unset;
     overflow: hidden;
-    
+
     .#{$ns}ChainedSelection-col {
       height: 100%;
       overflow: auto;
@@ -92,10 +93,6 @@
     overflow: hidden;
   }
 
-  &-search + &-selection {
-    border-top: 1px solid var(--borderColor);
-  }
-
   &-selection .#{$ns}ListSelection-placeholder {
     height: 100%;
     display: flex;

package/scss/components/form/_tree.scss

@@ -85,6 +85,7 @@
 
   &-itemLabel {
     display: flex;
+    flex-direction: row;
     align-items: center;
     position: relative;
     user-select: none;
@@ -98,16 +99,35 @@
       display: inline-flex;
       align-self: center;
     }
+    &-item {
+      padding-left: var(--Tree-item-arrow-padding-left);
+      display: inline-block;
+      width: 100%;
+    }
   
     &:hover {
-      background: var(--Tree-item-onHover-bg-pure);
+      .#{$ns}Tree{
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onHover-bg-pure);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
   }
 
   &-item {
     .is-checked {
-      background: var(--Tree-item-onChekced-bg);
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+      .#{$ns}Tree{
+        &-itemLabel-item {
+          background-color: var(--Tree-item-onChekced-bg);
+        }
+        &-item-icons {
+          visibility: visible;
+        }
+      }
     }
     .is-disabled {
       color: var(--text--muted-color);
@@ -136,7 +156,6 @@
       vertical-align: middle;
       margin-left: var(--Tree-icon-gap);
       cursor: pointer;
-
       > svg {
         $svgSize: px2rem(12px);
         width: $svgSize;
@@ -235,6 +254,7 @@
       display: block;
       transition: transform var(--animation-duration);
       top: 0;
+      color: var(--Tree-item-arrow-color);
     }
 
     &.is-folded > svg {
@@ -258,7 +278,7 @@
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--Tree-icon-gap);
+    margin-right: var(--Tree-icon-margin-right);
   }
 
   &-rootIcon,
@@ -275,8 +295,15 @@
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
+    display: inline-block;
     color: var(--Form-input-color);
     line-height: var(--lineHeightBase);
+    max-width: var(--Tree-item-text-max-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+    top: var(--Tree-item-text-top);
   }
   .is-disabled &-itemText {
     color: var(--text--muted-color);

package/scss/components/react-datetime.scss

@@ -16,6 +16,11 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   border: 1px solid #f9f9f9;
 }
+
+.rdtPickerNotDays {
+  width: 192px;
+}
+
 .rdtOpen .rdtPicker {
   display: block;
 }
@@ -57,7 +62,7 @@
   > span {
     display: inline-block;
     border-radius: 2px;
-    height: 100%;
+    height: 24px;
     width: 24px;
   }
 }