amis 1.5.7 → 1.6.1

package/scss/components/_debug.scss

@@ -0,0 +1,167 @@
+/**
+ * Debug 模块的 UI，由于没法使用任何主题，所以这里使用独立配色风格
+ */
+
+.AMISDebug {
+  position: fixed;
+  z-index: $zindex-debug;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 24px;
+
+  h3 {
+    color: inherit;
+  }
+
+  .primary {
+    color: #009fff;
+  }
+
+  &-header {
+    padding: var(--Drawer-header-padding);
+    background: var(--Drawer-header-bg);
+    border-bottom: var(--Drawer-content-borderWidth) solid
+      var(--Drawer-header-borderColor);
+  }
+
+  &-hoverBox {
+    pointer-events: none;
+    position: absolute;
+    outline: 1px dashed #1c76c4;
+  }
+
+  &-activeBox {
+    pointer-events: none;
+    position: absolute;
+    outline: 1px #1c76c4;
+  }
+
+  &-tab {
+    overflow: hidden;
+  }
+
+  &-tab > button {
+    color: inherit;
+    background: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: var(--gap-sm) var(--gap-md);
+    transition: 0.3s;
+    border-bottom: 1px solid transparent;
+  }
+
+  &-tab > button:hover {
+    color: #e7e7e7;
+  }
+
+  &-tab > button.active {
+    color: #e7e7e7;
+    border-bottom-color: #e7e7e7;
+  }
+
+  &-toggle {
+    background: var(--body-bg);
+    position: fixed;
+    top: 50%;
+    right: 0;
+    width: 24px;
+    height: 48px;
+    box-shadow: rgba(0, 0, 0, 0.24) -2px 0px 4px 0px;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+    padding-top: 14px;
+    padding-left: 6px;
+    cursor: pointer;
+    i {
+      color: var(--text-color);
+    }
+    &:hover {
+      i {
+        color: var(--primary);
+      }
+    }
+  }
+
+  &-content {
+    display: none;
+  }
+
+  &-resize {
+    position: absolute;
+    width: 4px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    cursor: col-resize;
+    &:hover {
+      background: #75715e;
+    }
+  }
+
+  &-changePosition {
+    position: absolute;
+    font-size: 18px;
+    right: 40px;
+    top: var(--gap-sm);
+    cursor: pointer;
+  }
+
+  &-close {
+    position: absolute;
+    font-size: 18px;
+    right: var(--gap-sm);
+    top: var(--gap-sm);
+    cursor: pointer;
+  }
+
+  &.is-expanded {
+    width: 420px;
+    overflow: auto;
+    background: #272821;
+    color: #cccccc;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    .AMISDebug-toggle {
+      display: none;
+    }
+    .AMISDebug-content {
+      display: block;
+    }
+  }
+
+  &.is-left {
+    left: 0;
+    .AMISDebug-resize {
+      left: unset;
+      right: 0;
+    }
+  }
+
+  &-log {
+    padding: var(--gap-sm);
+    button {
+      cursor: pointer;
+      background: #0e639c;
+      flex-grow: 1;
+      box-sizing: border-box;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      padding: 6px 11px;
+      outline: none;
+      text-decoration: none;
+      color: inherit;
+      max-width: 300px;
+      border: none;
+    }
+    button:hover {
+      background: #1177bb;
+    }
+  }
+
+  &-inspect {
+    padding: var(--gap-sm);
+  }
+}

package/scss/components/_dropdown.scss

@@ -34,20 +34,28 @@
   }
 
   &-menu {
-    position: absolute;
-    z-index: $zindex-dropdown;
-    top: 100%;
-    left: 0;
-    margin: px2rem(1px) 0 0;
     background: var(--DropDown-menu-bg);
     list-style: none;
     padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
-    border: var(--DropDown-menu-borderWidth) solid
-      var(--DropDown-menu-borderColor);
-    border-radius: var(--DropDown-menu-borderRadius);
-    box-shadow: var(--DropDown-menu-boxShadow);
     min-width: var(--DropDown-menu-minWidth);
     text-align: left;
+    border: none;
+    user-select: none;
+
+    &-root {
+      position: absolute;
+      z-index: $zindex-dropdown;
+      top: 100%;
+      left: 0;
+      margin: px2rem(1px) 0 0;
+      border: none;
+      border-radius: var(--DropDown-menu-borderRadius);
+      box-shadow: var(--DropDown-menu-boxShadow);
+      min-width: var(--DropDown-menu-minWidth);
+      overflow-y: auto;
+      overflow-x: hidden;
+      max-height: px2rem(300px);
+    }
   }
 
   &--alignRight &-menu {
@@ -95,6 +103,28 @@
       background: var(--DropDown-menu-borderColor);
       padding: 0;
     }
