amis 1.4.2-beta.13 → 1.4.2-beta.15

package/scss/components/_grid-nav.scss

@@ -0,0 +1,128 @@
+.u-hairline::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--borderColorLight);
+  z-index: 1;
+  transform: scale(0.5);
+}
+
+.#{$ns}GridNav {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-top {
+    position: relative;
+
+    &::after {
+      border-top-width: px2rem(1px);
+    }
+  }
+}
+
+.#{$ns}GridNavItem {
+  position: relative;
+  box-sizing: border-box;
+
+  &--square {
+    height: 0;
+    position: relative;
+  }
+
+  &-icon {
+    width: var(--rv-grid-item-icon-size);
+  }
+
+  &-text {
+    color: var(--text-color);
+    font-size: var(--fontSizeSm);
+    line-height: 1.5;
+    word-break: break-all;
+    flex-shrink: 0;
+  }
+
+  &-icon + &-text {
+    margin-top: px2rem(8px);
+  }
+
+  &-image {
+    display: inline-block;
+
+    svg,
+    img {
+      max-width: 100%;
+      display: block;
+      width: 60%;
+      margin: 0 auto;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: var(--gap-md) var(--gap-sm);
+    background-color: var(--white);
+    position: relative;
+
+    .#{$ns}Badge-text {
+      z-index: 10;
+    }
+
+    &--border::after {
+      border-width: 0 var(--borderWidth) var(--borderWidth) 0;
+    }
+
+    &--square {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--horizontal {
+      flex-direction: row;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 0 0 var(--gap-sm);
+      }
+    }
+
+    &--reverse {
+      flex-direction: column-reverse;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 0 var(--gap-sm);
+      }
+    }
+
+    &--horizontal &--reverse {
+      flex-direction: row-reverse;
+
+      .#{$ns}GridNavItem-text {
+        margin: 0 var(--gap-sm) 0 0;
+      }
+    }
+
+    &--surround {
+      &::after {
+        border-width: var(--borderWidth);
+      }
+    }
+
+    &--clickable {
+      cursor: pointer;
+    }
+  }
+}

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);
 

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

@@ -549,6 +549,9 @@
       width: px2rem(1px);
       padding-right: 0;
       cursor: move;
+      > svg {
+        vertical-align: middle;
+      }
     }
 
     > tbody > tr > td.#{$ns}Table-expandCell {
@@ -879,6 +882,9 @@
       text-decoration: none;
       color: var(--icon-onHover-color);
     }
+    > svg {
+      vertical-align: -2px;
+    }
   }
 
   &-table > tbody > tr:hover .#{$ns}Table-dragBtn,

package/scss/components/form/_combo.scss

@@ -159,6 +159,8 @@
 
     .#{$ns}Combo-itemDrager {
       padding: var(--Combo--horizontal-dragger-top) px2rem(6px) 0 0;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -224,6 +226,8 @@
       position: absolute;
       top: var(--Combo--horizontal-dragger-top);
       left: px2rem(-30px);
+      display: flex;
+      align-items: center;
     }
 
     &.is-draggable {

package/scss/components/form/_tree.scss

@@ -59,6 +59,10 @@
     pointer-events: none;
   }
 
+  &.is-draggable {
+    position: relative;
+  }
+
   &--outline &-sublist &-item--isLeaf {
     &:before {
       position: absolute;
@@ -101,6 +105,10 @@
     }
   }
 
+  &.is-draggable &-itemLabel:hover::after {
+    display: none;
+  }
+
   &-item-icons {
     visibility: hidden;
     transition: visibility var(--animation-duration) ease;
@@ -227,6 +235,11 @@
     width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
   }
 
+  &-itemDrager {
+    cursor: move;
+    color: var(--icon-color);
+  }
+
   &-spinner {
     margin-right: var(--gap-xs);
   }
@@ -274,4 +287,33 @@
   &-placeholder {
     color: var(--text--muted-color);
   }
+
+  &-dropIndicator {
+    position: absolute;
+    height: px2rem(2px);
+    background-color: var(--Tree-itemLabel--onChecked-color);
+    border-radius: px2rem(1px);
+    z-index: 1;
+
+    &::after {
+      position: absolute;
+      top: px2rem(-3px);
+      left: px2rem(-6px);
+      width: px2rem(8px);
+      height: px2rem(8px);
+      background-color: transparent;
+      border: px2rem(2px) solid var(--Tree-itemLabel--onChecked-color);
+      border-radius: 50%;
+      content: '';
+    }
+
+    &--hover {
+      border-radius: 0;
+      background-color: var(--Tree-item-onHover-bg);
+
+      &::after {
+        display: none;
+      }
+    }
+  }
 }

