From 82efde2728a56f2091d656b0d15418652dc79bfd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 31 Oct 2021 23:46:40 +0800 Subject: [PATCH] refactor(select): menu-props --- src/_internal/select-menu/src/SelectMenu.tsx | 9 +++------ src/select/demos/enUS/index.demo-entry.md | 2 +- src/select/demos/zhCN/index.demo-entry.md | 2 +- src/select/index.ts | 2 +- src/select/src/Select.tsx | 16 ++++++++-------- src/select/src/interface.ts | 6 ------ 6 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx index 7358e1127..9040030b7 100644 --- a/src/_internal/select-menu/src/SelectMenu.tsx +++ b/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, size: { type: String as PropType, 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} diff --git a/src/select/demos/enUS/index.demo-entry.md b/src/select/demos/enUS/index.demo-entry.md index 337cc465f..62741db3d 100644 --- a/src/select/demos/enUS/index.demo-entry.md +++ b/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` | `[]` | Options that can be selected. For more details see SelectOption Properties (below). | | placeholder | `string` | `'Please Select'` | Placeholder. | diff --git a/src/select/demos/zhCN/index.demo-entry.md b/src/select/demos/zhCN/index.demo-entry.md index 9d80ac1db..b33b9798c 100644 --- a/src/select/demos/zhCN/index.demo-entry.md +++ b/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 Properties | | placeholder | `string` | `'请选择'` | 提示信息 | diff --git a/src/select/index.ts b/src/select/index.ts index 464e5e56b..ac0d1c6df 100644 --- a/src/select/index.ts +++ b/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' diff --git a/src/select/src/Select.tsx b/src/select/src/Select.tsx index a95508edc..578c86d0c 100644 --- a/src/select/src/Select.tsx +++ b/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, placeholder: String, - menuProps: Object as PropType, + menuProps: Object as PropType, multiple: Boolean, size: String as PropType, filterable: Boolean, @@ -765,11 +765,12 @@ export default defineComponent({ this.displayDirective === 'show') && withDirectives( {$slots} , diff --git a/src/select/src/interface.ts b/src/select/src/interface.ts index 7d9fc98a7..b134e0765 100644 --- a/src/select/src/interface.ts +++ b/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 -}