amis-ui 6.9.0-rc.1 → 6.9.0-rc.10

package/scss/components/_input-box.scss

@@ -1,7 +1,8 @@
 .#{$ns}InputBox {
+  height: var(--input-size-default-height);
+
   @include input-input();
   @include input-border();
-  height: var(--input-size-default-height);
 
   &--inline {
     display: inline-flex;

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

@@ -134,16 +134,14 @@
   &-info {
     min-width: 0;
     min-height: 0;
-
-    @include input-input();
-    @include input-border();
-
     flex: 1;
-
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+
+    @include input-input();
+    @include input-border();
   }
   &-typeLabel {
     color: var(--Form-input-placeholderColor);

package/scss/components/_mobile-dev-tool.scss

@@ -0,0 +1,175 @@
+.ae-MobileDevTool {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  background-color: #fff;
+  z-index: 1001;
+  border-bottom: 1px solid #dee2e6;
+  height: 20px;
+  &-dimensions {
+    width: 40%;
+    display: flex;
+    justify-content: end;
+  }
+
+  &-select {
+    font-size: 12px;
+    padding: 0;
+    border: none !important;
+    min-height: initial;
+    margin-left: 10px;
+    vertical-align: initial;
+    span {
+      font-size: 12px !important;
+    }
+    .cxd-PopOver {
+      width: 180px !important;
+      z-index: 10000;
+    }
+  }
+  &-dimension {
+    span {
+      margin-right: 5px;
+      padding: 0 2px;
+    }
+    &-input {
+      width: 32px;
+      height: 16px;
+      border: none;
+      border-radius: 0.125rem;
+      padding: 0 2px;
+      font-size: 12px;
+      text-align: center;
+      margin-right: 5px;
+      &:focus,
+      &:hover {
+        outline: none;
+        border: 1px solid #2468f2;
+      }
+    }
+  }
+  &-right {
+    width: 40%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 20px;
+    &-scale {
+      margin-right: 10px;
+      display: flex;
+      position: relative;
+      &-auto-value {
+        position: absolute;
+        background-color: #fff;
+        width: 40px;
+        left: 10px;
+      }
+      &-auto {
+        cursor: pointer;
+        margin-left: 10px;
+        &:hover {
+          color: #2468f2;
+        }
+      }
+    }
+    &-rotate-screen {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      position: absolute;
+      top: 1px;
+      &:hover {
+        color: #2468f2;
+      }
+    }
+  }
+}
+.ae-PreviewIFrameBody {
+  * {
+    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAABQ0lEQVQ4EaWVsWrDMBCGI4mCMxRMxgxZvKTQyWvmDn0AQx/Aj+U38NbVXTMUitd4SrZAIARDZ+P+v/EZ46pJKgmEpP90n2Wf7qxmlpYkiQnDcN00zdoYs2zb9pHblFLf0I7QqrquqzzPm6m7mgppmj5Be0FfTG2T9QXrIsuy3Vg3o4UCjKBX9PlI/2vKPc9xHD+UZXmQTQOwh23E8I9x1UP39OmA/WvyZK6N0BNOejYMQBAEbyDd85rXHriMouhLM5rYdSsA10BiW5CleTVE8R3J0rxnviDxJ0vLpRXRZyRL+wBsvprpZDO4aGQxKEcXZ5sPWQxKZTO6aGRpVg04M9F924Us3ZegwpcG/4KsLpeZg0xwiCtH8BZl7JO+Q7VhCXKEEvYhBxmAFADds2pgyuy5VSz43d/lZJh37VfFpurzC/gBw0WEc6PyhBMAAAAASUVORK5CYII='),
+      auto !important;
+  }
+}
+
+.ae-MobileDevTool-rightHandle {
+  cursor: ew-resize;
+  position: absolute;
+  right: -6px;
+  top: 40%;
+  width: 10px;
+  height: 22px;
+  z-index: 1000;
+  border: 1px solid #dee2e6;
+  background-color: #fff;
+  border-radius: 0.125rem;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    color: #000;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+  &::before {
+    content: '···';
+    display: block;
+    transform: rotate(90deg);
+  }
+}
+.ae-MobileDevTool-bottomHandle {
+  cursor: ns-resize;
+  position: absolute;
+  bottom: -6px;
+  left: calc(50% - 11px);
+  width: 22px;
+  height: 10px;
+  z-index: 1000;
+  border: 1px solid #dee2e6;
+  background-color: #fff;
+  border-radius: 0.125rem;
+  color: #666;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    color: #000;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  }
+  &::before {
+    content: '···';
+    display: block;
+  }
+}
+
+.height-move {
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+    cursor: ns-resize;
+  }
+  * {
+    user-select: none;
+  }
+}
+
+.width-move {
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+    cursor: ew-resize;
+  }
+  * {
+    user-select: none;
+  }
+}

