refactor(select): menu-props

src/_internal/select-menu/src/SelectMenu.tsx

@@ -23,8 +23,7 @@ import type {
   SelectGroupOption,
   SelectIgnoredOption,
   Value,
-  SelectTreeMate,
-  SelectMenuProps
+  SelectTreeMate
 } from '../../../select/src/interface'
 import { formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
@@ -64,7 +63,6 @@ export default defineComponent({
       required: true
     },
     multiple: Boolean,
-    menuProps: Object as PropType<SelectMenuProps>,
     size: {
       type: String as PropType<Size>,
       default: 'medium'
@@ -161,7 +159,7 @@ export default defineComponent({
       return tmNodes && tmNodes.length === 0
     })
     const styleRef = computed(() => {
-      return [{ width: formatLength(props.width) }, cssVarsRef.value, props.menuProps?.style]
+      return [{ width: formatLength(props.width) }, cssVarsRef.value]
     })
     watch(toRef(props, 'treeMate'), () => {
       if (props.autoPending) {
@@ -370,8 +368,7 @@ export default defineComponent({
         tabindex={this.focusable ? 0 : -1}
         class={[
           `${clsPrefix}-base-select-menu`,
-          this.multiple && `${clsPrefix}-base-select-menu--multiple`,
-          this.menuProps?.class
+          this.multiple && `${clsPrefix}-base-select-menu--multiple`
         ]}
         style={this.style as any}
         onFocusin={this.handleFocusin}

src/select/demos/enUS/index.demo-entry.md

@@ -43,7 +43,7 @@ render-person
 | input-props | `HTMLInputAttributes` | `undefined` | The attributes of input element in the trigger. It only works when the select is filterable. |
 | loading | `boolean` | `false` | Whether to show a loading state. |
 | max-tag-count | `number \| 'responsive'` | `undefined` | Maximum selected values to display while in `multiple` mode. `responsive` will keep all the tags in single line. |
-| menu-props | `SelectMenuProps` | `undefined` | The menu's props when menu is show. |
+| menu-props | `HTMLAttributes` | `undefined` | The menu's dom props. |
 | multiple | `boolean` | `false` | Whether to allow selecting multiple values. |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | Options that can be selected. For more details see SelectOption Properties (below). |
 | placeholder | `string` | `'Please Select'` | Placeholder. |

src/select/demos/zhCN/index.demo-entry.md

@@ -49,7 +49,7 @@ options-change-debug
 | input-props | `HTMLInputAttributes` | `undefined` | 触发器中 input 元素的属性，只在可过滤时有意义 |
 | loading | `boolean` | `false` | 是否为加载状态 |
 | max-tag-count | `number \| 'responsive'` | `undefined` | 多选标签的最大显示数量，`responsive` 会将所有标签保持在一行 |
-| menu-props | `SelectMenuProps` | `undefined` | 菜单展示时接收的 props |
+| menu-props | `HTMLAttributes` | `undefined` | 菜单的 DOM 属性 |
 | multiple | `boolean` | `false` | 是否为多选 |
 | options | `Array<SelectOption \| SelectGroupOption>` | `[]` | 配置选项内容，详情见 SelectOption Properties |
 | placeholder | `string` | `'请选择'` | 提示信息 |

src/select/index.ts

@@ -1,3 +1,3 @@
 export { default as NSelect } from './src/Select'
 export type { SelectProps } from './src/Select'
-export type { SelectGroupOption, SelectOption, SelectMenuProps } from './src/interface'
+export type { SelectGroupOption, SelectOption } from './src/interface'

src/select/src/Select.tsx

@@ -10,7 +10,8 @@ import {
   Transition,
   withDirectives,
   vShow,
-  InputHTMLAttributes
+  InputHTMLAttributes,
+  HTMLAttributes
 } from 'vue'
 import { happensIn } from 'seemly'
 import { createTreeMate, TreeNode } from 'treemate'
@@ -55,8 +56,7 @@ import type {
   OnUpdateValueImpl,
   Value,
   Size,
-  ValueAtom,
-  SelectMenuProps
+  ValueAtom
 } from './interface'
 
 const selectProps = {
@@ -77,7 +77,7 @@ const selectProps = {
   },
   value: [String, Number, Array] as PropType<Value | null>,
   placeholder: String,
-  menuProps: Object as PropType<SelectMenuProps>,
+  menuProps: Object as PropType<HTMLAttributes>,
   multiple: Boolean,
   size: String as PropType<Size>,
   filterable: Boolean,
@@ -765,11 +765,12 @@ export default defineComponent({
                             this.displayDirective === 'show') &&
                           withDirectives(
                             <NInternalSelectMenu
+                              {...this.menuProps}
                               ref="menuRef"
                               virtualScroll={
                                 this.consistentMenuWidth && this.virtualScroll
                               }
-                              class={`${mergedClsPrefix}-select-menu`}
+                              class={[`${mergedClsPrefix}-select-menu`]}
                               clsPrefix={mergedClsPrefix}
                               focusable
                               autoPending={true}
@@ -780,11 +781,11 @@ export default defineComponent({
                               }
                               treeMate={this.treeMate}
                               multiple={this.multiple}
-                              size={this.menuProps?.size ?? 'medium'}
+                              size={'medium'}
                               renderOption={this.renderOption}
                               renderLabel={this.renderLabel}
                               value={this.mergedValue}
-                              style={this.cssVars}
+                              style={[this.menuProps?.style, this.cssVars]}
                               onToggle={this.handleToggle}
                               onScroll={this.handleMenuScroll}
                               onFocus={this.handleMenuFocus}
@@ -794,7 +795,6 @@ export default defineComponent({
                               onTabOut={this.handleMenuTabOut}
                               onMousedown={this.handleMenuMousedown}
                               show={this.mergedShow}
-                              menuProps={this.menuProps}
                             >
                               {$slots}
                             </NInternalSelectMenu>,

src/select/src/interface.ts

@@ -82,9 +82,3 @@ export type SelectGroupOption =
   | (SelectGroupOptionBase & {
     key: string | number
   })
-
-export interface SelectMenuProps {
-  class?: string
-  style?: string | CSSProperties
-  size?: Size
-}