@sdata/web-vue 1.10.0 → 1.11.0

package/es/list/style/index.scss

@@ -1,50 +1,20 @@
 @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/list/style/token.scss' as token;
 @use '@components/list/style/token.scss' as *;
 
 $list-prefix-cls: string.unquote('#{theme.$prefix}-list');
 
-$__less-vars: (
-  'list-action-gap': $list-action-gap,
-  'list-action-margin-top': $list-action-margin-top,
-  'list-border-color': $list-border-color,
-  'list-border-radius': $list-border-radius,
-  'list-border-width': $list-border-width,
-  'list-color-bg-item-hover': $list-color-bg-item-hover,
-  'list-color-text': $list-color-text,
-  'list-color-text-header': $list-color-text-header,
-  'list-font-size': $list-font-size,
-  'list-font-size-header': $list-font-size-header,
-  'list-font-weight-header': $list-font-weight-header,
-  'list-line-height': $list-line-height,
-  'list-line-height-header': $list-line-height-header,
-  'list-meta-color-title': $list-meta-color-title,
-  'list-meta-font-weight-title': $list-meta-font-weight-title,
-  'list-meta-margin-bottom-title': $list-meta-margin-bottom-title,
-  'list-meta-margin-right-avatar': $list-meta-margin-right-avatar,
-  'list-meta-padding-horizontal': $list-meta-padding-horizontal,
-  'list-meta-padding-vertical': $list-meta-padding-vertical,
-  'list-mete-color-description': $list-mete-color-description,
-  'list-pagination-margin-top': $list-pagination-margin-top,
-  'list-size-small-padding-vertical-header': $list-size-small-padding-vertical-header,
-  'list-size-small-padding-horizontal-header': $list-size-small-padding-horizontal-header,
-  'list-size-small-padding-vertical-item': $list-size-small-padding-vertical-item,
-  'list-size-small-padding-horizontal-item': $list-size-small-padding-horizontal-item,
-  'list-size-medium-padding-vertical-header': $list-size-medium-padding-vertical-header,
-  'list-size-medium-padding-horizontal-header': $list-size-medium-padding-horizontal-header,
-  'list-size-medium-padding-vertical-item': $list-size-medium-padding-vertical-item,
-  'list-size-medium-padding-horizontal-item': $list-size-medium-padding-horizontal-item,
-  'list-size-large-padding-vertical-header': $list-size-large-padding-vertical-header,
-  'list-size-large-padding-horizontal-header': $list-size-large-padding-horizontal-header,
-  'list-size-large-padding-vertical-item': $list-size-large-padding-vertical-item,
-  'list-size-large-padding-horizontal-item': $list-size-large-padding-horizontal-item,
-  'prefix': theme.$prefix,
-);
-
-@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;
 }
 
 .#{$list-prefix-cls} {
@@ -82,7 +52,7 @@ $__less-vars: (
       $ref-padding-horizontal-item: string.unquote('list-size-#{$size}-padding-horizontal-item');
 
       .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-header {
-        padding: less-var($ref-padding-vertical-header) less-var($ref-padding-horizontal-header);
+        padding: token-var($ref-padding-vertical-header) token-var($ref-padding-horizontal-header);
       }
 
       // 在存在列表嵌套的时候，通过 > 限定 size 仅对其直接子元素生效，避免影响被嵌套的列表的样式
@@ -95,7 +65,7 @@ $__less-vars: (
       .#{$list-prefix-cls}-content-wrapper
         .#{$list-prefix-cls}-content.#{$list-prefix-cls}-virtual
         .#{$list-prefix-cls}-item {
-        padding: less-var($ref-padding-vertical-item) less-var($ref-padding-horizontal-item);
+        padding: token-var($ref-padding-vertical-item) token-var($ref-padding-horizontal-item);
       }
     }
   }

package/es/menu/index.d.ts

@@ -1,9 +1,15 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
+import type { MenuProps } from './interface';
 import _MenuItem from './item';
 import _MenuItemGroup from './item-group.vue';
 import _Menu from './menu';
 import _MenuSubMenu from './sub-menu';
