amis-ui 3.2.0 → 3.3.0

package/package.json

@@ -3,10 +3,11 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "",
   "scripts": {
     "build": "npm run clean-dist && NODE_ENV=production rollup -c ",
+    "build-esm": "npm run clean-dist && NODE_ENV=production rollup -c rollup.esm.config.js",
     "dev": "rollup -c -w",
     "test": "jest",
     "gen-doc": "ts-node ./scripts/genDoc.ts",
@@ -35,9 +36,9 @@
   },
   "dependencies": {
     "@rc-component/mini-decimal": "^1.0.1",
-    "amis-core": "^3.2.0",
-    "amis-formula": "^3.2.0",
-    "classnames": "2.3.1",
+    "amis-core": "^3.3.0",
+    "amis-formula": "^3.3.0",
+    "classnames": "2.3.2",
     "codemirror": "^5.63.0",
     "downshift": "6.1.12",
     "echarts": "5.4.0",
@@ -108,7 +109,6 @@
   },
   "jest": {
     "testEnvironment": "jsdom",
-    "collectCoverage": true,
     "coverageReporters": [
       "text",
       "cobertura"
@@ -146,5 +146,5 @@
       "/.rollup.cache/"
     ]
   },
-  "gitHead": "910dddafdbcaf3b11012ade7c593c24b285dfeb5"
+  "gitHead": "b2637905fa258d984cf27b538b25a8db1bf8b5fc"
 }

package/scss/_components.scss

@@ -1,4 +1,5 @@
-:root {
+:root,
+.AMISCSSWrapper {
   --button-default-default-top-border-color: var(--colors-neutral-line-8);
   --button-default-default-top-border-style: var(--borders-style-2);
   --button-default-default-top-border-width: var(--borders-width-2);
@@ -1592,7 +1593,7 @@
   --ListControl-item-onActive-color: var(
     --listSelect-base-active-top-border-color
   );
-  --ListControl-item-onActive-before-bg: var(--colors-brand-4);
+  --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-color: var(--listSelect-base-default-color);
   --ListControl-item-onDisabled-color: var(--listSelect-base-disabled-color);
   --ListControl-item-paddingX: var(--listSelect-base-default-paddingLeft);
@@ -3497,7 +3498,7 @@
   --Toast--danger-bottom-left-border-radius: var(--borders-radius-3);
   --Toast--danger-bgColor: var(--colors-neutral-fill-11);
   --Toast--info-color: var(--colors-neutral-text-2);
-  --Toast--info-fontSize: var(--fonts-size-6);
+  --Toast--info-fontSize: var(--fonts-size-7);
   --Toast--info-fontWeight: var(--fonts-weight-6);
   --Toast--info-top-border-color: var(--colors-neutral-line-11);
   --Toast--info-top-border-width: var(--borders-width-2);
@@ -3969,9 +3970,9 @@
   --Table-color: var(--table-body-color);
   --Table-expandBtn-color: var(--colors-neutral-text-5);
   --Table-fixed-zIndex: 5;
-  --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15);
-  --Table-fixedTop-boxShadow: var(--shadows-shadow-normal);
+  --Table-fixedLeft-boxShadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06);
+  --Table-fixedRight-boxShadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06);
+  --Table-fixedTop-boxShadow: inset 0 10px 8px -8px rgba(5, 5, 5, 0.06);
   --Table-fontSize: var(--table-body-fontSize);
   --Table-heading-bg: var(--table-title-bg-color);
   --Table-heading-height: #{px2rem(40px)};

package/scss/_mixins.scss

@@ -482,7 +482,6 @@
     border: none;
     color: var(--Form-input-color);
     width: 100%;
