amis-ui 2.1.1-beta.2 → 2.3.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "2.1.1-beta.2",
+  "version": "2.3.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -33,12 +33,12 @@
     }
   },
   "dependencies": {
-    "amis-core": "^2.1.1-beta.2",
-    "amis-formula": "^2.1.0",
+    "amis-core": "^2.3.0",
+    "amis-formula": "^2.3.0",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
-    "downshift": "6.1.7",
-    "echarts": "5.3.3",
+    "downshift": "6.1.12",
+    "echarts": "5.4.0",
     "froala-editor": "3.1.1",
     "hoist-non-react-statics": "^3.3.2",
     "jsbarcode": "^3.11.5",
@@ -53,7 +53,7 @@
     "moment": "^2.19.4",
     "monaco-editor": "0.30.1",
     "prop-types": "^15.6.1",
-    "rc-input-number": "^7.3.4",
+    "rc-input-number": "^7.3.9",
     "rc-progress": "^3.1.4",
     "react-color": "^2.19.3",
     "react-hook-form": "7.30.0",
@@ -62,40 +62,42 @@
     "react-textarea-autosize": "8.3.3",
     "react-transition-group": "4.4.2",
     "react-visibility-sensor": "5.1.1",
-    "sortablejs": "1.14.0",
+    "sortablejs": "1.15.0",
     "tinymce": "^6.1.2",
     "tslib": "^2.3.1",
     "uncontrollable": "7.2.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@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",
     "@types/babel__core": "^7.1.19",
     "@types/jest": "^28.1.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
-    "autoprefixer": "^10.4.7",
-    "jest": "^28.1.0",
-    "jest-environment-jsdom": "^28.1.0",
+    "autoprefixer": "^10.4.12",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "moment-timezone": "^0.5.34",
     "postcss-import": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.73.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-license": "^2.7.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
-    "sass": "^1.54.0",
-    "ts-jest": "^28.0.3",
+    "sass": "^1.54.9",
+    "ts-jest": "^29.0.2",
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
+    "amis-core": "*",
+    "amis-formula": "*",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
@@ -110,7 +112,12 @@
       "js"
     ],
     "transform": {
-      "\\.(ts|tsx)$": "ts-jest"
+      "\\.(ts|tsx)$": [
+        "ts-jest",
+        {
+          "diagnostics": false
+        }
+      ]
     },
     "setupFiles": [
       "jest-canvas-mock"
@@ -127,12 +134,7 @@
     "testPathIgnorePatterns": [
       "/node_modules/",
       "/.rollup.cache/"
-    ],
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    }
+    ]
   },
-  "gitHead": "933b5e75fe06f4cfde4a79e8442be0d6c170d29d"
+  "gitHead": "b68c3c583c6744b1538a1a6865d3a33e51cddd5d"
 }

package/scss/_mixins.scss

@@ -409,6 +409,10 @@
     background: var(--Form-input-onDisabled-bg);
     border-color: var(--Form-input-onDisabled-borderColor);
     transition: all var(--animation-duration);
+
+    & > input {
+      color: var(--text--muted-color);
+    }
   }
 
   &-spinner {
@@ -471,3 +475,9 @@
     color: var(--icon-onHover-color);
   }
 }
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/scss/_properties.scss

@@ -36,7 +36,8 @@
 
   // box-shadow
   $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
-  0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
+    0px 1px 10px 0px rgba(8, 14, 26, 0.05),
+    0px 2px 4px -1px rgba(8, 14, 26, 0.04);
 
   --fontSizeBase: #{px2rem(14px)};
   --fontSizeMd: #{px2rem(14px)};
@@ -650,6 +651,8 @@
     var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 +
       var(--Form-input-clearBtn-size) * 2
   );
+  --DateRangePicker-activeCursor-color: var(--primary);
+  --DateRangePicker-activeCursor-height: 2px;
 
   --LocationPicker-borderRadius: var(--Form-input-borderWidth);
 
@@ -1378,7 +1381,7 @@
   --Table-thead-color: var(--text--loud-color);
   --Table-thead-fontSize: var(--fontSizeBase);
   --Table-thead-iconColor: var(--icon-color);
