@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.10

package/dist/Select/style/index.less

@@ -2,42 +2,23 @@
 @import './variables.less';
 @import '../../Empty/style/index.less';
 @import '../../Checkbox/style/index.less';
-@import './multiple.less';
-@import './single.less';
 @import './size.less';
 @import './status.less';
-
-.ant-select-dropdown.ant-select-dropdown {
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: 2px;
-
-  &.ald-select-popup {
-    // max-height: 264px;
-    overflow-y: auto;
-    overflow-y: overlay;
-    border: 1px solid @BG70;
-    padding: 0;
-  }
-}
+@import './selectDropdown.less';
+@import './option.less';
+@import './layout.less';
 
 .ald-select.ald-select {
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  border: 1px solid @BG60;
   border-radius: 4px;
-  background-color: @BG100;
-  // padding: 0 4px;
   cursor: pointer;
-  width: 100%;
-
-  &.ald-select-status-error {
-    border-color: @error-color;
-  }
+  border-width: 1px;
+  border-style: solid;
 
   .ald-select-prefix {
-    color: @NL40;
+    color: var(--alias-colors-text-subtle, #4b5563);
     display: inline-flex;
     position: absolute;
     align-items: center;
@@ -50,85 +31,136 @@
     }
 
     &.ald-select-prefix-multiple {
-      cursor: text;
+      cursor: default;
     }
   }
 
   .ant-select {
-    .ant-select-selector {
-      color: @NL0;
-      align-items: center;
+    .ant-select-selection-item,
+    .ant-select-selection-search-input,
+    .ant-select-selection-search-mirror,
+    .ant-select-selection-placeholder {
+      transition: none;
     }
 
-    .ant-select.ald-select-prefix-select {
-      .ant-select-selector {
-        border: none;
+    .ant-select-selector {
+      align-items: center;
+      transition: none;
+      padding-right: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      position: relative;
+
+      .ant-select-selection-search {
+        display: flex;
       }
-    }
-
-    .ant-select-selection-overflow {
-      align-self: normal;
 
-      .ant-select-selection-overflow-item {
-        // display: flex;
-        align-items: center;
-        line-height: inherit;
+      .ant-select-selection-item {
+        padding-right: 0;
+        font-weight: inherit;
+      }
+      // 多选中存在这个样式
+      .ant-select-selection-overflow {
+        align-self: normal;
+        flex-wrap: nowrap;
+        margin-left: 6px;
+        min-width: 52px;
         height: 100%;
 
-        .ant-select-selection-item {
-          height: auto;
-          margin-top: 0;
+        .ant-select-selection-overflow-item {
+          align-items: center;
+          line-height: inherit;
+          flex: 1;
+          min-width: 0;
+          // height: 100%;
 
-          .ant-select-selection-item-content {
-            // display: flex;
-            // align-items: center;
-            margin: 0;
+          & > span {
+            display: inline-flex;
+            min-width: 0;
           }
 
-          .ant-select-selection-item-remove {
-            display: flex;
-            align-items: center;
-            margin: 0;
-            font-size: inherit;
+          .ant-select-selection-item {
+            height: auto;
+            margin-top: 0;
+            cursor: inherit;
+
+            .ant-select-selection-item-content {
+              // display: flex;
+              // align-items: center;
+              margin: 0;
+            }
+
+            .ant-select-selection-item-remove {
+              display: flex;
+              align-items: center;
+              margin: 0;
+              font-size: inherit;
+            }
           }
-        }
 
-        &.ant-select-selection-overflow-item-rest {
-          .ant-select-selection-item {
-            border: none;
-            background: none;
-            margin-bottom: 0;
+          &.ant-select-selection-overflow-item-rest {
+            flex: none;
+
+            .ant-select-selection-item {
+              border: none;
+              background: none;
+              margin-bottom: 0;
+              margin-left: 0;
+
+              .ant-select-selection-item-content {
+                display: flex;
+                align-items: center;
+                height: 16px;
+                padding: 0 var(--alias-spacing-50, 4px);
+                border-radius: var(--alias-radius-100, 8px);
+                background: var(
+                  --alias-colors-bg-accent-blue-subtle-default,
+                  #d4e7fd
+                );
+                color: var(--alias-colors-text-information, #0f59b1);
+                font-size: 12px;
+              }
+            }
           }
-        }
 
-        .ald-select-multiple-tag-default {
-          color: inherit;
-          display: inline-flex;
-          align-items: center;
+          &.ant-select-selection-overflow-item-suffix {
+            flex: none;
+          }
 
-          &::before {
-            content: '，';
+          .ald-select-multiple-tag-default {
+            color: inherit;
+            min-width: 0;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
           }
-        }
 
-        .ant-select-selection-search-input {
-          height: inherit;
-          line-height: inherit;
-          caret-color: @B60;
+          .ant-select-selection-search-input {
+            height: inherit;
+            line-height: inherit;
+            caret-color: var(--alias-colors-text-selected, #126fdd);
+          }
         }
       }
 
-      .ant-select-selection-overflow-item-rest {
-        .ant-select-selection-item {
-          padding-inline-start: 0;
-        }
+      .ant-select-selection-placeholder {
+        padding-right: 17px;
       }
+    }
 
-      .ant-select-selection-overflow-item:first-of-type {
-        .ald-select-multiple-tag-default::before {
-          content: '';
+    &.ant-select-open {
+      .ant-select-selector {
+        .ant-select-selection-item {
+          color: inherit;
         }
       }
     }
   }
 }
+
+.ald-select-clear-icon,
+.ald-select-suffix-icon {
+  cursor: pointer;
+  color: var(--alias-colors-icon-subtle, #6b7280);
+  font-size: 16px;
+}

package/dist/Select/style/layout.less

@@ -0,0 +1,43 @@
+.ald-select.ald-select {
+  .ant-select {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .ant-select-selector {
+      position: initial;
+      min-width: 0;
+      flex: 1;
+    }
+
+    .ant-select-arrow {
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+
+    .ant-select-clear {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      transform: none;
+      opacity: 1;
+      align-items: center;
+      flex: none;
+      right: 0;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+        content: '';
+        height: 14px;
+        width: 1px;
+        background-color: var(--alias-colors-border-default, #e5e7eb);
+      }
+    }
+  }
+}

package/dist/Select/style/option.less

@@ -1,3 +1,42 @@
-// option
-@select-single-option-height: 32px;
-@select-multiple-option-height: 36px;
+@select-option-height: 36px;
+
+.ald-option {
+  padding: var(--alias-padding-100, 8px) var(--alias-padding-150, 12px);
+  display: flex;
+  height: @select-option-height;
+  align-items: center;
+  cursor: pointer;
+  color: var(--alias-colors-text-default, #1f2937);
+  gap: var(--alias-spacing-50, 4px);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+
+  &:hover {
+    background-color: var(
+      --alias-colors-bg-interaction-hover,
+      rgba(0, 0, 0, 0.05)
+    );
+  }
+
+  &.ald-option-disabled {
+    background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
+    color: var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25));
+
+    &:hover {
+      cursor: default;
+    }
+  }
+
+  &.ald-option-selected {
+    color: var(--alias-colors-text-selected, #126fdd);
+  }
+}
+
+.ald-option-label {
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/Select/style/selectDropdown.less

@@ -0,0 +1,16 @@
+// select 下拉框
+.ant-select-dropdown.ant-select-dropdown {
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: var(--alias-radius-75, 6px);
+
+  &.ald-select-popup {
+    // max-height: 264px;
+    overflow-y: auto;
+    overflow-y: overlay;
+    border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+    background: var(--alias-colors-bg-skeleton-subtler, #fff);
+    box-shadow: 0 10px 18px -2px rgba(0, 0, 0, 0.08);
+    padding: 4px 0;
+  }
+}