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

package/dist/Select/style/size.less

@@ -18,53 +18,129 @@
   &.ald-select-small {
     height: @select-height-small;
     font-size: @select-font-size-small;
-    // line-height: @select-line-height-small;
     border-radius: @select-border-radius-small;
     .compact(@select-border-radius-small);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-small;
+      margin-left: @select-padding-horizontal-small;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-small;
-      padding-left: calc(
-        @select-padding-left-small + var(--ald-select-prefix-width)
-      );
-
-      .ant-select-selection-item {
+    .ant-select {
+      .ant-select-selector {
+        height: @selector-height-small;
         line-height: @selector-height-small;
-        font-size: @select-font-size-small;
-        height: 100%;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-small + var(--ald-select-prefix-width)
+        );
+        padding-right: @select-padding-horizontal-small;
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-small;
-        line-height: @selector-height-small;
+        .ant-select-selection-item {
+          line-height: inherit;
+          font-size: @select-font-size-small;
+          height: 100%;
+        }
+
+        .ald-select-multiple-tag-default {
+          line-height: inherit;
+          font-size: @select-font-size-small;
+        }
+
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-small;
+          line-height: inherit;
+        }
+
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-small;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-small + var(--ald-select-prefix-width)
+          );
+        }
       }
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-small;
+      &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+        .ant-select-selector {
+          padding-right: calc(
+            @select-padding-horizontal-small + @select-icon-use-width-small
+          );
+        }
       }
 
-      .ant-select-selection-placeholder {
-        line-height: @selector-height-small;
-        font-size: @select-font-size-small;
-        left: calc(@select-padding-left-small + var(--ald-select-prefix-width));
+      .ant-select-arrow {
+        right: @select-padding-horizontal-small;
       }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-small;
+      .ant-select-clear {
+        right: @select-padding-horizontal-small;
+
+        &::before {
+          left: -@selector-gap-small;
+        }
       }
     }
 
     .ald-select-prefix-select {
+      // 单选值容器
       .ant-select-selection-item {
-        margin-left: @selector-item-margin-left-small;
+        margin-left: @selector-gap-small;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-small;
       }
 
       .ant-select-selection-placeholder {
-        margin-left: @selector-item-margin-left-small;
+        margin-left: @selector-gap-small;
+      }
+    }
+
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-small + @select-icon-use-width-small
+            );
+          }
+
+          .ant-select-arrow {
+            right: @select-padding-horizontal-small;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-small;
+
+            &::before {
+              left: -@selector-gap-small;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-small + @selector-gap-small +
+                @select-icon-use-width-small + @select-icon-use-width-small
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-small + @select-icon-use-width-small +
+                @selector-gap-small
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-small;
+
+            &::before {
+              left: -@selector-gap-small;
+            }
+          }
+        }
       }
     }
   }
@@ -72,55 +148,129 @@
   &.ald-select-middle {
     height: @select-height-middle;
     font-size: @select-font-size-middle;
-    // line-height: @select-line-height-middle;
     border-radius: @select-border-radius-middle;
     .compact(@select-border-radius-middle);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-middle;
+      margin-left: @select-padding-horizontal-middle;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-middle;
-      padding-left: calc(
-        @select-padding-left-middle + var(--ald-select-prefix-width)
-      );
-
-      .ant-select-selection-item {
+    .ant-select {
+      .ant-select-selector {
+        height: @selector-height-middle;
         line-height: @selector-height-middle;
-        font-size: @select-font-size-middle;
-        height: 100%;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-middle + var(--ald-select-prefix-width)
+        );
+        padding-right: @select-padding-horizontal-middle;
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-middle;
-        line-height: @selector-height-middle;
+        .ant-select-selection-item {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+          height: 100%;
+        }
+
+        .ald-select-multiple-tag-default {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+        }
+
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-middle;
+          line-height: inherit;
+        }
+
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-middle;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-middle + var(--ald-select-prefix-width)
+          );
+        }
       }
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-middle;
+      &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+        .ant-select-selector {
+          padding-right: calc(
+            @select-padding-horizontal-middle + @select-icon-use-width-middle
+          );
+        }
       }
 
-      .ant-select-selection-placeholder {
-        line-height: @selector-height-middle;
-        font-size: @select-font-size-middle;
-        left: calc(
-          @select-padding-left-middle + var(--ald-select-prefix-width)
-        );
+      .ant-select-arrow {
+        right: @select-padding-horizontal-middle;
       }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-middle;
+      .ant-select-clear {
+        right: @select-padding-horizontal-middle;
+
+        &::before {
+          left: -@selector-gap-middle;
+        }
       }
     }
 
     .ald-select-prefix-select {
+      // 单选值容器
       .ant-select-selection-item {
-        margin-left: @selector-item-margin-left-middle;
+        margin-left: @selector-gap-middle;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-middle;
       }
 
       .ant-select-selection-placeholder {
-        margin-left: @selector-item-margin-left-middle;
+        margin-left: @selector-gap-middle;
+      }
+    }
+
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-middle + @select-icon-use-width-middle
+            );
+          }
+
+          .ant-select-arrow {
+            right: @select-padding-horizontal-middle;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-middle;
+
+            &::before {
+              left: -@selector-gap-middle;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-middle + @selector-gap-middle +
+                @select-icon-use-width-middle + @select-icon-use-width-middle
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-middle + @select-icon-use-width-middle +
+                @selector-gap-middle
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-middle;
+
+            &::before {
+              left: -@selector-gap-middle;
+            }
+          }
+        }
       }
     }
   }
