amis 1.8.0-beta.1 → 1.8.0-beta.13

package/scss/_properties.scss

@@ -59,6 +59,8 @@
 
   --boxShadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   --boxShadowSm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --boxTooltipShadow: 0 4px 6px 1px rgb(8 14 26 / 6%),
+    0 1px 10px 0 rgb(8 14 26 / 5%), 0 2px 4px -1px rgb(8 14 26 / 4%);
 
   --lineHeightBase: 1.5;
 
@@ -480,19 +482,26 @@
   --Carousel-svg-width: var(--gap-lg);
   --Carousel-transitionDuration: var(--animation-duration);
 
-  --Checkbox--full-inner-size: #{px2rem(12px)};
-  --Checkbox--sm--full-inner-size: #{px2rem(10px)};
+  --Checkbox--full-inner-size: #{px2rem(8px)};
+  --Checkbox--sm--full-inner-size: #{px2rem(8px)};
   --Checkbox--sm-inner-size: calc(var(--Checkbox--sm-size) / 2);
   --Checkbox--sm-size: #{px2rem(16px)};
-  --Checkbox-borderRadius: var(--borderRadius);
+  --Checkbox-borderRadius: #{px2rem(2px)};
   --Checkbox-color: var(--Form-input-borderColor);
   --Checkbox-gap: var(--gap-xs);
   --Checkbox-gb: #fff;
-  --Checkbox-size: var(--Form-fontSize);
+  --Checkbox-size: #{px2rem(16px)};
   --Checkbox-inner-size: calc(var(--Checkbox-size) / 2);
   --Checkbox-onHover-color: var(--info);
   --Checkbox-onDisabled-bg: #e5e7eb;
   --Checkbox-onDisabled-color: var(--text--muted-color);
+  --Checkbox-inner-onDisabled-bg: #d4d6d9;
+  --Checkbox-disabled-unchecked-bg: #f2f3f3;
+  --Checkbox-border-width: var(--Form-input-borderWidth);
+  --Checkbox-paddingX: #{px2rem(12px)};
+  --Checkbox-button-height: #{px2rem(32px)};
+  --Checkbox-button-line-height: #{px2rem(28px)};
+  --Checkbox-button-min-width: #{px2rem(80px)};
 
   --ColorPicker-bg: var(--white);
   --ColorPicker-borderColor: var(--Form-input-borderColor);
@@ -603,6 +612,16 @@
       ) / 2 - var(--DatePicker-borderWidth)
   );
   --DatePicker-placeholderColor: var(--Form-input-placeholderColor);
+  --DatePicker-minWidth: calc(
+    var(--fontSizeLg) * 5 +var(--DatePicker-paddingX) * 2 + var(
+        --Form-input-clearBtn-size
+      ) * 2
+  );
+  --DateRangePicker-minWidth: calc(
+    var(--fontSizeLg) * 8 +var(--DatePicker-paddingX) * 2 + var(
+        --Form-input-clearBtn-size
+      ) * 2
+  );
 
   --LocationPicker-borderRadius: var(--Form-input-borderWidth);
 
@@ -663,6 +682,9 @@
   --Form--horizontal-label-widthSm: #{px2rem(90px)};
   --Form--horizontal-label-widthXs: #{px2rem(60px)};
 
+  --Form--horizontal-justify-label-align: left;
+  --Form--horizontal-justify-value-align: right;
+
   --Form-control-widthBase: #{px2rem(200px)};
   --Form-control-widthLg: #{px2rem(320px)};
   --Form-control-widthMd: #{px2rem(240px)};
@@ -856,7 +878,7 @@
   --InputRange-padding: #{px2rem(20px)};
   --InputRange-onDisabled-color: var(--light);
   --InputRange-primaryColor: var(--primary);
-  --InputRange-track-height: #{px2rem(4px)};
+  --InputRange-track-height: #{px2rem(6px)};
   --InputRange-track-bg: #{$gray100};
   --InputRange-track-onDisabled-bg: var(--InputRange-onDisabled-color);
   --InputRange-track-onActive-bg: var(--InputRange-primaryColor);
