@sdata/web-vue 1.10.0 → 1.11.0

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

@@ -1,6 +1,15 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
+import type { FilterOption, SelectOptionData, SelectOptionGroup } from '../select/interface';
 import _AutoComplete from './auto-complete';
+export type AutoCompleteData = Array<string | number | SelectOptionData | SelectOptionGroup>;
+export type AutoCompleteFilterOption = FilterOption;
+export type AutoCompleteChangeHandler = (value: string) => void;
+export type AutoCompleteSearchHandler = (value: string) => void;
+export type AutoCompleteSelectHandler = (value: string) => void;
+export type AutoCompleteClearHandler = (event: Event) => void;
+export type AutoCompleteDropdownScrollHandler = (event: Event) => void;
+export type AutoCompleteDropdownReachBottomHandler = (event: Event) => void;
 declare const AutoComplete: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
@@ -16,7 +25,7 @@ declare const AutoComplete: {
             default: boolean;
         };
         data: {
-            type: import("vue").PropType<(string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[]>;
+            type: import("vue").PropType<(string | number | SelectOptionData | SelectOptionGroup)[]>;
             default: () => never[];
         };
         popupContainer: {
@@ -27,7 +36,7 @@ declare const AutoComplete: {
             default: boolean;
         };
         filterOption: {
-            type: import("vue").PropType<import("..").FilterOption>;
+            type: import("vue").PropType<FilterOption>;
             default: boolean;
         };
         triggerProps: {
@@ -65,11 +74,11 @@ declare const AutoComplete: {
     }, import("vue").PublicProps, {
         disabled: boolean;
         defaultValue: string;
-        data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+        data: (string | number | SelectOptionData | SelectOptionGroup)[];
+        strict: boolean;
         modelValue: string;
         allowClear: boolean;
-        filterOption: import("..").FilterOption;
-        strict: boolean;
+        filterOption: FilterOption;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -91,7 +100,7 @@ declare const AutoComplete: {
             default: boolean;
         };
         data: {
-            type: import("vue").PropType<(string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[]>;
+            type: import("vue").PropType<(string | number | SelectOptionData | SelectOptionGroup)[]>;
             default: () => never[];
         };
         popupContainer: {
@@ -102,7 +111,7 @@ declare const AutoComplete: {
             default: boolean;
         };
         filterOption: {
-            type: import("vue").PropType<import("..").FilterOption>;
+            type: import("vue").PropType<FilterOption>;
             default: boolean;
         };
         triggerProps: {
@@ -132,11 +141,11 @@ declare const AutoComplete: {
     }, {
         disabled: boolean;
         defaultValue: string;
-        data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+        data: (string | number | SelectOptionData | SelectOptionGroup)[];
+        strict: boolean;
         modelValue: string;
         allowClear: boolean;
-        filterOption: import("..").FilterOption;
-        strict: boolean;
+        filterOption: FilterOption;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -155,7 +164,7 @@ declare const AutoComplete: {
         default: boolean;
     };
     data: {
-        type: import("vue").PropType<(string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[]>;
+        type: import("vue").PropType<(string | number | SelectOptionData | SelectOptionGroup)[]>;
         default: () => never[];
     };
     popupContainer: {
@@ -166,7 +175,7 @@ declare const AutoComplete: {
         default: boolean;
     };
     filterOption: {
-        type: import("vue").PropType<import("..").FilterOption>;
+        type: import("vue").PropType<FilterOption>;
         default: boolean;
     };
     triggerProps: {
@@ -204,11 +213,11 @@ declare const AutoComplete: {
 }, string, {
     disabled: boolean;
     defaultValue: string;
-    data: (string | number | import("..").SelectOptionData | import("..").SelectOptionGroup)[];
+    data: (string | number | SelectOptionData | SelectOptionGroup)[];
+    strict: boolean;
     modelValue: string;
     allowClear: boolean;
-    filterOption: import("..").FilterOption;
-    strict: boolean;
+    filterOption: 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?: SDOptions) => void;
 };

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

@@ -38,22 +38,6 @@
   font-size: 14px;
   line-height: 36px;
 }
-.sd-autocomplete-popup .sd-select-popup .sd-select-option {
-  color: var(--color-text-1);
-  background-color: var(--color-bg-popup);
-}
-.sd-autocomplete-popup .sd-select-popup .sd-select-option-selected {
-  color: var(--color-text-1);
-  background-color: var(--color-bg-popup);
-}
-.sd-autocomplete-popup .sd-select-popup .sd-select-option-hover {
-  color: var(--color-text-1);
-  background-color: var(--color-fill-2);
-}
-.sd-autocomplete-popup .sd-select-popup .sd-select-option-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-bg-popup);
-}
 .sd-autocomplete-popup .sd-select-popup .sd-select-option-selected {
   font-weight: 500;
 }

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

@@ -1,36 +1,21 @@
 @use '@style/theme/index.scss' as theme;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
+@use '@components/auto-complete/style/token.scss' as token;
 @use '@components/auto-complete/style/token.scss' as *;
 
 $auto-complete-prefix-cls: string.unquote('#{theme.$prefix}-autocomplete');
 $select-prefix-cls: string.unquote('#{theme.$prefix}-select');
 
-$__less-vars: (
-  'auto-complete-option-color-bg_default': $auto-complete-option-color-bg_default,
-  'auto-complete-option-color-bg_disabled': $auto-complete-option-color-bg_disabled,
-  'auto-complete-option-color-bg_hover': $auto-complete-option-color-bg_hover,
-  'auto-complete-option-color-bg_selected': $auto-complete-option-color-bg_selected,
-  'auto-complete-option-color-text_default': $auto-complete-option-color-text_default,
-  'auto-complete-option-color-text_disabled': $auto-complete-option-color-text_disabled,
-  'auto-complete-option-color-text_hover': $auto-complete-option-color-text_hover,
-  'auto-complete-option-color-text_selected': $auto-complete-option-color-text_selected,
-  'auto-complete-option-font-weight_selected': $auto-complete-option-font-weight_selected,
-  'auto-complete-option-height': $auto-complete-option-height,
-  'auto-complete-option-padding-horizontal': $auto-complete-option-padding-horizontal,
-  'auto-complete-popup-border-radius': $auto-complete-popup-border-radius,
-  'auto-complete-popup-box-shadow': $auto-complete-popup-box-shadow,
-  'auto-complete-popup-color-border': $auto-complete-popup-color-border,
-  'auto-complete-popup-font-size': $auto-complete-popup-font-size,
-  'auto-complete-popup-max-height': $auto-complete-popup-max-height,
-  'auto-complete-popup-padding-vertical': $auto-complete-popup-padding-vertical,
-  'prefix': theme.$prefix,
-  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
-);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
 
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 .#{$auto-complete-prefix-cls} {
@@ -59,8 +44,8 @@ $__less-vars: (
         }
 
         &#{$class-suffix} {
-          color: less-var('auto-complete-option-color-text_#{$status}');
-          background-color: less-var('auto-complete-option-color-bg_#{$status}');
+          color: token-var('auto-complete-option-color-text_#{$status}');
+          background-color: token-var('auto-complete-option-color-bg_#{$status}');
         }
       }
 

package/es/badge/style/index.scss

@@ -3,50 +3,20 @@
 @use 'sass:list';
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
+@use '@components/badge/style/token.scss' as token;
 @use '@components/badge/style/token.scss' as *;
 
 $badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
 
-$__less-vars: (
-  'badge-color-count-bg': $badge-color-count-bg,
-  'badge-color-count-text': $badge-color-count-text,
-  'badge-color-dot-bg_default': $badge-color-dot-bg_default,
-  'badge-color-dot-bg_error': $badge-color-dot-bg_error,
-  'badge-color-dot-bg_processing': $badge-color-dot-bg_processing,
-  'badge-color-dot-bg_success': $badge-color-dot-bg_success,
-  'badge-color-dot-bg_warning': $badge-color-dot-bg_warning,
-  'badge-red-color-dot-bg': $badge-red-color-dot-bg,
-  'badge-orangered-color-dot-bg': $badge-orangered-color-dot-bg,
-  'badge-orange-color-dot-bg': $badge-orange-color-dot-bg,
-  'badge-gold-color-dot-bg': $badge-gold-color-dot-bg,
-  'badge-lime-color-dot-bg': $badge-lime-color-dot-bg,
-  'badge-green-color-dot-bg': $badge-green-color-dot-bg,
-  'badge-cyan-color-dot-bg': $badge-cyan-color-dot-bg,
-  'badge-sdblue-color-dot-bg': $badge-sdblue-color-dot-bg,
-  'badge-purple-color-dot-bg': $badge-purple-color-dot-bg,
-  'badge-pinkpurple-color-dot-bg': $badge-pinkpurple-color-dot-bg,
-  'badge-magenta-color-dot-bg': $badge-magenta-color-dot-bg,
-  'badge-gray-color-dot-bg': $badge-gray-color-dot-bg,
-  'badge-color-status-text': $badge-color-status-text,
-  'badge-font-count-size': $badge-font-count-size,
-  'badge-font-count-weight': $badge-font-count-weight,
-  'badge-font-status-text-size': $badge-font-status-text-size,
-  'badge-margin-status-text-left': $badge-margin-status-text-left,
-  'badge-padding-count-horizontal': $badge-padding-count-horizontal,
-  'badge-size-count-height': $badge-size-count-height,
-  'badge-size-dot-width': $badge-size-dot-width,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'radius-circle': global.$radius-circle,
-  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
-  'transition-duration-3': theme.$transition-duration-3,
-  'transition-duration-5': theme.$transition-duration-5,
-  'transition-timing-function-overshoot': theme.$transition-timing-function-overshoot,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 .#{$badge-prefix-cls} {
@@ -159,7 +129,7 @@ $__less-vars: (
       $color: string.unquote('badge-#{$color-name}-color-dot-bg');
 
       &-color-#{$color-name} {
-        background-color: less-var($color);
+        background-color: token-var($color);
       }
 
       @include for($data, ($i + 1));