amis-ui 3.5.2 → 3.6.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "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": "^3.5.2",
-    "amis-formula": "^3.5.2",
+    "amis-core": "^3.6.0",
+    "amis-formula": "^3.6.0",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -57,8 +57,7 @@
     "monaco-editor": "0.30.1",
     "prop-types": "^15.6.1",
     "rc-input-number": "^7.4.0",
-    "rc-menu": "^9.8.4",
-    "rc-overflow": "^1.3.1",
+    "rc-menu": "^9.12.2",
     "rc-progress": "3.4.2",
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.5",
@@ -147,5 +146,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "d235e068521b027eb08fef79792a68fceb63002d"
+  "gitHead": "7fcb81d2c01a1134c8d953b819f136ad4b1a9dfa"
 }

package/scss/_components.scss

@@ -786,6 +786,7 @@
   --transfer-base-header-paddingBottom: var(--sizes-size-5);
   --transfer-base-header-paddingLeft: var(--sizes-size-8);
   --transfer-base-header-paddingRight: var(--sizes-size-8);
+  --transfer-base-footer-border-color: var(--colors-neutral-line-8);
   --transfer-base-body-paddingTop: var(--sizes-size-0);
   --transfer-base-body-paddingBottom: var(--sizes-size-0);
   --transfer-base-body-paddingLeft: var(--sizes-size-0);
@@ -1659,8 +1660,8 @@
   --Form--horizontal-label-widthBase: var(--sizes-base-49);
   --Form--horizontal-label-widthXs: var(--sizes-base-25);
   --Form--horizontal-label-widthSm: var(--sizes-base-35);
-  --Form--horizontal-label-widthMd: 8.5rem;
-  --Form--horizontal-label-widthLg: 12.5rem;
+  --Form--horizontal-label-widthMd: #{px2rem(136px)};
+  --Form--horizontal-label-widthLg: #{px2rem(200px)};
   --Form--horizontal-value-marginTop: var(--sizes-size-0);
   --Form--horizontal-value-marginBottom: var(--sizes-size-0);
   --Form--horizontal-value-marginLeft: var(--sizes-size-5);
@@ -1682,7 +1683,7 @@
   --InputRange-handle-mobile-width: var(--sizes-base-10);
   --InputRange-handle-bg: var(--colors-neutral-fill-11);
   --InputRange-handle-top-border-color: var(--colors-brand-5);
-  --InputRange-handle-top-border-width: 0.0625rem;
+  --InputRange-handle-top-border-width: #{px2rem(1px)};
   --InputRange-handle-top-border-style: var(--borders-style-2);
   --InputRange-handle-top-right-border-radius: var(--borders-radius-7);
   --InputRange-handle-border: var(--InputRange-handle-top-border-width)
@@ -1773,9 +1774,9 @@
   --dialog-content-color: var(--colors-neutral-text-2);
   --dialog-footer-height: var(--sizes-size-1);
   --dialog-footer-margin-left: var(--sizes-size-5);
-  --dialog-size-sm-width: 21.875rem;
-  --dialog-size-normal-width: 31.25rem;
-  --dialog-size-lg-width: 68.75rem;
+  --dialog-size-sm-width: #{px2rem(350px)};
+  --dialog-size-normal-width: #{px2rem(500px)};
+  --dialog-size-lg-width: #{px2rem(1100px)};
   --dialog-size-xl-width: 90%;
 
   --Modal-bg: var(--background);
@@ -1828,10 +1829,10 @@
   --drawer-content-paddingRight: var(--sizes-base-12);
   --drawer-footer-height: var(--sizes-size-1);
   --drawer-footer-margin-left: var(--sizes-size-9);
-  --drawer-size-xs-width: 12.5rem;
-  --drawer-size-sm-width: 18.75rem;
-  --drawer-size-md-width: 31.25rem;
-  --drawer-size-lg-width: 50rem;
+  --drawer-size-xs-width: #{px2rem(200px)};
+  --drawer-size-sm-width: #{px2rem(300px)};
+  --drawer-size-md-width: #{px2rem(500px)};
+  --drawer-size-lg-width: #{px2rem(800px)};
   --drawer-size-xl-width: 90%;
 
   --Drawer-bg: var(--background);
@@ -1861,6 +1862,7 @@
   // 评分
   --Rating-star-margin: var(--sizes-size-5);
   --Rating-star-size: var(--sizes-base-12);
