amis-ui 3.1.0 → 3.2.0

package/package.json

@@ -3,7 +3,7 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.1.0",
+  "version": "3.2.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.1.0",
-    "amis-formula": "^3.1.0",
+    "amis-core": "^3.2.0",
+    "amis-formula": "^3.2.0",
     "classnames": "2.3.1",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
@@ -108,6 +108,11 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
+    "collectCoverage": true,
+    "coverageReporters": [
+      "text",
+      "cobertura"
+    ],
     "collectCoverageFrom": [
       "src/**/*"
     ],
@@ -141,5 +146,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "020b12d0be43215664e0c0e53cd33486c43fde86"
+  "gitHead": "910dddafdbcaf3b11012ade7c593c24b285dfeb5"
 }

package/scss/_components.scss

@@ -1159,8 +1159,8 @@
   );
   --inputNumber-enhance-default-paddingTop: var(--sizes-size-3);
   --inputNumber-enhance-default-paddingBottom: var(--sizes-size-3);
-  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-7);
-  --inputNumber-enhance-default-paddingRight: var(--sizes-size-7);
+  --inputNumber-enhance-default-paddingLeft: var(--sizes-size-5);
+  --inputNumber-enhance-default-paddingRight: var(--sizes-size-5);
   --inputNumber-enhance-default-bg-color: var(--colors-neutral-fill-11);
   --inputNumber-enhance-hover-top-border-color: var(--colors-brand-5);
   --inputNumber-enhance-hover-top-border-width: var(--borders-width-2);
@@ -1273,6 +1273,11 @@
   );
   --inputNumber-enhance-leftIcon-default-icon: '<svg viewBox="0 0 12 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-minus"><g id="minus" fill="currentColor" fill-rule="nonzero"><polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6"></polygon></g></svg>';
   --inputNumber-enhance-rightIcon-default-icon: '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="icon  icon-plus"><path d="M6.6 6.6V12H5.4V6.6H0V5.4h5.4V0h1.2v5.4H12v1.2z" fill="currentColor" fill-rule="nonzero"></path></svg>';
+  --inputNumber-enhance-mobile-input-width: #{px2rem(56px)};
+  --inputNumber-enhance-mobile-icon-width: #{px2rem(28px)};
+  --inputNumber-enhance-mobile-icon-height: #{px2rem(28px)};
+  --inputNumber-enhance-mobile-icon-inner-width: #{px2rem(27px)};
+  --inputNumber-enhance-mobile-icon-inner-height: #{px2rem(27px)};
   --Form-input-onHover-borderColor: var(--colors-brand-5);
   --Form-input-onFocused-borderColor: var(--colors-brand-5);
 
@@ -1626,6 +1631,7 @@
 
   // 表单
   --Form-item-gap: var(--sizes-base-12);
+  --Form-item-mobile-gap: var(--sizes-base-4);
   --Form-item-color: var(--colors-neutral-text-4);
   --Form-item-fontColor: var(--Form-item-color);
   --Form-item-fontSize: var(--fonts-size-7);
@@ -1671,6 +1677,8 @@
   --InputRange-track-onActive-bg: var(--colors-brand-5);
   --InputRange-handle-height: var(--sizes-size-9);
   --InputRange-handle-width: var(--sizes-size-9);
+  --InputRange-handle-mobile-height: var(--sizes-base-10);
+  --InputRange-handle-mobile-width: var(--sizes-base-10);
   --InputRange-handle-bg: var(--colors-neutral-fill-11);
   --InputRange-handle-top-border-color: var(--colors-brand-5);
   --InputRange-handle-top-border-width: 0.0625rem;
@@ -1687,7 +1695,7 @@
   --InputRange-handle-onFocus-borderRadius: var(
     --InputRange-handle-border-radius
   );
-  --InputRange-padding: #{px2rem(20px)};
+  --InputRange-padding: #{px2rem(16px)};
   --InputRange-handle-icon-width: var(--sizes-size-5);
   --InputRange-handle-icon-height: var(--sizes-size-5);
   --InputRange-handle-icon-color: var(--colors-brand-9);
@@ -1725,6 +1733,7 @@
   );
   --InputRange-label-position-bottom: calc(100% + 8px);
   --InputRange-input-width: var(--sizes-base-40);
+  --InputRange-input-mobile-width: var(--sizes-base-20);
   --InputRange-input-marginTop: var(--sizes-size-0);
   --InputRange-input-marginBottom: var(--sizes-size-0);
   --InputRange-input-marginLeft: var(--sizes-size-5);
@@ -2816,6 +2825,7 @@
   --select-tree-active-bg-color: var(--colors-brand-10);
 
   --Form-select-bg: var(--select-base-default-bg-color);