@@ -1066,6 +1088,8 @@
   // --Nav-subNav-bg: #fafafa;
   --Nav-subItem-fontSize: var(--fontSizeBase);
   --Nav-subItem-onActiveBeforeBg: #e5eaeb;
+  --Nav-Item-maxWidth--tabs: #{px2rem(160px)};
+  --Nav-Item-height: #{px2rem(40px)};
 
   --Number-bg: var(--Form-input-bg);
   --Number-borderColor: var(--Form-input-borderColor);
@@ -1215,15 +1239,16 @@
   --Sparkline-line-color: var(--info);
   --Sparkline-area-color: #{rgba($info, 0.1)};
 
-  --Spinner--lg-height: #{px2rem(50px)};
-  --Spinner--lg-width: #{px2rem(50px)};
+  --Spinner--lg-height: #{px2rem(48px)};
+  --Spinner--lg-width: #{px2rem(48px)};
   --Spinner--sm-height: #{px2rem(16px)};
   --Spinner--sm-width: #{px2rem(16px)};
   // 修改自 https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg
   --Spinner-bg: url("data:image/svg+xml,%0A%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='8.042%25' y1='0%25' x2='65.682%25' y2='23.865%25' id='a'%3E%3Cstop stop-color='%23eee' stop-opacity='0' offset='0%25'/%3E%3Cstop stop-color='%23999' stop-opacity='.631' offset='63.146%25'/%3E%3Cstop stop-color='%23666' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)'%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18' id='Oval-2' stroke='url(%23a)' stroke-width='2'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/path%3E%3Ccircle fill='%23eee' cx='36' cy='18' r='1'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='0.9s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-  --Spinner-height: #{px2rem(26px)};
+  --Spinner-height: #{px2rem(32px)};
   --Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
-  --Spinner-width: #{px2rem(26px)};
+  --Spinner-width: #{px2rem(32px)};
+  --Spinner-color: #2468f2;
 
   --Switch-bgColor: #{$gray600};
   --Switch-borderColor: #{darken($gray600, 10%)};
@@ -1444,14 +1469,15 @@
   --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);
   --Tooltip-body-color--dark: var(--white);
-  --Tooltip-body-paddingX: var(--gap-sm);
+  --Tooltip-body-paddingX: var(--gap-base);
   --Tooltip-body-paddingY: var(--gap-sm);
   --Tooltip-borderColor: var(--borderColor);
   --Tooltip-borderRadius: var(--borderRadiusLg);
   --Tooltip-borderWidth: var(--borderWidth);
-  --Tooltip-boxShadow: var(--boxShadow);
+  --Tooltip-boxShadow: var(--boxTooltipShadow);
   --Tooltip-boxShadow--dark: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
   --Tooltip-fontSize: var(--fontSizeSm);
+  --Tooltip-fontWeight: var(--fontWeightMd);
   --Tooltip-maxWidth: #{px2rem(240px)};
   --Tooltip-minWidth: auto;
   --Tooltip-title-fontWeight: bold;
@@ -1459,10 +1485,11 @@
   --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
   --Tooltip-title-color: var(--text--loud-color);
   --Tooltip-title-color--dark: var(--white);
-  --Tooltip-title-paddingX: var(--gap-sm);
-  --Tooltip-title-paddingY: var(--gap-xs);
+  --Tooltip-title-paddingX: var(--gap-base);
+  --Tooltip-title-paddingY: var(--gap-sm);
 
   --Transfer-title-bg: #f6f8f8;
+  --Transfer-selection-maxHeight: #{px2rem(350px)};
 
   --Tree-indent: var(--gap-md);
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
@@ -1521,6 +1548,10 @@
   --ColumnToggler-fontColor: #151a26;
   --ColumnToggler-item-backgroundColor: #f6f7f8;
   --ColumnToggler-item-backgroundColor-onHover: rgba(36, 104, 242, 0.1);
+  --ColumnToggler-item-paddingX: #{px2rem(8px)};
+  --ColumnToggler-item-paddingY: #{px2rem(4px)};
+  --ColumnToggler-item-margin: #{px2rem(4px)};
+  --ColumnToggler-item-dragBar-color: #d8d8d8;
 
   --InputFormula-header-bgColor: #fafafa;
   --InputFormula-icon-size: #{px2rem(24px)};