@@ -128,53 +278,137 @@
   &.ald-select-large {
     height: @select-height-large;
     font-size: @select-font-size-large;
-    // line-height: @select-line-height-large;
     border-radius: @select-border-radius-large;
     .compact(@select-border-radius-large);
 
     .ald-select-prefix {
-      margin-left: @select-padding-left-large;
+      margin-left: @select-padding-horizontal-large;
     }
 
-    .ant-select .ant-select-selector {
-      height: @selector-height-large;
-      padding-left: calc(
-        @select-padding-left-large + var(--ald-select-prefix-width)
-      );
-
-      .ant-select-selection-item {
+    .ant-select {
+      .ant-select-selector {
+        height: @selector-height-large;
         line-height: @selector-height-large;
-        font-size: @select-font-size-large;
-        height: 100%;
-      }
+        padding-left: calc(
+          @select-padding-horizontal-large + var(--ald-select-prefix-width)
+        );
+        padding-right: @select-padding-horizontal-large;
 
-      .ald-select-multiple-tag-default {
-        font-size: @select-font-size-large;
-        line-height: @selector-height-large;
+        .ant-select-selection-item {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+          height: 100%;
+        }
+
+        .ald-select-multiple-tag-default {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+        }
+
+        .ant-select-selection-search .ant-select-selection-search-input {
+          height: @selector-height-large;
+          line-height: inherit;
+        }
+
+        .ant-select-selection-placeholder {
+          font-size: @select-font-size-large;
+          line-height: inherit;
+          left: calc(
+            @select-padding-horizontal-large + var(--ald-select-prefix-width)
+          );
+        }
+
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large
+            );
+          }
+        }
+
+        .ant-select-arrow {
+          right: @select-padding-horizontal-large;
+        }
+
+        .ant-select-clear {
+          right: @select-padding-horizontal-large;
+
+          &::before {
+            left: -@selector-gap-large;
+          }
+        }
       }
+    }
 
