amis-ui 6.9.0 → 6.10.0-beta.1

package/scss/_mixins.scss

@@ -715,3 +715,86 @@
     padding: 0 var(--gap-xs);
   }
 }
+
+@function resolve-params($params...) {
+  @if length($params) == 1 {
+    @return (
+      nth($params, 1),
+      nth($params, 1),
+      nth($params, 1),
+      nth($params, 1)
+    );
+  } @else if length($params) == 2 {
+    @return (
+      nth($params, 1),
+      nth($params, 2),
+      nth($params, 1),
+      nth($params, 2)
+    );
+  } @else if length($params) == 3 {
+    @return (
+      nth($params, 1),
+      nth($params, 2),
+      nth($params, 3),
+      nth($params, 2)
+    );
+  } @else if length($params) == 4 {
+    @return (
+      nth($params, 1),
+      nth($params, 2),
+      nth($params, 3),
+      nth($params, 4)
+    );
+  } @else {
+    @warn "Please provide 1 to 4 params values.";
+    @return null;
+  }
+}
+
+@mixin borderRadius($token, $radius...) {
+  $resolved: resolve-params($radius...);
+  #{$token}-top-left-border-radius: nth($resolved, 1);
+  #{$token}-top-right-border-radius: nth($resolved, 2);
+  #{$token}-bottom-right-border-radius: nth($resolved, 3);
+  #{$token}-bottom-left-border-radius: nth($resolved, 4);
+}
+
+@mixin borderColor($token, $color...) {
+  $resolved: resolve-params($color...);
+  #{$token}-top-border-color: nth($resolved, 1);
+  #{$token}-right-border-color: nth($resolved, 2);
+  #{$token}-bottom-border-color: nth($resolved, 3);
+  #{$token}-left-border-color: nth($resolved, 4);
+}
+
+@mixin borderWidth($token, $width...) {
+  $resolved: resolve-params($width...);
+  #{$token}-top-border-width: nth($resolved, 1);
+  #{$token}-right-border-width: nth($resolved, 2);
+  #{$token}-bottom-border-width: nth($resolved, 3);
+  #{$token}-left-border-width: nth($resolved, 4);
+}
+
+@mixin borderStyle($token, $style...) {
+  $resolved: resolve-params($style...);
+  #{$token}-top-border-style: nth($resolved, 1);
+  #{$token}-right-border-style: nth($resolved, 2);
+  #{$token}-bottom-border-style: nth($resolved, 3);
+  #{$token}-left-border-style: nth($resolved, 4);
+}
+
+@mixin padding($token, $padding...) {
+  $resolved: resolve-params($padding...);
+  #{$token}-paddingTop: nth($resolved, 1);
+  #{$token}-paddingRight: nth($resolved, 2);
+  #{$token}-paddingBottom: nth($resolved, 3);
+  #{$token}-paddingLeft: nth($resolved, 4);
+}
+
+@mixin margin($token, $margin...) {
+  $resolved: resolve-params($margin...);
+  #{$token}-marginTop: nth($resolved, 1);
+  #{$token}-marginRight: nth($resolved, 2);
+  #{$token}-marginBottom: nth($resolved, 3);
+  #{$token}-marginLeft: nth($resolved, 4);
+}

package/scss/components/_collapse-group.scss

@@ -60,6 +60,17 @@
     }
   }
 
+  &.icon-position-right {
+    .#{$ns}Collapse-header {
+      &.noTitle {
+        text-align: right;
+        .#{$ns}Collapse-arrow-wrap {
+          float: none;
+        }
+      }
+    }
+  }
+
   &.is-mobile {
     &.icon-position-right {
       .#{$ns}Collapse-header {

package/scss/components/_collapse.scss

@@ -45,6 +45,15 @@
       color: var(--collapse-default-header-hover-color);
     }
 
+    &.noTitle {
+      padding: 0;
+      background-color: unset;
+      &:hover {
+        background: unset;
+        color: inherit;
+      }
+    }
+
     &.is-mobile {
       background: none;
       border-radius: 0 !important;

package/scss/components/_column-toggler.scss

@@ -163,13 +163,29 @@
         background: var(--ColumnToggler-item-backgroundColor);
         border-radius: px2rem(2px);
         font-size: var(--fontSizeSm);
-        padding: var(--ColumnToggler-item-paddingY)
-          var(--ColumnToggler-item-paddingX);
+        padding: 0 var(--ColumnToggler-item-paddingX);
+        line-height: var(--ColumnToggler-lineHeight);
         height: var(--ColumnToggler-lineHeight);
         width: calc((100% - var(--ColumnToggler-item-margin) * 6) / 3);
         margin: var(--ColumnToggler-item-margin);
         float: left;
+        display: flex;
 
+        > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          min-width: 0;
+        }
+        > label {
+          width: 100%;
+        }
+        &-label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          min-width: 0;
+        }
         &:hover {
           background: var(--ColumnToggler-item-backgroundColor-onHover);
         }
