amis-ui 3.0.0 → 3.1.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^3.0.0",
-    "amis-formula": "^3.0.0",
+    "amis-core": "^3.1.0",
+    "amis-formula": "^3.1.0",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -141,5 +141,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "9220b4c13f4d042ebf2bf1dd8ee8e24d11e39141"
+  "gitHead": "020b12d0be43215664e0c0e53cd33486c43fde86"
 }

package/scss/_components.scss

@@ -1282,7 +1282,7 @@
   --checkbox-checkbox-default-text-color: var(--colors-neutral-text-2);
   --checkbox-checkbox-default-lineHeight: var(--fonts-lineHeight-2);
   --checkbox-checkbox-default-fontWeight: var(--fonts-weight-6);
-  --checkbox-checkbox-default-fontSize: var(--sizes-size-8);
+  --checkbox-checkbox-default-fontSize: var(--fonts-size-7);
   --checkbox-checkbox-default-top-border-color: var(--colors-neutral-line-8);
   --checkbox-checkbox-default-top-border-width: var(--borders-width-2);
   --checkbox-checkbox-default-top-border-style: var(--borders-style-2);
@@ -1302,7 +1302,7 @@
   --checkbox-checkbox-hover-height: var(--sizes-size-9);
   --checkbox-checkbox-hover-bg-color: var(--colors-neutral-fill-11);
   --checkbox-checkbox-hover-text-color: var(--colors-neutral-text-2);
-  --checkbox-checkbox-hover-fontSize: var(--sizes-size-8);
+  --checkbox-checkbox-hover-fontSize: var(--fonts-size-7);
   --checkbox-checkbox-hover-top-border-color: var(--colors-brand-5);
   --checkbox-checkbox-hover-top-border-width: var(--borders-width-2);
   --checkbox-checkbox-hover-top-border-style: var(--borders-style-2);
@@ -1322,7 +1322,7 @@
   --checkbox-checkbox-active-height: var(--sizes-size-9);
   --checkbox-checkbox-active-bg-color: var(--colors-neutral-fill-11);
   --checkbox-checkbox-active-text-color: var(--colors-neutral-text-2);
-  --checkbox-checkbox-active-fontSize: var(--sizes-size-8);
+  --checkbox-checkbox-active-fontSize: var(--fonts-size-7);
   --checkbox-checkbox-active-top-border-color: var(--colors-brand-5);
   --checkbox-checkbox-active-top-border-width: var(--borders-width-2);
   --checkbox-checkbox-active-top-border-style: var(--borders-style-2);
@@ -1342,7 +1342,7 @@
   --checkbox-checkbox-disabled-height: var(--sizes-size-9);
   --checkbox-checkbox-disabled-bg-color: var(--colors-neutral-fill-10);
   --checkbox-checkbox-disabled-text-color: var(--colors-neutral-text-6);
-  --checkbox-checkbox-disabled-fontSize: var(--sizes-size-8);
+  --checkbox-checkbox-disabled-fontSize: var(--fonts-size-7);
   --checkbox-checkbox-disabled-top-border-color: var(--colors-neutral-line-8);
   --checkbox-checkbox-disabled-top-border-width: var(--borders-width-2);
   --checkbox-checkbox-disabled-top-border-style: var(--borders-style-2);
@@ -1364,7 +1364,7 @@
   --checkbox-checked-default-height: var(--sizes-size-9);
   --checkbox-checked-default-bg-color: var(--colors-brand-5);
   --checkbox-checked-default-color: var(--colors-neutral-text-2);
-  --checkbox-checked-default-fontSize: var(--sizes-size-8);
+  --checkbox-checked-default-fontSize: var(--fonts-size-7);
   --checkbox-checked-default-top-border-color: var(--colors-neutral-line-8);
   --checkbox-checked-default-top-border-width: var(--borders-width-2);
   --checkbox-checked-default-top-border-style: var(--borders-style-2);
@@ -1384,7 +1384,7 @@
   --checkbox-checked-hover-height: var(--sizes-size-9);
   --checkbox-checked-hover-bg-color: var(--colors-brand-6);
   --checkbox-checked-hover-color: var(--colors-neutral-text-2);
