amis-ui 3.4.0 → 3.4.1

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "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.4.0",
-    "amis-formula": "^3.4.0",
+    "amis-core": "^3.4.1",
+    "amis-formula": "^3.4.1",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -79,7 +79,7 @@
     "@rollup/plugin-node-resolve": "^14.1.0",
     "@rollup/plugin-typescript": "^8.3.4",
     "@svgr/rollup": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/jest-dom": "^5.17.0",
     "@types/babel__core": "^7.1.19",
     "@types/jest": "^28.1.0",
     "@types/react": "^18.0.24",
@@ -147,5 +147,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "dfde72f1ca28f9e99cc9767b856dc4a92422c7f4"
+  "gitHead": "6e9e1511119758b83710e4ba61e22bb60a3f8074"
 }

package/scss/_components.scss

@@ -1645,7 +1645,7 @@
   --Form-description-fontWeight: var(--fonts-weight-6);
   --Form-description-lineHeight: var(--fonts-lineHeight-2);
   --Form-description-gap: var(--sizes-size-3);
-  --Form-item-onError-color: var(--colors-error-5);
+  --Form-item-onError-color: var(--colors-neutral-text-4);
   --Form-item-onError-borderColor: var(--colors-error-5);
   --Form-item-onError-bg: var(--colors-neutral-fill-11);
   --Form-feedBack-color: var(--colors-error-5);
@@ -3192,7 +3192,7 @@
   --steps-dot-process-bg-color: var(--colors-brand-5);
   --steps-dot-finish-bg-color: var(--colors-neutral-fill-11);
   --steps-dot-error-bg-color: var(--colors-error-5);
-  --steps-simple-icon: '';
+  --steps-simple-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd"><polyline  stroke="currentColor" transform="translate(5.496854, 8.006854) scale(-1, 1) rotate(-135.000000) translate(-5.496854, -8.006854) " points="1.49685425 4.00685425 9.49685425 4.00685425 9.49685425 12.0068542" stroke-width="1" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>';
   --steps-simple-icon-size: var(--sizes-size-8);
 
   --Steps-bg: var(--steps-status-wait-color);
@@ -3305,6 +3305,7 @@
   --image-image-description-color: var(--colors-neutral-text-2);
   --image-image-description-fontSize: var(--fonts-size-8);
   --image-image-description-marginTop: var(--fonts-size-0);
+  --image-image-normal-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g  stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd"><g><rect  opacity="0" x="0.5" y="0.5" width="15" height="15"></rect><path d="M7.9999,3.0001 C11.9889,3.0001 14.9999,6.8731 14.9999,8.0001 C14.9999,8.8831 11.9889,13.0001 7.9999,13.0001 C3.9609,13.0001 0.9999,8.8831 0.9999,8.0001 C0.9999,6.8731 3.9609,3.0001 7.9999,3.0001 Z M7.9999,4.0001 C4.7329,4.0001 2.2179,7.0861 2.0089,7.9731 C2.2749,8.7711 4.7189,12.0001 7.9999,12.0001 C11.2099,12.0001 13.7339,8.7311 13.9929,7.9631 C13.8069,7.1261 11.2709,4.0001 7.9999,4.0001 Z M7.975,5.879 C9.08,5.879 9.975,6.775 9.975,7.879 C9.975,8.983 9.08,9.879 7.975,9.879 C6.871,9.879 5.975,8.983 5.975,7.879 C5.975,6.775 6.871,5.879 7.975,5.879 Z M7.975,6.879 C7.424,6.879 6.975,7.327 6.975,7.879 C6.975,8.43 7.424,8.879 7.975,8.879 C8.527,8.879 8.975,8.43 8.975,7.879 C8.975,7.327 8.527,6.879 7.975,6.879 Z" ></path></g></g></svg>';
 
   --image-images-item-marginTop: var(--sizes-size-3);
   --image-images-item-marginBottom: var(--sizes-size-3);
@@ -3318,6 +3319,8 @@
   --image-images-preview-paddingBottom: var(--sizes-size-3);
   --image-images-preview-paddingLeft: var(--sizes-size-9);
   --image-images-preview-paddingRight: var(--sizes-size-9);