-    height: var(--Form-input-lineHeight);
 
     &::placeholder {
       color: var(--Form-input-placeholderColor);

package/scss/_properties.scss

@@ -5,13 +5,14 @@ $remFactor: 16px;
 /* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
 $Table-strip-bg: transparent;
 
-:root {
+:root,
+.AMISCSSWrapper {
   --white: var(--colors-neutral-text-11);
   --primary: var(--colors-brand-5);
   --primary-onHover: var(--colors-brand-6);
   --primary-onActive: var(--colors-brand-4);
 
-  --secondary: var(--colors-neutral-text-4); // secondary 颜色需进一步确认
+  --secondary: var(--colors-neutral-text-4); /*  secondary 颜色需进一步确认 */
   --secondary-onHover: var(--colors-neutral-text-6);
   --secondary-onActive: var(--colors-neutral-text-4);
 
@@ -481,7 +482,7 @@ $Table-strip-bg: transparent;
   --ListControl-item-borderRadius: var(--borders-radius-3);
   --ListControl-item-color: var(--colors-neutral-text-2);
   --ListControl-item-onActive-after-borderColor: var(--colors-neutral-line-11);
-  --ListControl-item-onActive-before-bg: var(--colors-brand-4);
+  --ListControl-item-onActive-before-bg: var(--colors-brand-5);
   --ListControl-item-onActive-bg: var(--colors-neutral-fill-11);
   --ListControl-item-onActive-borderColor: var(--colors-brand-4);
   --ListControl-item-onActive-color: var(--colors-brand-4);
@@ -763,9 +764,10 @@ $Table-strip-bg: transparent;
   --ColumnToggler-item-dragBar-color: #d8d8d8;
 
   --InputFormula-header-bgColor: #fafafa;
-  --InputFormula-icon-size: #{px2rem(24px)};
+  --InputFormula-icon-size: #{px2rem(18px)};
   --InputFormula-icon-color-onActive: var(--colors-brand-5);
   --InputFormula-code-bgColor: var(--colors-neutral-fill-10);
+  --InputFormula-input-schema-height: var(--sizes-base-12);
 
   --UserSelect--post-bg: var(--colors-brand-6);
   --UserSelect--department-bg: #ffab52;

package/scss/_variables.scss

@@ -279,6 +279,26 @@ $widths: map-merge(
   )
 ) !default;
 
+$minWidths: (
+  none: none,
+  0: 0rem,
+  xs: 20rem,
+  sm: 24rem,
+  md: 28rem,
+  lg: 32rem,
+  xl: 36rem,
+  2xl: 42rem,
+  3xl: 48rem,
+  4xl: 56rem,
+  5xl: 64rem,
+  6xl: 72rem,
+  7xl: 80rem,
+  full: 100%,
+  min: min-content,
+  max: max-content,
+  prose: 65ch
+) !default;
+
 $maxWidths: (
   none: none,
   0: 0rem,

package/scss/base/_common.scss

@@ -5,3 +5,7 @@
 .is-keyword {
   color: var(--primary-onActive);
 }
+
+.visibility-sensor {
+  min-height: 5px;
+}

package/scss/components/_cards.scss

@@ -31,18 +31,11 @@
   }
 
   &-fixedTop {
-    position: absolute;
+    position: sticky;
     background: var(--white);
-    z-index: -1;
-    opacity: 0;
-    box-shadow: var(--Cards-fixedTop-boxShadow);
+    // box-shadow: var(--Cards-fixedTop-boxShadow);
     padding: var(--gap-sm);
-
-    &.in {
-      position: fixed;
-      opacity: 1;
-      z-index: $zindex-affix;
-    }
+    z-index: $zindex-sticky;
 
     .#{$ns}Cards-toolbar {
       margin-bottom: 0;

package/scss/components/_column-toggler.scss

@@ -6,17 +6,17 @@
     margin-left: var(--DropDown-caret-marginLeft);
     display: inline-block;
     vertical-align: top;
-    transition: transform var(--animation-duration) ease;
 
     > svg {
       width: px2rem(10px);
       height: px2rem(10px);
-      top: 0.125em;
+      transition: transform var(--animation-duration) ease;
+      transform: rotate(90deg);
     }
   }
 