-  --checkbox-checked-hover-fontSize: var(--sizes-size-8);
+  --checkbox-checked-hover-fontSize: var(--fonts-size-7);
   --checkbox-checked-hover-top-border-color: var(--colors-brand-5);
   --checkbox-checked-hover-top-border-width: var(--borders-width-2);
   --checkbox-checked-hover-top-border-style: var(--borders-style-2);
@@ -1404,7 +1404,7 @@
   --checkbox-checked-active-height: var(--sizes-size-9);
   --checkbox-checked-active-bg-color: var(--colors-brand-4);
   --checkbox-checked-active-color: var(--colors-neutral-text-2);
-  --checkbox-checked-active-fontSize: var(--sizes-size-8);
+  --checkbox-checked-active-fontSize: var(--fonts-size-7);
   --checkbox-checked-active-top-border-color: var(--colors-brand-5);
   --checkbox-checked-active-top-border-width: var(--borders-width-2);
   --checkbox-checked-active-top-border-style: var(--borders-style-2);
@@ -1424,7 +1424,7 @@
   --checkbox-checked-disabled-height: var(--sizes-size-9);
   --checkbox-checked-disabled-bg-color: var(--colors-neutral-fill-11);
   --checkbox-checked-disabled-color: var(--colors-neutral-text-2);
-  --checkbox-checked-disabled-fontSize: var(--sizes-size-8);
+  --checkbox-checked-disabled-fontSize: var(--fonts-size-7);
   --checkbox-checked-disabled-top-border-color: var(--colors-neutral-line-8);
   --checkbox-checked-disabled-top-border-width: var(--borders-width-2);
   --checkbox-checked-disabled-top-border-style: var(--borders-style-2);
@@ -1630,7 +1630,7 @@
   --Form-item-fontColor: var(--Form-item-color);
   --Form-item-fontSize: var(--fonts-size-7);
   --Form-item-fontWeight: var(--fonts-weight-6);
-  --Form-item-lineHeight: var(--fonts-lineHeight-2);
+  --Form-item-lineHeight: var(--fonts-lineHeight-1);
   --Form-item-star-color: var(--colors-error-5);
   --Form-item-star-size: var(--sizes-size-7);
   --Form-description-color: var(--colors-neutral-text-5);
@@ -3316,7 +3316,7 @@
   --Tag-base-paddingLeft: var(--sizes-size-5);
   --Tag-base-paddingRight: var(--sizes-size-5);
   --Tag-base-padding: var(--Tag-base-paddingTop) var(--Tag-base-paddingRight)
-   var(--Tag-base-paddingBottom) var(--Tag-base-paddingLeft);
+    var(--Tag-base-paddingBottom) var(--Tag-base-paddingLeft);
   --Tag-model-normal-top-border-color: var(--colors-neutral-line-6);
   --Tag-model-normal-top-border-width: var(--borders-width-2);
   --Tag-model-normal-top-border-style: var(--borders-style-1);
@@ -3966,9 +3966,9 @@
   --Table-heading-bg: var(--table-title-bg-color);
   --Table-heading-height: #{px2rem(40px)};
   --Table-lineHeight: var(--fonts-lineHeight-2);
-  --Table-onChecked-bg: var(--colors-neutral-fill-10);
+  --Table-onChecked-bg: var(--colors-neutral-fill-11);
   --Table-onChecked-borderColor: var(--colors-neutral-line-8);
-  --Table-onChecked-color: var(--colors-neutral-text-6);
+  --Table-onChecked-color: var(--colors-neutral-text-2);
   --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10);
   --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8);
   --Table-onChecked-onHover-color: var(--colors-neutral-line-4);

package/scss/_mixins.scss

@@ -245,12 +245,18 @@
   > .pull-left {
     margin-right: $iconMargin;
     font-size: $iconSize;
+    width: $iconSize;
+    height: $iconSize;
+    line-height: $iconSize;
   }
 
   .#{$ns}Button-icon:last-child:not(:first-child):not(.pull-left),
   > .pull-right {
     font-size: $iconSize;
     margin-left: $iconMargin;
+    width: $iconSize;
+    height: $iconSize;
+    line-height: $iconSize;
   }
 
   .#{$ns}Button--loading:first-child:not(:last-child):not(.pull-right),
