amis-ui 6.9.0-rc.2 → 6.9.0-rc.4

package/lib/withRemoteConfig.js

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

package/lib/withStore.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.9.0-rc.2
+ * amis-ui v6.9.0-rc.4
  * 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.2",
+  "version": "6.9.0-rc.4",
   "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.2",
-    "amis-formula": "^6.9.0-rc.2",
+    "amis-core": "^6.9.0-rc.4",
+    "amis-formula": "^6.9.0-rc.4",
     "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);
@@ -853,4 +878,8 @@ $Table-strip-bg: transparent;
   :root {
     --fontSizeBase: var(--fontSizeLg);
   }
+  :root,
+  .AMISCSSWrapper {
+    --Page-body-padding: var(--gap-md);
+  }
 }

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

@@ -118,6 +118,19 @@
     min-width: 0;
     text-overflow: ellipsis;
     overflow: hidden;
+    @media (max-width: 767px) {
+      .#{$ns}Form-item {
+        padding-top: 0;
+        padding-bottom: 0;
+        &:after {
+          display: none;
+        }
+        .#{$ns}Form-static {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+      }
+    }
   }
 
   &-fieldLabel {

package/scss/components/_crud2.scss

@@ -30,21 +30,21 @@
     font-weight: var(--Pick-base-value-fontWeight);
     background: var(--Pick-base-value-bgColor);
     border-width: var(--Pick-base-value-top-border-width)
-        var(--Pick-base-value-right-border-width)
-        var(--Pick-base-value-bottom-border-width)
-        var(--Pick-base-value-left-border-width);
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
     border-style: var(--Pick-base-value-top-border-style)
-        var(--Pick-base-value-right-border-style)
-        var(--Pick-base-value-bottom-border-style)
-        var(--Pick-base-value-left-border-style);
+      var(--Pick-base-value-right-border-style)
+      var(--Pick-base-value-bottom-border-style)
+      var(--Pick-base-value-left-border-style);
     border-color: var(--Pick-base-value-top-border-color)
-        var(--Pick-base-value-right-border-color)
-        var(--Pick-base-value-bottom-border-color)
-        var(--Pick-base-value-left-border-color);
+      var(--Pick-base-value-right-border-color)
+      var(--Pick-base-value-bottom-border-color)
+      var(--Pick-base-value-left-border-color);
     border-radius: var(--Pick-base-top-left-border-radius)
-        var(--Pick-base-top-right-border-radius)
-        var(--Pick-base-bottom-right-border-radius)
-        var(--Pick-base-bottom-left-border-radius);
+      var(--Pick-base-top-right-border-radius)
+      var(--Pick-base-bottom-right-border-radius)
+      var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -130,9 +130,115 @@
     align-self: flex-start;
   }
 
-  &-filter {
+  &-filter:not(:empty) {
     margin-bottom: var(--gap-base);
   }
+
+  &.is-mobile.is-mobile-cards {
+    // 移动端卡片模式不需要列选择器
+    .#{$ns}ColumnToggler {
+      display: none;
+    }
+
+    .#{$ns}SearchBox {
+      border-radius: var(--Form-input-borderRadius);
+      width: 100%;
+    }
+
+    .#{$ns}Card {
+      --Card-borderRadius: var(--sizes-size-5);
+      --gap-base: var(--sizes-size-9);
+      --fontSizeBase: var(--fonts-size-7);
+      --body-lineHeight: var(--sizes-base-11);
+      --Card-actions-borderColor: #f2f2f4;
+      --Card-actions-fontSize: var(--fontSizeBase);
+      font-size: var(--fontSizeBase);
+      border: 0;
+      box-shadow: var(--boxShadowSm);
+      &-field {
+        margin-bottom: var(--sizes-size-3);
+      }
+      &-fieldLabel {
+        color: var(--colors-neutral-text-5);
+        font-size: var(--fontSizeBase);
+        flex-basis: var(--sizes-base-28);
+        line-height: var(--body-lineHeight);
+        margin-right: var(--sizes-size-6);
+      }
+      &-fieldValue {
+        color: var(--colors-neutral-text-2);
+      }
+
+      &-actions {
+        &-wrapper {
+          padding-left: var(--gap-md);
+          padding-right: var(--gap-md);
+        }
+        & > a {
+          height: var(--sizes-base-12);
+          line-height: var(--sizes-base-12);
+          margin-top: var(--sizes-size-4);
+          margin-bottom: var(--sizes-size-4);
+        }
+      }
+
+      .#{$ns}Form-item {
+        .#{$ns}Form-value,
+        .#{$ns}Form-control {
+          font-size: var(--fontSizeBase);
+        }
+      }
+
+      &-multiMedia {
+        &--right {
+          align-items: flex-start;
+        }
+        &-img {
+          width: var(--sizes-base-45);
+          height: var(--sizes-base-45);
+        }
+      }
+
+      .#{$ns}Image {
+        border: 0;
+
+        &--thumb {
+          padding-left: 0;
+          img {
+            border-radius: var(--sizes-size-5);
+          }
+        }
+      }
+    }
+
+    .#{$ns}Panel {
+      --Panel-bodyPadding: var(--gap-md);
+      --Panel-headingPadding: var(--gap-sm) var(--gap-md);
+      --Panel-body-paddingTop: var(--gap-md);
+      --Panel-body-paddingBottom: var(--gap-md);
+      --Panel-body-paddingLeft: var(--gap-md);
+      --Panel-body-paddingRight: var(--gap-md);
+      &--form {
+        margin: 0;
+        margin-bottom: var(--gap-md);
+        border-radius: var(--sizes-size-5);
+        box-shadow: var(--boxShadowSm);
+      }
+      &-body {
+        padding-top: 0;
+      }
+      .#{$ns}Form {
+        &--column {
+          margin-left: 0;
+          margin-right: 0;
+        }
+        &-item {
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {

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);