+  --image-images-prev-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd"><polyline stroke="currentColor" transform="translate(10.496854, 8.006854) rotate(-135.000000) translate(-10.496854, -8.006854) " points="6.49685425 4.00685425 14.4968542 4.00685425 14.4968542 12.0068542" stroke-width="1" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>';
+  --image-images-next-icon: '<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd"><polyline stroke="currentColor" transform="translate(5.496854, 8.006854) scale(-1, 1) rotate(-135.000000) translate(-5.496854, -8.006854) " points="1.49685425 4.00685425 9.49685425 4.00685425 9.49685425 12.0068542" stroke-width="1" fill="none" stroke-linecap="butt" stroke-linejoin="round"/></g></svg>';
 
   --Tag-base-fontSize: var(--fonts-size-8);
   --Tag-base-fontWeight: var(--fonts-weight-6);
@@ -4008,6 +4011,7 @@
   --Table-toolbar-marginX: #{px2rem(4px)};
   --Table-toolbar-marginY: var(--gap-base);
   --Table-tree-borderColor: var(--colors-neutral-line-8);
+  --Table-tree-indent: var(--gap-lg);
   --Table-searchableForm-backgroundColor: #f6f7f8;
   --Table-searchableForm-borderRadius: #{px2rem(4px)};
   --Table-empty-icon-size: #{px2rem(74px)};

package/scss/components/_carousel.scss

@@ -14,7 +14,6 @@
     right: 50%;
     transform: translate(-50%, -50%);
     width: var(--Carousel-svg-width);
-    height: var(--Carousel-svg-height);
   }
 }
 

package/scss/components/_chart.scss

@@ -15,4 +15,8 @@
     width: 100%;
     height: 100%;
   }
+
+  > .visibility-sensor {
+    height: 100%; // 修复图表高度为 0 时，visibility-sensor 无法触发的问题
+  }
 }

package/scss/components/_collapse.scss

@@ -170,16 +170,19 @@
 
 //FieldSet Form + Collapse
 .#{$ns}Form {
-  .#{$ns}Collapse {
+  .#{$ns}Collapse.#{$ns}Collapse--fieldset {
     border: none;
-    &-header {
+
+    .#{$ns}Collapse-header {
       background-color: var(--white);
       display: inline-flex;
       justify-content: flex-end;
+      align-items: center;
       flex-direction: row-reverse;
       border-radius: 0;
     }
-    &-content {
+
+    .#{$ns}Collapse-content {
       padding: 0;
     }
   }

package/scss/components/_divider.scss

@@ -1,17 +1,38 @@
 .#{$ns}Divider {
   margin: var(--Divider-marginTop) var(--Divider-marginRight)
     var(--Divider-marginBottom) var(--Divider-marginLeft);
-  border-bottom: var(--Divider-width) var(--Divider-style) var(--Divider-color);
-  height: px2rem(2px);
   font-size: 0;
 
-  &--solid {
+  &--dashed {
+    border-bottom-style: dashed;
+  }
+
+  &--horizontal.#{$ns}Divider--solid {
     border-bottom-style: solid;
   }
 
-  &--dashed {
+  &--horizontal.#{$ns}Divider--dashed {
     border-bottom-style: dashed;
   }
+
+  &--vertical.#{$ns}Divider--solid {
+    border-left-style: solid;
+  }
+  &--vertical.#{$ns}Divider--dashed {
+    border-left-style: dashed;
+  }
+
+  &--horizontal {
+    border-bottom: var(--Divider-width) var(--Divider-style)
+      var(--Divider-color);
+    height: px2rem(2px);
+  }
+
+  &--vertical {
+    border-left: var(--Divider-width) var(--Divider-style) var(--Divider-color);
+    height: var(--sizes-base-15);
+    display: inline-block;
+  }
 }
 
 /* 移动端样式调整 */

package/scss/components/_image-gallery.scss

@@ -29,7 +29,7 @@
       color: #fff;
     }
 
