amis-ui 3.1.0 → 3.2.0

package/scss/components/_formula.scss

@@ -28,12 +28,25 @@
   }
 
   &-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 {
@@ -61,11 +74,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 +90,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 +114,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 +146,7 @@
 
     &-base.is-scrollable {
       @include scrollbar();
-      overflow-x: hidden;
+      overflow-x: auto;
       overflow-y: auto;
     }
 
@@ -169,7 +186,6 @@
           .#{$ns}FormulaEditor-VariableList {
             &-sub {
               .#{$ns}FormulaEditor-VariableList-body {
-                max-height: #{px2rem(220px)};
                 overflow-y: hidden;
               }
               &-FormulaEditor-VariableList-base {
@@ -232,6 +248,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 +269,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 +370,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 +386,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 +407,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 +426,7 @@
   }
 
   .cm-field {
-    padding: 3px 5px;
+    padding: 2px 5px;
   }
 
   .cm-field {
@@ -389,6 +445,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)};

package/scss/components/_input-box.scss

@@ -72,4 +72,28 @@
   &.is-active &-caret {
     transform: rotate(180deg);
   }
+
+  &.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.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 {
@@ -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/_nav.scss

@@ -4,6 +4,7 @@
   background-color: var(--Layout-light-backgroundColor);
   font-size: var(--Nav-item-fontSize);
   line-height: var(--Nav-Item-height);
+  min-height: 10px;
 
   &-horizontal {
     line-height: var(--Nav-Item-height--horizontal);

package/scss/components/_panel.scss

@@ -220,7 +220,7 @@
       calc(var(--Panel-marginBottom) / 2);
 
     .#{$ns}Panel-body {
-      padding: 0 var(--gap-md) var(--gap-md);
+      // padding: 0 var(--gap-md) var(--gap-md);
     }
 
     > .#{$ns}Panel-heading {

package/scss/components/_picker-columns.scss

@@ -35,11 +35,11 @@
   }
 
   &-confirm {
-    color: var(--PickerColumns-confirmAction-color) !important;
+    color: var(--PickerColumns-confirmAction-color);
   }
 
   &-cancel {
-    color: var(--PickerColumns-cancelAction-color) !important;
+    color: var(--PickerColumns-cancelAction-color);
   }
 
   &-title {
@@ -94,8 +94,6 @@
     }
   }
 
-  
-
   &-mask {
     position: absolute;
     top: 0;

package/scss/components/_popup.scss

@@ -120,7 +120,9 @@
   }
 
   &-confirm {
+    color: var(--PopUp-confirmAction-color);
     margin-right: var(--gap-sm);
+    border: none;
   }
 
   &-content {
@@ -128,6 +130,10 @@
     height: 100%;
     display: flex;
     flex: 1;
+
+    > div {
+      flex: 1;
+    }
   }
 
   & > * {
@@ -155,6 +161,7 @@
     margin-top: px2rem(-4px);
   }
   &-safearea {
-    height: px2rem(16px);
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

package/scss/components/_result-box.scss

@@ -324,6 +324,11 @@
     border: none;
     justify-content: flex-end;
 
+    &.is-focused,
+    &:hover {
+      border: none !important;
+    }
+
     .#{$ns}ResultBox-clear {
       @include input-clear();
       width: px2rem(26px);

package/scss/components/_search-box.scss

@@ -132,6 +132,12 @@
     background: var(--SearchBox-enhonce-disabled-color);
     color: var(--SearchBox-enhonce-disabled-search-color);
   }
+
+  &.is-mobile {
+    border-radius: 0;
+    border: none;
+    border-bottom: var(--borderWidth) solid var(--borderColor);
+  }
 }
 
 .#{$ns}SearchBox-history {

package/scss/components/_table.scss

@@ -207,6 +207,14 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}Table-toolbar {
+      .#{$ns}Form-item {
+        padding: 0;
+      }
+    }
+  }
+
   &-header + &-toolbar {
     padding-top: 0;
   }
@@ -657,6 +665,21 @@
     }
   }
 
+  &.is-mobile {
+    .#{$ns}Table-table > tbody > tr {
+      &:hover,
+      &.is-hovered {
+        background: var(--Table-bg);
+        border-color: var(--Table-borderColor);
+        color: var(--Table-color);
+
+        & + tr {
+          border-color: var(--Table-borderColor);
+        }
+      }
+    }
+  }
+
   &Cell-sortBtn,
   &Cell-searchBtn,
   &Cell-filterBtn {

package/scss/components/_tabs.scss

@@ -112,6 +112,18 @@
           height: 100%;
           overflow-x: hidden;
 
+          &.is-mobile {
+            overflow-x: auto;
+            -ms-overflow-style: none;
+            overflow: -moz-scrollbars-none;
+
+            &::-webkit-scrollbar {
+              display: none;
+              width: 0 !important;
+              height: 0 !important;
+            }
+          }
+
           .#{$ns}Tabs-links-drag {
             position: absolute;
             height: 100%;

package/scss/components/form/_checks.scss

@@ -64,6 +64,14 @@
     }
   }
 
+  &.is-mobile {
+    > i {
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
+
   &:hover > i + span > a {
     display: inline-block;
   }

package/scss/components/form/_color.scss

@@ -9,10 +9,7 @@
   background: var(--ColorPicker-bg);
   color: var(--ColorPicker-color);
   border-radius: var(--borderRadius);
-
-  &-popup {
-    height: px2rem(400px);
-  }
+  height: var(--ColorPicker-height);
 
   &:not(.is-disabled) {
     cursor: pointer;
@@ -79,6 +76,9 @@
 
   &-clear {
     @include input-clear();
+    svg {
+      top: 0;
+    }
   }
 
   &-arrow {
@@ -98,11 +98,12 @@
       width: 10px;
       height: 10px;
       top: 0;
+      transform: rotate(90deg);
     }
   }
 
   &.is-opened &-arrow > svg {
-    transform: rotate(180deg);
+    transform: rotate(270deg);
   }
 }
 
@@ -122,3 +123,28 @@
   border-radius: var(--borderRadius) !important;
   box-shadow: var(--ColorPicker-boxShadow) !important;
 }
+
+.#{$ns}ColorPicker-popup {
+  height: px2rem(500px);
+
+  .sketch-picker {
+    width: 80% !important;
+    box-shadow: none !important;
+
+    input {
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .flexbox-fix {
+      &:last-child {
+        > div {
+          width: 18px !important;
+          height: 18px !important;
+          margin: 0px 16px 10px 0px !important;
+        }
+      }
+    }
+  }
+}

package/scss/components/form/_combo.scss

@@ -187,6 +187,7 @@
       white-space: nowrap;
       align-items: flex-start;
       padding-top: var(--Form-label-paddingTop);
+      height: px2rem(30px);
 
       &.is-disabled {
         pointer-events: none;
@@ -320,6 +321,32 @@
       background: rgba(0, 0, 0, 0.1);
     }
   }
+
+  &.is-mobile {
+    .#{$ns}Form-item {
+      .#{$ns}Form-rowInner {
+        flex: 1;
+      }
+    }
+
+    .#{$ns}Combo-delBtn {
+      height: px2rem(20px);
+      padding-top: 0;
+    }
+
+    .#{$ns}Combo-item {
+      align-items: center;
+      border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+    }
+  }
+
+  &.is-mobile:not(.#{$ns}Combo--ver) {
+    .#{$ns}TextareaControl > textarea,
+    .#{$ns}Form-control > .#{$ns}TextControl-input,
+    .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
+      border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
+    }
+  }
 }
 
 .#{$ns}ComboTabs > .#{$ns}Tabs-links {