-  --Table-toolbar-marginX: 0;
+  --Table-toolbar-marginX: var(--gap-xs);
   --Table-toolbar-marginY: var(--gap-base);
   --Table-tree-borderColor: var(--Table-borderColor);
   --Table-searchableForm-backgroundColor: #f6f7f8;

package/scss/_thirds.scss

@@ -1,8 +1,8 @@
-@import url('codemirror/lib/codemirror.css');
-@import url('froala-editor/css/froala_style.min.css');
-@import url('froala-editor/css/froala_editor.pkgd.min.css');
-@import url('tinymce/skins/ui/oxide/skin.css');
-@import url('video-react/dist/video-react.css');
-@import url('cropperjs/dist/cropper.css');
+@import '../../../node_modules/codemirror/lib/codemirror';
+@import '../../../node_modules/froala-editor/css/froala_style.min';
+@import '../../../node_modules/froala-editor/css/froala_editor.pkgd.min';
+@import '../../../node_modules/tinymce/skins/ui/oxide/skin';
+@import '../../../node_modules/video-react/dist/video-react';
+@import '../../../node_modules/cropperjs/dist/cropper';
 
 @import './components/react-datetime';

package/scss/components/_anchor-nav.scss

@@ -30,6 +30,8 @@
           margin-left: px2rem(-2px);
           height: px2rem(32px);
           line-height: px2rem(32px);
+          @include truncate();
+          max-width: var(--Tabs--vertical-width);
 
           &:hover {
             color: var(--primary);
@@ -46,8 +48,8 @@
             border-color: var(--primary);
           }
           > a:hover {
-            color: #528EFF;
-            border-color: #528EFF;
+            color: #528eff;
+            border-color: #528eff;
           }
           > a:active {
             color: #144bcc;
@@ -72,6 +74,11 @@
         display: inline-block;
         position: relative;
 
+        > a {
+          @include truncate();
+          max-width: var(--Tabs--vertical-width);
+        }
+
         > a:first-child {
           font-size: var(--Tabs-linkFontSize);
           outline: 0;

package/scss/components/_collapse.scss

@@ -61,15 +61,15 @@
     display: inline-block;
   }
 
-  &.is-active &-arrow:before {
+  &.is-active > * > &-arrow:before {
     transform: rotate(135deg);
     transform-origin: 50% 30%;
   }
-  &.is-active &-icon-tranform {
+  &.is-active > * > &-icon-tranform {
     transform: rotate(90deg);
   }
 
-  &--disabled &-header {
+  &--disabled > &-header {
     cursor: not-allowed;
     user-select: none;
     color: var(--text--muted-color);
@@ -78,7 +78,7 @@
     }
   }
 
-  &--disabled &-arrow:before {
+  &--disabled > * > &-arrow:before {
     border-color: var(--text--muted-color);
   }
 

package/scss/components/_column-toggler.scss

@@ -128,6 +128,7 @@
 
     &-header {
       width: 100%;
+      padding: 0 px2rem(24px);
       @include flex-layout();
 
       a,
@@ -145,7 +146,7 @@
     }
 
     &-content {
-      padding: 0;
+      padding: 0 px2rem(24px);
       width: 100%;
       list-style: none;
       margin: px2rem(8px) 0;
@@ -205,6 +206,7 @@
 
     &-footer {
       width: 100%;
+      padding: 0 px2rem(24px);
       @include flex-layout();
 
       .#{$ns}ColumnToggler-modeSelect {
@@ -225,6 +227,10 @@
           a {
             display: inline-block;
           }
+
+          button:not(:last-child) {
+            margin-right: var(--gap-sm);
+          }
         }
 
         &:last-child {

package/scss/components/_drawer.scss

@@ -162,6 +162,64 @@
     width: var(--Drawer-widthXl);
     height: var(--Drawer-widthXl);
   }
+
+  // 从第二层弹框开始左右弹框的每层宽度或高度递减
+  @for $i from 2 through 6 {
+    $space-diff: 20;
+    .#{$ns}Drawer--right.#{$ns}Modal--#{$i}th,
+    .#{$ns}Drawer--left.#{$ns}Modal--#{$i}th {
+      &.#{$ns}Drawer .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthBase) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xs .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthXs) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--sm .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthSm) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--md .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthMd) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--lg .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthLg) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xl .#{$ns}Drawer-content {
+        width: calc(var(--Drawer-widthXl) - #{($i - 1) * $space-diff}px);
+      }
+    }
+
+    .#{$ns}Drawer--top.#{$ns}Modal--#{$i}th,
+    .#{$ns}Drawer--bottom.#{$ns}Modal--#{$i}th {
+      &.#{$ns}Drawer .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthBase) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xs .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthXs) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--sm .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthSm) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--md .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthMd) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--lg .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthLg) - #{($i - 1) * $space-diff}px);
+      }
+
+      &.#{$ns}Drawer--xl .#{$ns}Drawer-content {
+        height: calc(var(--Drawer-widthXl) - #{($i - 1) * $space-diff}px);
+      }
+    }
+  }
 }
 
 // positons
@@ -173,7 +231,6 @@
 }
 
 .#{$ns}Drawer--top {
