amis-ui 2.1.1-beta.2 → 2.3.0

package/scss/components/form/_date.scss

@@ -376,13 +376,15 @@
       text-align: center;
       height: 28px;
       line-height: 28px;
+      cursor: pointer;
+
       &.is-highlight {
         color: var(--Form-select-menu-onHover-color);
         background: var(--Form-select-menu-onHover-bg);
       }
       &:hover {
         color: var(--Form-select-menu-onHover-color);
-        background: #F7F7F9;
+        background: #f7f7f9;
       }
     }
   }
@@ -642,7 +644,7 @@ td.rdtQuarter {
 
     > span {
       color: var(--Form-select-menu-onHover-color);
-      background: #F7F7F9;
+      background: #f7f7f9;
     }
   }
 

package/scss/components/form/_editor.scss

@@ -57,6 +57,17 @@
         }
       }
     }
+
+    &-placeholder {
+      pointer-events: none;
+      top: 0;
+      position: absolute;
+      left: px2rem(65px);
+      right: px2rem(16px);
+      white-space: break-spaces;
+      line-break: anywhere;
+      color: var(--Form-input-placeholderColor);
+    }
   }
 
   &--sm {

package/scss/components/form/_fieldset.scss

@@ -61,6 +61,10 @@ fieldset.#{$ns}Collapse {
       font-size: var(--fontSizeXs);
       padding: 0 3px;
       margin: 0 0 0 -3px;
+
+      &:hover {
+        background-color: var(--white);
+      }
     }
 
     &:after {
@@ -78,6 +82,10 @@ fieldset.#{$ns}Collapse {
       font-size: var(--fontSizeSm);
       padding: 0 5px;
       margin: 0 0 0 -5px;
+
+      &:hover {
+        background-color: var(--white);
+      }
     }
 
     &:after {
@@ -95,6 +103,10 @@ fieldset.#{$ns}Collapse {
       font-size: var(--fontSizeBase);
       padding: 0 8px;
       margin: 0 0 0 -8px;
+
+      &:hover {
+        background-color: var(--white);
+      }
     }
 
     &:after {
@@ -111,6 +123,10 @@ fieldset.#{$ns}Collapse {
       font-size: var(--fontSizeMd);
       padding: 0 10px;
       margin: 0 0 0 -10px;
+
+      &:hover {
+        background-color: var(--white);
+      }
     }
 
     &:after {
@@ -127,6 +143,10 @@ fieldset.#{$ns}Collapse {
       font-size: var(--fontSizeLg);
       padding: 0 var(--gap-md);
       margin: 0 0 0 calc(var(--gap-md) * -1);
+
+      &:hover {
+        background-color: var(--white);
+      }
     }
 
     &:after {

package/scss/components/form/_form.scss

@@ -28,6 +28,7 @@
   padding-top: var(--Form-label-paddingTop);
   padding-bottom: var(--Form-label-paddingTop);
   margin-bottom: 0;
+  word-break: break-word;
 
   .#{$ns}Form-item--inline > .#{$ns}Form-value > & {
     display: inline-block;
@@ -395,8 +396,11 @@
 }
 
 .#{$ns}Form--debug {
-  word-break: break-all;
-  white-space: pre-wrap;
+  padding: var(--gap-sm);
+  margin-bottom: var(--gap-sm);
+  background-color: rgb(250, 250, 250);
+  border-radius: var(--borderRadius);
+  position: relative;
 }
 
 .#{$ns}Form--quickEdit {

package/scss/components/form/_input-group.scss

@@ -27,6 +27,11 @@
     box-sizing: border-box;
     padding: var(--InputGroup-paddingY) var(--InputGroup-paddingX);
 
+    svg {
+      width: px2rem(12px);
+      height: px2rem(12px);
+    }
+
     &:not(:last-child) {
       border-right: 0;
     }

package/scss/components/form/_select.scss

@@ -86,8 +86,6 @@
   .#{$ns}PopOver.#{$ns}Select-popover {
     margin-top: px2rem(4px);
     .#{$ns}Select-menu {
-      overflow-x: hidden;
-
       .#{$ns}Select-option {
         height: px2rem(32px);
         line-height: px2rem(22px);

package/scss/components/form/_selection.scss

@@ -173,10 +173,15 @@
     bottom: 0;
   }
 
-  &-item.is-disabled {
+  &-item.is-disabled > .#{$ns}TreeSelection-itemInner {
+    cursor: not-allowed;
     color: var(--text--muted-color);
   }
 