package/scss/components/_modal.scss

@@ -256,6 +256,7 @@
         min-height: 0;
         flex: 1;
         height: px2rem(44px);
+        font-size: var(--fontSizeMd);
 
         &:first-child {
           margin-left: 0;

package/scss/components/_page.scss

@@ -144,6 +144,21 @@
     }
   }
 
+  // 右侧侧边栏时，调整侧边栏相关的样式
+  .#{$ns}Page--rightAside {
+    flex-direction: row-reverse;
+
+    > .#{$ns}Page-aside {
+      border-left: var(--borderWidth) solid var(--borderColor);
+      border-right: unset;
+
+      > .#{$ns}Page-asideResizor {
+        left: px2rem(-6px);
+        right: unset;
+      }
+    }
+  }
+
   .#{$ns}Page--asideSticky {
     > .#{$ns}Page-aside {
       position: sticky;

package/scss/components/_panel.scss

@@ -11,13 +11,6 @@
   -webkit-box-shadow: var(--Panel-boxShadow);
   box-shadow: var(--Panel-shadow);
 
-  &-fixedBottom {
-    position: sticky;
-    background: var(--white);
-    bottom: var(--affix-offset-bottom);
-    z-index: $zindex-sticky;
-  }
-
   /* 主题 */
   &--default {
     border-color: var(--Panel-top-border-color) var(--Panel-right-border-color)
@@ -152,6 +145,19 @@
       var(--Panel-heading-bottom-border-width)
       var(--Panel-heading-left-border-width);
     border-radius: var(--Panel-headingBorderRadius);
+
+    &.is-collapsible {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &-arrow {
+    transition: transform 0.1s ease-in;
+    transform: rotate(180deg);
+    &.is-collapsed {
+      transform: rotate(0deg);
+    }
   }
 
   &-title {
@@ -186,6 +192,13 @@
     }
   }
 
+  &-fixedBottom {
+    position: sticky;
+    background: var(--white);
+    bottom: var(--affix-offset-bottom);
+    z-index: $zindex-sticky;
+  }
+
   &-btnToolbar {
     @include clearfix();
     text-align: var(--Panel-btnToolbarTextAlign);
@@ -219,8 +232,10 @@
       border-radius: 0;
 
       .#{$ns}Panel-title {
-        padding-left: var(--Panel-body-paddingLeft);
-        border-left: px2rem(3px) solid var(--primary);
+        .icon {
+          width: var(--sizes-base-7);
+          height: var(--sizes-base-7);
+        }
         font-size: var(--fontSizeLg);
       }
     }

package/scss/components/_picker-columns.scss

@@ -135,6 +135,6 @@
 
   &-columnItemis-selected {
     font-size: 18px;
-    color: --PickerColumns-title-color;
+    color: var(--PickerColumns-title-color);
   }
 }

package/scss/components/_pull-refresh.scss

@@ -1,5 +1,4 @@
 .#{$ns}PullRefresh {
-
   &-wrap {
     position: relative;
     height: 100%;
@@ -17,6 +16,12 @@
     line-height: var(--gap-lg);
     color: #999;
   }