+  --Rating-star-icon-size: var(--sizes-base-9);
   --Rating-star-icon: '<svg class="icon" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="currentColor" d="M4.99672493,4.37617062 L1.28100904,4.93702533 C0.463702827,5.06039054 -0.102812689,5.85030962 0.0156612291,6.70135899 C0.0628630935,7.04043042 0.216147743,7.35382434 0.451761131,7.59297508 L3.14101949,10.3226082 L3.14101949,10.3226082 L2.50531937,14.1787855 C2.3655991,15.0263332 2.91216489,15.8313483 3.72610824,15.9768371 C4.05030943,16.0347866 4.38381497,15.9798039 4.67496871,15.8204054 L7.99934906,14.0003997 L7.99934906,14.0003997 L11.3254267,15.8208814 C12.0564401,16.2209912 12.9605363,15.9282748 13.3447823,15.167081 C13.4978067,14.8639388 13.5505833,14.5167196 13.4949403,14.1791872 L12.859174,10.3226082 L12.859174,10.3226082 L15.5482634,7.59400813 C16.1397301,6.99385103 16.1519752,6.00805341 15.5756136,5.39216751 C15.3460036,5.14681192 15.0450939,4.98715562 14.7195072,4.93793566 L11.0034685,4.37617062 L11.0034685,4.37617062 L9.34151455,0.868493275 C8.97611971,0.0973002947 8.07952072,-0.219434766 7.33890469,0.161045701 C7.04395753,0.312570398 6.80521255,0.561123051 6.65963735,0.868217393 L4.99672493,4.37617062 L4.99672493,4.37617062 Z"></path></svg>';
   --Rating-colors: '[{"value":"#abadb1","id":2},{"value":"#787b81","id":3},{"value":"#ffa900","id":5}]';
   --Rating-text-color: var(--colors-neutral-text-2);
@@ -1971,6 +1973,9 @@
   --Switch-checked-bgColor: var(--switch-default-on-bg-color);
   --Switch-checked-onHover-bgColor: var(--switch-default-on-hover-bg-color);
   --Switch-checked-onActive-bgColor: var(--colors-brand-4);
+  --Switch-spinner-icon-width: var(--sizes-base-7);
+  --Switch-spinner-icon-width--sm: var(--sizes-base-5);
+  --switch-spinner-left--sm: var(--sizes-size-0);
 
   --collapse-default-top-border-color: var(--colors-neutral-line-8);
   --collapse-default-top-border-width: var(--borders-width-2);
@@ -2052,6 +2057,7 @@
   --Tabs-onActive-bg: var(--background);
   --Tabs-onActive-borderColor: var(--borderColor);
   --Tabs-onActive-color: var(--colors-neutral-text-2);
+  --Tabs-onError-color: var(--colors-error-5);
   --Tabs-onDisabled-color: var(--colors-neutral-text-7);
   --Tabs-onHover-borderColor: var(--colors-neutral-line-8);
   --Tabs-add-icon-size: #{px2rem(15px)};
@@ -2394,7 +2400,7 @@
   --Tabs--vertical-paddingLeft: var(--sizes-size-7);
   --Tabs--vertical-paddingRight: var(--sizes-size-7);
   --Tabs--vertical-bg: var(--colors-neutral-fill-10);
-  --Tabs--vertical-width: 8.75rem;
+  --Tabs--vertical-width: #{px2rem(140px)};
   --Tabs--vertical-active-color: var(--colors-brand-5);
   --Tabs--vertical-active-fontSize: var(--fonts-size-7);
   --Tabs--vertical-active-fontWeight: var(--fonts-weight-6);
@@ -2554,7 +2560,7 @@
   --Divider-text-marginRight: var(--sizes-size-9);
   --Divider-text-marginBottom: var(--sizes-size-0);
 
-  --inputFile-base-des-color: var(--colors-neutral-text-2);
+  --inputFile-base-des-color: var(--Form-description-color);
   --inputFile-base-des-fontSize: var(--fonts-size-7);
   --inputFile-base-des-fontWeight: var(--fonts-weight-6);
   --inputFile-base-des-margin: var(--sizes-base-5);