+  &-item .#{$ns}TreeSelection-itemLabel {
+    white-space: nowrap;
+  }
+
   &-itemInner {
     display: flex;
     align-items: center;

package/scss/components/form/_textarea.scss

@@ -16,6 +16,8 @@
     border-radius: var(--Form-input-borderRadius);
     background: var(--Form-input-bg);
     padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    /* 避免和clear btn 重叠 */
+    padding-right: calc(var(--Form-input-paddingX) + var(--Form-fontSize));
     font-size: var(--Form-input-fontSize);
     display: block;
     width: 100%;
@@ -54,13 +56,13 @@
   }
 
   .has-error--maxLength &-counter {
-    background: var(--danger);
+    color: var(--danger);
   }
 
   &-clear {
     @include input-clear();
     position: absolute;
-    right: var(--Form-input-paddingX);
+    right: var(--Form-input-paddingY);
     top: var(--Form-input-paddingY);
   }
 }

package/scss/components/form/_transfer.scss

@@ -93,12 +93,38 @@
     overflow: hidden;
   }
 
-  &-selection .#{$ns}ListSelection-placeholder {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    text-align: center;
-    justify-content: center;
+  &-selection {
+    .#{$ns}ListSelection-placeholder {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+    }
+
+    &.#{$ns}Tree,
+    &.#{$ns}AssociatedSelection {
+      .#{$ns}Tree-itemLabel.is-checked:hover,
+      .#{$ns}Tree-itemLabel:hover {
+        .#{$ns}Tree-itemLabel-item > .#{$ns}Tree-itemText {
+          background-color: unset;
+          &:active {
+            background-color: unset;
+          }
+        }
+      }
+
+      .#{$ns}Tree-itemLabel-item {
+        display: flex;
+        align-items: center;
+
+        > .#{$ns}Tree-itemText {
+          max-width: unset;
+          line-height: unset;
+          top: unset;
+        }
+      }
+    }
   }
 
   &-search {
@@ -299,7 +325,6 @@
   }
 }
 .#{$ns}TransferDropDown-content {
-  min-height: px2rem(200px);
   min-width: px2rem(400px);
   display: flex;
   flex-direction: column;

package/scss/components/form/_tree.scss

@@ -101,12 +101,15 @@
     }
     &-item {
       padding-left: var(--Tree-item-arrow-padding-left);
-      display: inline-block;
+      display: inline-flex;
       width: 100%;
+      align-items: center;
+      overflow: hidden;
+      height: px2rem(32px);
     }