+
+    &.#{$ns}DropDown-groupTitle {
+      height: inherit;
+      font-size: var(--fontSizeSm);
+      padding: var(--gap-xs) var(--gap-xs);
+      padding-left: var(--gap-sm);
+      color: var(--DropDown-group-color);
+      flex-grow: 1;
+      cursor: default;
+
+      &:hover {
+        background: none;
+      }
+
+      span {
+        white-space: nowrap;
+      }
+
+      & ~ .#{$ns}DropDown-button {
+        padding-left: var(--gap-lg);
+      }
+    }
   }
 
   &-menu > li a {

package/scss/components/_formula.scss

@@ -3,20 +3,30 @@
   max-width: 100%;
   box-sizing: content-box;
 
+  &-content {
+    border-radius: var(--borderRadius);
+    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  }
+
   &-header {
     width: 100%;
-    height: px2rem(40px);
-    line-height: px2rem(40px);
-    padding-left: px2rem(10px);
+    height: px2rem(30px);
+    line-height: px2rem(30px);
+    padding: 0 #{px2rem(10px)};
     box-sizing: border-box;
-    background: #f3f8fb;
+    background: var(--Formula-header-bgColor);
+    border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+    border-bottom: var(--Form-input-borderWidth) solid
+      var(--Form-input-borderColor);
+    font-weight: 500;
   }
 
   &-editor {
     min-height: px2rem(238px);
     max-height: px2rem(320px);
     height: auto;
-    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+    padding: #{px2rem(10px)};
+    padding-right: 0;
   }
 
   &.is-error &-editor {
@@ -98,7 +108,7 @@
     cursor: pointer;
 
     &.is-active {
-      color: var(--primary);
+      background: var(--Formula-funcItem-bgColor-onActive);
     }
   }
   &-groupTitle {
@@ -112,11 +122,25 @@
   }
   &-funcDetail {
     padding: 10px 20px;
+
+    pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      background: var(--Formula-header-bgColor);
+      padding: #{px2rem(10px)};
+      border-radius: var(--borderRadius);
+      margin-top: 0;
+    }
+
+    div {
+      color: var(--text--loud-color);
+    }
   }
 }
 
 .#{$ns}FormulaPicker {
   &-icon {
     margin-left: auto;
+    margin-right: #{px2rem(5px)};
   }
 }

package/scss/components/_modal.scss

@@ -231,3 +231,21 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Modal {
+    .#{$ns}Modal-footer {
+      display: flex;
+
+      > .#{$ns}Button {
+        flex: 1;
+        height: px2rem(44px);
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/_panel.scss

@@ -182,3 +182,48 @@
     }
   }
 }
+
+/* 移动端样式调整 */
+@include media-breakpoint-down(sm) {
+  .#{$ns}Panel--form {
+    border: none;
+    box-shadow: none;
+
+    margin: 0 calc(var(--Panel-bodyPadding) * -1)
+      calc(var(--Panel-marginBottom) / 2);
+
+    .#{$ns}Panel-body {
+      padding: 0 var(--gap-md) var(--gap-md);
+    }
+
+    > .#{$ns}Panel-heading {
+      background: none;
+      border: none;
+      border-radius: 0;
+
+      .#{$ns}Panel-title {
+        padding-left: var(--Panel-bodyPadding);
+        border-left: px2rem(3px) solid var(--primary);
+        font-size: var(--fontSizeLg);
+      }
+    }
+
+    .#{$ns}Panel-footerWrap {
+      padding-bottom: var(--Panel-bodyPadding);
+    }
+
+    .#{$ns}Panel-footer {
+      border-top: none;
+      display: flex;
+      padding: 0 var(--Panel-bodyPadding);
+
+      > .#{$ns}Button {
+        flex: 1;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/_picker-columns.scss

@@ -6,7 +6,11 @@
   overflow: hidden;
   font-size: var(--PickerColumns-option-fontSize);
 