@@ -3280,6 +3286,7 @@
   --Alert-fontColor: var(--colors-neutral-text-4);
   --Alert-title-fontColor: var(--colors-neutral-text-2);
   --Alert-height: var(--sizes-base-20);
+  --Alert-actions-marginRight: var(--sizes-base-4);
 
   --spinner-base-color: var(--colors-link-5);
   --spinner-base-fontSize: var(--fonts-size-8);
@@ -3289,7 +3296,6 @@
   --spinner-size-size: var(--sizes-base-16);
   --spinner-lg-size: var(--sizes-base-24);
   --spinner-overlay-bg: var(--colors-neutral-fill-11);
-  --spinner-color: var(--colors-brand-5);
 
   --Spinner--lg-height: var(--spinner-lg-size);
   --Spinner--lg-width: var(--spinner-lg-size);
@@ -3301,6 +3307,7 @@
   --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
   --Spinner-width: var(--spinner-size-size);
   --Spinner-color: var(--spinner-base-color);
+  --Spinner-color--disabled: rgba(0, 0, 0, 0.65);
 
   // Image
   --image-image-normal-paddingTop: var(--sizes-size-3);
@@ -3319,7 +3326,7 @@
   --image-images-item-marginBottom: var(--sizes-size-3);
   --image-images-item-marginLeft: var(--sizes-size-3);
   --image-images-item-marginRight: var(--sizes-size-3);
-  --image-images-item-size: 3rem;
+  --image-images-item-size: #{px2rem(48px)};
   --image-images-item-color: var(--colors-neutral-text-5);
   --image-images-preview-radius: var(--sizes-size-3);
   --image-images-preview-bgColor: var(--colors-neutral-text-11);
@@ -4130,6 +4137,7 @@
     var(--combo-vertical-right-border-color)
     var(--combo-vertical-bottom-border-color)
     var(--combo-vertical-left-border-color);
+  --Combo--vertical-item--onError-borderColor: var(--colors-error-5);
   --Combo--vertical-item-borderRadius: var(
       --combo-vertical-top-left-border-radius
     )

package/scss/_properties.scss

@@ -274,22 +274,18 @@ $Table-strip-bg: transparent;
   --DropDown-menu-borderColor: var(--borderColor);
   --DropDown-menu-borderRadius: var(--borderRadius);
   --DropDown-menu-borderWidth: var(--borderWidth);
-  --DropDown-menu-boxShadow: var(--shadows-shadow-normal);
-  --DropDown-menu-height: #{px2rem(34px)};
+  --DropDown-menu-boxShadow: var(--Form-select-outer-boxShadow);
+  --DropDown-menu-height: #{px2rem(32px)};
   --DropDown-menu-minWidth: #{px2rem(160px)};
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
-  --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
+  --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg);
   --DropDown-group-color: #848b99;
   --DropDown-menuItem-color: #151a26;
-  --DropDown-menuItem-onHover-color: var(--colors-brand-5);
+  --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color);
   --DropDown-menuItem-onActive-color: var(--colors-brand-5);
   --DropDown-menuItem-onDisabled-color: #b4b6ba;
-  --DropDown-menuItem-paddingX: var(--gap-sm);
-  --DropDown-menuItem-paddingY: calc(
-    (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) /
-      2
-  );
+  --DropDown-menuItem-paddingX: var(--select-base-default-option-paddingRight);
 
   --Fieldset-legend-bgColor: var(--colors-neutral-fill-11);
 
@@ -708,9 +704,9 @@ $Table-strip-bg: transparent;
   --Tooltip--attr-transition: all var(--animation-duration) ease-in-out;
   --Tooltip-arrow-color: var(--Tooltip-bg);
   --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
-  --Tooltip-arrow-height: 0.25rem;
+  --Tooltip-arrow-height: #{px2rem(4px)};
   --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
-  --Tooltip-arrow-width: 0.5rem;
+  --Tooltip-arrow-width: #{px2rem(8px)};
   --Tooltip-bg: var(--background);
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);

package/scss/base/_common.scss

@@ -9,3 +9,11 @@
 .visibility-sensor {
   min-height: 5px;
 }
+
+.renderer-error-boundary {
+  padding: 5px;
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #cf1322;
+  border: 1px dashed #cf1322;
+}

package/scss/components/_alert.scss

@@ -52,6 +52,10 @@
     }
   }
 
