amis-ui 2.8.0 → 3.0.0

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/_select.scss

@@ -433,7 +433,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      display: inline-block;
+      // display: inline-block;
       max-width: 100%;
     }
   }
@@ -497,10 +497,8 @@
       height: var(--Form-input-clearBtn-size);
       top: 0;
 
-      &:hover > path {
-        &:first-of-type {
-          fill: var(--Form-select-valueIcon-color);
-        }
+      &:hover {
+        fill: var(--Form-input-clearBtn-color-onHover);
       }
     }
   }

package/scss/components/form/_selection.scss

@@ -270,11 +270,13 @@
   display: flex;
   flex-direction: row;
   min-height: 100%;
+  flex-wrap: wrap;
 
   &-col {
     position: relative;
     flex-grow: 1;
     min-width: 150px;
+    width: 0;
   }
 
   &-col:not(:last-child) {
@@ -287,6 +289,10 @@
     color: var(--text--muted-color);
   }
 
+  &-checkAll {
+    width: 100%;
+  }
+
   &-item {
     display: flex;
     // height: var(--Form-input-height);
@@ -326,6 +332,9 @@
 
   &-itemLabel {
     flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     span {
       margin-left: px2rem(10px);

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

@@ -12,7 +12,6 @@
   .#{$ns}TextControl-clear svg {
     font-size: var(--input-clearable-icon-size);
     fill: var(--input-clearable-default-color);
-    color: var(--input-clearable-default-color);
     width: var(--input-clearable-icon-size);
     height: var(--input-clearable-icon-size);
     &:hover {
@@ -46,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 {

package/scss/components/form/_transfer.scss

@@ -18,7 +18,7 @@
     display: flex;
     align-items: center;
     background: var(--transfer-base-title-bg);
-    color: var(--transfer-base-title-font-color);
+    color: var(--transfer-base-title-color);
     line-height: var(--transfer-base-title-lineHeight);
     font-size: var(--transfer-base-title-fontSize);
     font-weight: var(--transfer-base-title-fontWeight);
@@ -27,10 +27,6 @@
       var(--transfer-base-header-paddingRight)
       var(--transfer-base-header-paddingBottom)
       var(--transfer-base-header-paddingLeft);
-    margin: var(--transfer-base-header-marginTop)
-      var(--transfer-base-header-marginRight)
-      var(--transfer-base-header-marginBottom)
-      var(--transfer-base-header-marginLeft);
     flex-direction: row;
     width: 100%;
 
@@ -80,10 +76,6 @@
       var(--transfer-base-body-paddingRight)
       var(--transfer-base-body-paddingBottom)
       var(--transfer-base-body-paddingLeft);
-    margin: var(--transfer-base-body-marginTop)
-      var(--transfer-base-body-marginRight)
-      var(--transfer-base-body-marginBottom)
-      var(--transfer-base-body-marginLeft);
     width: 100%;
   }
 
@@ -101,7 +93,7 @@
     font-size: var(--transfer-base-content-fontSize);
     font-weight: var(--transfer-base-content-fontWeight);
 
-    color: var(--transfer-base-content-font-color);
+    color: var(--transfer-base-content-color);
   }
 
   .#{$ns}ChainedSelection-item {
@@ -115,15 +107,14 @@
     font-size: var(--transfer-base-content-fontSize);
     font-weight: var(--transfer-base-content-fontWeight);
 
-    color: var(--transfer-base-content-font-color);
+    color: var(--transfer-base-content-color);
   }
 
   .#{$ns}GroupedSelection-group > .#{$ns}GroupedSelection-itemLabel {
-    font-size: var(--transfer-group-font-size);
-    font-weight: var(--transfer-group-font-weight);
-    line-height: var(--transfer-group-font-lineHeight);
-    font-family: var(--transfer-group-font-family);
-    color: var(--transfer-group-font-color);
+    font-size: var(--transfer-group-fontSize);
+    font-weight: var(--transfer-group-fontWeight);
+    line-height: var(--transfer-group-lineHeight);
+    color: var(--transfer-group-color);
   }
 
   &-select > .#{$ns}ChainedSelection {
@@ -197,14 +188,12 @@
     padding: var(--transfer-search-paddingTop)
       var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
       var(--transfer-search-paddingLeft);
-    margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight)
-      var(--transfer-search-marginBottom) var(--transfer-search-marginLeft);
     width: 100%;
     .#{$ns}InputBox {
       font-size: var(--transfer-search-fontSize);
       font-weight: var(--transfer-search-fontWeight);
       line-height: var(--transfer-search-lineHeight);