-    > svg {
+    svg {
       width: px2rem(16px);
       height: px2rem(16px);
     }
@@ -65,7 +65,7 @@
 
   &-prevBtn,
   &-nextBtn {
-    > svg {
+    svg {
       width: var(--image-images-item-size);
       height: var(--image-images-item-size);
     }
@@ -205,6 +205,14 @@
   }
 }
 
+.ImageGallery-prevBtn {
+  content: var(--image-images-prev-icon);
+}
+
+.ImageGallery-nextBtn {
+  content: var(--image-images-next-icon);
+}
+
 .#{$ns}ImageGallery-toolbar {
   background-color: var(--image-images-preview-bgColor);
   border-radius: var(--image-images-preview-radius);
@@ -237,7 +245,7 @@
       display: block;
       color: var(--black);
 
-      & > svg {
+      svg {
         fill: var(--black);
       }
     }
@@ -249,7 +257,7 @@
       .#{$ns}ImageGallery-toolbar-action-icon {
         color: var(--icon-onDisabled-color);
 
-        & > svg {
+        svg {
           color: var(--icon-onDisabled-color);
         }
       }
@@ -261,7 +269,7 @@
       .#{$ns}ImageGallery-toolbar-action-icon {
         color: var(--primary);
 
-        & > svg {
+        svg {
           fill: var(--primary);
         }
       }

package/scss/components/_images.scss

@@ -176,6 +176,11 @@
       padding: 0 5px;
       line-height: 1;
       font-size: px2rem(16px);
+
+      svg {
+        width: px2rem(16px);
+        height: px2rem(16px);
+      }
     }
   }
 
@@ -196,3 +201,7 @@
   position: relative;
   @include clearfix();
 }
+
+.Image-view-icon {
+  content: var(--image-image-normal-icon);
+}

package/scss/components/_table.scss

@@ -360,6 +360,7 @@
 
         .#{$ns}TableCell--title {
           min-width: fit-content;
+          display: inline-block;
         }
       }
     }
@@ -547,42 +548,6 @@
       background: var(--Table-tree-borderColor);
     }
 
-    @for $i from 2 through 10 {
-      tr.#{$ns}Table-tr--#{$i}th.is-expanded {
-        .#{$ns}Table-expandCell:before {
-          left: px2rem(23px) + px2rem(18px) * ($i - 1);
-        }
-      }
-
-      tr.#{$ns}Table-tr--#{$i}th {
-        .#{$ns}Table-expandBtn {
-          position: relative;
-          left: px2rem(1px) + (px2rem(18px)) * ($i - 1);
-        }
-
-        .#{$ns}Table-divider2 {
-          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
-        }
-
-        .#{$ns}Table-divider3 {
-          left: px2rem(5px) + (px2rem(18px)) * ($i - 1);
-        }
-      }
-
-      tr.#{$ns}Table-tr--#{$i}th.is-last .#{$ns}Table-divider3 {
-        height: 50%;
-      }
-
-      tr.#{$ns}Table-tr--#{$i}th.is-last:not(.is-expanded) {
-        .#{$ns}Table-expandCell + td {
-          &::before {
-            height: 50%;
-            bottom: auto;
-          }
-        }
-      }
-    }
-
     > thead > tr > th.#{$ns}Table-checkCell,
     > tbody > tr > td.#{$ns}Table-checkCell {
       width: px2rem(1px);
@@ -620,18 +585,6 @@
 
     > tbody > tr > td.#{$ns}Table-expandCell {
       position: relative;
-
-      @for $i from 1 through 7 {
-        .#{$ns}Table-divider-#{$i} {
-          position: absolute;
-          width: px2rem(1px);
-          top: 0;
-          bottom: 0;
-          height: 100%;
-          background: var(--Table-tree-borderColor);
-          left: px2rem(23px) + px2rem(18px) * ($i - 1);
-        }
-      }
     }
 
     > tbody > tr.is-expanded > td.#{$ns}Table-expandCell {
@@ -656,6 +609,11 @@
         display: inline-block;
       }
     }
+
+    > thead > tr > th.#{$ns}Table-primayCell,
+    > tbody > tr > td.#{$ns}Table-primayCell {
+      white-space: nowrap; // 树形表格展示标题栏，不要换行
+    }
   }
 
   &.is-mobile {
@@ -899,7 +857,8 @@
     }
   }
 
-  &-expandBtn {
+  &-expandBtn,
+  &-expandBtn2 {
     position: relative;
     z-index: 1;
     color: var(--Table-expandBtn-color);
@@ -933,6 +892,23 @@
     }
   }
 
+  &-expandBtn2 {
+    margin-right: var(--gap-sm);
+  }
+
+  &-expandBtn2 + * {
+    display: inline-block;
+  }
+
+  &-indent {
+    display: inline-block;
+  }
+
+  &-expandSpace {
+    display: inline-block;
+    width: px2rem(22px);
+  }
+
   &-dragBtn {
     margin-right: var(--gap-xs);
     display: inline-block;
@@ -1027,6 +1003,13 @@
       }
     }
   }
