amis 1.4.2-beta.6 → 1.5.0

package/scss/components/form/_selection.scss

@@ -0,0 +1,354 @@
+.#{$ns}Selection {
+  > .#{$ns}Checkbox {
+    display: block;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm)
+      calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      calc(var(--gap-sm) + var(--Checkbox-size));
+  }
+
+  &--inline > .#{$ns}Checkbox {
+    display: inline-block;
+  }
+
+  &-addBtn {
+    display: block;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    > svg {
+      width: px2rem(14px);
+      height: px2rem(14px);
+      margin-right: var(--Checkbox-gap);
+    }
+  }
+}
+
+.#{$ns}GroupedSelection {
+  &-group:not(:first-child) > &-itemLabel {
+    border-top: px2rem(1px) solid var(--ListMenu-divider-color);
+  }
+
+  &-group > &-itemLabel {
+    font-size: var(--fontSizeSm);
+    padding: var(--gap-xs) var(--gap-xs);
+    color: var(--text--muted-color);
+  }
+
+  &-item {
+    display: flex;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+    }
+    cursor: pointer;
+    user-select: none;
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
+    &:hover {
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-group > &-items > &-item {
+    padding-left: var(--gap-base);
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+
+    span {
+      white-space: nowrap; // 避免在条件组合中折行
+    }
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}TableSelection {
+  .#{$ns}Table-content {
+    border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
+  }
+
+  .#{$ns}Table-table > thead > tr > th,
+  .#{$ns}Table-table > tbody > tr > td {
+    font-size: var(--fontSizeSm);
+    padding-top: var(--gap-xs);
+    padding-bottom: px2rem(6px);
+    vertical-align: middle;
+  }
+
+  .#{$ns}Table-table > thead > tr > th {
+    padding-top: px2rem(6px);
+  }
+
+  .#{$ns}Table-table > thead > tr > th:first-child,
+  .#{$ns}Table-table > tbody > tr > td:first-child {
+    padding-left: px2rem(10px);
+    padding-right: 0;
+  }
+
+  .#{$ns}Table-table > thead > tr > th:last-child,
+  .#{$ns}Table-table > tbody > tr > td:last-child {
+    padding-right: var(--gap-md);
+  }
+
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
+  .#{$ns}Table-table > tbody > tr.is-active {
+    color: var(--Form-select-menu-onActive-color);
+    background: var(--Form-select-menu-onActive-bg);
+  }
+}
+
+.#{$ns}TreeSelection {
+  .#{$ns}Table-expandBtn {
+    color: var(--icon-color);
+    margin-right: 5px;
+  }
+
+  &-sublist {
+    position: relative;
+    margin: 0 0 0 px2rem(35px);
+    display: none;
+
+    &:before {
+      width: 1px;
+      content: '';
+      display: block;
+      position: absolute;
+      top: calc(var(--gap-xs) * -1);
+      bottom: calc(var(--Form-input-height) / 2);
+      left: -19px;
+      border-left: dashed 1px var(--icon-color);
+    }
+  }
+
+  &-item {
+    position: relative;
+  }
+  &-item.is-expanded > &-sublist {
+    display: block;
+  }
+
+  &-item:not(:last-child) > &-sublist:before {
+    bottom: 0;
+  }
+
+  &-sublist &-item:before {
+    height: 1px;
+    content: '';
+    display: block;
+    position: absolute;
+    top: calc(var(--Form-input-height) / 2);
+    width: 19px;
+    left: -19px;
+    border-top: dashed 1px var(--icon-color);
+  }
+
+  &-itemInner {
+    display: flex;
+    align-items: center;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+      margin-left: var(--gap-sm);
+    }
+    cursor: pointer;
+    user-select: none;
+
+    position: relative;
+    & > * {
+      position: relative;
+      z-index: 2;
+    }
+
+    &:hover:after {
+      position: absolute;
+      content: '';
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: -99999px;
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}ChainedSelection {
+  display: flex;
+  flex-direction: row;
+
+  &-col {
+    flex-grow: 1;
+    min-width: 150px;
+  }
+
+  &-col:not(:last-child) {
+    border-right: 1px solid var(--borderColor);
+  }
+
+  &-subTitle {
+    font-size: var(--fontSizeSm);
+    padding: var(--gap-xs) var(--gap-xs);
+    color: var(--text--muted-color);
+  }
+
+  &-item {
+    display: flex;
+    height: var(--Form-input-height);
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--Form-input-fontSize);
+    padding: calc(
+        (
+            var(--Form-input-height) - var(--Form-input-lineHeight) *
+              var(--Form-input-fontSize)
+          ) / 2
+      )
+      var(--gap-sm);
+    flex-direction: row;
+
+    > .#{$ns}Checkbox {
+      margin-right: 0;
+    }
+    cursor: pointer;
+    user-select: none;
+
+    &.is-active {
+      color: var(--Form-select-menu-onActive-color);
+      background: var(--Form-select-menu-onActive-bg);
+    }
+
+    &:hover {
+      background: var(--Tree-item-onHover-bg);
+    }
+
+    &.is-disabled {
+      pointer-events: none;
+      color: var(--text--muted-color);
+    }
+  }
+
+  &-itemLabel {
+    flex-grow: 1;
+  }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+}
+
+.#{$ns}AssociatedSelection {
+  display: flex;
+  flex-direction: row;
+
+  &-left,
+  &-right {
+    flex-grow: 1;
+    width: 0;
+    min-height: px2rem(200px);
+    max-height: px2rem(400px);
+    overflow: auto;
+  }
+
+  &-left {
+    border-right: 1px solid var(--borderColor);
+  }
+
+  &-reload {
+    text-align: center;
+    color: var(--info);
+    margin: 20px 0 0;
+
+    &.is-clickable {
+      cursor: pointer;
+    }
+  }
+
+  &-box {
+    line-height: var(--Form-input-lineHeight);
+    font-size: var(--fontSizeSm);
+    color: var(--text--muted-color);
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+
+    > p {
+      text-align: center;
+      margin: 10px 0 20px;
+      color: var(--text--muted-color);
+    }
+  }
+}

