amis 1.4.2-beta.6 → 1.5.0

package/scss/components/_nav.scss

@@ -75,8 +75,8 @@
           cursor: move;
           position: absolute;
           left: 0;
-          top: px2rem(11px);
           display: none;
+          line-height: 0;
           > .icon, > .#{$ns}Badge > .icon {
             color: var(--icon-color);
 
@@ -174,12 +174,6 @@
           pointer-events: none;
         }
 
-        &.active,
-        &.is-active {
-          background: var(--Nav-item-onActive-bg) !important;
-        }
-
-
         &.active > a,
         &.is-active > .#{$ns}Nav-item-atcions,
         &.is-active > a,
@@ -188,6 +182,7 @@
         &.is-active > .#{$ns}Badge > a {
           color: var(--Nav-item-onActive-color);
           position: relative;
+          background: var(--Nav-item-onActive-bg);
 
           &::after {
             transform: scaleY(1);

package/scss/components/_page.scss

@@ -68,6 +68,35 @@
   &-asideTplWrapper {
     padding: var(--gap-xs);
   }
+
+  &-asideResizor {
+    position: absolute;
+    right: -0.375rem;
+    top: 50%;
+    cursor: ew-resize;
+    writing-mode: vertical-lr;
+    width: 0.75rem;
+    height: 1.5rem;
+    margin-top: -0.75rem;
+    border: 0.0625rem solid #dee2e6;
+    background-color: #fff;
+    border-radius: 0.142rem;
+    font-size: 12px;
+    line-height: 0.625rem;
+    text-align: center;
+    user-select: none;
+    color: #666;
+
+    &: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);
+    }
+
+    &:after {
+      content: '···';
+    }
+  }
 }
 
 .#{$ns}Page-toolbar {
@@ -93,9 +122,13 @@
       border: inherit;
     }
 
-    min-width: var(--Page-aside-width);
-    max-width: var(--Page-aside-maxWidth);
+    width: var(--Page-aside-width);
     border-right: var(--borderWidth) solid var(--borderColor);
+
+    &--withWidth {
+      min-width: var(--Page-aside-width);
+      max-width: var(--Page-aside-maxWidth);
+    }
   }
 
   .#{$ns}Page--withSidebar {

package/scss/components/_picker-columns.scss

@@ -0,0 +1,124 @@
+.#{$ns}PickerColumns {
+  position: relative;
+  background-color: var(--PickerColumns-bg);
+  user-select: none;
+
+  &-popOver {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 0 var(--gap-sm);
+  }
+
+  &-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--PickerColumns-toolbar-height);
+  }
+
+  &-cancel,
+  &-confirm {
+    height: 100%;
+    padding: var(--PickerColumns-action-padding);
+    font-size: var(--PickerColumns-action-fontSize);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &-confirm {
+    color: var(--PickerColumns-confirmAction-color);
+  }
+
+  &-cancel {
+    color: var(--PickerColumns-cancelAction-color);
+  }
+
+  &-title {
+    max-width: 50%;
+    font-weight: 500;
+    font-size: var(--PickerColumns-title-fontSize);
+    line-height: var(--PickerColumns-title-lineHeight);
+    text-align: center;
+  }
+
+  &-columns {
+    touch-action: none;
+    position: relative;
+    display: flex;
+    cursor: grab;
+  }
+
+  &-loading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--PickerColumns-loadingIcon-color);
+    background-color: var(--PickerColumns-loadingMask-color);
+  }
+
+  &-frame {
+    position: absolute;
+    top: 50%;
+    right: var(--gap-md);
+    left: var(--gap-md);
+    z-index: 2;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+        180deg,
+        hsla(0, 0%, 100%, 0.9),
+        hsla(0, 0%, 100%, 0.4)
+      ),
+      linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    transform: translateZ(0);
+    pointer-events: none;
+  }
+
+  &-column {
+    flex: 1;
+    overflow: hidden;
+    font-size: var(--PickerColumns-option-fontSize);
+  }
+
+  &-columnWrapper {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
+  }
+
+  &-columnItem {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--PickerColumns-optionText-color);
+  }
+  &-columnItem.is-disabled {
+    cursor: not-allowed;
+    opacity: var(--PickerColumns-optionDisabled-opacity);
+  }
+}

package/scss/components/_popover.scss

@@ -38,4 +38,17 @@
     bottom: 0;
     background: transparent;
   }
+
+  &-isMobile {
+    .#{$ns}PopOver-overlay {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &--leftBottomLeftTop {
+    margin-top: px2rem(4px);
+  }
+  &--leftTopLeftBottom {
+    margin-top: px2rem(-4px);
+  }
 }

