amis 1.9.1-beta.19 → 1.9.1-beta.23

package/scss/components/form/_select.scss

@@ -1,6 +1,42 @@
 .#{$ns}Select {
   display: inline-flex;
 
+  /* select 标签样式 */
+  @mixin select-value {
+    .#{$ns}Select-value {
+      position: static;
+      white-space: normal;
+      user-select: none;
+      line-height: calc(
+        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+            2px
+          )}
+      );
+      display: inline-block;
+      vertical-align: middle;
+      font-size: var(--Form-selectValue-fontSize);
+      background: var(--Form-select-value-bgColor);
+      border: px2rem(1px) solid var(--Form-select-value-borderColor);
+      border-radius: px2rem(2px);
+      margin-right: var(--gap-xs);
+      margin-bottom: var(--gap-xs);
+
+      &:hover {
+        background-color: var(--Form-selectValue-onHover-bgColor);
+      }
+    }
+
+    .#{$ns}Select-valueLabel {
+      display: inline-block;
+      max-width: var(--Form-valueLabel-maxWidth);
+      padding: 0 var(--gap-xs);
+      overflow: hidden;
+      vertical-align: top;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   &--block {
     display: flex;
   }
@@ -45,10 +81,13 @@
 
   .#{$ns}PopOver.#{$ns}Select-popover {
     .#{$ns}Select-menu {
+      overflow-x: hidden;
+
       .#{$ns}Select-option {
         height: px2rem(32px);
         line-height: px2rem(22px);
       }
+
       .#{$ns}Select-addBtn {
         height: px2rem(32px);
         line-height: px2rem(30px);
@@ -117,38 +156,7 @@
       transform: translateY(0);
     }
 
-    .#{$ns}Select-value {
-      position: static;
-      white-space: normal;
-      user-select: none;
-      line-height: calc(
-        var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
-            2px
-          )}
-      );
-      display: inline-block;
-      vertical-align: middle;
-      font-size: var(--Form-selectValue-fontSize);
-      background: var(--Form-select-value-bgColor);
-      border: px2rem(1px) solid var(--Form-select-value-borderColor);
-      border-radius: px2rem(2px);
-      margin-right: var(--gap-xs);
-      margin-bottom: var(--gap-xs);
-
-      &:hover {
-        background-color: var(--Form-selectValue-onHover-bgColor);
-      }
-    }
-
-    .#{$ns}Select-valueLabel {
-      display: inline-block;
-      max-width: var(--Form-valueLabel-maxWidth);
-      padding: 0 var(--gap-xs);
-      overflow: hidden;
-      vertical-align: top;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+    @include select-value();
   }
   &-valueIcon {
     cursor: pointer;
@@ -237,6 +245,7 @@
     overflow: hidden;
     max-height: max-content;
   }
+
   &-input {
     cursor: pointer;
     outline: none;
@@ -310,6 +319,16 @@
     &.is-highlight > a {
       display: block;
     }
+
+    .#{$ns}Select-option-content,
+    .#{$ns}Select-option-content > span > div {
+      flex: auto;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      display: inline-block;
+      max-width: 100%;
+    }
   }
 
   &-noResult {
@@ -390,6 +409,43 @@
   &-popup {
     height: px2rem(320px);
   }
+
+  &-overflow {
+    &-wrapper {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+      align-items: center;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: calc(
+        (
+            var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(
+                2px
+              )} + var(--gap-xs)
+          ) * 5
+      );
+
+      @include select-value();
+    }
+
+    &.#{$ns}Tooltip--dark {
+      .#{$ns}Select-overflow-wrapper {
+        .#{$ns}Select-value {
+          background-color: var(--Form-select-value-bgColor--dark);
+          border: none;
+
+          &:hover {
+            background-color: var(--ResultBox-value--onHover-bg--dark);
+          }
+
+          .#{$ns}Select-valueIcon {
+            color: var(--Form-select-valueIcon-color--dark);
+          }
+        }
+      }
+    }
+  }
 }
 
 .#{$ns}Select-popover {

