amis-ui 3.6.2 → 6.0.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.6.2",
+  "version": "6.0.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.6.2",
-    "amis-formula": "^3.6.2",
+    "amis-core": "^6.0.0",
+    "amis-formula": "^6.0.0",
     "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -62,6 +62,7 @@
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.5",
     "react-hook-form": "7.39.0",
+    "react-intersection-observer": "9.5.2",
     "react-json-view": "1.21.3",
     "react-overlays": "5.1.1",
     "react-textarea-autosize": "8.3.3",
@@ -146,5 +147,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "654f7588dc58de14e9a94ea48ca48abf6c437adf"
+  "gitHead": "4adf8b9f4080bc440d54940899469706949e88cc"
 }

package/scss/_components.scss

@@ -1287,7 +1287,6 @@
   --checkbox-checkbox-default-height: var(--sizes-size-9);
   --checkbox-checkbox-default-bg-color: var(--colors-neutral-fill-11);
   --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(--fonts-size-7);
   --checkbox-checkbox-default-top-border-color: var(--colors-neutral-line-8);
@@ -3799,6 +3798,7 @@
   --inputTag-option-bg-color: var(--colors-neutral-fill-11);
   --inputTag-option-hover-color: var(--colors-brand-5);
   --inputTag-option-hover-bg-color: var(--colors-brand-10);
+  --inputTag-popover-maxHeight: 300px;
 
   --fieldSet-legend-height: var(--sizes-size-9);
   --fieldSet-legend-color: var(--colors-neutral-text-2);
@@ -3918,9 +3918,9 @@
   --conditionBuilder-line-width: var(--sizes-size-2);
   --conditionBuilder-line-bg-color: var(--colors-brand-9);
   --conditionBuilder-body-bg-color: var(--colors-neutral-line-10);
-  --conditionBuilder-body-paddingTop: var(--sizes-size-7);
+  --conditionBuilder-body-paddingTop: var(--sizes-size-3);
   --conditionBuilder-body-paddingRight: var(--sizes-size-7);
-  --conditionBuilder-body-paddingBottom: var(--sizes-size-7);
+  --conditionBuilder-body-paddingBottom: var(--sizes-size-3);
   --conditionBuilder-body-paddingLeft: var(--sizes-base-14);
 
   --table-border-width: var(--borders-width-2);

package/scss/_mixins.scss

@@ -675,6 +675,10 @@
     margin-right: var(--gap-xs);
     margin-bottom: var(--gap-xs);
     margin-top: var(--gap-xs);
+    max-width: px2rem(150px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &:hover {
       background: var(--Form-selectValue-onHover-bg);

package/scss/_properties.scss

@@ -228,7 +228,7 @@ $Table-strip-bg: transparent;
   --Carousel--light-control: white;
   --Carousel-arrowControl-height: var(--gap-lg);
   --Carousel-arrowControl-width: var(--gap-lg);
-  --Carousel-bg: #f6f8f8;
+  --Carousel-bg: var(--colors-neutral-fill-10);
   --Carousel-dot-borderRadius: #{px2rem(4px)};
   --Carousel-dot-height: #{px2rem(8px)};
   --Carousel-dot-margin: #{px2rem(7px)} var(--gap-xs);
@@ -281,7 +281,7 @@ $Table-strip-bg: transparent;
   --DropDown-menu-paddingY: var(--gap-xs);
   --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg);
   --DropDown-group-color: #848b99;
-  --DropDown-menuItem-color: #151a26;
+  --DropDown-menuItem-color: var(--colors-neutral-text-2);
   --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color);
   --DropDown-menuItem-onActive-color: var(--colors-brand-5);
   --DropDown-menuItem-onDisabled-color: #b4b6ba;
@@ -595,7 +595,9 @@ $Table-strip-bg: transparent;
 
   --Pagination-fontSize: var(--fonts-size-8);
   --Pagination-height: #{px2rem(32px)};
+  --Pagination-height-sm: #{px2rem(24px)};
   --Pagination-minWidth: #{px2rem(32px)};