-      color: var(--transfer-search-font-color);
+      color: var(--transfer-search-color);
       border-width: var(--transfer-search-top-border-width)
         var(--transfer-search-right-border-width)
         var(--transfer-search-bottom-border-width)
@@ -226,10 +215,6 @@
         var(--transfer-search-input-paddingRight)
         var(--transfer-search-input-paddingBottom)
         var(--transfer-search-input-paddingLeft);
-      margin: var(--transfer-search-input-marginTop)
-        var(--transfer-search-input-marginRight)
-        var(--transfer-search-input-marginBottom)
-        var(--transfer-search-input-marginLeft);
 
       &:hover {
         border-color: var(--transfer-search-border-hover-color);
@@ -240,7 +225,7 @@
       }
 
       input {
-        color: var(--transfer-search-font-color);
+        color: var(--transfer-search-color);
         font-size: var(--transfer-search-fontSize);
         font-weight: var(--transfer-search-fontWeight);
         line-height: var(--transfer-search-lineHeight);
@@ -312,13 +297,20 @@
         var(--transfer-tree-top-right-border-radius)
         var(--transfer-tree-bottom-right-border-radius)
         var(--transfer-tree-bottom-left-border-radius);
+      overflow: hidden;
 
       &:hover {
         background: var(--transfer-tree-bg-hover-color);
+        .#{$ns}Tree-itemLabel-item {
+          background: var(--transfer-tree-bg-hover-color);
+        }
       }
 
       &.is-checked {
         background: var(--transfer-tree-bg-active-color);
+        .#{$ns}Tree-itemLabel-item {
+          background: var(--transfer-tree-bg-active-color);
+        }
       }
     }
 
@@ -327,7 +319,7 @@
       font-size: var(--transfer-base-content-fontSize);
       font-weight: var(--transfer-base-content-fontWeight);
 
-      color: var(--transfer-base-content-font-color);
+      color: var(--transfer-base-content-color);
     }
   }
 
@@ -338,7 +330,7 @@
         var(--transfer-table-header-paddingBottom)
         var(--transfer-table-header-paddingLeft);
       background: var(--transfer-base-title-bg);
-      color: var(--transfer-base-title-font-color);
+      color: var(--transfer-base-title-color);
       line-height: var(--transfer-base-title-lineHeight);
       font-size: var(--transfer-base-content-fontSize);
 

package/scss/components/form/_tree.scss

@@ -1,14 +1,7 @@
 .#{$ns}TreeControl {
-  border: 1px solid var(--Form-input-borderColor);
+  border: 1px solid var(--inputTree-border-color);
   padding: 6px 12px;
   border-radius: 2px;
-  max-height: var(--Tree-max-height);
-  overflow: auto;
-
-  &.h-full {
-    max-height: none;
-    overflow: visible;
-  }
 
   &.no-border {
     border: 0;
@@ -32,6 +25,11 @@
     max-height: var(--Tree-max-height);
     overflow: auto;
   }
+
+  &.h-auto > .#{$ns}Tree {
+    max-height: none;
+    overflow: visible;
+  }
 }
 
 .#{$ns}Tree {
@@ -54,6 +52,15 @@
     position: relative;
 
     > div {
+      color: var(--inputTree-base-default-color);
+
+      &:hover {
+        color: var(--inputTree-base-hover-color);
+      }
+
+      &:active {
+        color: var(--inputTree-base-active-color);
+      }
       &:hover {
         text-decoration: none;
 
@@ -76,6 +83,12 @@
 
   &.is-disabled {
     pointer-events: none;
+    .#{$ns}Tree-itemLabel.is-disabled {
+      color: var(--inputTree-base-disabled-color);
+      .#{$ns}Tree-itemArrow > svg {
+        color: var(--inputTree-base-disabled-expandColor);
+      }
+    }
   }
 
   &.is-draggable {
@@ -142,6 +155,10 @@
         }
       }
     }
