amis-ui 3.1.1 → 3.3.0

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/_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 {
@@ -75,11 +76,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 +124,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;

package/scss/components/_formula.scss

@@ -28,17 +28,31 @@
   }
 
   &-content {
-    border-radius: var(--borderRadius);
-    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+    flex: 1;
+    height: 100%;
+    max-width: #{px2rem(530px)};
+    border-top: var(--Form-input-borderWidth) solid
+      var(--Form-input-borderColor);
+    border-bottom: var(--Form-input-borderWidth) solid
+      var(--Form-input-borderColor);
   }
 
   &-header {
     @include panel-header();
+
+    &-toolbar {
+      font-size: 12px;
+      float: right;
+      > span {
+        margin-right: 5px;
+      }
+    }
   }
 
   &-editor {
     @include scrollbar();
-    height: px2rem(200px);
+    min-height: px2rem(200px);
+    height: calc(100% - 35px);
     padding: #{px2rem(5px)};
     padding-right: 0;
 
@@ -61,11 +75,13 @@
     flex-flow: row nowrap;
     align-items: stretch;
     justify-content: space-between;
-    height: #{px2rem(250px)};
+    height: #{px2rem(450px)};
     margin-top: #{px2rem(10px)};
 
-    & > div {
-      width: 0;
+    &.is-mobile {
+      width: 100%;
+      overflow-x: scroll;
+      overflow-y: hidden;
     }
   }
 
@@ -75,22 +91,13 @@
 
   &-panel {
     display: flex;
-    flex: 1;
     flex-flow: column nowrap;
     justify-content: space-between;
     align-items: stretch;
     height: 100%;
-    border-radius: var(--borderRadius);
+    width: #{px2rem(188px)};
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
 
-    &:not(:last-child) {
-      margin-right: #{px2rem(10px)};
-    }
-
-    &:last-child {
-      flex: 1;
-    }
-
     &-header {
       @include panel-header();
     }
@@ -108,8 +115,19 @@
     }
   }
 
+  &-panel.left {
+    justify-content: normal !important;
+    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+  }
+
+  &-panel.right {
+    width: #{px2rem(330px)};
+    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+  }
+
   /* 变量列表 */
   &-VariableList {
+    height: 100%;
     &-root {
       max-height: 100%;
     }
@@ -129,7 +147,7 @@
 
     &-base.is-scrollable {
       @include scrollbar();
-      overflow-x: hidden;
+      overflow-x: auto;
       overflow-y: auto;
     }
 
@@ -169,7 +187,6 @@
           .#{$ns}FormulaEditor-VariableList {
             &-sub {
               .#{$ns}FormulaEditor-VariableList-body {
-                max-height: #{px2rem(220px)};
                 overflow-y: hidden;
               }
               &-FormulaEditor-VariableList-base {
@@ -232,6 +249,14 @@
         flex: 1;
         width: 0;
         display: inline-block;
+        min-width: #{px2rem(50px)};
+      }
+
+      .fa-ellipsis-h {
+        margin-right: #{px2rem(5px)};
+        &:hover {
+          color: var(--primary);
+        }
       }
 
       &-tag {
@@ -245,31 +270,42 @@
         line-height: #{px2rem(24px)};
         height: #{px2rem(24px)};
       }
+
+      &-oper {
+        list-style: none;
+        max-width: #{px2rem(235px)};
+        font-size: var(--fontSizeSm);
+        min-width: 100px;
+        padding: 0 5px;
+        margin: 5px;
+        text-align: center;
+        li {
+          line-height: 24px;
+          &:hover {
+            cursor: pointer;
+            background: var(--Form-select-menu-onHover-bg);
+          }
+        }
+      }
     }
     .#{$ns}GroupedSelection {
+      max-height: 100%;
       &-item {
         &-tag {
           line-height: 17px;
         }
       }
+      &-itemLabel {
+        font-size: var(--fontSizeSm);
+      }
     }
   }
 
   /* 函数列表 */
   &-FuncList {
     display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    align-items: stretch;
-    flex: 1;
-
-    .#{$ns}FormulaEditor-panel {
-      width: #{px2rem(188px)};
-    }
-
-    &:not(:last-child) {
-      margin-right: #{px2rem(10px)};
-    }
+    flex-flow: column nowrap;
+    height: 100%;
 
     &-searchBox {
       display: flex;
@@ -335,14 +371,14 @@
     &-doc {
       display: flex;
       flex-flow: column nowrap;
-      padding: #{px2rem(10px)};
-      max-height: #{px2rem(200px)};
+      padding: 0 #{px2rem(10px)};
+      font-size: 12px;
+      height: 100%;
+      overflow: hidden;
 
       pre {
         white-space: pre-wrap;
         word-wrap: break-word;
-        background: var(--InputFormula-code-bgColor);
-        padding: #{px2rem(5px)} #{px2rem(10px)};
         border-radius: var(--borderRadius);
         margin-top: 0;
 
@@ -351,6 +387,17 @@
         }
       }
 
+      &-example {
+        font-size: var(--fontSizeSm) !important;
+        th {
+          padding: #{px2rem(5px)} !important;
+          font-size: var(--fontSizeSm) !important;
+        }
+        td {
+          padding: #{px2rem(5px)} !important;
+        }
+      }
+
       &-desc {
         @include scrollbar();
         color: var(--text--loud-color);
@@ -361,6 +408,16 @@
     }
   }
 