+export type { MenuData, MenuDataItem, MenuItemGroupProps, MenuItemProps, MenuMode, MenuProps, MenuTheme, PopupMenuMaxHeightType, SubMenuChildDataType, SubMenuProps, } from './interface';
+export type MenuCollapseTrigger = 'clickTrigger' | 'responsive';
+export type MenuCollapseHandler = (collapsed: boolean, type: MenuCollapseTrigger) => void;
+export type MenuItemClickHandler = (key: string) => void;
+export type MenuSubMenuClickHandler = (key: string, openKeys: string[]) => void;
 declare const Menu: typeof _Menu & {
     Item: typeof _MenuItem;
     ItemGroup: typeof _MenuItemGroup;
@@ -14,5 +20,7 @@ export type MenuInstance = InstanceType<typeof _Menu>;
 export type MenuItemInstance = InstanceType<typeof _MenuItem>;
 export type MenuItemGroupInstance = InstanceType<typeof _MenuItemGroup>;
 export type MenuSubMenuInstance = InstanceType<typeof _MenuSubMenu>;
+export type MenuOpenKeys = NonNullable<MenuProps['openKeys']>;
+export type MenuSelectedKeys = NonNullable<MenuProps['selectedKeys']>;
 export { _MenuItem as MenuItem, _MenuItemGroup as MenuItemGroup, _MenuSubMenu as SubMenu };
 export default Menu;

package/es/menu/style/index.css

@@ -108,86 +108,6 @@
 .sd-menu-light {
   background-color: var(--color-menu-light-bg);
 }
-.sd-menu-light .sd-menu-item,
-.sd-menu-light .sd-menu-group-title,
-.sd-menu-light .sd-menu-pop-header,
-.sd-menu-light .sd-menu-inline-header {
-  color: var(--color-text-2);
-  background-color: var(--color-menu-light-bg);
-}
-.sd-menu-light .sd-menu-item .sd-icon,
-.sd-menu-light .sd-menu-item .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title .sd-icon,
-.sd-menu-light .sd-menu-group-title .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header .sd-icon,
-.sd-menu-light .sd-menu-pop-header .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header .sd-icon,
-.sd-menu-light .sd-menu-inline-header .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-light .sd-menu-item:hover,
-.sd-menu-light .sd-menu-group-title:hover,
-.sd-menu-light .sd-menu-pop-header:hover,
-.sd-menu-light .sd-menu-inline-header:hover {
-  color: var(--color-text-2);
-  background-color: var(--color-fill-2);
-}
-.sd-menu-light .sd-menu-item:hover .sd-icon,
-.sd-menu-light .sd-menu-item:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title:hover .sd-icon,
-.sd-menu-light .sd-menu-group-title:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header:hover .sd-icon,
-.sd-menu-light .sd-menu-pop-header:hover .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header:hover .sd-icon,
-.sd-menu-light .sd-menu-inline-header:hover .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-item.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-item.sd-menu-disabled,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-light-bg);
-}
-.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-item.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
-  color: var(--color-text-4);
-}
-.sd-menu-light .sd-menu-item.sd-menu-selected {
-  background-color: var(--color-fill-2);
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-light .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-fill-2);
-}
 .sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -195,12 +115,6 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
-.sd-menu-light.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
-.sd-menu-light.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-fill-2);
-}
 .sd-menu-light .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -209,92 +123,9 @@
   color: var(--color-text-3);
   background-color: var(--color-fill-1);
 }
-.sd-menu-light .sd-menu-collapse-button:hover {
-  background-color: var(--color-fill-3);
-}
 .sd-menu-dark {
   background-color: var(--color-menu-dark-bg);
 }