@@ -178,28 +194,6 @@
           border: 1px solid var(--link-color);
         }
 
-        &-label {
-          display: inline-block;
-          width: calc(100% - var(--Checkbox--sm-size));
-
-          > span {
-            display: inline-block;
-            max-width: 100%;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            user-select: none;
-          }
-        }
-
-        label {
-          > i {
-            height: var(--fontSizeLg);
-            width: var(--fontSizeLg);
-            vertical-align: top;
-          }
-        }
-
         &-dragBar {
           display: inline-block;
           margin-left: 0;

package/scss/components/_debug.scss

@@ -19,6 +19,20 @@
     color: #009fff;
   }
 
+  &-inspectIcon {
+    width: 16px;
+    height: 16px;
+    position: relative;
+    top: 3px;
+
+    cursor: pointer;
+    margin-right: 8px;
+
+    &.is-active {
+      fill: #009fff;
+    }
+  }
+
   &-header {
     padding: var(--Drawer-header-padding);
     background: var(--Drawer-header-bg);
@@ -30,27 +44,31 @@
     pointer-events: none;
     position: absolute;
     outline: 1px dashed #1c76c4;
+    z-index: 2000;
   }
 
   &-activeBox {
     pointer-events: none;
     position: absolute;
-    outline: 1px #1c76c4;
+    outline: 1px #1c76c4 solid;
+    z-index: 2000;
   }
 
   &-tab {
-    overflow: hidden;
     border-bottom: 1px solid #3d3d3d;
+    height: 30px;
+    flex-shrink: 0;
   }
 
   &-tab > button {
     color: inherit;
     background: inherit;
-    float: left;
+    display: inline-block;
     border: none;
     outline: none;
     cursor: pointer;
-    padding: var(--gap-sm) var(--gap-md);
+    line-height: 29px;
+    padding: 0 var(--gap-md);
     transition: 0.3s;
     border-bottom: 1px solid transparent;
   }
@@ -92,6 +110,7 @@
     pointer-events: all;
     display: none;
     height: 100%;
+    flex-direction: column;
   }
 
   &-resize {
@@ -110,7 +129,7 @@
     position: absolute;
     font-size: 18px;
     right: 40px;
-    top: var(--gap-sm);
+    top: 2px;
     cursor: pointer;
   }
 
@@ -118,7 +137,7 @@
     position: absolute;
     font-size: 18px;
     right: var(--gap-sm);
-    top: var(--gap-sm);
+    top: 2px;
     cursor: pointer;
   }
 
@@ -132,7 +151,7 @@
       display: none;
     }
     .AMISDebug-content {
-      display: block;
+      display: flex;
     }
   }
 
@@ -174,6 +193,8 @@
   &-inspect {
     height: 100%;
     overflow: auto;
+    flex: 1;
+    min-height: 0;
 
     // 火狐浏览器
     scrollbar-width: thin;
@@ -204,4 +225,35 @@
   &-logLine {
     overflow-x: hidden;
   }
+
+  &-footer {
+    height: 30px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #2c2c2c;
+
+    > svg {
+      width: 11px;
+      flex-shrink: 0;
+    }
+
+    > input {
+      flex-grow: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      color: #cccccc;
+      padding: 0;
+      outline: none;
+      height: 100%;
+    }
+  }
+
+  &-value {
+    color: rgb(253, 151, 31);
+    padding: 0;
+    margin: 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/_popoverable.scss

@@ -15,6 +15,26 @@
 .#{$ns}Field--popOverAble {
   outline: none;
   position: relative;
+
+  &--flex {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$ns}Field-popOverWrap {
+    &-ellipsis {
+      width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: bottom;
+      display: inline-block;
+    }
+
+    &-noWrap {
+      white-space: nowrap;
+    }
+  }
 }
 
 .#{$ns}PopOverAble-popover {

package/scss/components/_steps.scss

@@ -12,6 +12,11 @@
     height: auto;
     line-height: px2rem(22px);
     &-container {
+      &.#{$ns}StepsItem-vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
       position: relative;
       &Icon {
         vertical-align: top;
@@ -36,7 +41,7 @@
         }
       }
       &Wrapper {
-        display: inline-block;
+        display: inline-flex;
         position: relative;
         .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {

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/_timeline.scss

@@ -1,3 +1,7 @@
+.#{$ns}Timeline {
+  min-height: #{px2rem(10px)};
+}
+
 .#{$ns}Timeline-vertical {
   display: flex;
   flex-flow: column;
@@ -171,8 +175,6 @@
 .#{$ns}Timeline-horizontal {
   display: flex;
   flex-flow: row;
-  margin-left: 50%;
-  transform: translateX(-50%);
 
   .#{$ns}TimelineItem {
     display: flex;