-
   .#{$ns}Drawer-close {
     top: var(--gap-base);
     right: var(--gap-base);
@@ -232,9 +289,7 @@
     .#{$ns}Drawer-info {
       flex-basis: 0;
       flex-grow: 1;
-      order: 10;
       align-self: center;
-      text-align: right;
     }
 
     .#{$ns}Drawer-error {
@@ -253,7 +308,6 @@
 }
 
 .#{$ns}Drawer--bottom {
-
   .#{$ns}Drawer-close {
     top: var(--gap-base);
     right: var(--gap-base);
@@ -283,7 +337,6 @@
 }
 
 .#{$ns}Drawer--left {
-
   .#{$ns}Drawer-close {
     left: auto;
     right: var(--gap-base);

package/scss/components/_dropdown.scss

@@ -37,6 +37,7 @@
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
+    margin: 0;
     min-width: var(--DropDown-menu-minWidth);
     text-align: left;
     border: none;

package/scss/components/_modal.scss

@@ -10,19 +10,14 @@
 @keyframes modalIn {
   from {
     opacity: 0;
-    width: 0;
-    height: 0;
-    bottom: -999px;
+    transform: translate3d(0, -300px, 0) scale(0.2);
   }
 }
 
 @keyframes modalOut {
   to {
     opacity: 0;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    bottom: -999px;
+    transform: translate3d(0, -300px, 0) scale(0.2);
   }
 }
 

package/scss/components/_progress.scss

@@ -6,6 +6,19 @@
   &-line {
     display: inline-block;
     width: 100%;
+    position: relative;
+    &-threshold {
+      position: absolute;
+      height: 100%;
+      border-left: 1px solid #007bff;
+      &-text {
+        position: absolute;
+        font-size: 12px;
+        bottom: -20px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
 
     &-inter {
       height: 100%;

package/scss/components/_result-box.scss

@@ -77,7 +77,6 @@
   }
 
   &-singleValue {
-    padding: 0 calc(var(--Form-input-paddingX) - #{px2rem(3px)});
     flex-grow: 1;
     display: inline-block;
     max-width: 100%;

package/scss/components/_spinner.scss

@@ -174,3 +174,9 @@
     transform: translate3d(-50%, -50%, 0);
   }
 }
+
+.#{$ns}Spinner-mark {
+  position: absolute;
+  z-index: -999;
+  opacity: 0;
+}

package/scss/components/_table.scss

@@ -164,6 +164,7 @@
   &-searchableForm {
     background: var(--Table-searchableForm-backgroundColor);
     border-radius: var(--Table-searchableForm-borderRadius);
+    margin-bottom: 0;
 
     &-footer {
       padding: var(--Panel-footerPadding);
@@ -171,8 +172,9 @@
     }
 
     &-checkbox {
-      & > div > .#{$ns}CheckboxControl {
-        padding-top: 0;
+      &-inner {
+        /* 消除checkbox自身的padding top */
+        padding-top: 0 !important;
       }
     }
   }
@@ -190,7 +192,7 @@
   &-toolbar {
     @include clearfix();
     display: flex;
-    margin: 0 var(--Table-toolbar-marginX) var(--Table-toolbar-marginY);
+    padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
     flex-wrap: wrap;
 
     .#{$ns}DropDown {
@@ -418,7 +420,7 @@
         }
       }
 
-      @if var(--Table-strip-bg) !=transparent {
+      @if $Table-strip-bg != transparent {
         background: transparent;
 
         &.#{$ns}Table-tr--odd {
@@ -961,15 +963,48 @@
     }
 
     > .#{$ns}Table-fixedTop {
-      .#{$ns}Table-fixedTop-shadow {
-        display: none;
-      }
+      display: none;
     }
 
     > .#{$ns}Table-footToolbar {
       margin-bottom: 0;
     }
   }