-.sd-menu-dark .sd-menu-item,
-.sd-menu-dark .sd-menu-group-title,
-.sd-menu-dark .sd-menu-pop-header,
-.sd-menu-dark .sd-menu-inline-header {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-dark-bg);
-}
-.sd-menu-dark .sd-menu-item .sd-icon,
-.sd-menu-dark .sd-menu-item .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title .sd-icon,
-.sd-menu-dark .sd-menu-group-title .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header .sd-icon,
-.sd-menu-dark .sd-menu-pop-header .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header .sd-icon,
-.sd-menu-dark .sd-menu-inline-header .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-dark .sd-menu-item:hover,
-.sd-menu-dark .sd-menu-group-title:hover,
-.sd-menu-dark .sd-menu-pop-header:hover,
-.sd-menu-dark .sd-menu-inline-header:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-menu-dark-hover);
-}
-.sd-menu-dark .sd-menu-item:hover .sd-icon,
-.sd-menu-dark .sd-menu-item:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title:hover .sd-icon,
-.sd-menu-dark .sd-menu-group-title:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header:hover .sd-icon,
-.sd-menu-dark .sd-menu-pop-header:hover .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header:hover .sd-icon,
-.sd-menu-dark .sd-menu-inline-header:hover .sd-menu-icon {
-  color: var(--color-text-3);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
-  color: var(--color-white);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-item.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-selected .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: var(--color-white);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-disabled,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled {
-  color: var(--color-text-2);
-  background-color: var(--color-menu-dark-bg);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-item.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-group-title.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-pop-header.sd-menu-disabled .sd-menu-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-disabled .sd-menu-icon {
-  color: var(--color-text-2);
-}
-.sd-menu-dark .sd-menu-item.sd-menu-selected {
-  background-color: var(--color-menu-dark-hover);
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-icon,
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected .sd-menu-icon {
-  color: rgb(var(--primary-6));
-}
-.sd-menu-dark .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-menu-dark-hover);
-}
 .sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected,
 .sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected,
@@ -302,12 +133,6 @@
   background: none;
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
-.sd-menu-dark.sd-menu-horizontal .sd-menu-item.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-group-title.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-pop-header.sd-menu-selected:hover,
-.sd-menu-dark.sd-menu-horizontal .sd-menu-inline-header.sd-menu-selected:hover {
-  background-color: var(--color-menu-dark-hover);
-}
 .sd-menu-dark .sd-menu-group-title {
   color: var(--color-text-3);
   pointer-events: none;
@@ -316,9 +141,6 @@
   color: var(--color-white);
   background-color: rgb(var(--primary-6));
 }
-.sd-menu-dark .sd-menu-collapse-button:hover {
-  background-color: rgb(var(--primary-7));
-}
 .sd-menu a,
 .sd-menu a:hover,
 .sd-menu a:focus,

package/es/menu/style/index.scss

@@ -2,129 +2,26 @@
 @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 '@style/mixins/index.scss' as *;
+@use '@components/menu/style/token.scss' as token;
 @use '@components/menu/style/token.scss' as *;
+@use '@components/dropdown/style/token.scss' as dropdownToken;
 @use '@components/dropdown/style/token.scss' as *;
 
 $menu-prefix-cls: string.unquote('#{theme.$prefix}-menu');
 $trigger-menu-prefix-cls: string.unquote('#{theme.$prefix}-trigger-menu');
 
-$__less-vars: (
-  'dropdown-border-radius': $dropdown-border-radius,
-  'dropdown-box-shadow': $dropdown-box-shadow,
-  'dropdown-color-bg': $dropdown-color-bg,
-  'dropdown-color-border': $dropdown-color-border,
-  'dropdown-dark-color-bg': $dropdown-dark-color-bg,
-  'dropdown-dark-color-border': $dropdown-dark-color-border,
-  'dropdown-dark-group-title-color-text': $dropdown-dark-group-title-color-text,
-  'dropdown-dark-option-color-bg_default': $dropdown-dark-option-color-bg_default,
-  'dropdown-dark-option-color-bg_disabled': $dropdown-dark-option-color-bg_disabled,
-  'dropdown-dark-option-color-bg_hover': $dropdown-dark-option-color-bg_hover,
-  'dropdown-dark-option-color-bg_selected': $dropdown-dark-option-color-bg_selected,
-  'dropdown-dark-option-color-text_default': $dropdown-dark-option-color-text_default,
-  'dropdown-dark-option-color-text_disabled': $dropdown-dark-option-color-text_disabled,
-  'dropdown-dark-option-color-text_hover': $dropdown-dark-option-color-text_hover,
-  'dropdown-dark-option-color-text_selected': $dropdown-dark-option-color-text_selected,
-  'dropdown-font-size': $dropdown-font-size,
-  'dropdown-group-title-color-text': $dropdown-group-title-color-text,
-  'dropdown-group-title-font-size': $dropdown-group-title-font-size,
-  'dropdown-group-title-height': $dropdown-group-title-height,
-  'dropdown-group-title-padding-horizontal': $dropdown-group-title-padding-horizontal,
-  'dropdown-group-title-padding-top': $dropdown-group-title-padding-top,
-  'dropdown-margin-left-suffix-icon': $dropdown-margin-left-suffix-icon,
-  'dropdown-max-height': $dropdown-max-height,
-  'dropdown-option-color-bg_default': $dropdown-option-color-bg_default,
-  'dropdown-option-color-bg_disabled': $dropdown-option-color-bg_disabled,
-  'dropdown-option-color-bg_hover': $dropdown-option-color-bg_hover,
-  'dropdown-option-color-bg_selected': $dropdown-option-color-bg_selected,
-  'dropdown-option-color-text_default': $dropdown-option-color-text_default,
-  'dropdown-option-color-text_disabled': $dropdown-option-color-text_disabled,
-  'dropdown-option-color-text_hover': $dropdown-option-color-text_hover,
-  'dropdown-option-color-text_selected': $dropdown-option-color-text_selected,
-  'dropdown-option-font-weight_selected': $dropdown-option-font-weight_selected,
-  'dropdown-option-height': $dropdown-option-height,
-  'dropdown-option-padding-horizontal': $dropdown-option-padding-horizontal,
-  'dropdown-padding-vertical': $dropdown-padding-vertical,
-  'menu-border-radius': $menu-border-radius,
-  'menu-border-radius-collapse-button': $menu-border-radius-collapse-button,
-  'menu-collapse-padding-horizontal': $menu-collapse-padding-horizontal,
-  'menu-collapse-padding-vertical': $menu-collapse-padding-vertical,
-  'menu-collapse-width': $menu-collapse-width,
-  'menu-color-border-popup': $menu-color-border-popup,
-  'menu-color-label-item-selected': $menu-color-label-item-selected,
-  'menu-dark-color-bg': $menu-dark-color-bg,
-  'menu-dark-color-button': $menu-dark-color-button,
-  'menu-dark-color-bg-button': $menu-dark-color-bg-button,
-  'menu-dark-color-bg-button_hover': $menu-dark-color-bg-button_hover,
-  'menu-dark-color-group-title': $menu-dark-color-group-title,
-  'menu-dark-color-bg-item_default': $menu-dark-color-bg-item_default,
-  'menu-dark-color-bg-item_disabled': $menu-dark-color-bg-item_disabled,
-  'menu-dark-color-bg-item_hover': $menu-dark-color-bg-item_hover,
-  'menu-dark-color-bg-item_selected': $menu-dark-color-bg-item_selected,
-  'menu-dark-color-bg-submenu_selected_hover': $menu-dark-color-bg-submenu_selected_hover,
-  'menu-dark-color-icon_default': $menu-dark-color-icon_default,
-  'menu-dark-color-icon_disabled': $menu-dark-color-icon_disabled,
-  'menu-dark-color-icon_hover': $menu-dark-color-icon_hover,
-  'menu-dark-color-icon_selected': $menu-dark-color-icon_selected,
-  'menu-dark-color-item_default': $menu-dark-color-item_default,
-  'menu-dark-color-item_disabled': $menu-dark-color-item_disabled,
-  'menu-dark-color-item_hover': $menu-dark-color-item_hover,
-  'menu-dark-color-item_selected': $menu-dark-color-item_selected,
-  'menu-dark-color-submenu_selected': $menu-dark-color-submenu_selected,
-  'menu-font-size': $menu-font-size,
-  'menu-font-weight-item-selected': $menu-font-weight-item-selected,
-  'menu-height-collapse-button': $menu-height-collapse-button,
-  'menu-height-label-item-selected': $menu-height-label-item-selected,
-  'menu-horizontal-item-gap': $menu-horizontal-item-gap,
-  'menu-horizontal-item-height': $menu-horizontal-item-height,
-  'menu-horizontal-item-padding-horizontal': $menu-horizontal-item-padding-horizontal,
-  'menu-horizontal-margin-right-item-prefix-icon': $menu-horizontal-margin-right-item-prefix-icon,
-  'menu-horizontal-padding-horizontal': $menu-horizontal-padding-horizontal,
-  'menu-horizontal-padding-vertical': $menu-horizontal-padding-vertical,
-  'menu-item-gap': $menu-item-gap,
-  'menu-item-indent-spacing': $menu-item-indent-spacing,
-  'menu-light-color-bg': $menu-light-color-bg,
-  'menu-light-color-button': $menu-light-color-button,
-  'menu-light-color-bg-button': $menu-light-color-bg-button,
-  'menu-light-color-bg-button_hover': $menu-light-color-bg-button_hover,
-  'menu-light-color-bg-item_default': $menu-light-color-bg-item_default,
-  'menu-light-color-bg-item_disabled': $menu-light-color-bg-item_disabled,
-  'menu-light-color-bg-item_hover': $menu-light-color-bg-item_hover,
-  'menu-light-color-bg-item_selected': $menu-light-color-bg-item_selected,
-  'menu-light-color-bg-submenu_selected_hover': $menu-light-color-bg-submenu_selected_hover,
-  'menu-light-color-icon_default': $menu-light-color-icon_default,
-  'menu-light-color-icon_disabled': $menu-light-color-icon_disabled,
-  'menu-light-color-icon_hover': $menu-light-color-icon_hover,
-  'menu-light-color-icon_selected': $menu-light-color-icon_selected,
-  'menu-light-color-group-title': $menu-light-color-group-title,
-  'menu-light-color-item_default': $menu-light-color-item_default,
-  'menu-light-color-item_disabled': $menu-light-color-item_disabled,
-  'menu-light-color-item_hover': $menu-light-color-item_hover,
-  'menu-light-color-item_selected': $menu-light-color-item_selected,
-  'menu-light-color-submenu_selected': $menu-light-color-submenu_selected,
-  'menu-line-height': $menu-line-height,
-  'menu-margin-left-item-suffix-icon': $menu-margin-left-item-suffix-icon,
-  'menu-margin-right-item-prefix-icon': $menu-margin-right-item-prefix-icon,
-  'menu-pop-button-border-color': $menu-pop-button-border-color,
-  'menu-pop-button-box-shadow': $menu-pop-button-box-shadow,
-  'menu-pop-button-margin-bottom': $menu-pop-button-margin-bottom,
-  'menu-pop-button-size': $menu-pop-button-size,
-  'menu-vertical-item-padding-horizontal': $menu-vertical-item-padding-horizontal,
-  'menu-vertical-item-height': $menu-vertical-item-height,
-  'menu-vertical-padding-horizontal': $menu-vertical-padding-horizontal,
-  'menu-vertical-padding-vertical': $menu-vertical-padding-vertical,
-  'menu-width-collapse-button': $menu-width-collapse-button,
-  'prefix': theme.$prefix,
-  'sd-cssvars-prefix': global.$sd-cssvars-prefix,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-duration-2': theme.$transition-duration-2,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-  'transition-timing-function-standard': theme.$transition-timing-function-standard,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+$token-vars: map.merge(meta.module-variables('dropdownToken'), meta.module-variables('token'));
+
+@function token-var($name, $fallback: null) {
+  $value: map.get($token-vars, $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 @mixin applyStyleToItem() {
@@ -176,8 +73,8 @@ $__less-vars: (
 
 @mixin menu-item-mode($mode) {
   @include applyStyleToItem() {
-    padding: 0 less-var('menu-#{$mode}-item-padding-horizontal');
-    line-height: less-var('menu-#{$mode}-item-height');
+    padding: 0 token-var('menu-#{$mode}-item-padding-horizontal');
+    line-height: token-var('menu-#{$mode}-item-height');
 
     .#{$menu-prefix-cls}-icon-suffix .#{theme.$prefix}-icon {
       margin-right: 0;
@@ -236,61 +133,61 @@ $__less-vars: (
 
 @mixin menu-theme($theme) {
   &-#{$theme} {
-    background-color: less-var('menu-#{$theme}-color-bg');
+    background-color: token-var('menu-#{$theme}-color-bg');
 
     @include applyStyleToItem() {
-      color: less-var('menu-#{$theme}-color-item_default');
-      background-color: less-var('menu-#{$theme}-color-bg-item_default');
+      color: token-var('menu-#{$theme}-color-item_default');
+      background-color: token-var('menu-#{$theme}-color-bg-item_default');
 
       .#{theme.$prefix}-icon,
       .#{$menu-prefix-cls}-icon {
-        color: less-var('menu-#{$theme}-color-icon_default');
+        color: token-var('menu-#{$theme}-color-icon_default');
       }
 
       &:hover {
-        color: less-var('menu-#{$theme}-color-item_hover');
-        background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+        color: token-var('menu-#{$theme}-color-item_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-item_hover');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_hover');
+          color: token-var('menu-#{$theme}-color-icon_hover');
         }
       }
 
       &.#{$menu-prefix-cls}-selected {
-        color: less-var('menu-#{$theme}-color-item_selected');
+        color: token-var('menu-#{$theme}-color-item_selected');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_selected');
+          color: token-var('menu-#{$theme}-color-icon_selected');
         }
       }
 
       &.#{$menu-prefix-cls}-disabled {
-        color: less-var('menu-#{$theme}-color-item_disabled');
-        background-color: less-var('menu-#{$theme}-color-bg-item_disabled');
+        color: token-var('menu-#{$theme}-color-item_disabled');
+        background-color: token-var('menu-#{$theme}-color-bg-item_disabled');
 
         .#{theme.$prefix}-icon,
         .#{$menu-prefix-cls}-icon {
-          color: less-var('menu-#{$theme}-color-icon_disabled');
+          color: token-var('menu-#{$theme}-color-icon_disabled');
         }
       }
     }
 
     .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-selected {
-      background-color: less-var('menu-#{$theme}-color-bg-item_selected');
+      background-color: token-var('menu-#{$theme}-color-bg-item_selected');
     }
 
     .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-selected {
-      color: less-var('menu-#{$theme}-color-submenu_selected');
+      color: token-var('menu-#{$theme}-color-submenu_selected');
 
       .#{theme.$prefix}-icon,
       .#{$menu-prefix-cls}-icon {
-        color: less-var('menu-#{$theme}-color-submenu_selected');
+        color: token-var('menu-#{$theme}-color-submenu_selected');
       }
 
       &:hover {
-        background-color: less-var('menu-#{$theme}-color-bg-submenu_selected_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-submenu_selected_hover');
       }
     }
 
@@ -302,23 +199,23 @@ $__less-vars: (
           @include menu-text-color-transition();
 
           &:hover {
-            background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+            background-color: token-var('menu-#{$theme}-color-bg-item_hover');
           }
         }
       }
     }
 
     .#{$menu-prefix-cls}-group-title {
-      color: less-var('menu-#{$theme}-color-group-title');
+      color: token-var('menu-#{$theme}-color-group-title');
       pointer-events: none;
     }
 
     .#{$menu-prefix-cls}-collapse-button {