-      .ant-select-selection-search .ant-select-selection-search-input {
-        height: @selector-height-large;
+    .ald-select-prefix-select {
+      // 单选值容器
+      .ant-select-selection-item {
+        margin-left: @selector-gap-large;
+      }
+      // 多选值容器
+      .ant-select-selection-overflow {
+        margin-left: @selector-gap-large;
       }
 
       .ant-select-selection-placeholder {
-        line-height: @selector-height-large;
-        font-size: @select-font-size-large;
-        left: calc(@select-padding-left-large + var(--ald-select-prefix-width));
+        margin-left: @selector-gap-large;
       }
+    }
 
-      .ant-select-selection-overflow {
-        margin-left: @selector-item-margin-left-large;
+    &.ald-select-has-value {
+      .ant-select {
+        &.ant-select-allow-clear:not(.ant-select-show-arrow),
+        &.ant-select-show-arrow:not(.ant-select-allow-clear) {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large
+            );
+          }
 
-        .ant-select-selection-overflow-item-rest {
-          .ant-select-selection-item {
-            padding-inline-start: 0;
+          .ant-select-arrow {
+            right: @select-padding-horizontal-large;
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-large;
+
+            &::before {
+              left: -@selector-gap-large;
+            }
+          }
+        }
+
+        &.ant-select-show-arrow.ant-select-allow-clear {
+          .ant-select-selector {
+            padding-right: calc(
+              @select-padding-horizontal-large + @selector-gap-large +
+                @select-icon-use-width-large + @select-icon-use-width-large
+            );
+          }
+
+          .ant-select-arrow {
+            right: calc(
+              @select-padding-horizontal-large + @select-icon-use-width-large +
+                @selector-gap-large
+            );
+          }
+
+          .ant-select-clear {
+            right: @select-padding-horizontal-large;
+
+            &::before {
+              left: -@selector-gap-large;
+            }
           }
         }
       }
     }
   }
 
+  .ant-select-selector {
+    border: none !important;
+  }
+
   .ant-select-clear {
     width: 16px;
     height: 16px;
@@ -182,13 +416,11 @@
     margin-top: 0;
   }
 
-  .ald-select-prefix-select {
-    .ant-select-selection-item {
-      margin-left: @selector-item-margin-left-large;
-    }
+  &.ald-select-primary {
+    font-weight: 500;
+  }
 
-    .ant-select-selection-placeholder {
-      margin-left: @selector-item-margin-left-large;
-    }
+  &.ald-select-secondary {
+    font-weight: 400;
   }
 }

package/dist/Select/style/status.less

@@ -1,22 +1,31 @@
-.ald-select.ald-select {
-  /**
-   * @file focused状态
-   */
-  // &:hover,
-  &.ald-select-open,
-  &.ald-select-focus {
-    border-color: @B40;
-    z-index: 1;
-    // box-shadow: @shadow-drop;
-  }
-
-  /**
-   * @file disabled状态
-   */
+.select-color(@borderColor, @bgColor,@textColor) {
+  border-color: @borderColor;
+  background-color: @bgColor;
+  color: @textColor;
+
+  .ant-select-selection-placeholder {
+    color: var(--alias-colors-text-subtlest, #9ca3af);
+  }
+}
+
+.ald-select.ald-select-primary {
+  .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+
+  &.ald-select-fitted {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
+
+  &:hover {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+  }
+
+  &:active {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-strong, #F3F4F6),var(--alias-colors-text-default, #1f2937));
+  }
+
   &.ald-select-disabled {
-    border-color: @BG60;
-    background-color: @BG90;
-    box-shadow: none;
+    .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25)));
+
     cursor: default;
 
     .ant-select .ant-select-selector {
@@ -25,11 +34,50 @@
       .ant-select-selection-search input {
         cursor: default;
       }
+    }
+  }
+
+  &.ald-select-status-error {
+    .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
+}
+
+.ald-select {
+  &.ald-select-secondary {
+    .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+
+    &.ald-select-fitted {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
+
+    &:hover {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-hover, #9ca3af),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
+
+    &:active {
+      .select-color(var(--alias-colors-border-accent-gray-subtle-default, #D1D5DB),var(--alias-colors-bg-skeleton-subtler, #FFF),var(--alias-colors-text-default, #1f2937));
+    }
 
-      .ant-select-selection-placeholder,
-      .ant-select-selection-item {
-        color: @NL40;
+    &.ald-select-disabled {
+      .select-color(var(--alias-colors-border-disabled, rgba(0, 0, 0, 0.1)),var(--alias-colors-bg-transp, rgba(0, 0, 0, 0)),var(--alias-colors-text-disabled, rgba(0, 0, 0, 0.25)));
+
+      cursor: default;
+
+      .ant-select {
+        cursor: default;
+
+        .ant-select-selector {
+          cursor: default;
+        }
+
+        .ant-select-selection-search input {
+          cursor: default;
+        }
       }
     }
   }
+
+  &.ald-select-status-error {
+    .select-color(var(--alias-colors-border-danger, #DC2626),var(--alias-colors-bg-skeleton-subtle, #F9FAFB),var(--alias-colors-text-default, #1f2937));
+  }
 }

package/dist/Select/style/variables.less

@@ -1,35 +1,31 @@
-/* stylelint-disable property-no-unknown */
 @import '../../style/index.less';
 @import './option.less';
 // large size
 @select-height-large: 36px;
-@select-border-radius-large: 4px;
+@select-border-radius-large: 8px;
 @select-font-size-large: 16px;
 @select-line-height-large: 24px;
-@select-padding-left-large: 11px;
+@select-padding-horizontal-large: var(--alias-padding-150-minus-1, 12px);
 @selector-height-large: 34px;
-@selector-item-margin-left-large: 8px;
-// @prefix-margin-right-large: 8px;
-// @select-padding-horizontal-large: 11px;
+@selector-gap-large: 8px;
+@select-icon-use-width-large: 24px; //16+8
 
 // medium size
 @select-height-middle: 32px;
-@select-border-radius-middle: 2px;
-@select-font-size-middle: 13px;
+@select-border-radius-middle: 6px;
+@select-font-size-middle: 14px;
 @select-line-height-middle: 20px;
-@select-padding-left-middle: 7px;
+@select-padding-horizontal-middle: var(--alias-padding-150-minus-1, 12px);
 @selector-height-middle: 30px;
-@selector-item-margin-left-middle: 4px;
-// @prefix-margin-right-middle: 8px;
-// @select-padding-horizontal-middle: 11px;
+@selector-gap-middle: 6px;
+@select-icon-use-width-middle: 22px; //16+6
 
 // small size
 @select-height-small: 28px;
-@select-border-radius-small: 2px;
+@select-border-radius-small: 4px;
 @select-font-size-small: 12px;
 @select-line-height-small: 16px;
-@select-padding-left-small: 7px;
+@select-padding-horizontal-small: var(--alias-padding-150-minus-1, 12px);
 @selector-height-small: 26px;
-@selector-item-margin-left-small: 4px;
-// @prefix-margin-right-small: 4px;
-// @select-padding-horizontal-small: 7px;
+@selector-gap-small: 4px;
+@select-icon-use-width-small: 20px; //16+4