+  --Pagination-minWidth-sm: #{px2rem(24px)};
   --Pagination-onActive-backgroundColor: var(--colors-neutral-fill-11);
   --Pagination-onActive-border: var(--borders-width-2) var(--borders-style-2)
     var(--colors-brand-5);
@@ -603,6 +605,7 @@ $Table-strip-bg: transparent;
   --Pagination-onDisabled-color: var(--colors-neutral-text-6);
   --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10);
   --Pagination-padding: 0 #{px2rem(8px)};
+  --Pagination-padding-sm: 0 #{px2rem(4px)};
   --Pagination-light-color: #84868c;
 
   --Panel--default-badgeBg: var(--colors-neutral-fill-3);
@@ -626,7 +629,7 @@ $Table-strip-bg: transparent;
   --PickerColumns-loadingIcon-color: var(--icon-color);
   --PickerColumns-loadingMask-Color: rgba(255, 255, 255, 0.9);
 
-  --PopOver-bg: white;
+  --PopOver-bg: var(--colors-neutral-fill-11);
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
 
@@ -826,6 +829,7 @@ $Table-strip-bg: transparent;
   --SearchBox-enhonce-disabled-color: var(--colors-neutral-text-9);
   --SearchBox-enhonce-disabled-search-color: var(--colors-neutral-text-6);
   --SearchBox-enhonce-clearable-gap: var(--borders-radius-4);
+  --SearchBox-search-btn-color--disabled: var(--colors-neutral-fill-6);
 
   --IconSelect-searchBox-width: #{px2rem(246px)};
   --IconSelect-type-item-height: #{px2rem(48px)};

package/scss/components/_alert.scss

@@ -48,6 +48,7 @@
     }
 
     .#{$ns}Alert-desc {
+      min-height: #{px2rem(24px)};
       line-height: #{px2rem(24px)};
     }
   }

package/scss/components/_cards.scss

@@ -1,7 +1,8 @@
 .#{$ns}Cards {
   &-toolbar {
     @include clearfix();
-    margin: 0 var(--Cards-toolbar-marginX) var(--Cards-toolbar-marginY);
+    padding: var(--Cards-toolbar-marginY) var(--Cards-toolbar-marginX)
+      var(--Cards-toolbar-marginY);
   }
 
   &-actions {
@@ -95,6 +96,14 @@
       flex: unset;
     }
   }
+
+  &-footToolbar--affix,
+  &-footer--affix {
+    position: sticky;
+    bottom: var(--affix-offset-bottom);
+    background: var(--Table-bg);
+    z-index: $zindex-sticky;
+  }
 }
 
 @include media-breakpoint-up(sm) {

package/scss/components/_condition-builder.scss

@@ -302,7 +302,7 @@
         padding: 10px;
         margin: -10px 0px;
         background: $white;
-        z-index: 2;
+        z-index: $zindex-dropdown;
       }
       > .#{$ns}CBGroupOrItem-dragbar {
         left: px2rem(-5px);

package/scss/components/_dropdown.scss

@@ -127,7 +127,7 @@
   }
 
   &-menuItem,
-  &-menu:not(.is-mobile) > li {
+  &-menu:not(.is-mobile) > li:not(.is-disabled) {
     &:hover {
       background: var(--DropDown-menuItem-onHover-bg);
       color: var(--DropDown-menuItem-onHover-color);

package/scss/components/_list.scss

@@ -12,7 +12,8 @@
     @include clearfix();
     display: flex;
     flex-wrap: wrap;
-    margin: 0 var(--List-toolbar-marginX) var(--List-toolbar-marginY);
+    padding: var(--List-toolbar-marginY) var(--List-toolbar-marginX)
+      var(--List-toolbar-marginY);
   }
 
   &-actions {
@@ -78,6 +79,14 @@
     min-height: var(--List-placeholder-height);
     line-height: var(--List-placeholder-height);
   }
+
+  &-footToolbar--affix,
+  &-footer--affix {
+    position: sticky;
+    bottom: var(--affix-offset-bottom);
+    background: var(--Table-bg);
+    z-index: $zindex-sticky;
+  }
 }
 
 .#{$ns}ListGroup {

package/scss/components/_menu.scss

@@ -124,7 +124,7 @@
   --Menu-Submenu-item-paddingX: var(--Nav-Item-Badge-paddingRight);
 
   --Menu-light-backgroundColor: var(--Layout-light-backgroundColor);
-  --Menu-light-active-backgroundColor: var(--colors-neutral-fill-12);
+  --Menu-light-active-backgroundColor: var(--colors-neutral-fill-8);
   --Menu-light-backgroundColor-onHover: var(--Layout-light-bgColor-onHover);
   --Menu-light-fontColor: var(--Layout-light-fontColor);
   --Menu-light-fontColor-onHover: var(--Layout-fontColor--onHover);
@@ -192,7 +192,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: inherit;
+    color: var(--colors-neutral-text-2);
     font-size: inherit;
     flex: 1;
     cursor: inherit;

package/scss/components/_overflow-tpl.scss

@@ -0,0 +1,5 @@
+.#{$ns}OverflowTpl {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

package/scss/components/_pagination.scss

@@ -35,14 +35,6 @@
       color: var(--primary);
     }
   }
