amis-ui 2.1.1-beta.2 → 2.2.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.2.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
@@ -33,7 +33,7 @@
     }
   },
   "dependencies": {
-    "amis-core": "^2.1.1-beta.2",
+    "amis-core": "^2.2.0",
     "amis-formula": "^2.1.0",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
@@ -68,10 +68,10 @@
     "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-typescript": "^8.3.4",
     "@svgr/rollup": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@types/babel__core": "^7.1.19",
@@ -96,6 +96,8 @@
     "typescript": "^4.6.4"
   },
   "peerDependencies": {
+    "amis-core": "*",
+    "amis-formula": "*",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
@@ -134,5 +136,5 @@
       }
     }
   },
-  "gitHead": "933b5e75fe06f4cfde4a79e8442be0d6c170d29d"
+  "gitHead": "8e92bd5c8ec412e9730ac424ab38d248aa122c8b"
 }

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/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/_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 {
@@ -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 {

package/scss/components/form/_date.scss

@@ -376,13 +376,15 @@
       text-align: center;
       height: 28px;
       line-height: 28px;
+      cursor: pointer;
+
       &.is-highlight {
         color: var(--Form-select-menu-onHover-color);
         background: var(--Form-select-menu-onHover-bg);
       }
       &:hover {
         color: var(--Form-select-menu-onHover-color);
-        background: #F7F7F9;
+        background: #f7f7f9;
       }
     }
   }
@@ -642,7 +644,7 @@ td.rdtQuarter {
 
     > span {
       color: var(--Form-select-menu-onHover-color);
-      background: #F7F7F9;
+      background: #f7f7f9;
     }
   }
 

package/scss/components/form/_editor.scss

@@ -57,6 +57,17 @@
         }
       }
     }
+
+    &-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 {

package/scss/components/form/_form.scss

@@ -28,6 +28,7 @@
   padding-top: var(--Form-label-paddingTop);
   padding-bottom: var(--Form-label-paddingTop);
   margin-bottom: 0;
+  word-break: break-word;
 
   .#{$ns}Form-item--inline > .#{$ns}Form-value > & {
     display: inline-block;
@@ -395,8 +396,11 @@
 }
 
 .#{$ns}Form--debug {
-  word-break: break-all;
-  white-space: pre-wrap;
+  padding: var(--gap-sm);
+  margin-bottom: var(--gap-sm);
+  background-color: rgb(250, 250, 250);
+  border-radius: var(--borderRadius);
+  position: relative;
 }
 
 .#{$ns}Form--quickEdit {

package/scss/components/form/_select.scss

@@ -86,8 +86,6 @@
   .#{$ns}PopOver.#{$ns}Select-popover {
     margin-top: px2rem(4px);
     .#{$ns}Select-menu {
-      overflow-x: hidden;
-
       .#{$ns}Select-option {
         height: px2rem(32px);
         line-height: px2rem(22px);

package/scss/components/form/_transfer.scss

@@ -93,12 +93,38 @@
     overflow: hidden;
   }
 
-  &-selection .#{$ns}ListSelection-placeholder {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
+  &-selection {
+    .#{$ns}ListSelection-placeholder {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+    }
+
+    &.#{$ns}Tree,
+    &.#{$ns}AssociatedSelection {
+      .#{$ns}Tree-itemLabel.is-checked:hover,
+      .#{$ns}Tree-itemLabel:hover {
+        .#{$ns}Tree-itemLabel-item > .#{$ns}Tree-itemText {
+          background-color: unset;
+          &:active {
+            background-color: unset;
+          }
+        }
+      }
+
+      .#{$ns}Tree-itemLabel-item {
+        display: flex;
+        align-items: center;
+
+        > .#{$ns}Tree-itemText {
+          max-width: unset;
+          line-height: unset;
+          top: unset;
+        }
+      }
+    }
   }
 
   &-search {
@@ -299,7 +325,6 @@
   }
 }
 .#{$ns}TransferDropDown-content {
-  min-height: px2rem(200px);
   min-width: px2rem(400px);
   display: flex;
   flex-direction: column;

package/scss/components/form/_tree.scss

@@ -101,12 +101,15 @@
     }
     &-item {
       padding-left: var(--Tree-item-arrow-padding-left);
-      display: inline-block;
+      display: inline-flex;
       width: 100%;
+      align-items: center;
+      overflow: hidden;
+      height: px2rem(32px);
     }
-  
+
     &:hover {
-      .#{$ns}Tree{
+      .#{$ns}Tree {
         &-itemLabel-item {
           background-color: var(--Tree-item-onHover-bg-pure);
         }
@@ -120,7 +123,7 @@
   &-item {
     .is-checked {
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
-      .#{$ns}Tree{
+      .#{$ns}Tree {
         &-itemLabel-item {
           background-color: var(--Tree-item-onChekced-bg);
         }
@@ -290,20 +293,16 @@
       height: px2rem(14px);
     }
   }
-    
 
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
     color: var(--Form-input-color);
-    line-height: var(--lineHeightBase);
-    max-width: var(--Tree-item-text-max-height);
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    position: relative;
-    top: var(--Tree-item-text-top);
   }
   .is-disabled &-itemText {
     color: var(--text--muted-color);

package/scss/themes/_common.scss

@@ -50,7 +50,7 @@
 @import '../components/crud';
 @import '../components/crud2';
 @import '../components/table';
-@import '../components/table-v2';
+@import '../components/table2';
 @import '../components/column-toggler';
 @import '../components/list';
 @import '../components/cards';