+  --Form-select-mobile-icon-check-color: var(--colors-brand-5);
   --Form-select-height: var(--Form-select-outer-top);
   --Form-select-borderColor: var(--select-base-default-top-border-color)
     var(--select-base-default-right-border-color)

package/scss/_properties.scss

@@ -243,6 +243,7 @@ $Table-strip-bg: transparent;
   --ColorPicker-fontSize: var(--Form-input-fontSize);
   --ColorPicker-height: var(--Form-input-height);
   --ColorPicker-lineHeight: var(--Form-input-lineHeight);
+  --ColorPicker-height: var(--sizes-base-16);
   --ColorPicker-onDisabled-bg: var(--colors-neutral-fill-8);
   --ColorPicker-onDisabled-color: var(--text--muted-color);
   --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
@@ -527,6 +528,10 @@ $Table-strip-bg: transparent;
   --ListMenu-item-bg: var(--colors-neutral-fill-11);
   --ListMenu-item-color: var(--colors-neutral-text-2);
   --ListMenu-item-height: var(--sizes-base-15);
+  --ListMenu-item-mobile-margin: #{px2rem(5px)};
+  --ListMenu-item-mobile-width: #{px2rem(90px)};
+  --ListMenu-item-mobile-bg: #f5f5f5;
+  --ListMenu-item-mobile-active-bg: #e7f1ff;
 
   --Log-bg: #222;
   --Log-padding: var(--gap-sm) 0;
@@ -634,6 +639,7 @@ $Table-strip-bg: transparent;
   --PopOverAble-onHover-iconColor: inherit;
 
   --PopUp-cancelAction-color: #666;
+  --PopUp-confirmAction-color: var(--primary);
 
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
@@ -768,6 +774,24 @@ $Table-strip-bg: transparent;
   --UserSelect--content-bg: #f5f7f8;
   --UserSelect--bread-color: #5e626a;
 
+  --Cascader-border-color: #f7f7f9;
+  --Cascader-border-active-bg-color: #f7f7f9;
+  --Cascader-option-disable-color: #b8babf;
+
+  // tag
+  --Tag-content-fontSize: var(--fontSizeSm);
+  --Tag-height: #{px2rem(24px)};
+  --Tag-borderRadius: #{px2rem(2px)};
+  --Tag-fontColor: #151a26;
+
+  --Tag-default-color: #f2f2f4;
+  --Tag-inactive-color: #b8babf;
+  --Tag-active-color: var(--colors-brand-5);
+  --Tag-processing-color: var(--colors-brand-6);
+  --Tag-success-color: var(--colors-success-5);
+  --Tag-error-color: var(--colors-error-5);
+  --Tag-warning-color: var(--colors-warning-5);
+
   --Tag-checkable-bgColor: #f2f2f4;
   --Tag-checkable-bgColor-onDisable: #e6e6e8;
   --Tag-checkable-bgColor-onHover: #e6e6e8;

package/scss/components/_button-group.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: inline-flex;
   vertical-align: middle;
+  flex-wrap: wrap;
 
   > .#{$ns}Button {
     position: relative;

package/scss/components/_calendar.scss

@@ -109,7 +109,8 @@
 .#{$ns}CalendarMobile {
   height: 100%;
   width: 100%;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
 
   &-pop {
     position: fixed;
@@ -122,9 +123,21 @@
     overflow: hidden;
     border-width: 0;
 
+    &--quarters,
+    &--months {
+      height: px2rem(400px);
+    }
+
     &--time {
-      height: fit-content;
+      height: px2rem(360px);
       max-height: 90vh;
+      .#{$ns}PopUp-content {
+        overflow: hidden;
+      }
+    }
+
+    &--years {
+      height: px2rem(360px);
     }
   }
 
@@ -204,6 +217,7 @@
     overflow-y: scroll;
 
     table {
+      padding: 0;
       border-spacing: 0 px2rem(4px);
     }
 
@@ -238,14 +252,15 @@
     }
 
     .calendar-wrap {
-      position: relative;
       width: px2rem(50px);
+      position: relative;
       height: 100%;
       text-align: center;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: px2rem(4px);
+      padding: 0 px2rem(10px);
     }
   }
 
@@ -260,6 +275,7 @@
     flex-shrink: 0;
 
     .date-range-confirm {
+      width: 100%;
       height: px2rem(36px);
       margin: px2rem(7px) 0;
       border-radius: var(--borderRadiusMd);
@@ -267,13 +283,7 @@
       justify-content: center;
       align-items: center;
     }