+  &-footer {
+    text-align: center;
+    color: #999;
+    margin-bottom: 12px;
+    font-size: var(--fontSizeMd);
+  }
 
   .loading-icon {
     animation: var(--Button-animation-spin);

package/scss/components/_result-box.scss

@@ -1,6 +1,4 @@
 .#{$ns}ResultBox {
-  @include input-input();
-  @include input-border();
   flex-wrap: nowrap;
   padding: 0 px2rem(12px);
   min-height: var(--Form-input-height);
@@ -24,6 +22,8 @@
     var(--select-base-default-paddingBottom)
     var(--select-base-default-paddingLeft);
 
+  @include input-input();
+  @include input-border();
   &.is-error {
     border-color: var(--Form-input-onError-borderColor);
     background: var(--Form-input-onError-bg);

package/scss/components/_table.scss

@@ -262,8 +262,13 @@
 
       & > .#{$ns}Form,
       & > .#{$ns}Form-item > .#{$ns}Form-control:not(.is-thin) {
-        // todo 优化这个，有些表单项宽度其实是很小的比如 switch，button，checkbox，radio
         min-width: var(--Form-control-widthBase);
+
+        &.#{$ns}CheckboxControl,
+        &.#{$ns}SwitchControl,
+        &.#{$ns}RadiosControl {
+          min-width: auto;
+        }
       }
 
       .#{$ns}Form-static {

package/scss/components/_tabs.scss