+  &-actions {
+    margin-right: var(--Alert-actions-marginRight);
+  }
+
   &-close {
     outline: none;
     padding: 0;

package/scss/components/_audio.scss

@@ -125,7 +125,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: var(--Audio-volumeControl-width);
+    min-width: var(--Audio-volumeControl-width);
     height: var(--Audio-volume-height);
     line-height: var(--Audio-volume-lineHeight);
     margin-right: var(--Audio-item-margin);

package/scss/components/_card.scss

@@ -162,6 +162,7 @@
 
       &.is-disabled {
         color: var(--text--muted-color);
+        cursor: not-allowed;
 
         &:hover {
           text-decoration: none;
@@ -238,7 +239,7 @@
     margin: 0 var(--gap-sm) !important;
   }
   &-secondary {
-    max-width: 12.5rem;
+    max-width: px2rem(200px);
     color: var(--Card-secondary-color);
     padding: 0 var(--gap-md);
     font-size: var(--fontSizeMd);

package/scss/components/_dropdown.scss

@@ -57,6 +57,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: px2rem(300px);
+      margin-top: px2rem(4px);
     }
   }
 
@@ -67,10 +68,11 @@
 
   &-menuItem,
   &-menu > li {
-    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    padding: 0 var(--DropDown-menuItem-paddingX);
     white-space: nowrap;
     box-sizing: border-box;
     height: var(--DropDown-menu-height);
+    line-height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
     color: var(--DropDown-menuItem-color);
@@ -95,7 +97,7 @@
 
     &.#{$ns}DropDown-divider {
       height: px2rem(1px);
-      margin: px2rem(9px) 0;
+      margin: px2rem(4px) 0;
       overflow: hidden;
       background: var(--DropDown-menu-borderColor);
       padding: 0;

package/scss/components/_menu.scss

@@ -485,6 +485,12 @@
       .#{$ns}Nav-Menu-overflowedIcon {
         margin-right: 0;
         line-height: inherit; // 到了saas中 会被fortawesome的样式影响 因此需要覆盖一下
+
+        i,
+        svg,
+        img {
+          float: none;
+        }
       }
     }
 
@@ -519,14 +525,13 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       display: inline-block;
       font-size: px2rem(9px);
-      vertical-align: middle;
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
       margin-left: px2rem(5px);
 
       & > svg {
-        top: auto;
+        top: 0;
       }
     }
 

package/scss/components/_modal.scss

@@ -65,6 +65,10 @@
     }
   }
 
+  &-draggable > &-header {
+    cursor: move;
+  }
+
   &-overlay {
     transition: ease-in-out opacity var(--animation-duration);
     position: fixed;

package/scss/components/_page.scss

@@ -71,18 +71,18 @@
 
   &-asideResizor {
     position: absolute;
-    right: -0.375rem;
+    right: px2rem(-6px);
     top: 50%;
     cursor: ew-resize;
     writing-mode: vertical-lr;
-    width: 0.75rem;
-    height: 1.5rem;
-    margin-top: -0.75rem;
+    width: px2rem(12px);
+    height: px2rem(24px);
+    margin-top: px2rem(-12px);
     border: 0.0625rem solid #dee2e6;
     background-color: #fff;
-    border-radius: 0.142rem;
+    border-radius: px2rem(2px);
     font-size: 12px;
-    line-height: 0.625rem;
+    line-height: px2rem(10px);
     text-align: center;
     user-select: none;
     color: #666;

package/scss/components/_pagination.scss

@@ -74,7 +74,7 @@
     }
   }
   &-simple {
-    >ul >li {
+    > ul > li {
       &:hover,
       &:focus {
         outline: none;
@@ -94,8 +94,6 @@
     }
   }
 
-
-
   &-next {
     > span {
       cursor: pointer;
@@ -113,47 +111,47 @@
     align-items: center;
     height: var(--Pagination-height);
 
-      &-left {
-        color: var(--Pagination-light-color);
-      }
-      input {
-        min-width: px2rem(50px);
-        width: px2rem(50px);
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        // height: var(--Pagination-height);
-        border: none;
-        border: var(--borderWidth) solid var(--borderColor);
-        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
-        padding: var(--Pagination-padding);
-        margin-left: px2rem(8px);
-        text-align: center;
-
-        &:focus,
-        &:hover {
-          outline: none;
-          // border: var(--borderWidth) solid var(--primary);
-          border-color: var(--primary);
-        }
+    &-left {
+      color: var(--Pagination-light-color);
+    }
+    input {
+      min-width: px2rem(50px);
+      width: px2rem(50px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      // height: var(--Pagination-height);
+      border: none;
+      border: var(--borderWidth) solid var(--borderColor);
+      border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+      padding: var(--Pagination-padding);
+      margin-left: px2rem(8px);
+      text-align: center;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        // border: var(--borderWidth) solid var(--primary);
+        border-color: var(--primary);
       }
-      &-right {
-        display: inline-block;
-        width: px2rem(32px);
-        cursor: pointer;
-        text-align: center;
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        border: var(--borderWidth) solid var(--borderColor);
-        border-left: none;
-        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-        font-size: var(--fontSizeSm);
-        &:hover {
-          color: var(--primary);
-          border-color: var(--primary);
-          border-left: var(--borderWidth) solid var(--primary);
-          margin-left: -1px;
-        }
+    }
+    &-right {
+      display: inline-block;
+      width: px2rem(32px);
+      cursor: pointer;
+      text-align: center;
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: var(--borderWidth) solid var(--borderColor);
+      border-left: none;
+      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+      font-size: var(--fontSizeSm);
+      &:hover {
+        color: var(--primary);
+        border-color: var(--primary);
+        border-left: var(--borderWidth) solid var(--primary);
+        margin-left: -1px;
       }
+    }
   }
 }
 
@@ -161,7 +159,6 @@
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }
@@ -198,4 +195,4 @@
   }
 
   text-align: right;
-}
+}