package/scss/components/_portlet.scss

@@ -0,0 +1,51 @@
+.#{$ns}Portlet {
+    border: var(--Portlet-borderWidth) var(--Portlet-borderStyle) var(--Portlet-borderColor);
+    border-radius: var(--Portlet-borderRadius);
+
+    padding: var(--gap-base);
+
+    &-tab.unactive-select {
+        .is-active {
+            a:first-child,
+            &:hover > a:first-child,
+            > a:first-child:focus {
+                border: none !important;
+                color: inherit !important;
+                cursor: auto !important;
+            }
+        }
+    }
+
+    &-tab.no-divider {
+        .#{$ns}Tabs-links {
+            border-bottom: none;
+        }
+    }
+
+    .#{$ns}Tabs-pane {
+        padding: unset;
+    }
+
+    &-toolbar {
+        display: inline-flex;
+        float: right;
+        justify-content: flex-end;
+
+        .#{$ns}Button {
+            margin-left: calc(var(--gap-xs));
+        }
+    }
+
+    &-header-desc {
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+        margin-left: var(--gap-base);
+    }
+}
+
+.#{$ns}Portlet.no-header {
+    .#{$ns}Portlet-tab .#{$ns}Tabs-links {
+        display: none;
+    }
+}

package/scss/components/_progress.scss

@@ -1,38 +1,146 @@
 .#{$ns}Progress {
-  height: 10px;
-  background: #ebebeb;
-  overflow: hidden;
-  border-radius: var(--Progress-borderRadius);
-
-  &-bar {
-    float: left;
-    width: 0;
-    height: 100%;
-    font-size: 12px;
-    line-height: 10px;
-    color: #fff;
-    text-align: center;
-    background: var(--primary);
-    transition: width var(--animation-duration) ease;
-    border-radius: var(--Progress-borderRadius);
-
-    &--stripe {
-      background-image: linear-gradient(
-        45deg,
-        rgba(255, 255, 255, 0.15) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgba(255, 255, 255, 0.15) 50%,
-        rgba(255, 255, 255, 0.15) 75%,
-        transparent 75%,
-        transparent
-      );
-      background-size: 2rem 2rem;
-    }
-
-    &--animate {
-      animation: progress-bar-stripes 1s linear infinite;
+  &-line {
+    display: inline-block;
+    width: 100%;
+    margin-right: calc(-2em + -8px);
+    padding-right: calc(2em + 8px);
+
+    &-inter {
+      height: 10px;
+      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;
+      margin-left: 8px;
+      color: var(--text-color);
+      font-size: var(--fontSizeXs);
+      white-space: nowrap;
+      text-align: left;
+      word-break: normal;
+      .icon {
+        font-size: 15px;
+      }
+    }
+
+    &-bar {
+      float: left;
+      width: 0;
+      height: 100%;
+      font-size: 12px;
+      line-height: 10px;
+      text-align: center;
+      background: var(--primary);
+      transition: width var(--animation-duration) ease;
+
+      &--stripe {
+        background-image: linear-gradient(
+          45deg,
+          rgba(255, 255, 255, 0.15) 25%,
+          transparent 25%,
+          transparent 50%,
+          rgba(255, 255, 255, 0.15) 50%,
+          rgba(255, 255, 255, 0.15) 75%,
+          transparent 75%,
+          transparent
+        );
+        background-size: 2rem 2rem;
+      }
+
+      &--animate {
+        position: relative;
+        transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: var(--Progress-animate-backgroundColor);
+          border-radius: 10px;
+          opacity: 0;
+          animation: progress-bar-active 2.4s cubic-bezier(0.23, 1, 0.32, 1)
+            infinite;
+          content: '';
+        }
+      }
+      &--stripe-animate {
+        animation: progress-bar-stripes 1s linear infinite;
+      }
+    }
+  }
+
+  &-circle {
+    width: 120px;
+    height: 120px;
+    position: relative;
+    &-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      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%);
+      .icon {
+        font-size: 1.2em;
+      }
     }