@@ -1152,7 +1152,7 @@
             &:not(.is-disabled):hover {
               > a {
                 font-size: var(--Tabs--simple-hover-fontSize);
-                color: var(--Tabs--simple-hover-color) !important;
+                color: var(--Tabs--simple-hover-color);
                 font-weight: var(--Tabs--simple-hover-fontWeight);
                 line-height: var(--Tabs--simple-hover-lineHeight);
               }
@@ -1160,7 +1160,7 @@
             &.is-disabled {
               > a {
                 font-size: var(--Tabs--simple-disabled-fontSize);
-                color: var(--Tabs--simple-disabled-color) !important;
+                color: var(--Tabs--simple-disabled-color);
                 font-weight: var(--Tabs--simple-disabled-fontWeight);
                 line-height: var(--Tabs--simple-disabled-lineHeight);
               }
@@ -1168,7 +1168,7 @@
             &.is-active {
               > a {
                 font-size: var(--Tabs--simple-active-fontSize);
-                color: var(--Tabs--simple-active-color) !important;
+                color: var(--Tabs--simple-active-color);
                 font-weight: var(--Tabs--simple-active-fontWeight);
                 line-height: var(--Tabs--simple-active-lineHeight);
               }
@@ -1317,7 +1317,7 @@
               var(--Tabs--strong-hover-left-border-width);
             > a {
               font-size: var(--Tabs--strong-hover-fontSize);
-              color: var(--Tabs--strong-hover-color) !important;
+              color: var(--Tabs--strong-hover-color);
               font-weight: var(--Tabs--strong-hover-fontWeight);
               line-height: var(--Tabs--strong-hover-lineHeight);
             }
@@ -1339,7 +1339,7 @@
               var(--Tabs--strong-disabled-left-border-width);
             > a {
               font-size: var(--Tabs--strong-disabled-fontSize);
-              color: var(--Tabs--strong-disabled-color) !important;
+              color: var(--Tabs--strong-disabled-color);
               font-weight: var(--Tabs--strong-disabled-fontWeight);
               line-height: var(--Tabs--strong-disabled-lineHeight);
             }
@@ -1360,7 +1360,7 @@
               var(--Tabs--strong-active-left-border-width);
             > a {
               font-size: var(--Tabs--strong-active-fontSize);
-              color: var(--Tabs--strong-active-color) !important;
+              color: var(--Tabs--strong-active-color);
               font-weight: var(--Tabs--strong-active-fontWeight);
               line-height: var(--Tabs--strong-active-lineHeight);
             }

package/scss/components/_tag.scss

@@ -26,14 +26,13 @@
   }
 
   &--normal {
-    &--hasColor {
-      color: var(--white);
-    }
-
     border-width: var(--Tag-normal-borderWidth);
     border-radius: var(--Tag-normal-borderRadius);
     border-color: var(--Tag-normal-borderColor);
 
+    &--hasColor {
+      color: var(--white);
+    }
     &--inactive {
       color: var(--Tag-inactive-color);
       background: var(--Tag-inactive-bg-color);

package/scss/components/_toast.scss

@@ -59,12 +59,6 @@
   justify-content: space-between;
   align-items: flex-start;
 
-  &-wrap {
-    pointer-events: none;
-    position: fixed;
-    z-index: $zindex-toast;
-  }
-
   max-width: var(--Toast-width);
   pointer-events: auto;
   margin-bottom: var(--gap-xs);
@@ -83,6 +77,12 @@
   transform: translateZ(0);
   width: px2rem(400px);
 
+  &-wrap {
+    pointer-events: none;
+    position: fixed;
+    z-index: $zindex-toast;
+  }
+
   &.in,
   &.out {
     animation-fill-mode: both;
@@ -162,6 +162,22 @@
       width: var(--Toast-icon-width);
       height: var(--Toast-icon-height);
       color: inherit;
+
+      &.icon-warning {
+        color: var(--Status-warning-color);
+      }
+
+      &.icon-fail {
+        color: var(--Status-fail-color);
+      }
+
+      &.icon-success {
+        color: var(--Status-success-color);
+      }
+
+      &.icon-schedule {
+        color: var(--Status-schedule-color);
+      }
     }
   }
 

package/scss/components/form/_checks.scss

@@ -131,7 +131,6 @@
         &:before {
           width: var(--Checkbox-inner-size);
           height: var(--Checkbox-inner-size);
-          background: var(--Checkbox-onHover-color);
         }
       }
 
@@ -140,7 +139,6 @@
         cursor: not-allowed;
         background-color: var(--checkbox-checkbox-disabled-bg-color);
         &:before {
-          background-color: var(--Checkbox-onDisabled-color);
           border-width: 0;
         }
       }
@@ -243,10 +241,6 @@
       input:checked + i {
         background: var(--button-primary-hover-bg-color);
         border-color: transparent;
-
-        &:before {
-          background: var(--checkbox-checked-hover-bg-color);
-        }
       }
 
       & > i:before {
@@ -264,9 +258,6 @@
       &:checked + i {
         border-color: var(--Checkbox-onHover-color);
         background: var(--Checkbox-onHover-color);
-        &:hover {
-          background: var(--checkbox-checked-hover-bg-color);
-        }
 
         &:before {
           width: var(--Checkbox--full-inner-size);
@@ -283,14 +274,12 @@
       &[disabled]:checked + i {
         &:before {
           border-color: var(--Checkbox-onDisabled-color);
-          background: var(--Checkbox-onDisabled-bg);
           border-width: 0 0 px2rem(1px) px2rem(1px);
         }
       }
 
       &:checked[disabled] + i {
         border-color: var(--Checkbox-color);
-        background: var(--Checkbox-onDisabled-bg);
       }
     }
 
@@ -325,7 +314,6 @@
         &:before {
           width: var(--Checkbox-inner-size);
           height: var(--Checkbox-inner-size);
-          background: var(--Checkbox-onHover-color);
         }
       }
 

package/scss/components/form/_form.scss

@@ -127,6 +127,13 @@
     vertical-align: top;
   }
 
+  &--flex {
+    margin: calc(var(--Form-item-gap) / 2);
+    &:last-child {
+      margin-bottom: calc(var(--Form-item-gap) / 2);
+    }
+  }
+
   &--inline {
     margin-right: var(--Form-mode-inline-item-gap);
   }
@@ -428,7 +435,6 @@
     flex-basis: 0;
     flex-grow: 1;
     flex-shrink: 1;
-    padding: calc(var(--Form-item-gap) / 2);
     min-width: 0;
     min-height: 0;
   }