-    .is-disabled {
-      opacity: 0.5;
-      color: var(--Button--primary-color);
-      background: var(--Button--primary-bg);
-      border-color: var(--Button--primary-bg);
-      filter: none;
-    }
+
     &-toolbar {
       padding: 0 px2rem(16px);
     }
@@ -287,11 +297,11 @@
       line-height: px2rem(48px);
     }
     .#{$ns}DateRangePicker-rangers {
-      position: absolute;
+      padding-left: revert;
       white-space: nowrap;
-      .#{$ns}DateRangePicker-ranger {
-        margin: 0 px2rem(25px);
-      }
+      line-height: inherit;
+      display: flex;
+      justify-content: space-between;
     }
     .#{$ns}DatePicker-shortcuts {
       width: auto;

package/scss/components/_cascader.scss

@@ -12,9 +12,12 @@
 .#{$ns}Cascader-tab {
   flex: 1;
   width: calc((100vw - 20px) / 3);
-  height: px2rem(370px);
+  height: px2rem(260px);
   overflow-y: auto;
   display: inline-block;
+  padding-left: px2rem(10px);
+  border: 1px solid var(--Cascader-border-color);
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -52,13 +55,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: px2rem(6px) 0;
+    padding: px2rem(6px) 0 px2rem(6px) px2rem(10px);
     font-size: var(--fontSizeMd);
     line-height: var(--Cascader-option-lineHeight);
     cursor: pointer;
     position: relative;
+
+    &.is-active {
+      background-color: var(--Cascader-border-active-bg-color);
+    }
+
     &.selected {
-      span {
+      .#{$ns}Cascader-option--text {
         color: var(--primary);
       }
     }
@@ -68,11 +76,26 @@
       }
     }
     &--text {
+      flex: 1;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       user-select: none;
+
+      &.disabled {
+        color: var(--Cascader-option-disable-color);
+      }
     }
+
+    &-arrow {
+      flex: 1;
+      text-align: right;
+      padding-right: px2rem(6px);
+      > svg {
+        transform: scale(0.8);
+      }
+    }
+
     &-selectedNum {
       min-width: px2rem(16px);
       height: px2rem(16px);

package/scss/components/_city-area.scss

@@ -1,4 +1,5 @@
 .#{$ns}CityArea {
+  flex: 1;
   text-align: right;
 
   &-popup {
@@ -15,6 +16,11 @@
     font-size: var(--Form-input-fontSize);
     display: inline-flex !important;
 
+    &.is-focused,
+    &:hover {
+      border: none !important;
+    }
+
     &::placeholder {
       color: var(--Form-input-placeholderColor);
       user-select: none;

package/scss/components/_collapse-group.scss

@@ -24,7 +24,7 @@
     }
   }
 
-  .#{$ns}Collapse:not(:last-child) {
+  .#{$ns}Collapse:not(:last-child):not(.is-mobile) {
     border-bottom: none;
   }
 
@@ -40,4 +40,14 @@
       }
     }
   }
+
+  &.is-mobile {
+    &.icon-position-right {
+      .#{$ns}Collapse-header {
+        .#{$ns}Collapse-arrow-wrap {
+          margin-right: px2rem(-18px);
+        }
+      }
+    }
+  }
 }

package/scss/components/_collapse.scss

@@ -42,6 +42,17 @@
       background: var(--Collapse-header-onHover-bg);
       color: var(--collapse-default-header-hover-color);
     }
+
+    &.is-mobile {
+      background: none;
+      border-radius: 0 !important;
+      position: relative;
+      padding-left: 0;
+
+      &:hover {
+        background: none;
+      }
+    }
   }
 
   .Collapse-arrow {
@@ -76,7 +87,7 @@
   //   display: inline-block;
   // }
 
-  &.is-active > &-header > &-arrow-wrap > &-arrow {
+  &.is-active > .#{$ns}Collapse-header > .#{$ns}Collapse-arrow-wrap > &-arrow {
     transform: rotate(var(--collapse-icon-rotate));
     transform-origin: 50% 50%;
   }
@@ -133,6 +144,28 @@
     line-height: var(--collapse-default-content-lineHeight);
     background: var(--collapse-default-bg-color);
   }
+
+  &.is-mobile {
+    border-top: none;
+    border-left: none;
+    border-right: none;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .#{$ns}Collapse-icon-tranform,
+    .#{$ns}Collapse-arrow-wrap {
+      margin-right: px2rem(-18px);
+      float: right;
+      margin-top: px2rem(2px);
+    }
+
+    .#{$ns}Collapse-content {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
 
 //FieldSet Form + Collapse

package/scss/components/_column-toggler.scss

@@ -67,11 +67,6 @@
     text-decoration: var(--link-decoration);
     background: var(--table-togglable-bg-color);
 