+    .bg-warning-circle {
+      &-path {
+        stroke: var(--warning);
+      }
+    }
+    .bg-danger-circle {
+      &-path {
+        stroke: var(--danger);
+      }
+    }
+    .bg-info-circle {
+      &-path {
+        stroke: var(--info);
+      }
+    }
+    .bg-success-circle {
+      &-path {
+        stroke: var(--success);
+      }
+    }
+    .bg-primary-circle {
+      &-path {
+        stroke: var(--primary);
+      }
+    }
+  }
+}
+
+@keyframes progress-bar-active {
+  0% {
+    transform: translateX(-100%) scaleX(0);
+    opacity: 0.1;
+  }
+
+  20% {
+    transform: translateX(-100%) scaleX(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: translateX(0) scaleX(1);
+    opacity: 0;
   }
 }
 

package/scss/components/_result-box.scss

@@ -1,5 +1,6 @@
 .#{$ns}ResultBox {
   @include input-input();
+  @include input-border();
   flex-wrap: wrap;
   padding: 0 px2rem(3px);
   min-height: var(--Form-input-height);

package/scss/components/_spinner.scss

@@ -62,11 +62,12 @@
   &--icon {
     background: transparent;
     animation: spin 2s linear infinite;
-    width: var(--fontSizeLg);
-    height: var(--fontSizeLg);
+    width: 16px; // reload 那个 icon 必须用这个高宽
+    height: 16px;
     svg.icon {
-      width: var(--fontSizeLg);
-      height: var(--fontSizeLg);
+      width: 16px;
+      height: 16px;
+      top: 0;
     }
   }
 }

package/scss/components/_status.scss

@@ -8,7 +8,7 @@
 
   &-label {
     font-size: var(--fontSizeSm);
-    margin-left: var(--gap-sm);
+    margin-left: var(--gap-xs);
   }
 
   @keyframes animation-rolling_red {

package/scss/components/_table.scss

@@ -284,6 +284,12 @@
       }
     }
 
+    &--checkOnItemClick {
+      > tbody > tr {
+        cursor: pointer;
+      }
+    }
+
     > thead > tr {
       > th {
         background: var(--Table-thead-bg);
@@ -543,6 +549,9 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+      > svg {
+        vertical-align: middle;
+      }
     }
 
     > tbody > tr > td.#{$ns}Table-expandCell {
@@ -873,6 +882,9 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+    > svg {
+      vertical-align: -2px;
+    }
   }
 
   &-table > tbody > tr:hover .#{$ns}Table-dragBtn,
@@ -891,6 +903,26 @@
     top: 0;
     left: 0;
   }
+
+  &--autoFillHeight {
+    margin-bottom: 0;
+    > .#{$ns}Table-contentWrap {
+      > .#{$ns}Table-content table {
+        border-top: none; // 不然会导致拖动时顶部露出内容
+      }
+      > .#{$ns}Table-content table thead {
+        position: sticky; // 简单实现表头吸顶效果，不考虑 IE 11 不然太麻烦
+        top: 0;
+        z-index: 1; // 由于 badge 导致 tbody 里 tr 的 position: relative 了
+      }
+    }
+    > .#{$ns}Table-fixedTop {
+      display: none;
+    }
+    > .#{$ns}Table-footToolbar {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .#{$ns}InputTable-toolbar {

package/scss/components/_toast.scss

@@ -55,7 +55,9 @@
 
 .#{$ns}Toast {
   display: flex;
-  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
 
   &-wrap {
     pointer-events: none;
@@ -75,7 +77,6 @@
   color: var(--Toast-color);
   position: relative;
   opacity: var(--Toast-opacity);
-  cursor: pointer;
   opacity: 0;
   transform: translateZ(0);
 
@@ -95,22 +96,49 @@
   }
 
   &-close {
-    color: var(--Toast-close-color);
     display: inline-flex;
-    margin-left: var(--gap-xs);
+    font-size: var(--fontSizeLg);
+    line-height: var(--gap-xl);
+    height: var(--gap-xl);
+    color: var(--Toast-close-color);
+    margin-left: var(--gap-sm);
     opacity: 0.8;
+    align-items: center;
+    cursor: pointer;
 
     &:hover {
       color: var(--Toast-close--onHover-color);
       opacity: 1;
     }
+
+    & > svg {
+      top: 0;
+    }
   }
 
-  &-body {
-    display: inline-block;
-    vertical-align: middle;
-    white-space: pre-wrap;
-    flex-grow: 1;
+  &-content {
+    flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .#{$ns}Toast-title {
+      color: var(--text-color);
+      font-size: var(--fontSizeBase);
+      font-weight: 500;
+      line-height: var(--gap-xl);
+      margin-bottom: var(--gap-xs);
+    }
+
+    .#{$ns}Toast-body {
+      font-size: var(--fontSizeSm);
+      display: inline-block;
+      vertical-align: middle;
+      white-space: pre-wrap;
+      flex-grow: 1;
+      line-height: var(--gap-xl);
+    }
   }
 
   &-icon {
@@ -118,8 +146,10 @@
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
-
-    margin-right: var(--gap-xs);
+    margin-right: var(--gap-sm);
+    height: var(--gap-xl);
+    line-height: var(--gap-xl);
+    align-items: center;
 
     > svg {
       top: 0;