@julingbase/jly-arco-design 0.0.1 → 0.0.3

package/es/alert/style/token.less

@@ -1,76 +1,76 @@
-@import '../../style/theme/index.less';
-
-@alert-border-width: @border-1;
-@alert-min-height: @size-10;
-@alert-border-radius: @radius-small;
-@alert-line-height: 1.5715;
-@alert-title-line-height: 1.5;
-@alert-title-margin-bottom: @spacing-2;
-@alert-margin-icon-right: @spacing-4;
-
-@alert-padding-horizontal: @spacing-7 - @alert-border-width;
-@alert-padding-vertical: 9px - @alert-border-width;
-@alert-padding-horizontal_with_title: @spacing-7 - @alert-border-width;
-@alert-padding-vertical_with_title: @spacing-7 - @alert-border-width;
-
-@alert-font-weight-title: @font-weight-500;
-@alert-font-size-text-title: @font-size-title-1;
-@alert-font-size-text-content: @font-size-body-3;
-@alert-font-size-icon: 16px;
-@alert-font-size-icon_with_title: 18px;
-@alert-font-size-close-icon: 12px;
-
-/*****************************************************
- * type: info / warning / error /success
- *****************************************************/
-@alert-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
-@alert-normal-color-border: @color-transparent;
-@alert-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-neutral-4');
-@alert-normal-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-normal-color-text-content_title: var(
-  ~'@{arco-cssvars-prefix}-color-text-2'
-);
-
-@alert-info-color-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
-@alert-info-color-border: @color-transparent;
-@alert-info-color-icon: @color-primary-6;
-@alert-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-info-color-text-content_title: var(
-  ~'@{arco-cssvars-prefix}-color-text-2'
-);
-
-@alert-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
-@alert-warning-color-border: @color-transparent;
-@alert-warning-color-icon: @color-warning-6;
-@alert-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-warning-color-text-content_title: var(
-  ~'@{arco-cssvars-prefix}-color-text-2'
-);
-
-@alert-error-color-bg: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
-@alert-error-color-border: @color-transparent;
-@alert-error-color-icon: @color-danger-6;
-@alert-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-error-color-text-content_title: var(
-  ~'@{arco-cssvars-prefix}-color-text-2'
-);
-
-@alert-success-color-bg: var(~'@{arco-cssvars-prefix}-color-success-light-1');
-@alert-success-color-border: @color-transparent;
-@alert-success-color-icon: @color-success-6;
-@alert-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-success-color-text-content_title: var(
-  ~'@{arco-cssvars-prefix}-color-text-2'
-);
-
-// 关闭图标
-@alert-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@alert-color-close-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
-@alert-margin-close-icon-left: @spacing-4;
-@alert-margin-action-left: @spacing-4;
-@alert-margin-action-right: @spacing-4;
+@import '../../style/theme/index.less';
+
+@alert-border-width: @border-1;
+@alert-min-height: @size-10;
+@alert-border-radius: @radius-small;
+@alert-line-height: 1.5715;
+@alert-title-line-height: 1.5;
+@alert-title-margin-bottom: @spacing-2;
+@alert-margin-icon-right: @spacing-4;
+
+@alert-padding-horizontal: @spacing-7 - @alert-border-width;
+@alert-padding-vertical: 9px - @alert-border-width;
+@alert-padding-horizontal_with_title: @spacing-7 - @alert-border-width;
+@alert-padding-vertical_with_title: @spacing-7 - @alert-border-width;
+
+@alert-font-weight-title: @font-weight-500;
+@alert-font-size-text-title: @font-size-title-1;
+@alert-font-size-text-content: @font-size-body-3;
+@alert-font-size-icon: 16px;
+@alert-font-size-icon_with_title: 18px;
+@alert-font-size-close-icon: 12px;
+
+/*****************************************************
+ * type: info / warning / error /success
+ *****************************************************/
+@alert-normal-color-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
+@alert-normal-color-border: @color-transparent;
+@alert-normal-color-icon: var(~'@{arco-cssvars-prefix}-color-neutral-4');
+@alert-normal-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-normal-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-normal-color-text-content_title: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+
+@alert-info-color-bg: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
+@alert-info-color-border: @color-transparent;
+@alert-info-color-icon: @color-primary-6;
+@alert-info-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-info-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-info-color-text-content_title: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+
+@alert-warning-color-bg: var(~'@{arco-cssvars-prefix}-color-warning-light-1');
+@alert-warning-color-border: @color-transparent;
+@alert-warning-color-icon: @color-warning-6;
+@alert-warning-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-warning-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-warning-color-text-content_title: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+
+@alert-error-color-bg: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
+@alert-error-color-border: @color-transparent;
+@alert-error-color-icon: @color-danger-6;
+@alert-error-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-error-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-error-color-text-content_title: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+
+@alert-success-color-bg: var(~'@{arco-cssvars-prefix}-color-success-light-1');
+@alert-success-color-border: @color-transparent;
+@alert-success-color-icon: @color-success-6;
+@alert-success-color-text-title: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-success-color-text-content: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-success-color-text-content_title: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+
+// 关闭图标
+@alert-color-close-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@alert-color-close-icon_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
+@alert-margin-close-icon-left: @spacing-4;
+@alert-margin-action-left: @spacing-4;
+@alert-margin-action-right: @spacing-4;