+
+    .#{$ns}Checkbox {
+      margin-right: var(--inputTree-checkboxes-size-marginRight);
+    }
   }
 
   &-item {
@@ -157,7 +174,7 @@
       }
     }
     .is-disabled {
-      color: var(--text--muted-color);
+      color: var(--inputTree-item-disabled-color);
       background: none;
       &:hover {
         background: none;
@@ -215,20 +232,20 @@
       width: 100%;
       outline: none;
       background: var(--Form-input-bg);
-      border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-      border-radius: var(--Form-input-borderRadius);
-      line-height: var(--Form-input-lineHeight);
+      border: var(--Form-input-borderWidth) solid var(--inputTree-border-color);
+      border-radius: var(--inputTree-border-radius);
+      line-height: var(--inputTree-input-lineHeight);
       padding: calc(
           (
-              var(--Tree-inputHeight) - var(--Form-input-lineHeight) *
-                var(--Form-input-fontSize) - #{px2rem(2px)}
+              var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) *
+                var(--inputTree-fontSize) - #{px2rem(2px)}
             ) / 2
         )
         var(--Form-input-paddingX);
-      font-size: var(--Form-input-fontSize);
+      font-size: var(--inputTree-fontSize);
 
       &::placeholder {
-        color: var(--Form-input-placeholderColor);
+        color: var(--inputTree-placeholder-color);
         user-select: none;
       }
 
@@ -252,7 +269,7 @@
 
     &.is-disabled {
       pointer-events: none;
-      color: var(--text--muted-color);
+      color: var(--inputTree-item-disabled-color);
     }
 
     > svg {
@@ -268,7 +285,7 @@
     cursor: pointer;
     width: var(--Tree-itemArrowWidth);
     display: inline-flex;
-    margin-right: var(--Tree-icon-margin-right);
+    margin-right: var(--inputTree-base-size-expandMarginRight);
 
     // &:before {
     //   font-style: normal;
@@ -281,7 +298,15 @@
       display: block;
       transition: transform var(--animation-duration);
       top: 0;
-      color: var(--Tree-item-arrow-color);
+      color: var(--inputTree-base-default-expandColor);
+
+      &:hover {
+        color: var(--inputTree-base-hover-expandColor);
+      }
+
+      &:active {
+        color: var(--inputTree-base-active-expandColor);
+      }
     }
 
     &.is-folded > svg {
@@ -305,7 +330,7 @@
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--Tree-icon-margin-right);
+    margin-right: var(--inputTree-base-size-nodeMarginRight);
   }
 
   &-rootIcon,
@@ -322,19 +347,26 @@
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
-    color: var(--select-tree-color);
+    color: var(--inputTree-base-default-color);
     font-size: var(--select-tree-fontSize);
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &:hover {
+      color: var(--inputTree-base-hover-color);
+    }
+    &:active {
+      color: var(--inputTree-base-active-color);
+    }
   }
   .is-disabled &-itemText {
-    color: var(--text--muted-color);
+    color: var(--inputTree-base-disabled-color);
   }
 
   &-placeholder {
-    color: var(--text--muted-color);
+    color: var(--inputTree-placeholder-color);
   }
 
   &-dropIndicator {

package/esm/node_modules/rc-overflow/es/hooks/useBatchFrameState.js

@@ -1,51 +0,0 @@
-/**
- * amis-ui v2.8.0
- * Copyright 2018-2023 fex
- */
-
-import _slicedToArray from '../../../@babel/runtime/helpers/esm/slicedToArray.js';
-import { useRef } from 'react';
-import wrapperRaf from '../../../rc-util/es/raf.js';
-import useSafeState from '../../../rc-util/es/hooks/useState.js';
-
-/**
- * State generate. Return a `setState` but it will flush all state with one render to save perf.
- * This is not a realization of `unstable_batchedUpdates`.
- */
-
-function useBatchFrameState() {
-  var _useState = useSafeState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      forceUpdate = _useState2[1];
-
-  var statesRef = useRef([]);
-  var walkingIndex = 0;
-  var beforeFrameId = 0;
-
-  function createState(defaultValue) {
-    var myIndex = walkingIndex;
-    walkingIndex += 1; // Fill value if not exist yet
-
-    if (statesRef.current.length < myIndex + 1) {
-      statesRef.current[myIndex] = defaultValue;
-    } // Return filled as `setState`
-
-
-    var value = statesRef.current[myIndex];
-
-    function setValue(val) {
-      statesRef.current[myIndex] = typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
-      wrapperRaf.cancel(beforeFrameId); // Flush with batch
-
-      beforeFrameId = wrapperRaf(function () {
-        forceUpdate({}, true);
-      });
-    }
-
-    return [value, setValue];
-  }
-
-  return createState;
-}
-
-export { useBatchFrameState };