amis-ui 6.9.0-rc.1 → 6.9.0-rc.3

package/lib/withRemoteConfig.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.1
+ * amis-ui v6.9.0-rc.3
  * Copyright 2018-2024 fex
  */
 

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.1
+ * amis-ui v6.9.0-rc.3
  * Copyright 2018-2024 fex
  */
 

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "6.9.0-rc.1",
+  "version": "6.9.0-rc.3",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^6.9.0-rc.1",
-    "amis-formula": "^6.9.0-rc.1",
+    "amis-core": "^6.9.0-rc.3",
+    "amis-formula": "^6.9.0-rc.3",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",

package/scss/_components.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 :root,
 .AMISCSSWrapper {
   --button-default-default-top-border-color: var(--colors-neutral-line-8);
@@ -2893,18 +2894,21 @@
   );
   --Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
   --Form-selectOption-height: var(--Form-select-height);
-  --Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
+  --Form-selectValue-bg: #{color.adjust(
+      color.adjust($info, $lightness: 40%),
+      $saturation: 2.5%
+    )};
   --Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
   --Form-selectValue-borderColor: var(--colors-brand-7);
   --Form-selectValue-color: var(--colors-brand-5);
   --Form-selectValue-fontSize: var(--select-multiple-fontSize);
-  --Form-selectValue-onDisable-bg: #{lighten(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onDisable-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: 5%
     )};
-  --Form-selectValue-onHover-bg: #{darken(
-      saturate(lighten($info, 40%), 2.5%),
-      5%
+  --Form-selectValue-onHover-bg: #{color.adjust(
+      color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
+      $lightness: -5%
     )};
   --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
   --Form-selectValue-onInvalid-color: var(--danger);
@@ -3932,9 +3936,9 @@
 
   --table-border-width: var(--borders-width-2);
   --table-border-color: var(--colors-neutral-line-8);
-  --table-paddingTop: var(--sizes-size-3);
+  --table-paddingTop: var(--sizes-size-6);
   --table-paddingRight: var(--sizes-size-6);
-  --table-paddingBottom: var(--sizes-size-3);
+  --table-paddingBottom: var(--sizes-size-6);
   --table-paddingLeft: var(--sizes-size-6);
   --table-paddingX: var(--sizes-size-7);
   --table-header-color: var(--colors-neutral-text-2);
@@ -4020,7 +4024,7 @@
   --Table-onHover-boxShadow: var(--shadows-shadow-normal);
   --Table-onHover-color: var(--table-body-hover-color);
   --Table-onModified-bg: #e8f0fe;
-  --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
+  --Table-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -5%)};
   --Table-onModified-color: #4285f4;
   --Table-placeholder-height: #{px2rem(200px)};
   --Table-strip-bg: transparent;

package/scss/_mixins.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 // 媒体查询最小阈值
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
@@ -53,14 +54,16 @@
   }
 }
 
-// @deprecated 不建议用了
 @mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: saturate(darken($bg-color, $percent), $sat-percent);
+  background: color.adjust(
+    color.adjust($bg-color, $lightness: -$percent),
+    $saturation: $sat-percent
+  );
 }
 
-// @deprecated 不建议用了
 @mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
-  background: desaturate(lighten($bg-color, $percent), $sat-percent);
+  $lightened-color: color.adjust($bg-color, $lightness: $percent);
+  background: color.adjust($lightened-color, $saturation: $sat-percent);
 }
 
 // @deprecated 不建议用了
@@ -101,8 +104,14 @@
 
 // @deprecated 不建议用了
 @mixin font-variant($bg-color) {
-  $font-color: desaturate(lighten($bg-color, 40%), 10%);
-  $link-color: desaturate(lighten($bg-color, 50%), 10%);
+  $font-color: color.adjust(
+    color.adjust($bg-color, $lightness: 40%),
+    $saturation: -10%
+  );
+  $link-color: color.adjust(
+    color.adjust($bg-color, $lightness: 50%),
+    $saturation: -10%
+  );
   $hover-color: #fff;
   color: $font-color;
 
@@ -124,11 +133,11 @@
   }
 
   & .text-muted {
-    color: darken($text-color, 10%) !important;
+    color: color.adjust($text-color, $lightness: -10%) !important;
   }
 
   & .text-lt {
-    color: lighten($text-color, 25%) !important;
+    color: color.adjust($text-color, $lightness: 25%) !important;
   }
 
   // &.auto,