package/es/anchor/style/index.less

@@ -1,99 +1,99 @@
-@import './token.less';
-
-@anchor-prefix-cls: ~'@{prefix}-anchor';
-
-.@{anchor-prefix-cls} {
-  position: relative;
-  width: @anchor-width;
-  overflow: auto;
-
-  &-line {
-    &-slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      width: @anchor-line-width;
-      height: @anchor-line-slider-height;
-      margin-top: ((@anchor-font-size-title * @line-height-base) / 2 + @anchor-title-padding-vertical - @anchor-line-slider-height / 2);
-      background-color: @anchor-color-bg-line_active;
-      transition: top @transition-duration-2
-        @transition-timing-function-standard;
-    }
-  }
-
-  &-list {
-    position: relative;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal;
-    padding-left: 0;
-    list-style: none;
-
-    &::before {
-      position: absolute;
-      left: -(@anchor-line-margin-right - @anchor-title-padding-horizontal);
-      width: @anchor-line-width;
-      height: 100%;
-      background-color: @anchor-color-bg-line;
-      content: '';
-    }
-  }
-
-  &-sublist {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style: none;
-  }
-
-  &-link-item {
-    margin-bottom: @anchor-title-margin-bottom;
-
-    .@{anchor-prefix-cls}-link {
-      display: block;
-      margin-bottom: @anchor-title-margin-bottom;
-      padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal;
-      overflow: hidden;
-      color: @anchor-color-title;
-      font-size: @anchor-font-size-title;
-      line-height: @line-height-base;
-      white-space: nowrap;
-      text-decoration: none;
-      text-overflow: ellipsis;
-      border-radius: @anchor-border-radius-title-hover;
-      cursor: pointer;
-
-      &:hover {
-        color: @anchor-color-title_hover;
-        font-weight: @anchor-font-weight-title_hover;
-        background-color: @anchor-color-bg-title_hover;
-      }
-    }
-  }
-
-  &-link-active > &-link {
-    color: @anchor-color-title_active;
-    font-weight: @anchor-font-weight-title_active;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-  }
-
-  &-link-item &-link-item {
-    margin-left: @anchor-item-inner-margin-left;
-  }
-
-  // line-less
-  &-line-less &-list {
-    margin-left: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  &-line-less &-link-active > &-link {
-    color: @anchor-lineless-color-title_active;
-    font-weight: @anchor-lineless-font-weight-title_active;
-    background-color: @anchor-lineless-bg-title_active;
-  }
-}
+@import './token.less';
+
+@anchor-prefix-cls: ~'@{prefix}-anchor';
+
+.@{anchor-prefix-cls} {
+  position: relative;
+  width: @anchor-width;
+  overflow: auto;
+
+  &-line {
+    &-slider {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: @anchor-line-width;
+      height: @anchor-line-slider-height;
+      margin-top: ((@anchor-font-size-title * @line-height-base) / 2 + @anchor-title-padding-vertical - @anchor-line-slider-height / 2);
+      background-color: @anchor-color-bg-line_active;
+      transition: top @transition-duration-2
+        @transition-timing-function-standard;
+    }
+  }
+
+  &-list {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal;
+    padding-left: 0;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      left: -(@anchor-line-margin-right - @anchor-title-padding-horizontal);
+      width: @anchor-line-width;
+      height: 100%;
+      background-color: @anchor-color-bg-line;
+      content: '';
+    }
+  }
+
+  &-sublist {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  &-link-item {
+    margin-bottom: @anchor-title-margin-bottom;
+
+    .@{anchor-prefix-cls}-link {
+      display: block;
+      margin-bottom: @anchor-title-margin-bottom;
+      padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal;
+      overflow: hidden;
+      color: @anchor-color-title;
+      font-size: @anchor-font-size-title;
+      line-height: @line-height-base;
+      white-space: nowrap;
+      text-decoration: none;
+      text-overflow: ellipsis;
+      border-radius: @anchor-border-radius-title-hover;
+      cursor: pointer;
+
+      &:hover {
+        color: @anchor-color-title_hover;
+        font-weight: @anchor-font-weight-title_hover;
+        background-color: @anchor-color-bg-title_hover;
+      }
+    }
+  }
+
+  &-link-active > &-link {
+    color: @anchor-color-title_active;
+    font-weight: @anchor-font-weight-title_active;
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+  }
+
+  &-link-item &-link-item {
+    margin-left: @anchor-item-inner-margin-left;
+  }
+
+  // line-less
+  &-line-less &-list {
+    margin-left: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &-line-less &-link-active > &-link {
+    color: @anchor-lineless-color-title_active;
+    font-weight: @anchor-lineless-font-weight-title_active;
+    background-color: @anchor-lineless-bg-title_active;
+  }
+}

package/es/anchor/style/token.less

@@ -1,30 +1,30 @@
-@import '../../style/theme/index.less';
-
-// Line
-@anchor-width: 150px;
-@anchor-line-width: 2px;
-@anchor-line-slider-height: 12px;
-@anchor-line-margin-right: 12px;
-@anchor-color-bg-line: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@anchor-color-bg-line_active: @color-primary-6;
-
-@anchor-border-radius-title-hover: @radius-small;
-
-@anchor-item-inner-margin-left: @spacing-7;
-
-@anchor-title-padding-horizontal: @spacing-4;
-@anchor-title-padding-vertical: @spacing-2;
-@anchor-title-margin-bottom: @spacing-1;
-
-@anchor-color-title: var(~'@{arco-cssvars-prefix}-color-text-2');
-@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
-@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');
-@anchor-font-weight-title_hover: @font-weight-500;
-@anchor-font-weight-title_active: @font-weight-500;
-@anchor-color-bg-title_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@anchor-font-size-title: 14px;
-
-// Lineless
-@anchor-lineless-color-title_active: @color-primary-6;
-@anchor-lineless-bg-title_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@anchor-lineless-font-weight-title_active: @font-weight-500;
+@import '../../style/theme/index.less';
+
+// Line
+@anchor-width: 150px;
+@anchor-line-width: 2px;
+@anchor-line-slider-height: 12px;
+@anchor-line-margin-right: 12px;
+@anchor-color-bg-line: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@anchor-color-bg-line_active: @color-primary-6;
+
+@anchor-border-radius-title-hover: @radius-small;
+
+@anchor-item-inner-margin-left: @spacing-7;
+
+@anchor-title-padding-horizontal: @spacing-4;
+@anchor-title-padding-vertical: @spacing-2;
+@anchor-title-margin-bottom: @spacing-1;
+
+@anchor-color-title: var(~'@{arco-cssvars-prefix}-color-text-2');
+@anchor-color-title_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
+@anchor-color-title_active: var(~'@{arco-cssvars-prefix}-color-text-1');
+@anchor-font-weight-title_hover: @font-weight-500;
+@anchor-font-weight-title_active: @font-weight-500;
+@anchor-color-bg-title_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@anchor-font-size-title: 14px;
+
+// Lineless
+@anchor-lineless-color-title_active: @color-primary-6;
+@anchor-lineless-bg-title_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@anchor-lineless-font-weight-title_active: @font-weight-500;

package/es/auto-complete/auto-complete.d.ts

@@ -95,8 +95,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     onClear?: ((ev: Event) => any) | undefined;
     onSelect?: ((value: string) => any) | undefined;
-    onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
     onSearch?: ((value: string) => any) | undefined;
     onDropdownScroll?: ((ev: Event) => any) | undefined;
     onDropdownReachBottom?: ((ev: Event) => any) | undefined;
@@ -104,9 +104,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     disabled: boolean;
     strict: boolean;
     data: (string | number | SelectOptionData | SelectOptionGroup)[];
-    allowClear: boolean;
-    defaultValue: string;
     modelValue: string;
+    defaultValue: string;
+    allowClear: boolean;
     filterOption: FilterOption;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/auto-complete/index.d.ts

@@ -43,8 +43,8 @@ declare const AutoComplete: {
     }>> & Readonly<{
         onClear?: ((ev: Event) => any) | undefined;
         onSelect?: ((value: string) => any) | undefined;
-        onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onChange?: ((value: string) => any) | undefined;
         onSearch?: ((value: string) => any) | undefined;
         onDropdownScroll?: ((ev: Event) => any) | undefined;
         onDropdownReachBottom?: ((ev: Event) => any) | undefined;
@@ -66,9 +66,9 @@ declare const AutoComplete: {
         disabled: boolean;
         strict: boolean;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
-        allowClear: boolean;
-        defaultValue: string;
         modelValue: string;
+        defaultValue: string;
+        allowClear: boolean;
         filterOption: import("..").FilterOption;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -118,8 +118,8 @@ declare const AutoComplete: {
     }>> & Readonly<{
         onClear?: ((ev: Event) => any) | undefined;
         onSelect?: ((value: string) => any) | undefined;
-        onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onChange?: ((value: string) => any) | undefined;
         onSearch?: ((value: string) => any) | undefined;
         onDropdownScroll?: ((ev: Event) => any) | undefined;
         onDropdownReachBottom?: ((ev: Event) => any) | undefined;
@@ -133,9 +133,9 @@ declare const AutoComplete: {
         disabled: boolean;
         strict: boolean;
         data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
-        allowClear: boolean;
-        defaultValue: string;
         modelValue: string;
+        defaultValue: string;
+        allowClear: boolean;
         filterOption: import("..").FilterOption;
     }>;
     __isFragment?: undefined;
@@ -182,8 +182,8 @@ declare const AutoComplete: {
 }>> & Readonly<{
     onClear?: ((ev: Event) => any) | undefined;
     onSelect?: ((value: string) => any) | undefined;
-    onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
     onSearch?: ((value: string) => any) | undefined;
     onDropdownScroll?: ((ev: Event) => any) | undefined;
     onDropdownReachBottom?: ((ev: Event) => any) | undefined;
@@ -205,9 +205,9 @@ declare const AutoComplete: {
     disabled: boolean;
     strict: boolean;
     data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
-    allowClear: boolean;
-    defaultValue: string;
     modelValue: string;
+    defaultValue: string;
+    allowClear: boolean;
     filterOption: import("..").FilterOption;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: ArcoOptions | undefined) => void;

package/es/auto-complete/style/index.less

@@ -1,44 +1,44 @@
-@import './token.less';
-
-@auto-complete-prefix-cls: ~'@{prefix}-autocomplete';
-@select-prefix-cls: ~'@{prefix}-select';
-
-.@{auto-complete-prefix-cls} {
-  &-popup .@{select-prefix-cls}-popup {
-    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-    border: 1px solid @auto-complete-popup-color-border;
-    border-radius: @auto-complete-popup-border-radius;
-    box-shadow: @auto-complete-popup-box-shadow;
-
-    .@{select-prefix-cls}-popup-inner {
-      max-height: @auto-complete-popup-max-height;
-      padding: @auto-complete-popup-padding-vertical 0;
-    }
-
-    .@{select-prefix-cls}-option {
-      height: @auto-complete-option-height;
-      padding: 0 @auto-complete-option-padding-horizontal;
-      font-size: @auto-complete-popup-font-size;
-      line-height: $height;
-
-      .option-color(@status) {
-        @class-suffix: if(@status = default, ~'', ~'-@{status}');
-
-        &@{class-suffix} {
-          color: ~'@{auto-complete-option-color-text_@{status}}';
-          background-color: ~'@{auto-complete-option-color-bg_@{status}}';
-        }
-      }
-
-      .option-color(default);
-      .option-color(selected);
-      .option-color(hover);
-      // disabled 优先级最高，放在最后
-      .option-color(disabled);
-
-      &-selected {
-        font-weight: @auto-complete-option-font-weight_selected;
-      }
-    }
-  }
-}
+@import './token.less';
+
+@auto-complete-prefix-cls: ~'@{prefix}-autocomplete';
+@select-prefix-cls: ~'@{prefix}-select';
+
+.@{auto-complete-prefix-cls} {
+  &-popup .@{select-prefix-cls}-popup {
+    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+    border: 1px solid @auto-complete-popup-color-border;
+    border-radius: @auto-complete-popup-border-radius;
+    box-shadow: @auto-complete-popup-box-shadow;
+
+    .@{select-prefix-cls}-popup-inner {
+      max-height: @auto-complete-popup-max-height;
+      padding: @auto-complete-popup-padding-vertical 0;
+    }
+
+    .@{select-prefix-cls}-option {
+      height: @auto-complete-option-height;
+      padding: 0 @auto-complete-option-padding-horizontal;
+      font-size: @auto-complete-popup-font-size;
+      line-height: $height;
+
+      .option-color(@status) {
+        @class-suffix: if(@status = default, ~'', ~'-@{status}');
+
+        &@{class-suffix} {
+          color: ~'@{auto-complete-option-color-text_@{status}}';
+          background-color: ~'@{auto-complete-option-color-bg_@{status}}';
+        }
+      }
+
+      .option-color(default);
+      .option-color(selected);
+      .option-color(hover);
+      // disabled 优先级最高，放在最后
+      .option-color(disabled);
+
+      &-selected {
+        font-weight: @auto-complete-option-font-weight_selected;
+      }
+    }
+  }
+}

package/es/auto-complete/style/token.less

@@ -1,29 +1,29 @@
-@import '../../style/theme/index.less';
-
-/**********************************************
- * Popup Box
- **********************************************/
-@auto-complete-popup-max-height: @size-50;
-@auto-complete-popup-border-radius: @radius-medium;
-@auto-complete-popup-padding-vertical: @spacing-2;
-@auto-complete-popup-font-size: @font-size-body-3;
-@auto-complete-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@auto-complete-popup-box-shadow: @shadow2-down;
-
-/**********************************************
- * Popup Options
- * status: default / disabled / selected / hover
- **********************************************/
-@auto-complete-option-height: @size-9;
-@auto-complete-option-font-weight_selected: @font-weight-500;
-@auto-complete-option-padding-horizontal: @spacing-6;
-
-@auto-complete-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-@auto-complete-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@auto-complete-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-@auto-complete-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-
-@auto-complete-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
-@auto-complete-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
-@auto-complete-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
-@auto-complete-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@import '../../style/theme/index.less';
+
+/**********************************************
+ * Popup Box
+ **********************************************/
+@auto-complete-popup-max-height: @size-50;
+@auto-complete-popup-border-radius: @radius-medium;
+@auto-complete-popup-padding-vertical: @spacing-2;
+@auto-complete-popup-font-size: @font-size-body-3;
+@auto-complete-popup-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@auto-complete-popup-box-shadow: @shadow2-down;
+
+/**********************************************
+ * Popup Options
+ * status: default / disabled / selected / hover
+ **********************************************/
+@auto-complete-option-height: @size-9;
+@auto-complete-option-font-weight_selected: @font-weight-500;
+@auto-complete-option-padding-horizontal: @spacing-6;
+
+@auto-complete-option-color-bg_default: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+@auto-complete-option-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@auto-complete-option-color-bg_selected: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+@auto-complete-option-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+
+@auto-complete-option-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
+@auto-complete-option-color-text_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
+@auto-complete-option-color-text_selected: var(~'@{arco-cssvars-prefix}-color-text-1');
+@auto-complete-option-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');