+
+  // table 骨架样式
+  &-emptyBlock {
+    background-color: #eaebed;
+    border-radius: 5px;
+    line-height: 15px;
+  }
 }
 
 .#{$ns}InputTable {
@@ -1074,6 +1057,7 @@
   > .#{$ns}Button,
   > .#{$ns}Button--disabled-wrap > .#{$ns}Button {
     margin: px2rem(3px);
+    height: auto;
   }
 
   > .#{$ns}Button--disabled-wrap > .#{$ns}Button--link {

package/scss/components/_tpl.scss

@@ -3,3 +3,11 @@
     display: inline;
   }
 }
+
+.max-line {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}

package/scss/components/form/_checks.scss

@@ -708,6 +708,14 @@
     margin-right: 0;
     margin-bottom: 0;
   }
+
+  .#{$ns}Checkboxes-addBtn {
+    > svg {
+      width: px2rem(14px);
+      height: px2rem(14px);
+      margin-right: var(--Checkbox-gap);
+    }
+  }
 }
 
 .#{$ns}RadiosControl-group,

package/scss/components/form/_editor.scss

@@ -22,54 +22,6 @@
     border-color: var(--Form-input-onFocused-borderColor);
   }
 
-  .#{$ns}MonacoEditor {
-    position: relative;
-
-    &-header {
-      position: absolute;
-      right: px2rem(14px);
-      top: 0;
-      padding: 0;
-      width: px2rem(18px);
-      height: px2rem(18px);
-      z-index: 5;
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: center;
-      align-items: center;
-      background: var(--Modal-header-bg);
-      box-sizing: border-box;
-    }
-
-    &-fullscreen {
-      cursor: pointer;
-      color: var(--Modal-close-color);
-      line-height: inherit;
-      text-decoration: none;
-      text-align: center;
-      vertical-align: middle;
-
-      &:hover {
-        color: var(--Model-close-onHover-color);
-
-        svg {
-          fill: var(--Model-close-onHover-color);
-        }
-      }
-    }
-
-    &-placeholder {
-      pointer-events: none;
-      top: 0;
-      position: absolute;
-      left: px2rem(65px);
-      right: px2rem(16px);
-      white-space: break-spaces;
-      line-break: anywhere;
-      color: var(--Form-input-placeholderColor);
-    }
-  }
-
   &--sm {
     min-height: 100px;
 
@@ -115,6 +67,54 @@
   }
 }
 
+.#{$ns}MonacoEditor {
+  position: relative;
+
+  &-header {
+    position: absolute;
+    right: px2rem(14px);
+    top: 0;
+    padding: 0;
+    width: px2rem(18px);
+    height: px2rem(18px);
+    z-index: 5;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    background: var(--Modal-header-bg);
+    box-sizing: border-box;
+  }
+
+  &-fullscreen {
+    cursor: pointer;
+    color: var(--Modal-close-color);
+    line-height: inherit;
+    text-decoration: none;
+    text-align: center;
+    vertical-align: middle;
+
+    &:hover {
+      color: var(--Model-close-onHover-color);
+
+      svg {
+        fill: var(--Model-close-onHover-color);
+      }
+    }
+  }
+
+  &-placeholder {
+    pointer-events: none;
+    top: 0;
+    position: absolute;
+    left: px2rem(65px);
+    right: px2rem(16px);
+    white-space: break-spaces;
+    line-break: anywhere;
+    color: var(--Form-input-placeholderColor);
+  }
+}
+
 .monaco-inputbox > .wrapper {
   padding: 0;
 }

package/scss/components/form/_form.scss

@@ -456,38 +456,74 @@
   width: 50%;
 }
 
+.#{$ns}Form--column-2 > .#{$ns}Form-item:nth-last-child(2) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-3 > .#{$ns}Form-item {
   width: 33%;
 }
 
+.#{$ns}Form--column-3 > .#{$ns}Form-item:nth-last-child(-n + 3) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-4 > .#{$ns}Form-item {
   width: 25%;
 }
 
+.#{$ns}Form--column-4 > .#{$ns}Form-item:nth-last-child(-n + 4) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-5 > .#{$ns}Form-item {
   width: 20%;
 }
 
+.#{$ns}Form--column-5 > .#{$ns}Form-item:nth-last-child(-n + 5) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-6 > .#{$ns}Form-item {
   width: 16.6%;
 }
 
+.#{$ns}Form--column-6 > .#{$ns}Form-item:nth-last-child(-n + 6) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-7 > .#{$ns}Form-item {
   width: 14.2%;
 }
 