@@ -150,11 +159,11 @@
 // @deprecated 不建议用了
 @mixin text-wariant($bg-color, $name) {
   a.bg-#{'' + $name}:hover {
-    background: darken($bg-color, 5%);
+    background: color.adjust($bg-color, $lightness: -5%);
   }
 
   a.text-#{'' + $name}:hover {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name} {
@@ -162,19 +171,19 @@
   }
 
   .text-#{'' + $name}-lt {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-lter {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 
   .text-#{'' + $name}-dk {
-    color: darken($bg-color, 5%);
+    color: color.adjust($bg-color, $lightness: -5%);
   }
 
   .text-#{'' + $name}-dker {
-    color: darken($bg-color, 10%);
+    color: color.adjust($bg-color, $lightness: -10%);
   }
 }
 

package/scss/_properties.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @import './functions';
 @import './variables';
 $remFactor: 16px;
@@ -209,14 +210,17 @@ $Table-strip-bg: transparent;
   --Card-onChecked-bg: var(--colors-neutral-fill-11);
   --Card-onChecked-borderColor: var(--colors-brand-5);
   --Card-onChecked-color: var(--colors-brand-5);
-  --Card-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)};
+  --Card-onChecked-fieldLabel-color: #{color.adjust(
+      color.adjust(#d9f3fb, $lightness: -40%),
+      $lightness: 20%
+    )};
   --Card-onDragging-opacity: 0.1;
   --Card-onModified-bg: var(--colors-neutral-fill-8);
   --Card-onModified-borderColor: var(--colors-brand-5);
   --Card-onModified-color: var(--colors-brand-6);
   --Card-onModified-fieldLabel-color: var(--colors-brand-8);
-  --Card-onModified-onHover-bg: #{darken(#e8f0fe, 5%)};
-  --Card-onModified-onHover-color: #{darken(#4285f4, 10%)};
+  --Card-onModified-onHover-bg: #{color.adjust(#e8f0fe, $lightness: -5%)};
+  --Card-onModified-onHover-color: #{color.adjust(#4285f4, $lightness: -10%)};
   --Cards--unsaved-heading-bg: #e8f0fe;
   --Cards--unsaved-heading-color: #4285f4;
   --Cards-fixedTop-boxShadow: var(--shadows-shadow-normal);
@@ -405,16 +409,28 @@ $Table-strip-bg: transparent;
   --Layout-aside--md-width: #{px2rem(250px)};
   --Layout-aside--sm-width: #{px2rem(150px)};
   --Layout-aside-bg: var(--colors-neutral-fill-2);
-  --Layout-aside-color: #{desaturate(lighten($dark, 40%), 10%)};
-  --Layout-aside-onAcitve-bg: #{saturate(darken($dark, 5%), 2.5%)};
-  --Layout-aside-onHover-bg: #{saturate(darken($dark, 3%), 2.5%)};
+  --Layout-aside-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
+  --Layout-aside-onAcitve-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -5%),
+      $saturation: 2.5%
+    )};
+  --Layout-aside-onHover-bg: #{color.adjust(
+      color.adjust($dark, $lightness: -3%),
+      $saturation: 2.5%
+    )};
   --Layout-aside-subList-bg: var(--colors-neutral-fill-2);
   --Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg);
   --Layout-aside-width: #{px2rem(180px)};
   --Layout-aside-width-collapsed: #{px2rem(60px)};
   --Layout-asideDivider-bg: var(--colors-neutral-line-3);
   --Layout-asideDivider-margin: 0 var(--sizes-size-6);
-  --Layout-asideLabel-color: #{darken(desaturate(lighten($dark, 40%), 10%), 10%)};
+  --Layout-asideLabel-color: #{color.adjust(
+      color.adjust(color.adjust($dark, $lightness: 40%), $saturation: -10%),
+      $lightness: -10%
+    )};
   --Layout-asideLink-color: var(--colors-neutral-text-11);
   --Layout-asideLink-fontSize: var(--fonts-size-8);
   --Layout-asideLink-arrowFontSize: var(--fonts-size-8);
@@ -430,7 +446,10 @@ $Table-strip-bg: transparent;
   --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
   --Layout-brand-bg: var(--colors-neutral-fill-2);
   --Layout-brand-color: var(--colors-neutral-text-11);
-  --Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)};
+  --Layout-brandBar-color: #{color.adjust(
+      color.adjust($dark, $lightness: 40%),
+      $saturation: -10%
+    )};
   --Layout-header-bg: var(--colors-neutral-fill-10);
   --Layout-header-boxShadow: none;
   --Layout-header-height: #{px2rem(50px)};