package/scss/components/form/_selection.scss

@@ -46,7 +46,6 @@
   user-select: none;
   padding: var(--gap-xs) 0;
 
-
   &-group > &-itemLabel {
     padding: var(--gap-xs) var(--gap-base);
     color: var(--FileControl-icon-color);
@@ -78,10 +77,10 @@
 
     &:hover {
       background: var(--Tree-item-onHover-bg);
-      
-        i {
-          border: 1px solid var(--menu-active-color);
-        }
+
+      i {
+        border: 1px solid var(--menu-active-color);
+      }
     }
 
     &.is-disabled {
@@ -117,6 +116,10 @@
     border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
   }
 
+  .#{$ns}Table-table > tbody > tr {
+    cursor: pointer;
+  }
+
   .#{$ns}Table-table > thead > tr > th,
   .#{$ns}Table-table > tbody > tr > td {
     font-size: var(--fontSizeSm);
@@ -347,4 +350,4 @@
     float: right;
     cursor: pointer;
   }
-}
+}

package/scss/themes/_cxd-variables.scss

@@ -185,7 +185,9 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Form-selectValue-color: var(--primary);
   --Form-select-value-borderColor: #{$G9};
   --Form-select-valueIcon-color: #{$G4};
+  --Form-select-valueIcon-color--dark: #{$G8};
   --Form-select-multiple-bgColor: #{$G10};
+  --Form-select-value-bgColor--dark: #{$G4};
 
   --InputGroup-select-borderWidth: #{px2rem(1px)};
   --InputGroup-select-onFocused-bg: #eaf6fe;

package/scss/themes/cxd.scss

@@ -124,8 +124,6 @@
   }
 }
 
-
-
 .#{$ns}Toast {
   .#{$ns}Toast-icon {
     margin-right: #{px2rem(8px)};

package/sdk/ang-ie11.css

@@ -31105,7 +31105,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-ScheduleCalendar .rdt .rdtPicker td.rdtActive:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 
 .amis-scope .a-ScheduleCalendar-large {
@@ -38230,7 +38230,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-InputBox input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -38627,7 +38627,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-ResultBox input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -38803,6 +38803,7 @@ readers do not read off random characters that represent icons */
   margin-right: 0.25rem;
   margin-bottom: 0.125rem;
   user-select: none;
+  border-radius: 0.125rem;
 }
 
 .amis-scope .a-ResultBox-value > a {
@@ -38871,6 +38872,29 @@ readers do not read off random characters that represent icons */
   background: #d1d5db;
 }
 
+.amis-scope .a-ResultBox-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( (1.5rem + 0.125rem) * 5 );
+}
+
+.amis-scope .a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value {
+  color: #fff;
+  background-color: #46474f;
+}
+
+.amis-scope .a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value:hover {
+  background-color: #b8babf;
+}
+
+.amis-scope .a-ResultBox-overflow.a-Tooltip--dark .a-ResultBox-overflow-wrapper .a-ResultBox-value > a {
+  color: #e9e9e9;
+}
+
 .amis-scope .a-ResultBox.is-mobile {
   min-height: calc(1.4285714286 * 1rem);
   border: none;
@@ -40318,7 +40342,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-TextControl-input input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -40715,7 +40739,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-TextareaControl-input input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -41489,6 +41513,10 @@ readers do not read off random characters that represent icons */
   border-top: 0.0625rem solid #d1d5db;
 }
 