package/scss/components/form/_transfer.scss

@@ -47,19 +47,19 @@
     border-radius: var(--borderRadius);
   }
 
-  &-select > &-checkboxes,
-  &-result > &-selections {
+  &-select > &-selection,
+  &-result > &-value {
     flex-grow: 1;
     max-height: 100%;
     overflow: auto;
     position: relative; // 貌似不加 relative 会有 bug。
   }
 
-  &-search + &-checkboxes {
+  &-search + &-selection {
     border-top: 1px solid var(--borderColor);
   }
 
-  &-checkboxes .#{$ns}ListCheckboxes-placeholder {
+  &-selection .#{$ns}ListSelection-placeholder {
     height: 100%;
     display: flex;
     align-items: center;
@@ -105,6 +105,25 @@
       color: var(--text--muted-color);
     }
   }
+}
+
+.#{$ns}TabsTransfer {
+  .#{$ns}Transfer-title {
+    height: 40px;
+  }
+
+  // .#{$ns}Transfer-result {
+  //   flex-grow: unset;
+  // }
+
+  &-placeholder {
+    @include checkboxes-placeholder();
+  }
+
+  &-tab {
+    padding: 0;
+    overflow: auto;
+  }
 
   &-tabs {
     display: flex;
@@ -141,18 +160,19 @@
 
     > .#{$ns}Tabs-content {
       flex-grow: 1;
+      min-height: 0;
       position: relative;
       padding: 5px 0 0;
 
       > .#{$ns}Tabs-pane {
         position: relative;
-        min-height: 100%;
+        height: 100%;
 
         &.is-active {
           display: flex;
           flex-direction: column;
 
-          > .#{$ns}Transfer-checkboxes {
+          > .#{$ns}Transfer-selection {
             flex-grow: 1;
             max-height: 100%;
             overflow: auto;
@@ -163,24 +183,62 @@
   }
 }
 
-.#{$ns}TabsTransfer {
-  .#{$ns}Transfer-title {
-    height: 40px;
+.#{$ns}TransferControl {
+  position: relative;
+
+  &.is-inline {
+    display: inline-block;
   }
+}
 
-  // .#{$ns}Transfer-result {
-  //   flex-grow: unset;
-  // }
+.#{$ns}TransferPicker {
+  &-icon {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px 5px 5px auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
 
-  &-placeholder {
-    @include checkboxes-placeholder();
+    > svg {
+      width: px2rem(12px);
+      height: px2rem(12px);
+      top: 0;
+    }
   }
 }
 
-.#{$ns}TransferControl {
-  position: relative;
+.#{$ns}TransferDropDown {
+  &-icon {
+    transition: transform var(--animation-duration) ease-out;
+    margin: 5px 5px 5px auto;
+    display: flex;
+    color: var(--Form-select-caret-iconColor);
+    &:hover {
+      color: var(--Form-select-caret-onHover-iconColor);
+    }
 
-  &.is-inline {
-    display: inline-block;
+    > svg {
+      width: px2rem(10px);
+      height: px2rem(10px);
+      top: 0;
+    }
+  }
+
+  &.is-active &-icon {
+    transform: rotate(180deg);
+  }
+}
+.#{$ns}TransferDropDown-content {
+  min-height: px2rem(200px);
+  display: flex;
+  flex-direction: column;
+
+  & > .#{$ns}Transfer-selection {
+    flex-grow: 1;
+    max-height: 100%;
+    overflow: auto;
+    position: relative; // 貌似不加 relative 会有 bug。
   }
 }

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