@@ -498,9 +517,12 @@ $Table-strip-bg: transparent;
   --ListItem-onChecked-fieldLabel-color: var(--colors-brand-4);
   --ListItem-onDragging-opacity: 0.1;
   --ListItem-onModified-bg: #e8f0fe;
-  --ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)};
+  --ListItem-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -10%)};
   --ListItem-onModified-color: #4285f4;
-  --ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)};
+  --ListItem-onModified-fieldLabel-color: #{color.adjust(
+      #4285f4,
+      $lightness: 20%
+    )};
   --ListItem-paddingX: var(--gap-base);
   --ListItem-paddingY: var(--gap-sm);
   --ListItem--onHover-bg: rgba(0, 126, 255, 0.08);
@@ -705,7 +727,7 @@ $Table-strip-bg: transparent;
   --Tooltip-arrow-color: var(--Tooltip-bg);
   --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-arrow-height: #{px2rem(4px)};
-  --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
+  --Tooltip-arrow-outerColor: #{color.adjust($borderColor, $alpha: 0.05)};
   --Tooltip-arrow-width: #{px2rem(8px)};
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
@@ -723,8 +745,11 @@ $Table-strip-bg: transparent;
   --Tooltip-maxWidth: #{px2rem(240px)};
   --Tooltip-minWidth: auto;
   --Tooltip-title-fontWeight: bold;
-  --Tooltip-title-bg: #{darken($white, 3%)};
-  --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
+  --Tooltip-title-bg: #{color.adjust($white, $lightness: -3%)};
+  --Tooltip-title-borderBottom-color: #{color.adjust(
+      color.adjust($white, $lightness: -3%),
+      $lightness: -5%
+    )};
   --Tooltip-title-color: var(--text--loud-color);
   --Tooltip-title-color--dark: #fff;
   --Tooltip-title-paddingX: var(--gap-base);

package/scss/_variables.scss

@@ -1,5 +1,6 @@
 // 这里只放 sass 里的变量，因为有很多颜色计算，为了保持和之前的兼容性所以还保留这些变量，但后续会通过新增 css 自定义属性的方式逐渐替换
 // 类名前缀
+@use 'sass:color';
 $ns: '' !default;
 $remFactor: 16px !default;
 
@@ -433,6 +434,6 @@ $zindex-debug: 4000 !default;
 $zindex-spinner-overlay: 11 !default;
 
 $Form--horizontal-columns: 12;