@@ -258,12 +264,38 @@
   > .pull-left {
     font-size: $iconSize;
     margin-right: $iconMargin;
+    width: $iconSize;
+    height: $iconSize;
+    line-height: $iconSize;
   }
 
   .#{$ns}Button--loading:last-child:not(:first-child):not(.pull-left),
   > .pull-right {
     font-size: $iconSize;
     margin-left: $iconMargin;
+    width: $iconSize;
+    height: $iconSize;
+    line-height: $iconSize;
+  }
+
+  &.#{$ns}Button--iconOnly {
+    min-width: $height;
+    padding: 0;
+    &:not(.#{$ns}Button--link) {
+      > svg.icon {
+        width: $iconSize;
+        height: $iconSize;
+      }
+
+      > .fa,
+      > .iconfont {
+        font-size: $iconSize;
+      }
+
+      > .iconfont {
+        line-height: 1;
+      }
+    }
   }
 
   // img 需要加一下高度限制

package/scss/components/_app.scss

@@ -29,3 +29,13 @@
   display: inline-flex;
   vertical-align: middle;
 }
+
+.#{$ns}AppContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$ns}AppBody {
+  flex: 1;
+  min-height: 0;
+}

package/scss/components/_button.scss

@@ -624,9 +624,6 @@
       var(--button-size-default-icon-size),
       var(--button-size-default-icon-margin)
     );
-    &.#{$ns}Button--iconOnly {
-      min-width: var(--button-size-default-height);
-    }
   }
 
   &--size-xs {
@@ -651,10 +648,6 @@
       var(--button-size-xs-icon-size),
       var(--button-size-xs-icon-margin)
     );
-
-    &.#{$ns}Button--iconOnly {
-      min-width: var(--button-size-xs-height);
-    }
   }
 
   &--size-sm {
@@ -679,10 +672,6 @@
       var(--button-size-sm-icon-size),
       var(--button-size-sm-icon-margin)
     );
-
-    &.#{$ns}Button--iconOnly {
-      min-width: var(--button-size-sm-height);
-    }
   }
 
   &--size-md {
@@ -707,10 +696,6 @@
       var(--button-size-md-icon-size),
       var(--button-size-md-icon-margin)
     );
-
-    &.#{$ns}Button--iconOnly {
-      min-width: var(--button-size-md-height);
-    }
   }
 
   &--size-lg {
@@ -735,29 +720,6 @@
       var(--button-size-lg-icon-size),
       var(--button-size-lg-icon-margin)
     );
-
-    &.#{$ns}Button--iconOnly {
-      min-width: var(--button-size-lg-height);
-    }
-  }
-
-  &--iconOnly {
-    padding: 0;
-    &:not(.#{$ns}Button--link) {
-      > svg.icon {
-        width: px2rem(14px);
-        height: px2rem(14px);
-      }
-
-      > .fa,
-      > .iconfont {
-        font-size: var(--fontSizeMd);
-      }
-
-      > .iconfont {
-        line-height: 1;
-      }
-    }
   }
 
   @include hover-focus {

package/scss/components/_menu.scss

@@ -518,7 +518,7 @@
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
-      margin-left: 5px;
+      margin-left: px2rem(5px);
 
       & > svg {
         top: auto;
@@ -528,7 +528,7 @@
     &.#{$ns}Nav-Menu-rtl {
       .#{$ns}Nav-Menu-submenu-arrow {
         margin-left: 0;
-        margin-right: 5px;
+        margin-right: px2rem(5px);
       }
     }
 
@@ -542,30 +542,17 @@
   &-vertical-right,
   &-inline {
     .#{$ns}Nav-Menu-submenu-arrow {
-      display: inline-block;
       font-size: px2rem(10px);
-      vertical-align: baseline;
-      text-transform: none;
-      text-rendering: auto;
       margin: 0 0 0 px2rem(10px);
-
-      & > svg {
-        top: auto;
-      }
     }
 
     &.#{$ns}Nav-Menu-expand-before {
       .#{$ns}Nav-Menu-submenu-title {
-        .#{$ns}Nav-Menu-item-wrap {
-          padding-right: 0;
-          padding-left: px2rem(16px);
-        }
-      }
+        flex-direction: row-reverse;
 
-      .#{$ns}Nav-Menu-submenu-arrow {
-        right: auto;
-        position: absolute;
-        margin: 0;
+        > .#{$ns}Nav-Menu-submenu-arrow {
+          margin: 0 px2rem(10px) 0 0;
+        }
       }
     }
 