+.amis-scope .a-TableSelection .a-Table-table > tbody > tr {
+  cursor: pointer;
+}
+
 .amis-scope .a-TableSelection .a-Table-table > thead > tr > th,
 .amis-scope .a-TableSelection .a-Table-table > tbody > tr > td {
   font-size: 0.75rem;
@@ -42207,6 +42235,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .a-Select {
   display: inline-flex;
+  /* select 标签样式 */
   vertical-align: middle;
   text-align: left;
   align-items: center;
@@ -42245,6 +42274,10 @@ readers do not read off random characters that represent icons */
   box-shadow: none;
 }
 
+.amis-scope .a-Select .a-PopOver.a-Select-popover .a-Select-menu {
+  overflow-x: hidden;
+}
+
 .amis-scope .a-Select .a-PopOver.a-Select-popover .a-Select-menu .a-Select-option {
   height: 2rem;
   line-height: 1.375rem;
@@ -42506,6 +42539,16 @@ readers do not read off random characters that represent icons */
   display: block;
 }
 
+.amis-scope .a-Select-option .a-Select-option-content,
+.amis-scope .a-Select-option .a-Select-option-content > span > div {
+  flex: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
+}
+
 .amis-scope .a-Select-noResult {
   color: #99a6ad;
   line-height: 1.4285714286;
@@ -42569,6 +42612,58 @@ readers do not read off random characters that represent icons */
   height: 20rem;
 }
 
+.amis-scope .a-Select-overflow-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc( ( 1.4285714286 * 0.875rem - 0.125rem + 0.25rem ) * 5 );
+}
+
+.amis-scope .a-Select-overflow-wrapper .a-Select-value {
+  position: static;
+  white-space: normal;
+  user-select: none;
+  line-height: calc( 1.4285714286 * 0.875rem - 0.125rem );
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0.75rem;
+  background: #e5e7eb;
+  border: 0.0625rem solid var(--Form-select-value-borderColor);
+  border-radius: 0.125rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.amis-scope .a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: #d1d5db;
+}
+
+.amis-scope .a-Select-overflow-wrapper .a-Select-valueLabel {
+  display: inline-block;
+  max-width: 7.5rem;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  vertical-align: top;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amis-scope .a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value {
+  background-color: #46474f;
+  border: none;
+}
+
+.amis-scope .a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value:hover {
+  background-color: #b8babf;
+}
+
+.amis-scope .a-Select-overflow.a-Tooltip--dark .a-Select-overflow-wrapper .a-Select-value .a-Select-valueIcon {
+  color: #e9e9e9;
+}
+
 .amis-scope .a-Select-popover {
   margin-top: calc(0.0625rem * -1);
   background: #fff;
@@ -43305,7 +43400,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .a-DatePicker-shortcut a {
   font-size: 0.75rem;
   cursor: pointer;
-  color: #151B26;
+  color: #151b26;
   text-decoration: none;
 }
 
@@ -43443,7 +43538,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .rdt .rdtPicker td.rdtMinute:hover,
 .amis-scope .rdt .rdtPicker td.rdtSecond:hover,
 .amis-scope .rdt .rdtPicker .rdtTimeToggle:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 
 .amis-scope .rdt .rdtPicker td.rdtBetween {
@@ -43480,7 +43575,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .rdt .rdtPicker td.rdtDisabled > span,
 .amis-scope .rdt .rdtPicker td.rdtDisabled:hover > span {
-  background: #F7F7F9;
+  background: #f7f7f9;
 }
 
 .amis-scope .rdt thead tr:first-child th {
@@ -43747,7 +43842,7 @@ readers do not read off random characters that represent icons */
   cursor: pointer !important;
   width: 1rem;
   padding: 0;
-  color: #84868C;
+  color: #84868c;
   font-size: 1.25rem;
   text-decoration: none;
   font-family: auto;
@@ -43839,7 +43934,7 @@ readers do not read off random characters that represent icons */
 .amis-scope td.rdtYear.rdtDisabled:hover,
 .amis-scope td.rdtQuarter.rdtDisabled,
 .amis-scope td.rdtQuarter.rdtDisabled:hover {
-  background: #F7F7F9;
+  background: #f7f7f9;
   color: #B8BABF;
 }
 
@@ -45535,7 +45630,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-TreeSelect-input input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -46183,7 +46278,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-Picker-input input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;
@@ -47172,7 +47267,7 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-IconPickerControl-input input {
-  flex-basis: 5rem;
+  flex-basis: 1.875rem;
   flex-grow: 1;
   outline: none;
   background: transparent;