-  .ellipsis {
-    cursor: unset;
-    > a {
-      cursor: unset;
-      position: relative;
-      top: px2rem(-4px);
-    }
-  }
 
   > li.is-disabled {
     > span,
@@ -153,12 +145,82 @@
       }
     }
   }
+
+  &-simplego {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    height: var(--Pagination-height);
+
+    input {
+      min-width: px2rem(40px);
+      width: px2rem(40px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: none;
+      border: var(--borderWidth) solid var(--borderColor);
+      border-radius: var(--borderRadius);
+      padding: var(--Pagination-padding);
+      margin-right: px2rem(8px);
+      text-align: center;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        border-color: var(--primary);
+      }
+    }
+    &-right {
+      display: inline-block;
+      width: px2rem(32px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: var(--borderWidth) solid var(--borderColor);
+      font-size: var(--fontSizeSm);
+      &:hover {
+        color: #666666 !important;
+        cursor: default;
+      }
+    }
+  }
+
+  &-ellipsis {
+    cursor: unset;
+    position: relative;
+
+    &:hover {
+      cursor: pointer;
+      > a {
+        opacity: 0;
+        transition: all 0.2s;
+      }
+      > span {
+        opacity: 1;  
+        transition: all 0.2s;
+      }
+    }
+
+    > a {
+      cursor: unset;
+      position: absolute !important;
+      top: px2rem(-4px);
+      opacity: 1;
+      transition: all 0.2s;
+    }
+    > span {
+      opacity: 0;  
+      transition: all 0.2s;
+    }
+  }
 }
 
 .#{$ns}Pagination-wrap {
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
+    &.#{$ns}Pagination-perpage {
+      margin-left: px2rem(8px);
+    }
     &:nth-child(1) {
       margin-left: 0;
     }
@@ -196,3 +258,51 @@
 
   text-align: right;
 }
+
+.#{$ns}Pagination-wrap-size--sm {
+  line-height: px2rem(24px);
+
+  .#{$ns}Pagination-item {
+    margin-left: px2rem(4px);
+  
+    > li {  
+      > a,
+      > span {
+        min-width: var(--Pagination-minWidth-sm);
+        height: var(--Pagination-height-sm);
+        line-height: var(--Pagination-height-sm);
+        padding: var(--Pagination-padding-sm);
+      }
+    }
+  
+    .#{$ns}Pagination-inputGroup, .#{$ns}Pagination-simplego {
+      height: var(--Pagination-height-sm);
+      &-input {
+        min-width: px2rem(40px);
+        width: px2rem(40px);
+        height: var(--Pagination-height-sm);
+        line-height: var(--Pagination-height-sm);
+        padding: var(--Pagination-padding-sm);
+        margin-left: px2rem(4px);
+      }
+      &-right {
+        height: var(--Pagination-height-sm);
+        line-height: var(--Pagination-height-sm);
+      }
+    }
+
+    .#{$ns}Pagination-simplego {
+      &-input {
+        min-width: px2rem(32px);
+        width: px2rem(32px);
+      }
+    }
+  }
+
+  .#{$ns}Pagination-perpage {
+    margin-left: px2rem(4px);
+    padding: 0 px2rem(6px);
+    min-height: px2rem(24px);
+    vertical-align: baseline;
+  }
+}