package/scss/components/_barcode.scss

@@ -1,5 +1,5 @@
 .#{$ns}BarCode {
-  > svg {
+  > img {
     display: block;
     margin: 0 auto;
   }

package/scss/components/_carousel.scss

@@ -149,6 +149,7 @@
     text-align: center;
 
     .#{$ns}Carousel-dot {
+      cursor: pointer;
       display: inline-block;
       height: var(--Carousel-dot-width);
       width: var(--Carousel-dot-height);

package/scss/components/_column-toggler.scss

@@ -155,14 +155,12 @@
         background: var(--ColumnToggler-item-backgroundColor);
         border-radius: px2rem(2px);
         font-size: var(--fontSizeSm);
-        padding: px2rem(4px) px2rem(8px);
+        padding: var(--ColumnToggler-item-paddingY)
+          var(--ColumnToggler-item-paddingX);
         height: var(--ColumnToggler-lineHeight);
-        width: calc((100% - 24px) / 3);
+        width: calc((100% - var(--ColumnToggler-item-margin) * 6) / 3);
+        margin: var(--ColumnToggler-item-margin);
         float: left;
-        margin: px2rem(4px);
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
 
         &:hover {
           background: var(--ColumnToggler-item-backgroundColor-onHover);
@@ -172,6 +170,20 @@
           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);
@@ -181,10 +193,12 @@
         }
 
         &-dragBar {
+          display: inline-block;
           margin-left: 0;
           margin-right: var(--gap-xs);
+          vertical-align: super;
+          color: var(--ColumnToggler-item-dragBar-color);
           cursor: move;
-          color: #d8d8d8;
         }
       }
     }
@@ -215,10 +229,6 @@
 
         &:last-child {
           justify-content: flex-end;
-
-          button {
-            width: 72px;
-          }
         }
       }
     }

package/scss/components/_debug.scss

@@ -69,9 +69,9 @@
     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;
+    box-shadow: 0 4px 6px 0 rgb(8 14 26 / 4%), 0 1px 10px 0 rgb(8 14 26 / 5%),
+      0 2px 4px -1px rgb(8 14 26 / 6%);
+    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
     padding-top: 14px;
     padding-left: 6px;
     cursor: pointer;

package/scss/components/_formula.scss

@@ -226,7 +226,7 @@
 
     &-item {
       cursor: pointer;
-      padding: 0 var(--gap-lg);
+      padding: 0 #{px2rem(30px)};
       height: var(--gap-xl);
       line-height: var(--gap-xl);
 

package/scss/components/_nav.scss

@@ -16,6 +16,34 @@
       vertical-align: middle;
     }
 
+    &-overflow {
+      min-height: var(--Nav-Item-height) !important;
+      max-height: calc(var(--Nav-Item-height) * 5);
+      max-width: var(--Nav-Item-maxWidth--tabs);
+      font-size: var(--Nav-subItem-fontSize);
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      .#{$ns}Nav-subItems {
+        margin-block-start: 0;
+        margin-block-end: 0;
+      }
+
+      .#{$ns}Nav-item {
+        max-width: var(--Nav-Item-maxWidth--tabs);
+        height: var(--Nav-Item-height);
+
+        > a {
+          border: none !important;
+          display: block !important;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          user-select: none;
+        }
+      }
+    }
+
     &--tabs {
       border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
 
@@ -23,6 +51,8 @@
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
         display: inline-block;
         position: relative;
+        max-width: var(--Nav-Item-maxWidth--tabs);
+
         > a {
           font-size: var(--Tabs-linkFontSize);
           display: block;
@@ -35,11 +65,15 @@
           margin-right: px2rem(2px);
           padding: var(--gap-sm) var(--gap-xl);
           cursor: pointer;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
         }
 
         &:hover > a,
         > a:focus {
           border-color: var(--Tabs-onHover-borderColor);
+          border-bottom: none; // 外层已经有border-bottom了
           text-decoration: none;
         }
 
@@ -59,12 +93,22 @@
           border-bottom-color: var(--Tabs-content-bg);
         }
       }