-    &:hover {
-      background: var(--table-togglable-hover-bg-color);
-      color: var(--DropDown-menuItem-onHover-color);
-    }
-
     &.is-active {
       color: var(--DropDown-menuItem-onActive-color);
     }
@@ -97,6 +92,13 @@
     }
   }
 
+  &-menu:not(.is-mobile) > li {
+    &:hover {
+      background: var(--table-togglable-hover-bg-color);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+  }
+
   &-menu > li a {
     color: inherit;
     display: block;

package/scss/components/_condition-builder.scss

@@ -1,3 +1,6 @@
+.#{$ns}ConditionBuilderControl.is-mobile {
+  overflow-x: auto;
+}
 .#{$ns}CBGroup {
   font-size: var(--fontSizeSm);
   position: relative;
@@ -195,6 +198,7 @@
       width: px2rem(10px);
       height: px2rem(10px);
       top: 0;
+      transform: rotate(90deg);
     }
   }
 
@@ -331,9 +335,31 @@
     opacity: 0;
   }
 
-  &:hover > &-body > &-body-item > &-dragbar,
-  &:hover > &-body > &-body-item > .#{$ns}CBDelete {
-    opacity: 1;
+  &:is(.is-mobile) {
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-group
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
+  }
+
+  &:not(.is-mobile) {
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBGroupOrItem-dragbar,
+    &:hover
+      > .#{$ns}CBGroupOrItem-body
+      > .#{$ns}CBGroupOrItem-body-item
+      > .#{$ns}CBDelete {
+      opacity: 1;
+    }
   }
 
   &-simple {

package/scss/components/_crud.scss

@@ -30,21 +30,21 @@
     font-weight: var(--Pick-base-value-fontWeight);
     background: var(--Pick-base-value-bgColor);
     border-width: var(--Pick-base-value-top-border-width)
-        var(--Pick-base-value-right-border-width)
-        var(--Pick-base-value-bottom-border-width)
-        var(--Pick-base-value-left-border-width);
+      var(--Pick-base-value-right-border-width)
+      var(--Pick-base-value-bottom-border-width)
+      var(--Pick-base-value-left-border-width);
     border-style: var(--Pick-base-value-top-border-style)
-        var(--Pick-base-value-right-border-style)
-        var(--Pick-base-value-bottom-border-style)
-        var(--Pick-base-value-left-border-style);
+      var(--Pick-base-value-right-border-style)
+      var(--Pick-base-value-bottom-border-style)
+      var(--Pick-base-value-left-border-style);
     border-color: var(--Pick-base-value-top-border-color)
-        var(--Pick-base-value-right-border-color)
-        var(--Pick-base-value-bottom-border-color)
-        var(--Pick-base-value-left-border-color);
+      var(--Pick-base-value-right-border-color)
+      var(--Pick-base-value-bottom-border-color)
+      var(--Pick-base-value-left-border-color);
     border-radius: var(--Pick-base-top-left-border-radius)
-        var(--Pick-base-top-right-border-radius)
-        var(--Pick-base-bottom-right-border-radius)
-        var(--Pick-base-bottom-left-border-radius);
+      var(--Pick-base-top-right-border-radius)
+      var(--Pick-base-bottom-right-border-radius)
+      var(--Pick-base-bottom-left-border-radius);
     margin-right: var(--gap-xs);
     margin-top: var(--gap-xs);
 
@@ -90,6 +90,10 @@
     display: inline-flex;
     align-items: center;
 
+    &.is-mobile {
+      margin-top: 0;
+    }
+
     &--left:not(:first-child) {
       margin-left: var(--Crud-toolbar-gap);
     }
@@ -137,6 +141,12 @@
   &-filter {
     margin-bottom: var(--gap-base);
   }
+
+  &.is-mobile {
+    .#{$ns}Crud-toolbar {
+      flex: 1;
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {

package/scss/components/_dropdown.scss

@@ -75,11 +75,6 @@
     color: var(--DropDown-menuItem-color);
     text-decoration: var(--link-decoration);
 
-    &:hover {
-      background: var(--DropDown-menuItem-onHover-bg);
-      color: var(--DropDown-menuItem-onHover-color);
-    }
-
     &.is-active {
       background: var(--DropDown-menuItem-onHover-bg);
       color: var(--DropDown-menuItem-onActive-color);
@@ -128,6 +123,14 @@
     }
   }
 
+  &-menuItem,
+  &-menu:not(.is-mobile) > li {
+    &:hover {
+      background: var(--DropDown-menuItem-onHover-bg);
+      color: var(--DropDown-menuItem-onHover-color);
+    }
+  }
+
   &-menu > li a {
     color: inherit;
     display: block;