@@ -614,13 +601,17 @@
   &-inline,
   &-horizontal {
     .#{$ns}Nav-Menu-submenu-arrow {
-      transition: transform 0.3s;
-      transform: rotate(90deg);
+      svg {
+        transition: transform 0.3s;
+        transform: rotate(90deg);
+      }
     }
 
     & .#{$ns}Nav-Menu-submenu-open > .#{$ns}Nav-Menu-submenu-title {
       .#{$ns}Nav-Menu-submenu-arrow {
-        transform: rotate(270deg);
+        svg {
+          transform: rotate(270deg);
+        }
       }
     }
   }

package/scss/components/_modal.scss

@@ -112,7 +112,7 @@
     line-height: inherit;
     text-decoration: none;
     vertical-align: middle;
-    z-index: calc($zindex-spinner-overlay + 1);
+    z-index: calc(#{$zindex-spinner-overlay} + 1);
 
     svg {
       width: var(--dialog-icon-size);

package/scss/components/_spinner.scss

@@ -148,7 +148,7 @@
 
 .#{$ns}Spinner-overlay {
   position: absolute;
-  z-index: calc($zindex-spinner-overlay - 1);
+  z-index: calc(#{$zindex-spinner-overlay} - 1);
   top: 0;
   left: 0;
   right: 0;

package/scss/components/_steps.scss

@@ -385,6 +385,14 @@
       content: var(--steps-simple-icon);
     }
   }
+
+  .#{$ns}StepsItem.is-clickable {
+    .#{$ns}StepsItem-container {
+      &ProgressDot, &Icon, &Wrapper {
+        cursor: pointer;
+      }
+    }
+  }
 }
 
 .#{$ns}Steps-mobile.#{$ns}Steps--horizontal {

package/scss/components/_table.scss

@@ -75,14 +75,15 @@
     z-index: -1;
     opacity: 0;
 
-    &-shadow {
+    &:after {
+      content: '';
       position: absolute;
+      width: 100%;
       box-shadow: var(--Table-fixedTop-boxShadow);
-      z-index: -1;
-      height: 10px;
-      margin-top: -10px;
+      z-index: 10;
+      height: 1px;
+      margin-top: -3px;
       background-color: transparent;
-      opacity: 0;
     }
 
     // box-sizing: content-box;
@@ -93,8 +94,7 @@
     //   box-sizing: border-box;
     // }
 
-    &.in,
-    &.in + .#{$ns}Table-fixedTop-shadow {
+    &.in {
       position: fixed;
       opacity: 1;
       z-index: $zindex-affix;

package/scss/components/_wizard.scss

@@ -226,6 +226,21 @@
     }
   }
 
+  &-footer {
+    padding: var(--sizes-size-5) var(--sizes-size-7);
+    .#{$ns}Button {
+      &+.#{$ns}Button {
+        margin-left: var(--Panel-footerButtonMarginLeft)
+      }
+    }
+  }
+
+  &-fixedButtom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
   &--vertical {
     > .#{$ns}Wizard-step {
       display: flex;

package/scss/components/form/_form.scss

@@ -262,7 +262,14 @@
       }
 
       > .#{$ns}Form-label {
-        line-height: px2rem(32px);
+        padding-top: calc(
+          (
+              var(--Form-input-height) - var(--Form-item-lineHeight) *
+                var(--Form-item-fontSize)
+            ) / 2
+        );
+        word-break: break-word;
+        line-height: var(--Form-item-lineHeight);
         margin: 0;
         margin-right: var(--Form--horizontal-label-gap);
         flex-shrink: 0;
@@ -318,8 +325,14 @@
       vertical-align: top;
 
       > .#{$ns}Form-label {
-        height: px2rem(32px);
-        line-height: px2rem(32px);
+        padding-top: calc(
+          (
+              var(--Form-input-height) - var(--Form-item-lineHeight) *
+                var(--Form-item-fontSize)
+            ) / 2
+        );
+        word-break: break-word;
+        line-height: var(--Form-item-lineHeight);
         margin: 0;
         margin-right: var(--Form-mode-inline-label-gap);
 

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

@@ -66,6 +66,9 @@
           height: 100%;
         }
       }
