amis 1.7.0 → 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;
 
@@ -352,21 +354,19 @@
   --ButtonGroup--primary-isActive-bg: var(--primary);
 
   --Breadcrumb-item-fontSize: var(--fontSizeMd);
-  --Breadcrumb-item-default-color: #83868C;
-  --Breadcrumb-item-hover-color: #2468F2;
-  --Breadcrumb-item-active-color: #1C53C1;
-  --Breadcrumb-item-last-color: #151A26;
-  --BreadcrumbDropdown-item-default-color: #151A26;
-  --BreadcrumbDropdown-item-default-bg: #FFFFFF;
-  --BreadcrumbDropdown-item-hover-bg: #E9F0FD;
+  --Breadcrumb-item-default-color: #83868c;
+  --Breadcrumb-item-hover-color: #2468f2;
+  --Breadcrumb-item-active-color: #1c53c1;
+  --Breadcrumb-item-last-color: #151a26;
+  --BreadcrumbDropdown-item-default-color: #151a26;
+  --BreadcrumbDropdown-item-default-bg: #ffffff;
+  --BreadcrumbDropdown-item-hover-bg: #e9f0fd;
   --BreadcrumbDropdown-item-fontSize: var(--fontSizeSm);
   --BreadcrumbDropdown-item-height: #{px2rem(32px)};
   --BreadcrumbDropdown-item-paddingX: var(--gap-sm);
   --BreadcrumbDropdown-item-paddingY: calc(
-    (var(--BreadcrumbDropdown-item-height) - var(--fontSizeSm)) /
-      2
+    (var(--BreadcrumbDropdown-item-height) - var(--fontSizeSm)) / 2
   );
-  
 
   --Calendar-btn-bg: var(--info);
   --Calendar-btn-border: var(--Calendar-btn-bg);
@@ -482,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);
@@ -605,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);
 
@@ -665,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)};
@@ -858,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);
@@ -1068,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);
@@ -1217,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%)};
@@ -1316,6 +1339,7 @@
   --Tabs--line-content-padding: var(--gap-base) 0;
   --Tabs--line-linkMargin: 0 32px 0 0;
   --Tabs--line-linkPadding: 0 0 8px;
+  --Tabs--line-addPadding: 0 0 10px;
   --Tabs--line-padding: var(--gap-md);
   --Tabs--line-onHover-borderColor: var(--primary);
   --Tabs--line-onHover-color: var(--primary);
@@ -1339,14 +1363,21 @@
   --Tabs-onActive-color: #{$gray700};
   --Tabs-onDisabled-color: #{$gray600};
   --Tabs-onHover-borderColor: #{$gray200};
-  --Tabs-add-icon-size: #{px2rem(16px)};
+  --Tabs-add-icon-size: #{px2rem(15px)};
   --Tabs-add-icon-padding: #{px2rem(1px)};
   --Tabs-add-icon-margin: var(--gap-xs);
   --Tabs-add-margin: var(--gap-lg);
+  --Tabs-gray-color: #83868c;
   --Tabs-close-margin: #{var(--gap-xs)};
+  --Tabs-close-marginTop: #{px2rem(1px)};
   --Tabs-close-size: #{px2rem(12px)};
   --Tabs-link-maxWidth: #{px2rem(160px)};
 
+  --Tabs--sidebar-sideWidth: #{px2rem(62px)};
+  --Tabs--sidebar-sidePadding: #{px2rem(27px)};
+  --Tabs--sidebar-sideMargin: 0 0 #{px2rem(22px)} 0;
+  --Tabs--sidebar-iconSize: #{px2rem(24px)};
+  --Tabs--sidebar-iconMargin: #{px2rem(5px)};
 
   --Tabs--vertical-bg: var(--Table-thead-bg);
   --Tabs--vertical-width: #{px2rem(140px)};
@@ -1428,30 +1459,37 @@
   --Tooltip--attr-paddingY: #{px2rem(2px)};
   --Tooltip--attr-transition: all var(--animation-duration) ease-in-out;
   --Tooltip-arrow-color: var(--Tooltip-bg);
-  --Tooltip-arrow-color: var(--Tooltip-bg);
+  --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-arrow-height: #{px2rem(8px)};
   --Tooltip-arrow-height: 0.5rem;
   --Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
   --Tooltip-arrow-width: #{px2rem(16px)};
   --Tooltip-arrow-width: 1rem;
   --Tooltip-bg: var(--background);
+  --Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
   --Tooltip-body-color: var(--text-color);
-  --Tooltip-body-paddingX: var(--gap-sm);
+  --Tooltip-body-color--dark: var(--white);
+  --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;
   --Tooltip-title-bg: #{darken($white, 3%)};
   --Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
   --Tooltip-title-color: var(--text--loud-color);
-  --Tooltip-title-paddingX: var(--gap-sm);
-  --Tooltip-title-paddingY: var(--gap-xs);
+  --Tooltip-title-color--dark: var(--white);
+  --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);
@@ -1510,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/_alert.scss

@@ -13,7 +13,7 @@
   align-items: flex-start;
 
   &-icon {
-    margin-right: #{px2rem(8px)};
+    margin-right: var(--gap-sm);
     font-size: var(--fontSizeLg);
   }
 

package/scss/components/_barcode.scss

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

package/scss/components/_button-group.scss

@@ -68,6 +68,10 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:not(:last-child) {
+    border-top-right-radius: 0;
+  }
 }
 
 .#{$ns}ButtonGroup--vertical {
@@ -99,6 +103,17 @@
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+
+  /* 修正头尾的圆角 */
+  > .#{$ns}Button:first-child,
+  > .#{$ns}ButtonGroup:first-child > .#{$ns}Button:first-child {
+    border-top-right-radius: var(--Button-borderRadius);
+  }
+
+  > .#{$ns}Button:last-child,
+  > .#{$ns}ButtonGroup:last-child > .#{$ns}Button:last-child {
+    border-bottom-left-radius: var(--Button-borderRadius);
+  }
 }
 
 .#{$ns}ButtonGroup--tiled {

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);
 
@@ -316,4 +316,22 @@
       color: var(--InputFormula-icon-color-onActive);
     }
   }
+
+  &-ResultBox {
+    padding-right: 10px;
+    span.c-field {
+      background: #007bff;
+      padding: 3px 5px;
+      margin: 0 1px;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 4px;
+    }
+    span.c-func {
+      color: #ae4597;
+      font-weight: bold;
+      line-height: 14px;
+      padding: 0 2px;
+    }
+  }
 }

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,28 +1,24 @@
 .#{$ns}Progress {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  font-size: var(--fontSizeXs);
   &-line {
     display: inline-block;
     width: 100%;
-    margin-right: calc(-2em + -8px);
-    padding-right: calc(2em + 8px);
+    height: 10px;
 
     &-inter {
-      height: 10px;
+      height: 100%;
       background-color: var(--Progress-bar-backgroundColor);
       overflow: hidden;
       border-radius: var(--Progress-borderRadius);
     }
 
-    &-no-label {
-      padding-right: 0;
-      margin-right: 0;
-    }
-
     &-text {
       display: inline-block;
-      width: 2em;
+      flex-grow: 1;
       margin-left: 8px;
-      color: var(--text-color);
-      font-size: var(--fontSizeXs);
       white-space: nowrap;
       text-align: left;
       word-break: normal;
@@ -89,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);
+  }
+}