+
+      .#{$ns}Nav-item-overflow {
+        &:hover > a,
+        > a:focus,
+        &.is-overflow-opened > a {
+          color: var(--primary);
+          border-color: transparent;
+        }
+      }
     }
 
     &--stacked {
       min-height: px2rem(50px);
 
-      .#{$ns}Nav-item, .#{$ns}Badge {
+      .#{$ns}Nav-item,
+      .#{$ns}Badge {
         position: relative;
         display: flex;
         flex-wrap: wrap;
@@ -77,7 +121,8 @@
           left: 0;
           display: none;
           line-height: 0;
-          > .icon, > .#{$ns}Badge > .icon {
+          > .icon,
+          > .#{$ns}Badge > .icon {
             color: var(--icon-color);
 
             &:hover {
@@ -106,7 +151,7 @@
             font-size: 12px;
             text-align: center;
             color: var(--white);
-            background: var(--success)
+            background: var(--success);
           }
         }
 
@@ -150,8 +195,7 @@
         > .#{$ns}Badge > a:hover,
         > .#{$ns}Badge > a:focus,
         > .#{$ns}Badge > a:hover + .#{$ns}Nav-item-atcions,
-        > .#{$ns}Badge > a:focus + .#{$ns}Nav-item-atcions
-         {
+        > .#{$ns}Badge > a:focus + .#{$ns}Nav-item-atcions {
           border-color: var(--Nav-item-onHover-color);
           text-decoration: none;
           background: var(--Nav-item-onHover-bg);
@@ -189,7 +233,8 @@
           }
         }
 
-        &.is-unfolded > , &.is-unfolded > .#{$ns}Badge > {
+        &.is-unfolded >,
+        &.is-unfolded > .#{$ns}Badge > {
           a .#{$ns}Nav-itemToggler {
             transform: rotate(180deg) scale(0.8);
           }

package/scss/components/_progress.scss

@@ -1,12 +1,15 @@
 .#{$ns}Progress {
   display: flex;
   align-items: center;
+  color: var(--text-color);
+  font-size: var(--fontSizeXs);
   &-line {
     display: inline-block;
     width: 100%;
+    height: 10px;
 
     &-inter {
-      height: 10px;
+      height: 100%;
       background-color: var(--Progress-bar-backgroundColor);
       overflow: hidden;
       border-radius: var(--Progress-borderRadius);
@@ -16,8 +19,6 @@
       display: inline-block;
       flex-grow: 1;
       margin-left: 8px;
-      color: var(--text-color);
-      font-size: var(--fontSizeXs);
       white-space: nowrap;
       text-align: left;
       word-break: normal;
@@ -84,9 +85,6 @@
       width: 100%;
       margin: 0;
       padding: 0;
-      color: var(--text-color);
-      font-size: 1em;
-      line-height: 1;
       white-space: normal;
       text-align: center;
       transform: translate(-50%, -50%);

package/scss/components/_pull-refresh.scss

@@ -0,0 +1,25 @@
+.#{$ns}PullRefresh {
+
+  &-wrap {
+    position: relative;
+    height: 100%;
+  }
+
+  &-header {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    text-align: center;
+    transform: translateY(-100%);
+    overflow: hidden;
+    padding: var(--gap-xs) 0;
+    min-height: var(--gap-lg);
+    line-height: var(--gap-lg);
+    color: #999;
+  }
+
+  .loading-icon {
+    animation: var(--Button-animation-spin);
+    margin-right: var(--gap-xs);
+  }
+}

package/scss/components/_spinner.scss

@@ -18,81 +18,159 @@
   }
 }
 
-.is-spin {
-  animation: spin 2s linear infinite;
-}
-
-.#{$ns}Spinner-overlay {
-  position: absolute;
-  z-index: 10;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--Spinner-overlay-bg);
-  transition: ease-out opacity var(--animation-duration);
-
+.#{$ns}Spinner {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   opacity: 0;
+  transition: ease-out opacity var(--animation-duration);
 
   &.in {
     opacity: 1;
   }