@@ -2,6 +2,7 @@
 @import '../base/reset';
 @import '../base/normalize';
 @import '../base/typography';
+@import '../base/common';
 
 @import '../layout/layout';
 @import '../layout/grid';
@@ -17,6 +18,7 @@
 @import '../components/tooltip';
 @import '../components/tpl';
 @import '../components/popover';
+@import '../components/picker-columns';
 @import '../components/toast';
 @import '../components/alert';
 @import '../components/app';
@@ -36,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';
@@ -66,6 +69,8 @@
 @import '../components/json';
 @import '../components/icon';
 @import '../components/steps';
+@import '../components/portlet';
+@import '../components/grid-nav';
 
 @import '../components/form/fieldset';
 @import '../components/form/group';
@@ -73,6 +78,7 @@
 @import '../components/form/text';
 @import '../components/form/textarea';
 @import '../components/form/checks';
+@import '../components/form/selection';
 @import '../components/form/city';
 @import '../components/form/switch';
 @import '../components/form/number';

package/scss/themes/_cxd-variables.scss

@@ -10,7 +10,7 @@ $primary: $B6;
 $success: $S6;
 $warning: $W6;
 $danger: $E6;
-$light: #1ac5ff;
+$light: #eaf6fe;
 $white: #fff;
 $secondary: $G6;
 
@@ -72,6 +72,8 @@ $R7: px2rem(16px);
 $R8: 50%;
 
 // yunshe4.0 box-shadow
+$L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
+  0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04);
 
 :root {
   --borderColor: #eceff8;
@@ -81,7 +83,7 @@ $R8: 50%;
 
   --text--muted-color: #{$G6};
   --text--loud-color: #333;
-  --link-onHover-decoration: underline;
+  --link-onHover-decoration: none;
 
   --icon-color: #999;
   --icon-onHover-color: var(--primary);
@@ -228,15 +230,18 @@ $R8: 50%;
   --ColorPicker-placeholderColor: #999;
   --ColorPicker-onDisabled-bg: #f5f5f5;
   --ColorPicker-onDisabled-color: #999;
+  --ColorPicker-boxShadow: #{$L1};
 
   --Collapse-border: #{px2rem(1px)} solid #{$G8};
   --Collapse-border-color: #{$G8};
   --Collapse-header-fontSize: #{$T3};
-  --Collapse-header-fontWeight: #{$W3};
+  --Collapse-header-fontWeight: #{$W2};
   --Collapse-header-padding: #{px2rem(16px)};
   --Collapse-header-bg: #{$G10};
   --Collapse-header-onHover-bg: #{$G9};
+  --Collapse-header-bg-disabled-color: #{$G10};
   --Collapse-header-collapsed-borderBottom: none;
+  --Collapse-header-wrapper-direction: row-reverse;
   --Collapse-content-padding: #{px2rem(16px)};
   --Collapse-content-color: #{$G4};
   --Collapse-content-fontSize: #{$T2};
@@ -498,6 +503,9 @@ $R8: 50%;
   --TransferSelect-heading-borderBottom: 0;
 
   // Alert
+  --Alert-fontColor: #{$G4};
+  --Alert-title-fontColor: #{$G2};
+
   --Alert-height: #{px2rem(40px)};
   --Alert-paddingX: #{px2rem(16px)};
   --Alert-fontSize: #{$T2};
@@ -522,8 +530,9 @@ $R8: 50%;
 
   // Toast size
   --Toast-width: #{px2rem(300px)};
-  --Toast-borderRadius: 0;
+  --Toast-borderRadius: #{$R3};
   --Toast-paddingL: #{px2rem(26px)};
+  --Toast-paddingX: #{px2rem(16px)};
   --Toast--info-paddingL: 0;
   --Toast-border-width: #{px2rem(1px)};
   --Toast-opacity: 1;
@@ -531,8 +540,6 @@ $R8: 50%;
 
   // Toast color
   --Toast-color: var(--white);
-  --Toast-borderRadius: #{$R3};
-  --Toast-paddingX: #{px2rem(16px)};
 
   --Toast--danger-color: #{$G2};
   --Toast--danger-bgColor: #{$G11};