+
+  &-SFToggler {
+    color: var(--text-color);
+    font-size: var(--Button--sm-fontSize);
+    margin-left: var(--gap-sm);
+    display: inline-flex;
+    cursor: pointer;
+
+    &-arrow {
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      transform: rotate(90deg);
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
+    &.is-expanded {
+      color: var(--Tabs-onActive-color);
+
+      .#{$ns}Table-SFToggler-arrow > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
 }
 
 .#{$ns}InputTable {

package/scss/components/{_table-v2.scss → _table2.scss}

@@ -1,4 +1,4 @@
-.#{$ns}Table-v2 {
+.#{$ns}Table2 {
   position: relative;
   border-radius: var(--Table-borderRadius);
 

package/scss/components/_tabs.scss

@@ -190,6 +190,10 @@
         }
       }
 
+      > a.#{$ns}Tabs-togglor {
+        display: flex;
+      }
+
       > .#{$ns}Combo-toolbarBtn {
         position: absolute;
         right: -10px;
@@ -230,6 +234,45 @@
     }
   }
 
+  .#{$ns}Tabs-togglor {
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    cursor: pointer;
+
+    &-arrow {
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      transform: rotate(90deg);
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
+    &.is-opened {
+      color: var(--Tabs-onActive-color);
+
+      .#{$ns}Tabs-togglor-arrow > svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-PopOver.#{$ns}PopOver {
+    border: 0;
+    border-radius: 0;
+  }
+
   &-content {
     background: var(--Tabs-content-bg);
     border-style: solid;
@@ -257,12 +300,13 @@
       position: relative;
 
       &::before {
-        content: "";
+        content: '';
         position: absolute;
         width: 100%;
         left: 0;
         bottom: 0;
-        border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
+        border-bottom: var(--Tabs-borderWidth) solid
+          var(--Tabs--simple-split-color);
       }
 
       &--toolbar {
@@ -320,8 +364,8 @@
           }
 
           > a:first-child:hover:active {
-            color: #144BCC;
-            border-color: #144BCC;
+            color: #144bcc;
+            border-color: #144bcc;
           }
         }
 
@@ -787,7 +831,7 @@
           }
         }
 
-        &:after {
+        &:not(:last-child):after {
           content: '';
           width: 1px;
           height: calc(100% - var(--Tabs--chrome-radius-size) * 2);
@@ -902,8 +946,8 @@
               }
 
               > a:first-child:hover:active {
-                color: #144BCC;
-                border-color: #144BCC;
+                color: #144bcc;
+                border-color: #144bcc;
               }
             }
 
@@ -1026,8 +1070,8 @@
             }
 
             > a:first-child:hover:active {
-              color: #144BCC;
-              border-color: #144BCC;
+              color: #144bcc;
+              border-color: #144bcc;
             }
           }
 

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

@@ -52,7 +52,8 @@
   }
 
   .#{$ns}DateRangePicker-input.isActive {
-    border-bottom: 2px solid var(--Form-input-onHover-borderColor);
+    border-bottom: var(--DateRangePicker-activeCursor-height) solid
+      var(--DateRangePicker-activeCursor-color);
   }
 
   .#{$ns}DateRangePicker-input-separator {
@@ -63,7 +64,7 @@
     &-line {
       width: var(--gap-sm);
       height: 1px;
-      background: #B8BABF;
+      background: #b8babf;
     }
   }
 
@@ -98,6 +99,19 @@
     @include input-clear();
     line-height: 1;
   }
+
+  &-activeCursor {
+    bottom: 0;
+    height: var(--DateRangePicker-activeCursor-height);
+    background: var(--DateRangePicker-activeCursor-color);
+    opacity: 0;
+    transition: all var(--animation-duration) ease-in-out;
+    pointer-events: none;
+
+    &.isFocused {
+      opacity: 1;
+    }
+  }
 }
 
 .#{$ns}DateRangePicker-wrap {