-}
 
-.#{$ns}Spinner {
-  width: var(--Spinner-width);
-  height: var(--Spinner-height);
-  transform: translateZ(0);
-  display: inline-flex;
-  background: var(--Spinner-bg);
-  background-size: 100%;
+  .#{$ns}Spinner-icon {
+    width: var(--Spinner-width);
+    height: var(--Spinner-height);
+    position: relative;
+    transform: translateZ(0);
+    animation: spin 2s linear infinite;
+    transition: ease-out all var(--animation-duration);
+
+    &--default {
+      background: var(--Spinner-bg);
+      background-size: 100%;
+      animation: none;
+    }
+
+    &--simple {
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        width: 100%;
+        height: 100%;
+        color: var(--Spinner-color);
+      }
+
+      svg.icon {
+        top: 0;
+
+        path {
+          fill: var(--Spinner-color);
+        }
+      }
+
+      i.icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: var(--Spinner-width);
+      }
+    }
+
+    &--custom {
+      width: auto;
+      height: auto;
+    }
+
+    &--lg {
+      width: var(--Spinner--lg-width);
+      height: var(--Spinner--lg-height);
+
+      i.icon {
+        font-size: var(--Spinner--lg-height);
+      }
+    }
+
+    &--sm {
+      width: var(--Spinner--sm-width);
+      height: var(--Spinner--sm-height);
+
+      i.icon {
+        font-size: var(--Spinner--sm-height);
+      }
+    }
+  }
 
-  &--lg {
-    width: var(--Spinner--lg-width);
-    height: var(--Spinner--lg-height);
+  .#{$ns}Spinner-tip {
+    margin: px2rem(12px) 0 0 0;
+    word-break: keep-all;
+    white-space: nowrap;
+    color: var(--Spinner-color);
   }
 
-  &--sm {
-    width: var(--Spinner--sm-width);
-    height: var(--Spinner--sm-height);
+  &.#{$ns}Spinner-tip--top {
+    flex-direction: column-reverse;
+
+    .#{$ns}Spinner-tip {
+      margin: 0 0 px2rem(12px) 0;
+    }
   }
 
-  transition: ease-out all var(--animation-duration);
+  &.#{$ns}Spinner-tip--right {
+    flex-direction: row;
 
-  &--icon {
-    background: transparent;
-    animation: spin 2s linear infinite;
-    width: 16px; // reload 那个 icon 必须用这个高宽
-    height: 16px;
-    svg.icon {
-      width: 16px;
-      height: 16px;
-      top: 0;
+    .#{$ns}Spinner-tip {
+      margin: 0 0 0 px2rem(12px);
     }
   }
-}
 
-// 当启用 overlay 的时候，应该是居中模式。
-.#{$ns}Spinner--overlay {
-  position: absolute;
-  z-index: 11;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-}
+  &.#{$ns}Spinner-tip--bottom {
+    flex-direction: column;
+
+    .#{$ns}Spinner-tip {
+      margin: px2rem(12px) 0 0 0;
+    }
+  }
+
+  &.#{$ns}Spinner-tip--left {
+    flex-direction: row-reverse;
+
+    .#{$ns}Spinner-tip {
+      margin: 0 px2rem(12px) 0 0;
+    }
+  }
 
-.#{$ns}Spinner--overlay.#{$ns}Spinner--lg {
-  width: var(--Spinner--lg-width);
-  height: var(--Spinner--lg-height);
-  line-height: var(--Spinner--lg-height);
+  &--overlay {
+    position: absolute;
+    z-index: 11;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
 }
 
-@include media-breakpoint-up(md) {
-  .#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
-    left: var(--Layout-aside-width);
+.#{$ns}Spinner-overlay {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--Spinner-overlay-bg);
+  transition: ease-out opacity var(--animation-duration);
+  opacity: 0;
+
+  &.in {
+    opacity: 1;
   }
+}
 
-  .#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
-    left: var(--Layout-aside--folded-width);
+// spinner渲染器scss
+.#{$ns}Spinner-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .#{$ns}Spinner {
+    position: absolute;
+    z-index: 11;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
   }
 }