-  &-toolbar {
+  li:focus {
+    outline: none;
+  }
+
+  &-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -18,12 +22,12 @@
     height: 100%;
     padding: var(--PickerColumns-action-padding);
     font-size: var(--PickerColumns-action-fontSize);
-    background-color: transparent;
+    background-color: transparent !important;
     border: none;
     cursor: pointer;
 
     &:active {
-      opacity: 0.7;
+      background-color: none !important;
     }
     &:hover {
       background-color: none !important;
@@ -31,11 +35,11 @@
   }
 
   &-confirm {
-    color: var(--PickerColumns-confirmAction-color);
+    color: var(--PickerColumns-confirmAction-color) !important;
   }
 
   &-cancel {
-    color: var(--PickerColumns-cancelAction-color);
+    color: var(--PickerColumns-cancelAction-color) !important;
   }
 
   &-title {
@@ -44,6 +48,7 @@
     font-size: var(--PickerColumns-title-fontSize);
     line-height: var(--PickerColumns-title-lineHeight);
     text-align: center;
+    color: var(--PickerColumns-title-color);
   }
 
   &-columns {
@@ -127,4 +132,9 @@
     cursor: not-allowed;
     opacity: var(--PickerColumns-optionDisabled-opacity);
   }
+
+  &-columnItemis-selected {
+    font-size: 18px;
+    color: --PickerColumns-title-color;
+  }
 }

package/scss/components/_popup.scss

@@ -23,11 +23,12 @@
 }
 .#{$ns}PopUp {
   width: 100%;
+  height: px2rem(400px);
   position: fixed;
   background: var(--PopOver-bg);
   left: 0;
   bottom: 0;
-  z-index: $zindex-popover;
+  z-index: $zindex-top;
   padding: 0;
   margin: 0;
   font-weight: var(--fontWeightNormal);
@@ -55,45 +56,68 @@
 
   &.in {
     animation-name: PopUpIn;
-    .#{$ns}PopUp-overlay{
+    .#{$ns}PopUp-overlay {
       animation-name: PopUpOpacityIn;
     }
   }
 
   &.out {
     animation-name: PopUpOut;
-    .#{$ns}PopUp-overlay{
+    .#{$ns}PopUp-overlay {
       animation-name: PopUpOpacityOut;
     }
   }
 
-  &-inner{
+  &-inner {
     position: relative;
     overflow: hidden;
     height: 100%;
     box-sizing: border-box;
     background: $white;
-    padding-top: px2rem(36px);
+    display: flex;
+    flex-direction: column;
   }
 
-  &-closeWrap{
-    width: 100%;
-    position: absolute !important;
-    left: 0;
-    top: 0;
+  &-closeWrap {
+    position: relative;
+    text-align: center;
+    height: px2rem(48px);
+    line-height: px2rem(48px);
   }
 
-  &-close{
-    width: px2rem(34px) !important;
-    height: px2rem(34px) !important;
-    padding: px2rem(12px);
+  &-closeWrap &-close {
+    position: absolute;
+    z-index: 1;
+    color: var(--icon-color);
     cursor: pointer;
+    top: px2rem(15px);
+    right: px2rem(15px);
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: px2rem(60px);
+  }
+  &-title {
+    font-size: var(--fontSizeMd);
+  }
+
+  &-cancel {
+    color: var(--PopUp-cancelAction-color);
+    margin-left: var(--gap-sm);
   }
 
-  &-content{
+  &-confirm {
+    margin-right: var(--gap-sm);
+  }
+
+  &-content {
     overflow-y: auto;
     height: 100%;
     display: flex;
+    flex: 1;
   }
 
   & > * {
@@ -108,7 +132,7 @@
     right: 0;
     z-index: 1;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.3);;
+    background: rgba(0, 0, 0, 0.3);
     opacity: 1;
     animation-duration: var(--animation-duration);
     animation-fill-mode: both;
@@ -120,4 +144,7 @@
   &--leftTopLeftBottom {
     margin-top: px2rem(-4px);
   }
+  &-safearea {
+    height: px2rem(16px);
+  }
 }

package/scss/components/_result-box.scss

@@ -126,4 +126,35 @@
     padding-left: 8px;
     min-height: 24px;
   }
+
+  &.is-mobile {
+    min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+    border: none;
+    padding: 0;
+    font-size: var(--fontSizeLg);
+    border: none;
+    justify-content: flex-end;
+
+    .#{$ns}ResultBox-arrow {
+      margin-right: var(--gap-xs);
+      // margin-left: var(--gap-xs);
+      width: var(--gap-md);
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      margin-left: 4px;
+
+      > svg {
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+        transform: rotate(-90deg);
+      }
+    }
+  }
 }