package/scss/themes/_common.scss

@@ -38,6 +38,7 @@
 @import '../components/dropdown';
 @import '../components/each';
 @import '../components/collapse';
+@import '../components/collapse-group';
 @import '../components/color';
 @import '../components/condition-builder';
 @import '../components/context-menu';
@@ -69,6 +70,7 @@
 @import '../components/icon';
 @import '../components/steps';
 @import '../components/portlet';
+@import '../components/grid-nav';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';

package/scss/themes/_cxd-variables.scss

@@ -229,15 +229,14 @@ $R8: 50%;
   --ColorPicker-onDisabled-bg: #f5f5f5;
   --ColorPicker-onDisabled-color: #999;
 
-  --Collapse-border: #{px2rem(1px)} solid #{$G8};
-  --Collapse-border-color: #{$G8};
+  --Collapse-border: #{px2rem(1px)} solid #EBEDF5;
+  --Collapse-border-color: #EBEDF5;
   --Collapse-header-fontSize: #{$T3};
   --Collapse-header-fontWeight: #{$W3};
-  --Collapse-header-padding: #{px2rem(16px)};
-  --Collapse-header-bg: #{$G10};
-  --Collapse-header-onHover-bg: #{$G9};
-  --Collapse-header-collapsed-border: none;
-  --Collapse-header-collapsed-borderTop: none;
+  --Collapse-header-padding: #{px2rem(14px)};
+  --Collapse-header-bg: #F6F7FA;
+  --Collapse-header-onHover-bg: #F3F9FE;
+  --Collapse-header-bg-disabled-color: #F6F7FA;
   --Collapse-header-collapsed-borderBottom: none;
   --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};

package/scss/themes/cxd.scss

@@ -291,6 +291,7 @@
           svg {
             width: #{px2rem(12px)};
             height: #{px2rem(12px)};
+            top: 0;
           }
         }
 

package/sdk/ang-ie11.css

@@ -23925,8 +23925,8 @@ readers do not read off random characters that represent icons */
   cursor: move;
   position: absolute;
   left: 0;
-  top: 0.6875rem;
   display: none;
+  line-height: 0;
 }
 
 .amis-scope .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager > .icon,
@@ -24800,13 +24800,14 @@ readers do not read off random characters that represent icons */
 .amis-scope .a-Spinner--icon {
   background: transparent;
   animation: spin 2s linear infinite;
-  width: 1rem;
-  height: 1rem;
+  width: 16px;
+  height: 16px;
 }
 
 .amis-scope .a-Spinner--icon svg.icon {
-  width: 1rem;
-  height: 1rem;
+  width: 16px;
+  height: 16px;
+  top: 0;
 }
 
 .amis-scope .a-Spinner--overlay {
@@ -25070,7 +25071,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .a-Collapse {
   border: none;
   padding: 0;
-  margin-bottom: 0.75rem;
+  line-height: 1.25rem;
 }
 
 .amis-scope .a-Collapse-header {
@@ -25080,6 +25081,7 @@ readers do not read off random characters that represent icons */
   padding: 1.125rem 0 0.25rem 0;
   margin: 0;
   border-bottom: 0.0625rem solid #dfe2e6;
+  cursor: pointer;
   background: transparent;
 }
 
@@ -25100,8 +25102,7 @@ readers do not read off random characters that represent icons */
   display: inline-block;
   width: 1rem;
   text-align: center;
-  margin-right: 0.5rem;
-  cursor: pointer;
+  margin-right: 0.25rem;
 }
 
 .amis-scope .a-Collapse-arrow:before {
@@ -25110,37 +25111,50 @@ readers do not read off random characters that represent icons */
   display: inline-block;
   width: 0.375rem;
   height: 0.375rem;
-  top: -0.25rem;
+  top: -0.125rem;
   border-color: #58666e;
   border-style: solid;
   border-width: 0.0625rem 0.0625rem 0 0;
-  transform: rotate(135deg);
+  transform: rotate(45deg);
   transform-origin: 50% 50%;
 }
 