package/scss/components/_search-box.scss

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: flex-end;
 
-  height: 30px;
+  height: var(--input-size-default-height);
   width: 30px;
   padding-left: 8px;
 
@@ -41,6 +41,11 @@
   &-searchBtn {
     display: inline-block;
     padding: #{px2rem(5px)} #{px2rem(10px)};
+
+    &--loading {
+      display: inline-flex;
+      align-items: center;
+    }
   }
 
   &-activeBtn,
@@ -65,7 +70,7 @@
   &.is-disabled &-activeBtn,
   &.is-disabled &-searchBtn,
   &.is-disabled &-cancelBtn {
-    color: var(--icon-onDisabled-color);
+    color: var(--SearchBox-search-btn-color--disabled);
     pointer-events: none;
   }
 
@@ -115,8 +120,6 @@
     }
   }
 
-  height: 30px;
-
   &--enhance.is-active &-searchBtn {
     height: 100%;
     color: var(--SearchBox-enhonce-icon-color);

package/scss/components/_table.scss

@@ -143,6 +143,14 @@
     }
   }
 
+  &-footerToolbar--affix,
+  &-footer--affix {
+    position: sticky;
+    bottom: var(--affix-offset-bottom);
+    background: var(--Table-bg);
+    z-index: $zindex-sticky;
+  }
+
   &.is-mobile {
     .#{$ns}Table-toolbar {
       .#{$ns}Form-item {
@@ -184,6 +192,10 @@
     opacity: 0.5;
     z-index: 15;
 
+    &--disabled {
+      cursor: not-allowed;
+    }
+
     &:hover,
     &.is-resizing {
       background: var(--primary);
@@ -238,6 +250,9 @@
         content: '';
         pointer-events: none;
       }
+      & .label {
+        font-size: 90%;
+      }
     }
 
     &.is-layout-fixed td {

package/scss/components/_table2.scss

@@ -228,6 +228,7 @@
 
         .#{$ns}Table-head-cell-wrapper {
           display: flex;
+          align-items: center;
         }
       }
     }
@@ -671,6 +672,10 @@
           z-index: 15;
           opacity: 0.5;
 
+          &--disabled {
+            cursor: not-allowed;
+          }
+
           &:hover,
           &.is-resizing {
             background: var(--primary);
@@ -694,7 +699,7 @@
   .#{$ns}TableCell-sortBtn {
     cursor: pointer;
     width: var(--TableCell-sortBtn-width);
-    height: 100%;
+    height: 14px;
     vertical-align: middle;
     position: static;
     display: inline-block;
@@ -746,6 +751,7 @@
     cursor: pointer;
     color: var(--table-icon-color);
     margin-left: var(--TableCell-icon-gap);
+    height: 18px;
 
     svg {
       width: 12px;
@@ -773,7 +779,7 @@
   .#{$ns}TableCell-filterBtn {
     cursor: pointer;
     width: var(--TableCell-filterBtn-width);
-    height: 100%;
+    height: 14px;
     vertical-align: middle;
     position: static;
     display: inline-block;

package/scss/components/form/_checks.scss

@@ -37,7 +37,6 @@
       cursor: pointer;
       display: inline-block;
       vertical-align: top;
-      line-height: var(--checkbox-checkbox-default-lineHeight);
 
       > a {
         // float: right;
@@ -137,12 +136,12 @@
       }
 
       &[disabled] + i {
-        border-color: var(--Checkbox-onDisabled-color);
+        border-color: var(--Checkbox-color) !important;
         cursor: not-allowed;
-
+        background-color: var(--checkbox-checkbox-disabled-bg-color);
         &:before {
-          width: var(--Checkbox-inner-size);
-          height: calc(var(--Checkbox-inner-size) / 2);
+          background-color: var(--Checkbox-onDisabled-color);
+          border-width: 0;
         }
       }
 
@@ -285,6 +284,7 @@
         &:before {
           border-color: var(--Checkbox-onDisabled-color);
           background: var(--Checkbox-onDisabled-bg);
+          border-width: 0 0 px2rem(1px) px2rem(1px);
         }
       }
 

package/scss/components/form/_date-range.scss

@@ -225,7 +225,7 @@
   margin: 0;
   padding-left: px2rem(10px);
   list-style: none;
-  background: #f7f7f9;
+  background: var(--colors-neutral-fill-10);
   line-height: px2rem(32px);
   overflow-x: auto;
 }

