@sdata/web-vue 1.9.0 → 1.11.0

package/es/cascader/interface.d.ts

@@ -1,16 +1,22 @@
-import { RenderFunction } from 'vue';
 import { BaseType, FieldString } from '../_utils/types';
 import { TagProps } from '../tag';
-export type CascaderBaseValue = BaseType | Record<string, any> | (BaseType | Record<string, any>)[];
+export type CascaderOptionValue = BaseType | Record<string, unknown>;
+export type CascaderPathValue = CascaderOptionValue[];
+export type CascaderSingleValue = CascaderOptionValue | CascaderPathValue;
+export type CascaderModelValue = CascaderSingleValue | CascaderSingleValue[] | undefined;
+export type CascaderFallback = (value: CascaderSingleValue) => string;
+export type CascaderFormatLabel = (options: CascaderOption[]) => string;
+export type CascaderLoadMore = (option: CascaderOption, done: (children?: CascaderOption[]) => void) => void;
+export type CascaderChangeHandler = (value: CascaderModelValue) => void;
+export type CascaderSearchHandler = (value: string) => void;
 export interface CascaderOption {
-    value?: string | number | Record<string, any>;
+    value?: CascaderOptionValue;
     label?: string;
-    render?: RenderFunction;
     disabled?: boolean;
     tagProps?: TagProps;
     children?: CascaderOption[];
     isLeaf?: boolean;
-    [other: string]: any;
+    [other: string]: unknown;
 }
 export type CascaderFieldNames = FieldString<CascaderOption>;
 export interface CascaderOptionWithTotal extends CascaderOption {
@@ -31,12 +37,12 @@ export interface CascaderNode extends CascaderOption {
     raw: CascaderOption;
 }
 export interface CascaderOptionInfo extends CascaderOptionWithTotal {
-    raw: Record<string, unknown>;
+    raw: CascaderOption;
     key: string;
     valueKey: string;
     level: number;
     index: number;
-    value: string | number;
+    value: CascaderOptionValue;
     label: string;
     disabled: boolean;
     selectionDisabled: boolean;
@@ -44,5 +50,5 @@ export interface CascaderOptionInfo extends CascaderOptionWithTotal {
     parent?: CascaderOptionInfo;
     children?: CascaderOptionInfo[];
     path: CascaderOptionInfo[];
-    pathValue: any[];
+    pathValue: CascaderPathValue;
 }

package/es/cascader/style/index.css

@@ -199,8 +199,10 @@
 }
 .sd-cascader-list-multiple .sd-cascader-option-label, .sd-cascader-list-strictly .sd-cascader-option-label {
   padding-left: 0;
+  text-align: start;
 }
 .sd-cascader-list-multiple .sd-cascader-option, .sd-cascader-list-strictly .sd-cascader-option {
+  width: 100%;
   padding-left: 12px;
 }
 .sd-cascader-list-multiple .sd-cascader-option .sd-checkbox,
@@ -278,6 +280,9 @@
 .sd-cascader-option-disabled .sd-icon-check, .sd-cascader-option-disabled:hover .sd-icon-check, .sd-cascader-search-option-disabled .sd-icon-check, .sd-cascader-search-option-disabled:hover .sd-icon-check {
   color: var(--color-primary-light-3);
 }
+.sd-cascader-option {
+  width: 100%;
+}
 .sd-cascader-option-active {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);

package/es/cascader/style/index.scss

@@ -96,9 +96,11 @@ $cascader-prefix-cls: string.unquote('#{theme.$prefix}-cascader');
     &-strictly {
       .#{$cascader-prefix-cls}-option-label {
         padding-left: 0;
+        text-align: start;
       }
 
       .#{$cascader-prefix-cls}-option {
+        width: 100%;
         padding-left: $cascader-padding-item-left;
 
         .#{theme.$prefix}-checkbox,
@@ -207,6 +209,8 @@ $cascader-prefix-cls: string.unquote('#{theme.$prefix}-cascader');
   }
 
   &-option {
+    width: 100%;
+
     &-active {
       color: $cascader-color-item-text_active;
       background-color: $cascader-color-item-bg_active;

package/es/cascader/utils.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
-import { BaseType, UnionType } from '../_utils/types';
-import { CascaderOption, CascaderOptionInfo, CascaderFieldNames } from './interface';
+import { BaseType } from '../_utils/types';
+import { CascaderFieldNames, CascaderModelValue, CascaderOption, CascaderOptionInfo, CascaderSingleValue } from './interface';
 export declare const getOptionInfos: (options: CascaderOption[], { optionMap, leafOptionMap, leafOptionSet, leafOptionValueMap, totalLevel: innerLevel, checkStrictly, enabledLazyLoad, lazyLoadOptions, valueKey, fieldNames, }: {
     optionMap: Map<string, CascaderOptionInfo>;
     leafOptionMap: Map<string, CascaderOptionInfo>;
@@ -19,17 +19,20 @@ export declare const getCheckedStatus: (option: CascaderOptionInfo, valueMap?: M
 };
 export declare const getLeafOptionKeys: (option: CascaderOptionInfo) => string[];
 export declare const getLeafOptionInfos: (option: CascaderOptionInfo) => CascaderOptionInfo[];
-export declare const getValueKey: (value: UnionType | UnionType[], { valueKey, leafOptionValueMap }: {
+export declare const getValueKey: (value: CascaderSingleValue, { valueKey, leafOptionValueMap }: {
     valueKey: string;
     leafOptionValueMap: Map<BaseType, string>;
 }) => string;
-export declare const getValidValues: (value: UnionType | UnionType[] | UnionType[][] | undefined, { multiple, pathMode }: {
+export declare const getValidValues: (value: CascaderModelValue, { multiple, pathMode }: {
     multiple: boolean;
     pathMode: boolean;
-}) => UnionType[] | UnionType[][];
+}) => CascaderSingleValue[];
 export declare const getKeysFromValue: (value: string | number | Array<string | number> | undefined | (string | number | Array<string | number>)[], { pathMode, leafOptionMap, leafOptionValueMap, }: {
     pathMode: boolean;
     leafOptionMap: Map<string | number, CascaderOptionInfo>;
     leafOptionValueMap: Map<string | number, CascaderOptionInfo>;
 }) => string[];
-export declare const getOptionLabel: (option: CascaderOptionInfo) => string;
+export declare const getOptionLabel: (option: CascaderOptionInfo, { separator, showPath, }?: {
+    separator?: string;
+    showPath?: boolean;
+}) => string;

package/es/cascader/utils.js

@@ -2,6 +2,26 @@ import { isArray, isNull, isNumber, isObject, isUndefined } from "../_utils/is.j
 //#region components/cascader/utils.ts
 var getOptionInfos = (options, { optionMap, leafOptionMap, leafOptionSet, leafOptionValueMap, totalLevel: innerLevel, checkStrictly, enabledLazyLoad, lazyLoadOptions, valueKey, fieldNames }) => {
 	let totalLevel = 0;
+	const getTotalLeafOptions = (children) => {
+		return children.reduce((pre, item) => {
+			if (isNumber(item.totalLeafOptions)) return pre + item.totalLeafOptions;
+			if (item.disabled || item.selectionDisabled) return pre;
+			return pre + (item.isLeaf ? 1 : 0);
+		}, 0);
+	};
+	const resolveChildren = (item, data, key, level) => {
+		if (item[fieldNames.children]) {
+			data.isLeaf = false;
+			data.children = travelOptions(item[fieldNames.children], data, level + 1);
+			return;
+		}
+		if (enabledLazyLoad && !data.isLeaf) {
+			data.isLeaf = false;
+			if (lazyLoadOptions[key]) data.children = travelOptions(lazyLoadOptions[key], data, level + 1);
+			return;
+		}
+		data.isLeaf = true;
+	};
 	const travelOptions = (options, parent, level) => {
 		var _parent$path;
 		const parentPath = (_parent$path = parent === null || parent === void 0 ? void 0 : parent.path) !== null && _parent$path !== void 0 ? _parent$path : [];
@@ -9,15 +29,16 @@ var getOptionInfos = (options, { optionMap, leafOptionMap, leafOptionSet, leafOp
 		return options.map((item, index) => {
 			var _item$fieldNames$labe;
 			const value = item[fieldNames.value];
+			const normalizedValue = value !== null && value !== void 0 ? value : "";
+			const fallbackLabel = isObject(normalizedValue) ? String(normalizedValue[valueKey.value]) : String(normalizedValue);
 			const data = {
 				raw: item,
-				value,
-				label: (_item$fieldNames$labe = item[fieldNames.label]) !== null && _item$fieldNames$labe !== void 0 ? _item$fieldNames$labe : String(value),
+				value: normalizedValue,
+				label: (_item$fieldNames$labe = item[fieldNames.label]) !== null && _item$fieldNames$labe !== void 0 ? _item$fieldNames$labe : fallbackLabel,
 				disabled: Boolean(item[fieldNames.disabled]),
 				selectionDisabled: false,
-				render: item[fieldNames.render],
 				tagProps: item[fieldNames.tagProps],
-				isLeaf: item[fieldNames.isLeaf],
+				isLeaf: Boolean(item[fieldNames.isLeaf]),
 				level: parentPath.length,
 				index,
 				key: "",
@@ -28,26 +49,16 @@ var getOptionInfos = (options, { optionMap, leafOptionMap, leafOptionSet, leafOp
 			};
 			const path = parentPath.concat(data);
 			const pathValue = [];
-			const key = path.map((item) => {
-				pathValue.push(item.value);
-				return item.valueKey;
+			const key = path.map((pathItem) => {
+				pathValue.push(pathItem.value);
+				return pathItem.valueKey;
 			}).join("-");
 			data.path = path;
 			data.pathValue = pathValue;
 			data.key = key;
-			if (item[fieldNames.children]) {
-				data.isLeaf = false;
-				data.children = travelOptions(item[fieldNames.children], data, (level !== null && level !== void 0 ? level : 1) + 1);
-			} else if (enabledLazyLoad && !data.isLeaf) {
-				data.isLeaf = false;
-				if (lazyLoadOptions[key]) data.children = travelOptions(lazyLoadOptions[key], data, (level !== null && level !== void 0 ? level : 1) + 1);
-			} else data.isLeaf = true;
+			resolveChildren(item, data, key, level !== null && level !== void 0 ? level : 1);
 			if (data.children && !data.disabled) {
-				data.totalLeafOptions = data.children.reduce((pre, item) => {
-					if (isNumber(item.totalLeafOptions)) return pre + item.totalLeafOptions;
-					if (item.disabled || item.selectionDisabled) return pre;
-					return pre + (item.isLeaf ? 1 : 0);
-				}, 0);
+				data.totalLeafOptions = getTotalLeafOptions(data.children);
 				if (data.totalLeafOptions === 0 && !checkStrictly.value) data.selectionDisabled = true;
 			}
 			optionMap.set(data.key, data);
@@ -110,8 +121,9 @@ var getValidValues = (value, { multiple, pathMode }) => {
 	if (pathMode && !multiple && value.length > 0 && !isArray(value[0])) return [value];
 	return value;
 };
-var getOptionLabel = (option) => {
-	return option.path.map((item) => item.label).join(" / ");
+var getOptionLabel = (option, { separator = " / ", showPath = true } = {}) => {
+	if (!showPath) return option.label;
+	return option.path.map((item) => item.label).join(separator);
 };
 //#endregion
 export { getCheckedStatus, getLeafOptionInfos, getLeafOptionKeys, getOptionInfos, getOptionLabel, getValidValues, getValueKey };

package/es/checkbox/checkbox-group.d.ts

@@ -56,7 +56,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     disabled: boolean;
     defaultValue: (string | number | boolean)[];
-    modelValue: (string | number | boolean)[];
     direction: "horizontal" | "vertical";
+    modelValue: (string | number | boolean)[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/checkbox/context.d.ts

@@ -1,7 +1,7 @@
 import type { InjectionKey, Slots } from 'vue';
 export interface CheckboxGroupContext {
     name: 'SDCheckboxGroup';
-    computedValue: Array<string | number>;
+    computedValue: Array<string | number | boolean>;
     disabled: boolean;
     isMaxed: boolean;
     slots: Slots;

package/es/checkbox/index.d.ts

@@ -239,8 +239,8 @@ declare const Checkbox: {
     }>, {
         disabled: boolean;
         defaultValue: (string | number | boolean)[];
-        modelValue: (string | number | boolean)[];
         direction: "horizontal" | "vertical";
+        modelValue: (string | number | boolean)[];
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     install: (app: App, options?: SDOptions) => void;
 };

package/es/collapse/collapse-item.d.ts

@@ -89,6 +89,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;
@@ -131,6 +132,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, {
             spin: boolean;
@@ -168,6 +170,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => true;
@@ -207,6 +210,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;
@@ -249,6 +253,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, {
             spin: boolean;
@@ -286,6 +291,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             [x: string]: boolean;
         })[]>;
         innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+        svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
         onClick: (ev: MouseEvent) => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         click: (ev: MouseEvent) => true;

package/es/collapse/index.d.ts

@@ -247,6 +247,7 @@ declare const Collapse: {
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 click: (ev: MouseEvent) => true;
@@ -289,6 +290,7 @@ declare const Collapse: {
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, {
                 spin: boolean;
@@ -326,6 +328,7 @@ declare const Collapse: {
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;
@@ -365,6 +368,7 @@ declare const Collapse: {
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 click: (ev: MouseEvent) => true;
@@ -407,6 +411,7 @@ declare const Collapse: {
                     [x: string]: boolean;
                 })[]>;
                 innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+                svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
                 onClick: (ev: MouseEvent) => void;
             }, {}, {}, {}, {
                 spin: boolean;
@@ -444,6 +449,7 @@ declare const Collapse: {
                 [x: string]: boolean;
             })[]>;
             innerStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+            svgAttrs: import("vue").ComputedRef<Record<string, string | number>>;
             onClick: (ev: MouseEvent) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: MouseEvent) => true;

package/es/color-picker/color-picker.d.ts

@@ -168,6 +168,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: "mini" | "small" | "medium" | "large";
     disabled: boolean;
     defaultValue: string;
+    clearable: boolean;
     enableAlpha: boolean;
     colorModes: ColorModes;
     enableMultipleGradient: boolean;
@@ -176,7 +177,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     recentColors: RecentColorsValue;
     swatchColors: string[] | null;
     borderless: boolean;
-    clearable: boolean;
     hideTrigger: boolean;
     showText: boolean;
     showHistory: boolean;

package/es/color-picker/index.d.ts

@@ -102,6 +102,7 @@ declare const ColorPicker: {
         size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
         defaultValue: string;
+        clearable: boolean;
         enableAlpha: boolean;
         colorModes: import("./interface").ColorModes;
         enableMultipleGradient: boolean;
@@ -110,7 +111,6 @@ declare const ColorPicker: {
         recentColors: import("./interface").RecentColorsValue;
         swatchColors: string[] | null;
         borderless: boolean;
-        clearable: boolean;
         hideTrigger: boolean;
         showText: boolean;
         showHistory: boolean;
@@ -209,6 +209,7 @@ declare const ColorPicker: {
         size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
         defaultValue: string;
+        clearable: boolean;
         enableAlpha: boolean;
         colorModes: import("./interface").ColorModes;
         enableMultipleGradient: boolean;
@@ -217,7 +218,6 @@ declare const ColorPicker: {
         recentColors: import("./interface").RecentColorsValue;
         swatchColors: string[] | null;
         borderless: boolean;
-        clearable: boolean;
         hideTrigger: boolean;
         showText: boolean;
         showHistory: boolean;
@@ -328,6 +328,7 @@ declare const ColorPicker: {
     size: "mini" | "small" | "medium" | "large";
     disabled: boolean;
     defaultValue: string;
+    clearable: boolean;
     enableAlpha: boolean;
     colorModes: import("./interface").ColorModes;
     enableMultipleGradient: boolean;
@@ -336,7 +337,6 @@ declare const ColorPicker: {
     recentColors: import("./interface").RecentColorsValue;
     swatchColors: string[] | null;
     borderless: boolean;
-    clearable: boolean;
     hideTrigger: boolean;
     showText: boolean;
     showHistory: boolean;

package/es/color-picker/style/index.scss

@@ -3,104 +3,22 @@
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
+@use '@components/color-picker/style/token.scss' as token;
 @use '@components/color-picker/style/token.scss' as *;
 
 $color-picker-prefix-cls: string.unquote('#{theme.$prefix}-color-picker');
 
-$__less-vars: (
-  'border-radius-circle': global.$border-radius-circle,
-  'border-radius-medium': global.$border-radius-medium,
-  'color-control-bar-alpha-margin-top': $color-control-bar-alpha-margin-top,
-  'color-control-bar-border-radius': $color-control-bar-border-radius,
-  'color-control-bar-handle-size': $color-control-bar-handle-size,
-  'color-control-bar-height': $color-control-bar-height,
-  'color-control-bar-width': $color-control-bar-width,
-  'color-input-bg-color': $color-input-bg-color,
-  'color-input-border-radius': $color-input-border-radius,
-  'color-input-size-mini-padding': $color-input-size-mini-padding,
-  'color-input-size-small-padding': $color-input-size-small-padding,
-  'color-input-size-medium-padding': $color-input-size-medium-padding,
-  'color-input-size-large-padding': $color-input-size-large-padding,
-  'color-palette-handle-border-size': $color-palette-handle-border-size,
-  'color-palette-handle-size': $color-palette-handle-size,
-  'color-palette-height': $color-palette-height,
-  'color-panel-alpha-input-width': $color-panel-alpha-input-width,
-  'color-panel-bg-color': $color-panel-bg-color,
-  'color-panel-block-border-radius': $color-panel-block-border-radius,
-  'color-panel-block-margin': $color-panel-block-margin,
-  'color-panel-block-size': $color-panel-block-size,
-  'color-panel-border-color': $color-panel-border-color,
-  'color-panel-border-radius': $color-panel-border-radius,
-  'color-panel-box-shadow': $color-panel-box-shadow,
-  'color-panel-empty-font-size': $color-panel-empty-font-size,
-  'color-panel-format-select-width': $color-panel-format-select-width,
-  'color-panel-input-group-margin-left': $color-panel-input-group-margin-left,
-  'color-panel-input-margin-top': $color-panel-input-margin-top,
-  'color-panel-padding': $color-panel-padding,
-  'color-panel-preview-size': $color-panel-preview-size,
-  'color-panel-section-title-font-size': $color-panel-section-title-font-size,
-  'color-panel-width': $color-panel-width,
-  'color-preview-border-color': $color-preview-border-color,
-  'color-preview-border-size': $color-preview-border-size,
-  'color-preview-size-mini': $color-preview-size-mini,
-  'color-preview-size-small': $color-preview-size-small,
-  'color-preview-size-medium': $color-preview-size-medium,
-  'color-preview-size-large': $color-preview-size-large,
-  'color-value-font-color': $color-value-font-color,
-  'color-value-font-color_disabled': $color-value-font-color_disabled,
-  'color-value-font-size': $color-value-font-size,
-  'color-value-margin-left': $color-value-margin-left,
-  'color-value-size-mini-font-size': $color-value-size-mini-font-size,
-  'color-value-size-small-font-size': $color-value-size-small-font-size,
-  'color-value-size-medium-font-size': $color-value-size-medium-font-size,
-  'color-value-size-large-font-size': $color-value-size-large-font-size,
-  'font-size-body-1': global.$font-size-body-1,
-  'font-weight-400': global.$font-weight-400,
-  'input-color-addon-border': inputToken.$input-color-addon-border,
-  'input-color-addon-border_default': inputToken.$input-color-addon-border_default,
-  'input-color-bg': inputToken.$input-color-bg,
-  'input-color-bg_disabled': inputToken.$input-color-bg_disabled,
-  'input-color-bg_error': inputToken.$input-color-bg_error,
-  'input-color-bg_error_focus': inputToken.$input-color-bg_error_focus,
-  'input-color-bg_error_hover': inputToken.$input-color-bg_error_hover,
-  'input-color-bg_focus': inputToken.$input-color-bg_focus,
-  'input-color-bg_hover': inputToken.$input-color-bg_hover,
-  'input-color-border': inputToken.$input-color-border,
-  'input-color-border_disabled': inputToken.$input-color-border_disabled,
-  'input-color-border_error': inputToken.$input-color-border_error,
-  'input-color-border_error_focus': inputToken.$input-color-border_error_focus,
-  'input-color-border_error_hover': inputToken.$input-color-border_error_hover,
-  'input-color-border_focus': inputToken.$input-color-border_focus,
-  'input-color-border_hover': inputToken.$input-color-border_hover,
-  'input-color-icon-clear-bg_hover': inputToken.$input-color-icon-clear-bg_hover,
-  'input-color-shadow_error_focus': inputToken.$input-color-shadow_error_focus,
-  'input-color-shadow_focus': inputToken.$input-color-shadow_focus,
-  'input-color-text': inputToken.$input-color-text,
-  'input-color-text_disabled': inputToken.$input-color-text_disabled,
-  'input-feedback-icon-color_error': inputToken.$input-feedback-icon-color_error,
-  'input-feedback-icon-color_success': inputToken.$input-feedback-icon-color_success,
-  'input-feedback-icon-color_validating': inputToken.$input-feedback-icon-color_validating,
-  'input-feedback-icon-color_warning': inputToken.$input-feedback-icon-color_warning,
-  'input-group-border-radius_compact': inputToken.$input-group-border-radius_compact,
-  'input-size-mini-height': inputToken.$input-size-mini-height,
-  'input-size-small-height': inputToken.$input-size-small-height,
-  'input-size-medium-height': inputToken.$input-size-medium-height,
-  'input-size-large-height': inputToken.$input-size-large-height,
-  'input-size-shadow_error_focus': inputToken.$input-size-shadow_error_focus,
-  'input-size-shadow_focus': inputToken.$input-size-shadow_focus,
-  'prefix': theme.$prefix,
-  'size-3': global.$size-3,
-  'size-mini': global.$size-mini,
-  'spacing-2': global.$spacing-2,
-  'spacing-3': global.$spacing-3,
-  'spacing-4': global.$spacing-4,
-  'spacing-6': global.$spacing-6,
-  'spacing-none': global.$spacing-none,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+$token-vars: map.merge(meta.module-variables('inputToken'), meta.module-variables('token'));
+
+@function token-var($name, $fallback: null) {
+  $value: map.get($token-vars, $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 .#{$color-picker-prefix-cls} {
@@ -131,16 +49,16 @@ $__less-vars: (
   }
 
   @mixin size-mixin($size) {
-    height: less-var('input-size-#{$size}-height');
-    padding: less-var('color-input-size-#{$size}-padding');
+    height: token-var('input-size-#{$size}-height');
+    padding: token-var('color-input-size-#{$size}-padding');
 
     .#{$color-picker-prefix-cls}-preview {
-      width: less-var('color-preview-size-#{$size}');
-      height: less-var('color-preview-size-#{$size}');
+      width: token-var('color-preview-size-#{$size}');
+      height: token-var('color-preview-size-#{$size}');
     }
 
     .#{$color-picker-prefix-cls}-value {
-      font-size: less-var('color-value-size-#{$size}-font-size');
+      font-size: token-var('color-value-size-#{$size}-font-size');
     }
   }
 

package/es/config-provider/config-provider.vue.d.ts

@@ -88,10 +88,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     prefixCls: string;
-    allowClear: boolean;
-    rtl: boolean;
     updateAtScroll: boolean;
     scrollToClose: boolean;
+    rtl: boolean;
+    allowClear: boolean;
     global: boolean;
     exchangeTime: boolean;
 }, {}, {
@@ -102,9 +102,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             global?: boolean;
             tag?: string;
         }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            tag: string;
             themeMode: SDThemeMode;
             global: boolean;
-            tag: string;
         }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
             B: {};
@@ -118,9 +118,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             global?: boolean;
             tag?: string;
         }> & Readonly<{}>, {}, {}, {}, {}, {
+            tag: string;
             themeMode: SDThemeMode;
             global: boolean;
-            tag: string;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -131,9 +131,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         global?: boolean;
         tag?: string;
     }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        tag: string;
         themeMode: SDThemeMode;
         global: boolean;
-        tag: string;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default?: (props: {}) => any;