-      color: less-var('menu-#{$theme}-color-button');
-      background-color: less-var('menu-#{$theme}-color-bg-button');
+      color: token-var('menu-#{$theme}-color-button');
+      background-color: token-var('menu-#{$theme}-color-bg-button');
 
       &:hover {
-        background-color: less-var('menu-#{$theme}-color-bg-button_hover');
+        background-color: token-var('menu-#{$theme}-color-bg-button_hover');
       }
     }
   }

package/es/pagination/index.d.ts

@@ -50,7 +50,7 @@ declare const Pagination: {
             default: () => number[];
         };
         pageSizeProps: {
-            type: import("vue").PropType<import("..").SelectProps>;
+            type: import("vue").PropType<import("./interface").PaginationSelectProps>;
         };
         size: {
             type: import("vue").PropType<import("..").Size>;
@@ -152,7 +152,7 @@ declare const Pagination: {
             default: () => number[];
         };
         pageSizeProps: {
-            type: import("vue").PropType<import("..").SelectProps>;
+            type: import("vue").PropType<import("./interface").PaginationSelectProps>;
         };
         size: {
             type: import("vue").PropType<import("..").Size>;
@@ -246,7 +246,7 @@ declare const Pagination: {
         default: () => number[];
     };
     pageSizeProps: {
-        type: import("vue").PropType<import("..").SelectProps>;
+        type: import("vue").PropType<import("./interface").PaginationSelectProps>;
     };
     size: {
         type: import("vue").PropType<import("..").Size>;

package/es/pagination/interface.d.ts

@@ -3,6 +3,7 @@ import { Size } from '../_utils/constant';
 import { SelectProps } from '../select';
 export declare const PAGE_ITEM_TYPES: readonly ["page", "more", "previous", "next"];
 export type PageItemType = (typeof PAGE_ITEM_TYPES)[number];
+export type PaginationSelectProps = Omit<SelectProps, 'value' | 'modelValue' | 'defaultValue'>;
 export interface PaginationProps {
     total?: number;
     current?: number;
@@ -17,7 +18,7 @@ export interface PaginationProps {
     showJumper?: boolean;
     showPageSize?: boolean;
     pageSizeOptions?: number[];
-    pageSizeProps?: SelectProps;
+    pageSizeProps?: PaginationSelectProps;
     size?: Size;
     pageItemStyle?: CSSProperties;
     activePageItemStyle?: CSSProperties;

package/es/pagination/page-options.js

@@ -5,7 +5,7 @@ import { createElementBlock, createVNode, mergeProps, normalizeClass, openBlock,
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_sd_select = resolveComponent("sd-select");
 	return openBlock(), createElementBlock("span", { class: normalizeClass(_ctx.prefixCls) }, [createVNode(_component_sd_select, mergeProps({
-		"model-value": _ctx.pageSize,
+		"model-value": _ctx.modelValue,
 		options: _ctx.options,
 		size: _ctx.size,
 		disabled: _ctx.disabled