package/scss/components/form/_date.scss

@@ -633,10 +633,15 @@
   width: var(--gap-md);
   padding: 0;
   color: var(--DatePicker-arrow-color);
-  font-size: var(--fontSizeXl);
+  font-size: var(--fontSizeXl) !important;
   text-decoration: none;
   font-family: auto;
   font-weight: normal;
+  .icon-right-arrow {
+    width: #{px2rem(12px)};
+    height: #{px2rem(12px)};
+    top: 0;
+  }
 
   &:hover {
     text-decoration: none;
@@ -689,6 +694,13 @@
     transform: rotate(180deg);
     transform-origin: 50% 50%;
   }
+  .icon-right-double-arrow {
+    top: -1px;
+  }
+  .icon-right-arrow {
+    width: #{px2rem(12px)};
+    height: #{px2rem(12px)};
+  }
 }
 
 .header-line {

package/scss/components/form/_fieldset.scss

@@ -18,11 +18,9 @@
     top: 0;
     left: 0;
     display: inline-block;
-    border: 0;
     width: auto;
     z-index: 1;
     background: var(--Fieldset-legend-bgColor);
-    border-left: 0 !important;
   }
 
   > legend.#{$ns}Collapse-header.is-mobile {

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

@@ -2,6 +2,13 @@
   display: inline-flex;
   flex-wrap: nowrap;
 
+  &:hover {
+    div,
+    button {
+      border-color: var(--colors-brand-5) !important;
+    }
+  }
+
   &.#{$ns}Form-control--sizeXs,
   &.#{$ns}Form-control--sizeSm,
   &.#{$ns}Form-control--sizeMd,
@@ -69,7 +76,8 @@
     }
   }
 
-  .#{$ns}TextControl-input {
+  .#{$ns}TextControl-input,
+  .#{$ns}SearchBox {
     flex-basis: 0;
     flex-grow: 1;
     display: inline-flex;
@@ -77,6 +85,7 @@
     &:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      border-left: none;
     }
 
     &:not(:last-child) {
@@ -101,6 +110,7 @@
     &:first-child .#{$ns}Select {
       border-top-left-radius: var(--InputGroup-select-borderRadius);
       border-bottom-left-radius: var(--InputGroup-select-borderRadius);
+      background-color: var(--colors-neutral-fill-10);
     }
 
     &:last-child .#{$ns}Select {
@@ -128,21 +138,22 @@
     .#{$ns}InputGroup-addOn,
     .#{$ns}TextControl-input,
     .#{$ns}Select,
+    .#{$ns}SearchBox,
     .#{$ns}InputGroup-btn .#{$ns}Button {
       border-color: var(--InputGroup-addOn-onFocused-borderColor);
     }
 
-    .#{$ns}Select {
-      background: var(--InputGroup-select-onFocused-bg);
-    }
+    // .#{$ns}Select {
+    //   background: var(--InputGroup-select-onFocused-bg);
+    // }
 
-    .#{$ns}Select {
-      color: var(--InputGroup-select-onFocused-color);
-    }
+    // .#{$ns}Select {
+    //   color: var(--InputGroup-select-onFocused-color);
+    // }
 
-    .#{$ns}Select-arrow {
-      color: var(--InputGroup-select-onFocused-arrowColor);
-    }
+    // .#{$ns}Select-arrow {
+    //   color: var(--InputGroup-select-onFocused-arrowColor);
+    // }
 
     .#{$ns}InputGroup-addOn {
       color: var(--primary);

package/scss/components/form/_picker.scss

@@ -93,7 +93,6 @@
     border-color: var(--Pick-base-top-border-color)
       var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
       var(--Pick-base-left-border-color);
-    overflow: auto;
   }
 
   .#{$ns}Picker-values {