@@ -655,7 +661,6 @@
       overflow-wrap: break-word;
       margin-right: 0;
       margin-bottom: 0;
-      font-size: var(--fontSizeLg);
 
       & + .#{$ns}Form-item-controlBox {
         max-width: calc(100% - 28%);
@@ -672,10 +677,8 @@
     }
 
     .#{$ns}TextControl-input {
-      font-size: var(--fontSizeLg);
-
       input {
-        height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg));
+        height: calc(var(--Form-input-lineHeight) * var(--Form-item-fontSize));
       }
     }
 
@@ -744,7 +747,6 @@
     .#{$ns}Form-control {
       flex: 1;
       flex-wrap: wrap;
-      font-size: var(--fontSizeLg);
       min-width: 0;
 
       .#{$ns}ColorPicker {
@@ -865,6 +867,9 @@
 
     .#{$ns}TextareaControl > textarea,
     .#{$ns}Form-control > .#{$ns}TextControl-input,
+    .#{$ns}Number-input,
+    .#{$ns}ResultBox,
+    .#{$ns}DateControl > .#{$ns}DatePicker,
     .#{$ns}TextControl.is-focused > .#{$ns}TextControl-input {
       border: none;
       padding: 0 var(--Form-input-paddingX) 0 0;

package/scss/components/form/_image.scss

@@ -26,20 +26,6 @@
     cursor: pointer;
     margin-right: var(--gap-base);
 
-    &-bg {
-      position: absolute;
-      z-index: 0;
-      overflow: hidden;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-
-      .#{$ns}Image {
-        border: 0;
-      }
-    }
-
     @include button-variant(
       var(--ImageControl-addBtn-bg),
       var(--ImageControl-addBtn-color),
@@ -103,6 +89,20 @@
       var(--shadows-shadow-none)
     );
 
+    &-bg {
+      position: absolute;
+      z-index: 0;
+      overflow: hidden;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+
+      .#{$ns}Image {
+        border: 0;
+      }
+    }
+
     svg {
       top: 0;
       margin-bottom: var(--inputImage-base-default-icon-margin);

package/scss/components/form/_list.scss

@@ -122,14 +122,6 @@
       border-color: var(--ListControl-item-onActive-borderColor);
       color: var(--ListControl-item-onActive-color);
 
-      &:hover {
-        background: var(--ListControl-item-onActive-onHover-bg);
-      }
-
-      .b-inherit {
-        border-color: var(--ListControl-item-onActive-color);
-      }
-
       border-width: var(--listSelect-base-active-top-border-width)
         var(--listSelect-base-active-right-border-width)
         var(--listSelect-base-active-bottom-border-width)
@@ -148,6 +140,14 @@
         var(--listSelect-base-active-bottom-left-border-radius);
       background: var(--listSelect-base-active-bg-color);
 
+      &:hover {
+        background: var(--ListControl-item-onActive-onHover-bg);
+      }
+
+      .b-inherit {
+        border-color: var(--ListControl-item-onActive-color);
+      }
+
       &:before {
         content: '';
         position: absolute;

package/scss/components/form/_picker.scss

@@ -1,6 +1,6 @@
 .#{$ns}Picker {
-  @include input-text();
   outline: none;
+  @include input-text();
 
   &-input:hover {
     background: var(--Pick-status-hover-bgColor);

package/scss/components/form/_select.scss

@@ -45,9 +45,6 @@
     }
   }
 
-  &--block {
-    display: flex;
-  }
   vertical-align: middle;
   text-align: left;
   align-items: center;
@@ -72,6 +69,10 @@
   color: var(--Form-select-color);
   transition: all var(--animation-duration) ease-in-out;
 
+  &--block {
+    display: flex;
+  }
+
   &:hover {
     background: var(--Form-select-onHover-bg);
     border-width: var(--select-base-hover-top-border-width)