+.#{$ns}Form--column-7 > .#{$ns}Form-item:nth-last-child(-n + 7) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form--column-8 > .#{$ns}Form-item {
   width: 12.5%;
 }
 
+.#{$ns}Form--column-8 > .#{$ns}Form-item:nth-last-child(-n + 8) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form-column-9 > .#{$ns}Form-item {
   width: 11.1%;
 }
 
+.#{$ns}Form--column-9 > .#{$ns}Form-item:nth-last-child(-n + 9) {
+  margin-bottom: 0;
+}
+
 .#{$ns}Form-column-10 > .#{$ns}Form-item {
   width: 10%;
 }
 
+.#{$ns}Form--column-10 > .#{$ns}Form-item:nth-last-child(-n + 10) {
+  margin-bottom: 0;
+}
+
 /* 移动端样式调整 */
 @include media-breakpoint-down(sm) {
   .#{$ns}Form {

package/scss/components/form/_image.scss

@@ -170,33 +170,6 @@
     margin: 30px 0 0 var(--Tooltip--attr-gap);
   }
 
-  &-dropzone:focus &-addBtn:not(.is-invalid) {
-    border-color: var(--inputImage-base-hover-top-border-color)
-      var(--inputImage-base-hover-right-border-color)
-      var(--inputImage-base-hover-bottom-border-color)
-      var(--inputImage-base-hover-left-border-color);
-    background: var(--ImageControl-addBtn-onHover-bg);
-    color: var(--ImageControl-addBtn-onHover-color);
-
-    > svg {
-      color: var(--inputImage-base-hover-icon-color);
-    }
-  }
-
-  &-dropzone:hover {
-    &-addBtn:not(.is-disabled):not(.is-invalid) {
-      border-color: var(--inputImage-base-hover-top-border-color)
-        var(--inputImage-base-hover-right-border-color)
-        var(--inputImage-base-hover-bottom-border-color)
-        var(--inputImage-base-hover-left-border-color);
-      background: var(--ImageControl-addBtn-onHover-bg);
-      color: var(--ImageControl-addBtn-onHover-color);
-      .#{$ns}ImageControl-addBtn-text {
-        color: var(--ImageControl-addBtn-onHover-color);
-      }
-    }
-  }
-
   &-itemList {
     display: inline;
   }

package/scss/components/form/_input-table.scss

@@ -0,0 +1,17 @@
+.#{$ns}InputTable-UI {
+  .#{$ns}Table-contentWrap.is-fixed {
+    overflow: auto;
+  }
+
+  table {
+    text-align: left;
+    position: relative;
+    border-collapse: collapse;
+
+    & thead > tr > th {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-sticky; /* 遮挡一下 tbody */
+    }
+  }
+}

package/scss/components/form/_select.scss

@@ -664,3 +664,27 @@
     }
   }
 }
+
+// 下拉框在弹框中的的时候没有select层，所以把这部分单独提出来
+.#{$ns}PopOver.#{$ns}Select-popover {
+  &.#{$ns}PopOver--v-top {
+    margin-top: px2rem(4px);
+  }
+  &.#{$ns}PopOver--v-bottom {
+    margin-bottom: px2rem(4px);
+  }
+  .#{$ns}Select-menu {
+    .#{$ns}Checkbox span {
+      line-height: var(--select-base-default-option-line-height);
+      height: var(--select-base-default-option-line-height);
+    }
+    .#{$ns}Select-option {
+      line-height: var(--select-base-default-option-line-height);
+      height: var(--select-base-default-option-line-height);
+    }
+    .#{$ns}Select-addBtn {
+      line-height: var(--select-base-default-option-line-height);
+      height: var(--select-base-default-option-line-height);
+    }
+  }
+}

package/scss/themes/_common.scss

@@ -11,7 +11,7 @@
 @import '../layout/aside';
 @import '../layout/hbox';
 @import '../layout/vbox';
-@import '../components/button'; // 这个要放在最前面
+@import '../components/button';
 @import '../components/avatar';
 @import '../components/breadcrumb';
 @import '../components/badge';
@@ -126,6 +126,8 @@
 @import '../components/form/icon-select';
 @import '../components/form/form';
 @import '../components/form/user-select';
+@import '../components/form/input-table';
+
 @import '../components/anchor-nav';
 @import '../components/markdown';
 @import '../components/link';