package/scss/components/_progress.scss

@@ -65,7 +65,7 @@
           transparent 75%,
           transparent
         );
-        background-size: 2rem 2rem;
+        background-size: px2rem(32px) px2rem(32px);
       }
 
       &--animate {

package/scss/components/_spinner.scss

@@ -77,6 +77,15 @@
       height: auto;
     }
 
+    &.#{$ns}Spinner-icon--disabled > svg.icon {
+      color: var(--Spinner-color--disabled);
+      fill: var(--Spinner-color--disabled);
+
+      & path {
+        fill: var(--Spinner-color--disabled);
+      }
+    }
+
     &--lg {
       width: var(--Spinner--lg-width);
       height: var(--Spinner--lg-height);
@@ -156,6 +165,9 @@
   background: var(--Spinner-overlay-bg);
   transition: ease-out opacity var(--animation-duration);
   opacity: 0;
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  filter: blur(1px);
 
   &.in {
     opacity: 1;

package/scss/components/_steps.scss

@@ -13,16 +13,18 @@
       position: relative;
       &Icon {
         vertical-align: top;
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
         padding-right: var(--steps-base-icon-paddingRight);
+        height: px2rem(32px);
         .#{$ns}StepsItem-icon {
-          display: inline-block;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
           width: var(--steps-base-icon-size);
           height: var(--steps-base-icon-size);
-          line-height: px2rem(28px);
           border-radius: 50%;
           font-size: var(--Steps-icon-fontsize);
-          text-align: center;
           .icon {
             width: px2rem(12px);
             height: px2rem(12px);
@@ -206,7 +208,7 @@
           content: '';
           position: absolute;
           display: inline-block;
-          top: 1rem;
+          top: px2rem(16px);
           height: 1px;
           left: px2rem(130px);
           width: calc(100% - 55px);

package/scss/components/_table.scss

@@ -273,8 +273,12 @@
       padding-top: 0;
     }
 
-    &--affixHeader > thead {
-      visibility: collapse;
+    &--affixHeader {
+      margin-top: calc(var(--Table-thead-height) * -1);
+
+      > thead {
+        visibility: hidden;
+      }
     }
 
     &--withCombine {
@@ -1108,3 +1112,13 @@
     }
   }
 }
+
+.#{$ns}AutoFilterToolbar {
+  display: block;
+  text-align: right;
+  white-space: nowrap;
+
+  > .#{$ns}Button {
+    margin-top: 0;
+  }
+}

package/scss/components/_table2.scss

@@ -676,6 +676,13 @@
             background: var(--primary);
           }
         }
+
+        &:last-child {
+          .#{$ns}Table-thead-resizable {
+            width: 4px;
+            right: 0;
+          }
+        }
       }
     }
   }