-.amis-scope .a-Collapse-TplField {
+.amis-scope .a-Collapse-icon-tranform {
   display: inline-block;
+  width: 1rem;
+  text-align: center;
+  margin-right: 0.25rem;
 }
 
-.amis-scope .a-Collapse.is-collapsed .a-Collapse-arrow:before {
-  transform: rotate(45deg);
-  transform-origin: 0% 50%;
+.amis-scope .a-Collapse .a-TplField {
+  display: inline-block;
 }
 
-.amis-scope .a-Collapse.is-collapsed .a-Collapse-header {
-  border-bottom: 0.0625rem solid
-    #dfe2e6;
+.amis-scope .a-Collapse.is-active .a-Collapse-arrow:before {
+  transform: rotate(135deg);
+  transform-origin: 50% 30%;
 }
 
-.amis-scope .a-Collapse--collapsable .a-Collapse-header {
-  cursor: pointer;
+.amis-scope .a-Collapse.is-active .a-Collapse-icon-tranform {
+  transform: rotate(90deg);
+}
+
+.amis-scope .a-Collapse--disabled .a-Collapse-header {
+  cursor: not-allowed;
   user-select: none;
+  color: #99a6ad;
+}
+
+.amis-scope .a-Collapse--disabled .a-Collapse-header:hover {
+  background-color: var(--Collapse-header-bg-disabled-color);
+}
+
+.amis-scope .a-Collapse--disabled .a-Collapse-arrow:before {
+  border-color: #99a6ad;
 }
 
 .amis-scope .a-Collapse--title-bottom .a-Collapse-header {
   text-align: center;
-  color: #23b7e5;
-  border-left: none;
   font-size: 0.875rem;
   border-top: none;
   border-bottom: 0.0625rem solid
@@ -25152,15 +25166,13 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-Collapse--title-bottom .a-Collapse-arrow:before {
-  top: 0.125rem;
-  transform: rotate(-45deg);
-  transform-origin: 0% 50%;
+  top: -0.25rem;
+  transform: rotate(135deg);
 }
 
-.amis-scope .a-Collapse--title-bottom.is-collapsed .a-Collapse-arrow:before {
-  top: -0.375rem;
-  transform: rotate(135deg);
-  transform-origin: 0% 50%;
+.amis-scope .a-Collapse--title-bottom.is-active .a-Collapse-arrow:before {
+  top: 0;
+  transform: rotate(-45deg);
 }
 
 .amis-scope .a-Collapse-contentWrapper {
@@ -25180,6 +25192,10 @@ readers do not read off random characters that represent icons */
   font-weight: 400;
 }
 
+.amis-scope .a-CollapseGroup.icon-position-right .a-Collapse-header .a-Collapse-arrow {
+  float: right;
+}
+
 .amis-scope .a-ColorField {
   display: inline-block;
 }
@@ -27337,6 +27353,11 @@ readers do not read off random characters that represent icons */
   cursor: move;
 }
 
+.amis-scope .a-Table-table > thead > tr > th.a-Table-dragCell > svg,
+.amis-scope .a-Table-table > tbody > tr > td.a-Table-dragCell > svg {
+  vertical-align: middle;
+}
+
 .amis-scope .a-Table-table > tbody > tr > td.a-Table-expandCell {
   position: relative;
 }
@@ -27710,6 +27731,10 @@ readers do not read off random characters that represent icons */
   color: #111827;
 }
 
+.amis-scope .a-Table-dragBtn > svg {
+  vertical-align: -2px;
+}
+
 .amis-scope .a-Table-table > tbody > tr:hover .a-Table-dragBtn,
 .amis-scope .a-Table-table > tbody > tr.is-dragging .a-Table-dragBtn,
 .amis-scope .a-Table-table > tbody > tr.is-drop-allowed .a-Table-dragBtn {
@@ -30490,6 +30515,133 @@ readers do not read off random characters that represent icons */
   display: none;
 }
 
+.amis-scope .u-hairline::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: " ";
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid #dfe2e6;
+  z-index: 1;
+  transform: scale(0.5);
+}
+
+.amis-scope .a-GridNav {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.amis-scope .a-GridNav-top {
+  position: relative;
+}
+
+.amis-scope .a-GridNav-top::after {
+  border-top-width: 0.0625rem;
+}
+
+.amis-scope .a-GridNavItem {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.amis-scope .a-GridNavItem--square {
+  height: 0;
+  position: relative;
+}
+
+.amis-scope .a-GridNavItem-icon {
+  width: var(--rv-grid-item-icon-size);
+}
+
+.amis-scope .a-GridNavItem-text {
+  color: #58666e;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  word-break: break-all;
+  flex-shrink: 0;
+}
+
+.amis-scope .a-GridNavItem-icon + .a-GridNavItem-text {
+  margin-top: 0.5rem;
+}
+
+.amis-scope .a-GridNavItem-image {
+  display: inline-block;
+}
+
+.amis-scope .a-GridNavItem-image svg,
+.amis-scope .a-GridNavItem-image img {
+  max-width: 100%;
+  display: block;
+  width: 60%;
+  margin: 0 auto;
+}
+
+.amis-scope .a-GridNavItem-content {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 1rem 0.5rem;
+  background-color: #fff;
+  position: relative;
+}
+
+.amis-scope .a-GridNavItem-content .a-Badge-text {
+  z-index: 10;
+}
+
+.amis-scope .a-GridNavItem-content--border::after {
+  border-width: 0 0.0625rem 0.0625rem 0;
+}
+
+.amis-scope .a-GridNavItem-content--square {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.amis-scope .a-GridNavItem-content--center {
+  align-items: center;
+  justify-content: center;
+}
+
+.amis-scope .a-GridNavItem-content--horizontal {
+  flex-direction: row;
+}
+
+.amis-scope .a-GridNavItem-content--horizontal .a-GridNavItem-text {
+  margin: 0 0 0 0.5rem;
+}
+
+.amis-scope .a-GridNavItem-content--reverse {
+  flex-direction: column-reverse;
+}
+
+.amis-scope .a-GridNavItem-content--reverse .a-GridNavItem-text {
+  margin: 0 0 0.5rem;
+}
+
+.amis-scope .a-GridNavItem-content--horizontal .a-GridNavItem-content--reverse {
+  flex-direction: row-reverse;
+}
+
+.amis-scope .a-GridNavItem-content--horizontal .a-GridNavItem-content--reverse .a-GridNavItem-text {
+  margin: 0 0.5rem 0 0;
+}
+
+.amis-scope .a-GridNavItem-content--surround::after {
+  border-width: 0.0625rem;
+}
+
+.amis-scope .a-GridNavItem-content--clickable {
+  cursor: pointer;
+}
+
 .amis-scope fieldset.a-Collapse--lg,
 .amis-scope fieldset.a-Collapse--md,
 .amis-scope fieldset.a-Collapse--base,
@@ -34779,6 +34931,10 @@ readers do not read off random characters that represent icons */
   pointer-events: none;
 }
 
+.amis-scope .a-Tree.is-draggable {
+  position: relative;
+}
+
 .amis-scope .a-Tree--outline .a-Tree-sublist .a-Tree-item--isLeaf:before {
   position: absolute;
   top: -8px;
@@ -34819,6 +34975,10 @@ readers do not read off random characters that represent icons */
   left: -99999px;
 }
 
+.amis-scope .a-Tree.is-draggable .a-Tree-itemLabel:hover::after {
+  display: none;
+}
+
 .amis-scope .a-Tree-item-icons {
   visibility: hidden;
   transition: visibility 0s ease;
@@ -34932,6 +35092,11 @@ readers do not read off random characters that represent icons */
   width: calc(0.75rem + 0.25rem);
 }
 
+.amis-scope .a-Tree-itemDrager {
+  cursor: move;
+  color: #4b5563;
+}
+
 .amis-scope .a-Tree-spinner {
   margin-right: 0.25rem;
 }
@@ -34978,6 +35143,35 @@ readers do not read off random characters that represent icons */
   color: #99a6ad;
 }
 
+.amis-scope .a-Tree-dropIndicator {
+  position: absolute;
+  height: 0.125rem;
+  background-color: #23b7e5;
+  border-radius: 0.0625rem;
+  z-index: 1;
+}
+
+.amis-scope .a-Tree-dropIndicator::after {
+  position: absolute;
+  top: -0.1875rem;
+  left: -0.375rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  background-color: transparent;
+  border: 0.125rem solid #23b7e5;
+  border-radius: 50%;
+  content: "";
+}
+
+.amis-scope .a-Tree-dropIndicator--hover {
+  border-radius: 0;
+  background-color: rgba(0, 126, 255, 0.08);
+}
+
+.amis-scope .a-Tree-dropIndicator--hover::after {
+  display: none;
+}
+
 .amis-scope .a-TreeSelectControl {
   position: relative;
 }
@@ -35335,6 +35529,8 @@ readers do not read off random characters that represent icons */
           0.875rem
       ) / 2
   ) 0.375rem 0 0;
+  display: flex;
+  align-items: center;
 }
 
 .amis-scope .a-Combo--ver:not(.a-Combo--noBorder)::before,
@@ -35401,6 +35597,8 @@ readers do not read off random characters that represent icons */
       ) / 2
   );
   left: -1.875rem;
+  display: flex;
+  align-items: center;
 }
 
 .amis-scope .a-Combo--ver:not(.a-Combo--noBorder).is-draggable > .a-Combo-items > .a-Combo-item {
@@ -37151,6 +37349,7 @@ readers do not read off random characters that represent icons */
   border: none;
   flex-grow: 1;
   overflow: auto;
+  scroll-behavior: smooth;
   background: #fff;
 }