-$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
+$Table-strip-bg: color.adjust(#f6f8f8, $lightness: 1%) !default;
 $Number-handler-mode: 'vertical';
 $Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

package/scss/components/_array-input.scss

@@ -48,13 +48,13 @@
   &-toolbar {
     margin-top: var(--gap-sm);
 
-    &--dnd {
-      padding-left: 29px;
-    }
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    &--dnd {
+      padding-left: 29px;
+    }
   }
 
   &-sortTip {

package/scss/components/_input-box.scss

@@ -1,7 +1,8 @@
 .#{$ns}InputBox {
+  height: var(--input-size-default-height);
+
   @include input-input();
   @include input-border();
-  height: var(--input-size-default-height);
 
   &--inline {
     display: inline-flex;

package/scss/components/_json-schema-editor.scss

@@ -134,16 +134,14 @@
   &-info {
     min-width: 0;
     min-height: 0;
-
-    @include input-input();
-    @include input-border();
-
     flex: 1;
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+
+    @include input-input();
+    @include input-border();
   }
   &-typeLabel {
     color: var(--Form-input-placeholderColor);

package/scss/components/_picker-columns.scss

@@ -135,6 +135,6 @@
 
   &-columnItemis-selected {
     font-size: 18px;
-    color: --PickerColumns-title-color;
+    color: var(--PickerColumns-title-color);
   }
 }

package/scss/components/_result-box.scss

@@ -1,6 +1,4 @@
 .#{$ns}ResultBox {
-  @include input-input();
-  @include input-border();
   flex-wrap: nowrap;
   padding: 0 px2rem(12px);
   min-height: var(--Form-input-height);
@@ -24,6 +22,8 @@
     var(--select-base-default-paddingBottom)
     var(--select-base-default-paddingLeft);
 
+  @include input-input();
+  @include input-border();
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);

package/scss/components/_tag.scss

@@ -26,14 +26,13 @@
   }
 
   &--normal {
-    &--hasColor {
-      color: var(--white);
-    }
-
     border-width: var(--Tag-normal-borderWidth);
     border-radius: var(--Tag-normal-borderRadius);
     border-color: var(--Tag-normal-borderColor);
 
+    &--hasColor {
+      color: var(--white);
+    }
     &--inactive {
       color: var(--Tag-inactive-color);
       background: var(--Tag-inactive-bg-color);

package/scss/components/_toast.scss

@@ -59,12 +59,6 @@
   justify-content: space-between;
   align-items: flex-start;
 
-  &-wrap {
-    pointer-events: none;
-    position: fixed;
-    z-index: $zindex-toast;
-  }
-
   max-width: var(--Toast-width);
   pointer-events: auto;
   margin-bottom: var(--gap-xs);
@@ -83,6 +77,12 @@
   transform: translateZ(0);
   width: px2rem(400px);
 
+  &-wrap {
+    pointer-events: none;
+    position: fixed;
+    z-index: $zindex-toast;
+  }
+
   &.in,
   &.out {
     animation-fill-mode: both;

package/scss/components/form/_image.scss

@@ -26,20 +26,6 @@
     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),
       var(--ImageControl-addBtn-color),
@@ -103,6 +89,20 @@
       var(--shadows-shadow-none)
     );
 
+    &-bg {
+      position: absolute;
+      z-index: 0;
+      overflow: hidden;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      .#{$ns}Image {
+        border: 0;
+      }
+    }
+
     svg {
       top: 0;
       margin-bottom: var(--inputImage-base-default-icon-margin);

package/scss/components/form/_list.scss

@@ -122,14 +122,6 @@
       border-color: var(--ListControl-item-onActive-borderColor);
       color: var(--ListControl-item-onActive-color);
 
-      &:hover {
-        background: var(--ListControl-item-onActive-onHover-bg);
-      }
-
-      .b-inherit {
-        border-color: var(--ListControl-item-onActive-color);
-      }
-
       border-width: var(--listSelect-base-active-top-border-width)
         var(--listSelect-base-active-right-border-width)
         var(--listSelect-base-active-bottom-border-width)
@@ -148,6 +140,14 @@
         var(--listSelect-base-active-bottom-left-border-radius);
       background: var(--listSelect-base-active-bg-color);
 
+      &:hover {
+        background: var(--ListControl-item-onActive-onHover-bg);
+      }
+
+      .b-inherit {
+        border-color: var(--ListControl-item-onActive-color);
+      }
+
       &:before {
         content: '';
         position: absolute;

package/scss/components/form/_picker.scss

@@ -1,6 +1,6 @@
 .#{$ns}Picker {
-  @include input-text();
   outline: none;
+  @include input-text();
 
   &-input:hover {
     background: var(--Pick-status-hover-bgColor);

package/scss/components/form/_select.scss

@@ -45,9 +45,6 @@
     }
   }
 
-  &--block {
-    display: flex;
-  }
   vertical-align: middle;
   text-align: left;
   align-items: center;
@@ -72,6 +69,10 @@
   color: var(--Form-select-color);
   transition: all var(--animation-duration) ease-in-out;
 
+  &--block {
+    display: flex;
+  }
+
   &:hover {
     background: var(--Form-select-onHover-bg);
     border-width: var(--select-base-hover-top-border-width)

package/scss/components/form/_textarea.scss

@@ -1,9 +1,9 @@
 .#{$ns}TextareaControl {
-  @include input-text();
   --Form-input-clearBtn-padding: #{px2rem(2px)};
-
   position: relative;
 
+  @include input-text();
+
   > textarea.#{$ns}TextareaControl-input--counter {
     // 23 px 是计数器 counter 的高度
     padding-bottom: px2rem(23px);
@@ -12,8 +12,6 @@
   }
 
   > textarea {
-    @include input-border();
-
     border: 1px solid var(--Form-input-borderColor);
     border-radius: var(--Form-input-borderRadius);
     color: var(--colors-neutral-text-2);
@@ -27,6 +25,8 @@
     outline: none;
     resize: vertical;
 
+    @include input-border();
+
     &::placeholder {
       color: var(--Form-input-placeholderColor);
     }

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

@@ -15,8 +15,8 @@
 }
 
 .#{$ns}TreeSelect {
-  @include input-text();
   outline: none;
+  @include input-text();
 
   &.is-opened {
     border-color: var(--Form-input-onFocused-borderColor);