amis-ui 2.0.2 → 2.2.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,34 @@
     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 {
+      cursor: pointer;
+
+      &.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 +407,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 +591,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 +604,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 +639,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 +665,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/_editor.scss

@@ -57,6 +57,17 @@
         }
       }
     }
+
+    &-placeholder {
+      pointer-events: none;
+      top: 0;
+      position: absolute;
+      left: px2rem(65px);
+      right: px2rem(16px);
+      white-space: break-spaces;
+      line-break: anywhere;
+      color: var(--Form-input-placeholderColor);
+    }
   }
 
   &--sm {

package/scss/components/form/_form.scss

@@ -28,6 +28,7 @@
   padding-top: var(--Form-label-paddingTop);
   padding-bottom: var(--Form-label-paddingTop);
   margin-bottom: 0;
+  word-break: break-word;
 
   .#{$ns}Form-item--inline > .#{$ns}Form-value > & {
     display: inline-block;
@@ -50,7 +51,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 +162,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 {
@@ -388,8 +396,11 @@
 }
 
 .#{$ns}Form--debug {
-  word-break: break-all;
-  white-space: pre-wrap;
+  padding: var(--gap-sm);
+  margin-bottom: var(--gap-sm);
+  background-color: rgb(250, 250, 250);
+  border-radius: var(--borderRadius);
+  position: relative;
 }
 
 .#{$ns}Form--quickEdit {

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,9 +84,8 @@
   }
 
   .#{$ns}PopOver.#{$ns}Select-popover {
+    margin-top: px2rem(4px);
     .#{$ns}Select-menu {
-      overflow-x: hidden;
-
       .#{$ns}Select-option {
         height: px2rem(32px);
         line-height: px2rem(22px);
@@ -313,6 +316,7 @@
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
+          width: 100%;
         }
       }
     }
@@ -506,6 +510,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,16 +93,38 @@
     overflow: hidden;
   }
 
-  &-search + &-selection {
-    border-top: 1px solid var(--borderColor);
-  }
+  &-selection {
+    .#{$ns}ListSelection-placeholder {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+    }
 
-  &-selection .#{$ns}ListSelection-placeholder {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
+    &.#{$ns}Tree,
+    &.#{$ns}AssociatedSelection {
+      .#{$ns}Tree-itemLabel.is-checked:hover,
+      .#{$ns}Tree-itemLabel:hover {
+        .#{$ns}Tree-itemLabel-item > .#{$ns}Tree-itemText {
+          background-color: unset;
+          &:active {
+            background-color: unset;
+          }
+        }
+      }
+
+      .#{$ns}Tree-itemLabel-item {
+        display: flex;
+        align-items: center;
+
+        > .#{$ns}Tree-itemText {
+          max-width: unset;
+          line-height: unset;
+          top: unset;
+        }
+      }
+    }
   }
 
   &-search {
@@ -302,7 +325,6 @@
   }
 }
 .#{$ns}TransferDropDown-content {
-  min-height: px2rem(200px);
   min-width: px2rem(400px);
   display: flex;
   flex-direction: column;