+      &-iconfont {
+        margin-right: var(--sizes-size-4);
+      }
     }
 
     &-wrapper {

package/scss/components/form/_image.scss

@@ -25,7 +25,7 @@
       var(--inputImage-base-default-bottom-left-border-radius);
     cursor: pointer;
     margin-right: var(--gap-base);
-    
+
     &-bg {
       position: absolute;
       z-index: 0;
@@ -119,11 +119,10 @@
     }
 
     &:not(:disabled):not(.is-disabled) {
-
       &.is-invalid:hover {
         border-color: var(--FileControl-danger-color);
       }
-  
+
       &:hover {
         svg {
           color: var(--inputImage-base-hover-icon-color);
@@ -198,6 +197,10 @@
     }
   }
 
+  &-itemList {
+    display: inline;
+  }
+
   &-item {
     border: var(--borderWidth) solid var(--borderColor);
     border-radius: var(--ImageControl-addBtn-borderRadius);
@@ -221,6 +224,10 @@
     svg.icon-refresh {
       transform: rotate(180deg);
     }
+
+    &--dragging {
+      border: var(--borderWidth) solid var(--colors-brand-5);
+    }
   }
 
   &-filename {

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

@@ -45,6 +45,7 @@
 
   &-menu {
     width: px2rem(160px);
+    min-width: px2rem(100px);
     min-height: px2rem(32px);
     max-height: px2rem(175px);
     background: var(--Form-select-menu-bg);
@@ -76,6 +77,7 @@
         height: px2rem(32px);
         overflow: hidden;
         text-overflow: ellipsis;
+        white-space: nowrap;
         &.is-disabled {
           cursor: not-allowed;
           color: var(--text--muted-color);

package/scss/components/form/_number.scss

@@ -48,12 +48,6 @@
       var(--inputNumber-base-hover-bottom-right-border-radius)
       var(--inputNumber-base-hover-bottom-left-border-radius);
     background: var(--inputNumber-base-hover-bg-color);
-    .#{$ns}Number-input {
-      padding-right: calc(
-        var(--Number-handler-width) +
-          var(--inputNumber-base-default-paddingRight)
-      );
-    }
   }
 
   &-focused {
@@ -202,6 +196,10 @@
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
       height: 100%;
+      // 为了实现handle出现后，不遮挡内容，自然的留出padding的位置的效果
+      outline: var(--inputNumber-base-default-paddingRight)
+        var(--inputNumber-base-default-bg-color)
+        solid;
     }
 
     &-handler {

package/scss/layout/_layout.scss

@@ -152,13 +152,13 @@ body {
   //     }
   // }
 
-  &-body {
+  &-main {
     padding-bottom: var(--Layout-footer-height);
     width: 100%;
     height: 100%;
   }
 
-  &--noFooter &-body {
+  &--noFooter &-main {
     padding-bottom: 0;
   }
 
@@ -254,6 +254,33 @@ body {
       width: 100%;
     }
 
+    &-main {
+      flex-grow: 1;
+      display: flex;
+      min-width: 0;
+      flex-direction: row;
+      justify-content: stretch;
+      align-items: stretch;
+    }
+
+    &-body {
+      flex-grow: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: stretch;
+      align-items: stretch;
+    }
+
+    &-content {
+      display: flex;
+      flex-grow: 1;
+      min-width: 0;
+      position: relative;
+      min-height: 0;
+      // height: 0;
+    }
+
     > .#{$ns}Layout-body {
       flex-grow: 1;
       position: relative;
@@ -272,6 +299,7 @@ body {
     &-brandBar,
     &-aside {
       width: var(--Layout-aside-width);
+      flex-shrink: 0;
       transition: width var(--animation-duration) ease;
     }
 
@@ -280,15 +308,15 @@ body {
     }
 
     &--withAside {
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: stretch;
+      // flex-direction: row;
+      // flex-wrap: wrap;
+      // justify-content: stretch;
 
-      > .#{$ns}Layout-content {
-        flex-grow: 1;
-        width: 0;
-        position: relative;
-      }
+      // > .#{$ns}Layout-content {
+      //   flex-grow: 1;
+      //   width: 0;
+      //   position: relative;
+      // }
 
       .#{$ns}Layout-headerBar,
       .#{$ns}Layout-footer {
@@ -385,6 +413,10 @@ body {
       }
     }
 
+    &--noHeader &-asideWrap {
+      top: 0;
+    }
+
     &--asideFixed.#{$ns}Layout--folded {
       .#{$ns}Layout-aside {
         position: static;