+  &-FuncList.withDoc {
+    max-height: 50% !important;
+  }
+
+  &-FuncDoc {
+    height: 300px;
+    overflow: hidden;
+    background: var(--InputFormula-code-bgColor);
+  }
+
   .cm-field,
   .cm-func {
     border-radius: 3px;
@@ -370,7 +427,7 @@
   }
 
   .cm-field {
-    padding: 3px 5px;
+    padding: 2px 5px;
   }
 
   .cm-field {
@@ -389,6 +446,16 @@
   justify-content: space-between;
   align-items: center;
 
+  &-popup {
+    height: px2rem(580px);
+
+    &-inner {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0 px2rem(16px);
+    }
+  }
+
   &-input {
     flex: 1;
     margin-right: #{px2rem(10px)};
@@ -444,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;
@@ -455,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,6 +71,30 @@
   }
 
   &.is-active &-caret {
-    transform: rotate(180deg);
+    transform: rotate(270deg);
+  }
+
+  &.is-mobile {
+    border: none;
+    border-radius: 0;
+    border-bottom: var(--Form-input-borderWidth) solid
+      var(--Form-input-borderColor);
+
+    &.is-error,
+    .is-error > & {
+      border-bottom-color: var(--Form-input-onError-borderColor);
+    }
+
+    &.is-focused {
+      border-bottom-color: var(--Form-input-onFocused-borderColor);
+    }
+
+    &.is-error.is-focused {
+      border-bottom-color: var(--Form-input-onError-borderColor);
+    }
+
+    &.is-disabled {
+      border-bottom-color: var(--Form-input-onDisabled-borderColor);
+    }
   }
 }

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

@@ -24,6 +24,26 @@
 
       color: var(--Form-input-color);
     }
+
+    &.is-mobile {
+      & > span {
+        border-radius: 0;
+        border: none;
+        border-bottom: var(--Form-input-borderWidth) solid
+          var(--Form-input-borderColor);
+      }
+
+      .#{$ns}InputBox {
+        height: 100%;
+        line-height: 1;
+
+        > .#{$ns}InputBox-caret {
+          svg {
+            top: 0.125em;
+          }
+        }
+      }
+    }
   }
 
   &-value {
@@ -59,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;
@@ -68,7 +88,7 @@
   }
 
   &-caret.is-collapsed {
-    transform: rotate(-90deg);
+    transform: rotate(0deg);
   }
 
   &.is-expanded {
@@ -121,4 +141,12 @@
       }
     }
   }
+
+  &.is-mobile {
+    .#{$ns}Number {
+      border-radius: 0;
+      border-bottom: var(--Number-borderWidth) solid
+        var(--Form-input-borderColor);
+    }
+  }
 }

package/scss/components/_list-menu.scss

@@ -67,6 +67,46 @@
       )
       var(--Form-select-paddingX);
   }
+
+  &.is-mobile {
+    display: flex;
+    flex-wrap: wrap;
+
+    .#{$ns}ListMenu-item {
+      width: calc((100vw - var(--ListMenu-item-mobile-margin) * 7) / 3);
+      display: inline-flex;
+      background: var(--ListMenu-item-mobile-bg);
+      margin: var(--ListMenu-item-mobile-margin);
+
+      &.is-active {
+        background: var(--ListMenu-item-mobile-active-bg);
+      }
+
+      .#{$ns}ListMenu-itemLabel {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.#{$ns}ListMenu-add-wrap {
+  display: flex;
+  align-items: center;
+  margin: var(--ListMenu-item-mobile-margin);
+  text-align: left;
+
+  .#{$ns}ResultBox {
+    width: 100%;
+  }
+
+  input {
+    width: 100%;
+    padding: var(--Form-item-mobile-gap) 0;
+    border-bottom: 1px solid var(--borderColor);
+    border-radius: 0;
+  }
 }
 
 .#{$ns}PopOver > .#{$ns}ListMenu {

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 {