-  
+
     &:hover {
-      .#{$ns}Tree{
+      .#{$ns}Tree {
         &-itemLabel-item {
           background-color: var(--Tree-item-onHover-bg-pure);
         }
@@ -120,7 +123,7 @@
   &-item {
     .is-checked {
       border-radius: var(--Tree-item-onChekced-bg-borderRadius);
-      .#{$ns}Tree{
+      .#{$ns}Tree {
         &-itemLabel-item {
           background-color: var(--Tree-item-onChekced-bg);
         }
@@ -290,20 +293,16 @@
       height: px2rem(14px);
     }
   }
-    
 
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
     display: inline-block;
     color: var(--Form-input-color);
-    line-height: var(--lineHeightBase);
-    max-width: var(--Tree-item-text-max-height);
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    position: relative;
-    top: var(--Tree-item-text-top);
   }
   .is-disabled &-itemText {
     color: var(--text--muted-color);

package/scss/components/form/_user-select.scss

@@ -13,10 +13,11 @@
 
   &-searchBox {
     height: px2rem(52px);
-    margin: 0 px2rem(16px);
+    padding: 0 px2rem(16px);
     flex: none;
     display: flex;
     align-items: center;
+    background: var(--white);
   }
 
   &-search {
@@ -30,6 +31,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     background: var(--UserSelect--content-bg);
+    margin-bottom: px2rem(16px);
   }
 
   &-wrap {
@@ -38,6 +40,17 @@
     display: flex;
     flex-direction: column;
     text-align: left;
+    margin-bottom: px2rem(16px);
+    background: var(--UserSelect--content-bg);
+  }
+
+  &-footer {
+    background: var(--white);
+    padding: px2rem(10px) px2rem(16px) 0;
+
+    .#{$ns}Button {
+      width: 100%;
+    }
   }
 
   &-navbar {
@@ -73,6 +86,7 @@
     flex: none;
     white-space: nowrap;
     overflow-x: auto;
+    background: var(--white);
 
     &-item {
       cursor: pointer;
@@ -95,6 +109,8 @@
     position: relative;
     flex: 1;
     background: var(--UserSelect--content-bg);
+    margin-top: px2rem(16px);
+    margin-bottom: px2rem(16px);
   }
 
   &-scroll {
@@ -108,7 +124,6 @@
 
   &-memberList-box {
     width: 100vw;
-    margin-top: px2rem(16px);
   }
 
   &-memberList,
@@ -238,6 +253,7 @@
     flex: none;
     overflow: hidden;
     box-sizing: border-box;
+    background: var(--white);
   }
 
   &-selectNum {
@@ -396,11 +412,28 @@
     flex-direction: column;
   }
 
+  .#{$ns}UserSelect-wrap {
+    height: calc(100% - 16px);
+  }
+
+  &-footer {
+    padding: px2rem(16px) px2rem(16px) 0;
+    background: var(--white);
+
+    .#{$ns}Button {
+      width: 100%;
+    }
+  }
+
   &-tabs {
     flex: 1;
     display: flex;
     flex-direction: column;
 
+    .#{$ns}Tabs-content {
+      background-color: var(--UserSelect--content-bg);
+    }
+
     > div {
       &:first-child {
         flex: none;

package/scss/themes/_antd-variables.scss

@@ -36,6 +36,9 @@ $link-color: $info;
 @import '../variables';
 @import '../properties';
 
+/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
+$Table-strip-bg: transparent;
+
 :root {
   --fontFamilyBase: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
@@ -158,8 +161,7 @@ $link-color: $info;
   --Tabs--vertical-onActive-container-bg: #fff;
   --Tabs--vertical-onActive-container-borderRight: 1px solid #f0f0f0;
 
-  $Table-strip-bg: transparent;
-  --Table-strip-bg: transparent;
+  --Table-strip-bg: #{$Table-strip-bg};
   --Table-thead-bg: #fafafa;
   --Table-onHover-bg: rgb(250, 250, 250);
   --Table-onHover-borderColor: var(--Table-borderColor);

package/scss/themes/_common.scss

@@ -50,7 +50,7 @@
 @import '../components/crud';
 @import '../components/crud2';
 @import '../components/table';
-@import '../components/table-v2';
+@import '../components/table2';
 @import '../components/column-toggler';
 @import '../components/list';
 @import '../components/cards';

package/scss/themes/_cxd-variables.scss

@@ -28,6 +28,9 @@ $Wizard-steps-liAfterBorder: none !important;
 @import '../variables';
 @import '../properties';
 
+/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
+$Table-strip-bg: transparent;
+
 // yunshe4.0 font-size
 $T1: 10px;
 $T2: 12px;
@@ -186,6 +189,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form-select-valueIcon-color--dark: #{$G8};
   --Form-select-multiple-bgColor: #{$G10};
   --Form-select-value-bgColor--dark: #{$G4};
+  --Form-selectValue-onDisabled-color: #{$G6};
 
   --InputGroup-select-borderWidth: #{px2rem(1px)};
   --InputGroup-select-onFocused-bg: #eaf6fe;
@@ -391,7 +395,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Table-thead-bg: #{$G10};
   --Table-thead-borderColor: #fff;
   --Table-thead-iconColor: #999;
-  --Table-strip-bg: transparent;
+  --Table-strip-bg: #{$Table-strip-bg};
   --Table-onHover-bg: #{$B1};
   --Table-onHover-bg-rgb: 245, 251, 255;
   --Table-onHover-borderColor: #eceff8;

package/scss/themes/_dark-variables.scss

@@ -35,6 +35,9 @@ $link-color: $info;
 @import '../variables';
 @import '../properties';
 
+/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
+$Table-strip-bg: $Panel-bg;
+
 :root {
   --Panel-bg: #{$Panel-bg};
   --background-head: #191c22;

package/scss/themes/cxd.scss

@@ -390,6 +390,10 @@
 
 //FieldSet Form + Collapse
 .#{$ns}Form {
+  .icon-position-right .#{$ns}Collapse-header,
+  .#{$ns}Collapse--title-bottom .#{$ns}Collapse-header {
+    display: block;
+  }
   .#{$ns}Collapse {
     border: none;
     &-header {