-  &.is-opened &-caret {
-    transform: rotate(180deg);
+  &.is-opened &-caret svg {
+    transform: rotate(270deg);
   }
 
   &.is-actived > .#{$ns}Button {

package/scss/components/_condition-builder.scss

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

package/scss/components/_debug.scss

@@ -40,6 +40,7 @@
 
   &-tab {
     overflow: hidden;
+    border-bottom: 1px solid #3d3d3d;
   }
 
   &-tab > button {
@@ -90,6 +91,7 @@
   &-content {
     pointer-events: all;
     display: none;
+    height: 100%;
   }
 
   &-resize {
@@ -122,7 +124,7 @@
 
   &.is-expanded {
     width: 420px;
-    overflow: auto;
+
     background: #272821;
     color: #cccccc;
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
@@ -168,6 +170,37 @@
     padding: var(--gap-sm);
   }
 
+  &-log,
+  &-inspect {
+    height: 100%;
+    overflow: auto;
+
+    // 火狐浏览器
+    scrollbar-width: thin;
+    scrollbar-color: #6b6b6b #2b2b2b;
+    &::-webkit-scrollbar {
+      position: relative;
+      z-index: 10;
+      background-color: #2c2c2c;
+      width: 16px;
+      height: 16px;
+      border-left: 1px solid #3d3d3d;
+      // border-top: 1px solid #3d3d3d;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #6b6b6b;
+      background-clip: content-box;
+      border: 4px solid transparent;
+      border-radius: 500px;
+
+      &:hover {
+        background: #939393;
+        background-clip: content-box;
+      }
+    }
+  }
+
   &-logLine {
     overflow-x: hidden;
   }

package/scss/components/_drawer.scss

@@ -89,11 +89,20 @@
   }
 
   &-body {
-    padding: var(--drawer-content-paddingTop) var(--drawer-content-paddingRight)
+    padding: 0 var(--drawer-content-paddingRight)
       var(--drawer-content-paddingBottom) var(--drawer-content-paddingLeft);
     flex-basis: 0;
     flex-grow: 1;
     overflow: auto;
+
+    // 因为如果成员里面有 position:sticky 的内容
+    // 用 padding 会导致位置不正确
+    // 所以改成这种写法
+    &:before {
+      content: '';
+      display: block;
+      height: var(--drawer-content-paddingTop);
+    }
   }
 
   &-footer {

package/scss/components/_dropdown.scss

@@ -6,17 +6,18 @@
     margin-left: var(--DropDown-caret-marginLeft);
     display: inline-block;
     vertical-align: top;
-    transition: transform var(--animation-duration) ease;
 
     > svg {
       width: px2rem(10px);
       height: px2rem(10px);
-      top: 0.125em;
+      top: 0;
+      transform: rotate(90deg);
+      transition: transform var(--animation-duration) ease;
     }
   }
 
-  &.is-opened &-caret {
-    transform: rotate(180deg);
+  &.is-opened &-caret svg {
+    transform: rotate(270deg);
   }
 
   &.is-actived {

package/scss/components/_formula.scss

@@ -51,7 +51,8 @@
 
   &-editor {
     @include scrollbar();
-    height: px2rem(200px);
+    min-height: px2rem(200px);
+    height: calc(100% - 35px);
     padding: #{px2rem(5px)};
     padding-right: 0;
 
@@ -510,10 +511,15 @@
 
 .#{$ns}FormulaPicker.is-input-group {
   border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
-  padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+  padding: 0 var(--Form-input-paddingX) 0 0;
   border-radius: var(--borderRadius);
   background-color: #fff;
   height: var(--Form-input-height);
+
+  &.#{$ns}FormulaPicker--text {
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+  }
+
   .#{$ns}FormulaPicker-input {
     display: flex;
     align-items: center;
@@ -521,19 +527,49 @@
     padding: 0;
     border: 0;
     margin: 0;
+    margin-right: #{px2rem(10px)};
+    max-width: unset;
+
     &:focus {
       border: none;
       outline: none;
       box-sizing: none;
     }
+
+    &-number,
+    &-select,
+    &-boolean,
+    &-date,
+    &-time,
+    &-datetime {
+      height: var(--InputFormula-input-schema-height);
+      padding-left: var(--Form-input-paddingX);
+    }
+
+    &-number {
+      .#{$ns}Number-handler-wrap {
+        height: unset; /* 避免调节器超出Input框 */
+      }
+    }
+
+    &-variable {
+      border: none;
+      min-height: unset;
+      line-height: #{px2rem(18px)};
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
+
   .#{$ns}FormulaPicker-toggler {
     .icon-function {
-      transform: scale(1.8);
+      transform: scale(1.3);
     }
+
     .icon-ellipsis-v {
       transform: rotate(90deg);
     }
+
     &:hover {
       cursor: pointer;
     }

package/scss/components/_input-box.scss

@@ -58,6 +58,7 @@
     margin: 5px;
     display: flex;
     color: var(--Form-select-caret-iconColor);
+    transform: rotate(90deg);
     &:hover {
       color: var(--Form-select-caret-onHover-iconColor);
     }
@@ -70,7 +71,7 @@
   }
 
   &.is-active &-caret {
-    transform: rotate(180deg);
+    transform: rotate(270deg);
   }
 
   &.is-mobile {

package/scss/components/_json-schema-editor.scss

@@ -96,7 +96,7 @@
     transition: transform var(--animation-duration);
     color: var(--icon-color);
     margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
-
+    transform: rotate(90deg);
     > svg {
       width: 10px;
       height: 10px;
@@ -105,7 +105,7 @@
   }
 
   &-caret.is-collapsed {
-    transform: rotate(-90deg);
+    transform: rotate(0deg);
   }
 
   &-required {

package/scss/components/_json-schema.scss

@@ -79,7 +79,7 @@
     transition: transform var(--animation-duration);
     color: var(--icon-color);
     margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
-
+    transform: rotate(90deg);
     > svg {
       width: 10px;
       height: 10px;
@@ -88,7 +88,7 @@
   }
 
   &-caret.is-collapsed {
-    transform: rotate(-90deg);
+    transform: rotate(0deg);
   }
 
   &.is-expanded {

package/scss/components/_list.scss

@@ -42,19 +42,12 @@
   }
 
   &-fixedTop {
-    position: absolute;
+    position: sticky;
     background: var(--white);
-    z-index: -1;
-    opacity: 0;
-    box-shadow: var(--List-fixedTop-boxShadow);
+    z-index: $zindex-sticky;
+    // box-shadow: var(--List-fixedTop-boxShadow);
     // padding: var(--gap-sm);
 
-    &.in {
-      position: fixed;
-      opacity: 1;
-      z-index: $zindex-affix;
-    }
-
     .#{$ns}Cards-toolbar {
       margin-bottom: 0;
     }

package/scss/components/_menu.scss

@@ -350,6 +350,7 @@
 
   &-submenu-title {
     display: flex;
+    align-items: center;
     justify-content: space-between;
 
     .#{$ns}Nav-Menu-item-wrap {

package/scss/components/_progress.scss

@@ -3,6 +3,7 @@
   align-items: center;
   color: var(--text-color);
   font-size: var(--fontSizeXs);
+  min-width: 50px;
   &-line {
     display: inline-block;
     width: 100%;
@@ -49,7 +50,6 @@
       transition: width var(--animation-duration) ease;
       border-radius: var(--Progress-borderRadius);
 
-      
       &.bg-info {
         background: var(--Progress-line-theme-color);
       }

package/scss/components/_search-box.scss

@@ -53,6 +53,9 @@
   &-cancelBtn {
     cursor: pointer;
     color: var(--SearchBox-search-icon-color);
+    svg {
+      top: 1px;
+    }
 
     &:hover {
       color: var(--icon-onHover-color);
@@ -118,6 +121,9 @@
     height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+    svg {
+      top: 0;
+    }
 
     &:hover {
       background: var(--button-primary-hover-bg-color);

package/scss/components/_steps.scss

@@ -24,8 +24,8 @@
           font-size: var(--Steps-icon-fontsize);
           text-align: center;
           .icon {
-            width: px2rem(9px);
-            height: px2rem(9px);
+            width: px2rem(12px);
+            height: px2rem(12px);
             position: relative;
             top: 0;
           }
@@ -388,7 +388,9 @@
 
   .#{$ns}StepsItem.is-clickable {
     .#{$ns}StepsItem-container {
-      &ProgressDot, &Icon, &Wrapper {
+      &ProgressDot,
+      &Icon,
+      &Wrapper {
         cursor: pointer;
       }
     }