diff --git a/examples/select/select.en-US.md b/examples/select/select.en-US.md new file mode 100644 index 0000000000..e1a75d929c --- /dev/null +++ b/examples/select/select.en-US.md @@ -0,0 +1,93 @@ +:: BASE_DOC :: + +## API + +### Select Props + +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +bordered | Boolean | true | \- | N +borderless | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +creatable | Boolean | false | \- | N +disabled | Boolean | - | \- | N +empty | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +filter | Function | - | Typescript:`(filterWords: string, option: T) => boolean | Promise` | N +filterable | Boolean | - | \- | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +keys | Object | - | Typescript:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +loading | Boolean | false | \- | N +loadingText | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +max | Number | 0 | \- | N +minCollapsedNum | Number | 0 | \- | N +multiple | Boolean | false | \- | N +options | Array | - | Typescript:`Array` | N +panelBottomContent | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +placeholder | String | undefined | \- | N +popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +popupVisible | Boolean | - | \- | N +prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +readonly | Boolean | false | \- | N +reserveKeyword | Boolean | false | \- | N +scroll | Object | - | lazy load and virtual scroll。Typescript:`TScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +showArrow | Boolean | true | \- | N +size | String | medium | options:small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +status | String | - | options:default/success/warning/error | N +tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +tips | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +value | String / Number / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript:`SelectValue` `type SelectValue = string | number | T | Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript:`SelectValue` `type SelectValue = string | number | T | Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript:`string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +valueType | String | value | options:value/object | N +onBlur | Function | | Typescript:`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
| N +onChange | Function | | Typescript:`(value: SelectValue, context: { selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
| N +onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N +onCreate | Function | | Typescript:`(value: string | number) => void`
| N +onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
| N +onFocus | Function | | Typescript:`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
| N +onInputChange | Function | | Typescript:`(value: InputValue, context?: SelectInputValueChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N +onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N +onRemove | Function | | Typescript:`(options: SelectRemoveContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string | number; data: T; e: MouseEvent | KeyboardEvent }`
| N +onSearch | Function | | Typescript:`(filterWords: string) => void`
| N +onVisibleChange | Function | | Typescript:`(visible: boolean) => void`
| N + +### Select Events + +name | params | description +-- | -- | -- +blur | `(context: { value: SelectValue; e: FocusEvent | KeyboardEvent })` | \- +change | `(value: SelectValue, context: { selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
+clear | `(context: { e: MouseEvent })` | \- +create | `(value: string | number)` | \- +enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | \- +focus | `(context: { value: SelectValue; e: FocusEvent | KeyboardEvent })` | \- +input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
+popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
+remove | `(options: SelectRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string | number; data: T; e: MouseEvent | KeyboardEvent }`
+search | `(filterWords: string)` | \- +visible-change | `(visible: boolean)` | \- + +### Option Props + +name | type | default | description | required +-- | -- | -- | -- | -- +checkAll | Boolean | false | check all option, which can be both top of the panel and bottom of the panel | N +content | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript:`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +disabled | Boolean | false | \- | N +label | String | - | \- | N +value | String / Number | - | \- | N + +### OptionGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +divider | Boolean | true | \- | N +label | String | - | \- | N diff --git a/examples/select/select.md b/examples/select/select.md new file mode 100644 index 0000000000..74d37aa204 --- /dev/null +++ b/examples/select/select.md @@ -0,0 +1,93 @@ +:: BASE_DOC :: + +## API + +### Select Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +autoWidth | Boolean | false | 宽度随内容自适应 | N +bordered | Boolean | true | 是否有边框 | N +borderless | Boolean | false | 无边框模式 | N +clearable | Boolean | false | 是否可以清空选项 | N +collapsedItems | Slot / Function | - | 多选情况下,用于设置折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 collapsedItems 自定义。TS 类型:`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +creatable | Boolean | false | 是否允许用户创建新条目,需配合 filterable 使用 | N +disabled | Boolean | - | 是否禁用组件 | N +empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +filter | Function | - | 自定义过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。TS 类型:`(filterWords: string, option: T) => boolean | Promise` | N +filterable | Boolean | - | 是否可搜索 | N +inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +loading | Boolean | false | 是否为加载状态 | N +loadingText | String / Slot / Function | - | 远程加载时显示的文字,支持自定义。如加上超链接。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +max | Number | 0 | 用于控制多选数量,值为 0 则不限制 | N +minCollapsedNum | Number | 0 | 最小折叠数量,用于多选情况下折叠选中项,超出该数值的选中项折叠。值为 0 则表示不折叠 | N +multiple | Boolean | false | 是否允许多选 | N +options | Array | - | 数据化配置选项内容。TS 类型:`Array` | N +panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +placeholder | String | undefined | 占位符 | N +popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +popupVisible | Boolean | - | 是否显示下拉框 | N +prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N +reserveKeyword | Boolean | false | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | N +scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +showArrow | Boolean | true | 是否显示右侧箭头,默认显示 | N +size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +status | String | - | 输入框状态。可选项:default/success/warning/error | N +tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +tips | String / Slot / Function | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +value | String / Number / Object / Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`SelectValue` `type SelectValue = string | number | T | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型:`SelectValue` `type SelectValue = string | number | T | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N +valueDisplay | String / Slot / Function | - | 自定义选中项呈现方式。TS 类型:`string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +valueType | String | value | 用于控制选中值的类型。假设数据选项为:`[{ label: '姓名', value: 'name' }]`,value 表示值仅返回数据选项中的 value, object 表示值返回全部数据。。可选项:value/object | N +onBlur | Function | | TS 类型:`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
输入框失去焦点时触发 | N +onChange | Function | | TS 类型:`(value: SelectValue, context: { selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent }) => void`
选中值变化时触发,`context.trigger` 表示触发变化的来源,`context.selectedOptions` 表示选中值的完整对象。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
| N +onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
点击清除按钮时触发 | N +onCreate | Function | | TS 类型:`(value: string | number) => void`
当选择新创建的条目时触发 | N +onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值 | N +onFocus | Function | | TS 类型:`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`
输入框获得焦点时触发 | N +onInputChange | Function | | TS 类型:`(value: InputValue, context?: SelectInputValueChangeContext) => void`
输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
| N +onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVisibleChangeContext) => void`
下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
| N +onRemove | Function | | TS 类型:`(options: SelectRemoveContext) => void`
多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string | number; data: T; e: MouseEvent | KeyboardEvent }`
| N +onSearch | Function | | TS 类型:`(filterWords: string) => void`
输入值变化时,触发搜索事件。主要用于远程搜索新数据 | N +onVisibleChange | Function | | TS 类型:`(visible: boolean) => void`
下拉框隐藏/显示时触发 | N + +### Select Events + +名称 | 参数 | 描述 +-- | -- | -- +blur | `(context: { value: SelectValue; e: FocusEvent | KeyboardEvent })` | 输入框失去焦点时触发 +change | `(value: SelectValue, context: { selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent | KeyboardEvent })` | 选中值变化时触发,`context.trigger` 表示触发变化的来源,`context.selectedOptions` 表示选中值的完整对象。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`type SelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'`
+clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 +create | `(value: string | number)` | 当选择新创建的条目时触发 +enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | 回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值 +focus | `(context: { value: SelectValue; e: FocusEvent | KeyboardEvent })` | 输入框获得焦点时触发 +input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { SelectInputValueChangeContext } from '@SelectInput'`
+popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`import { PopupVisibleChangeContext } from '@Popup'`
+remove | `(options: SelectRemoveContext)` | 多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string | number; data: T; e: MouseEvent | KeyboardEvent }`
+search | `(filterWords: string)` | 输入值变化时,触发搜索事件。主要用于远程搜索新数据 +visible-change | `(visible: boolean)` | 下拉框隐藏/显示时触发 + +### Option Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +checkAll | Boolean | false | 当前选项是否为全选,全选可以在顶部,也可以在底部。点击当前选项会选中禁用态除外的全部选项,即使是分组选择器也会选中全部选项 | N +content | String / Slot / Function | - | 用于定义复杂的选项内容。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 用于定义复杂的选项内容。同 content。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +disabled | Boolean | false | 是否禁用该选项 | N +label | String | - | 选项名称 | N +value | String / Number | - | 选项值 | N + +### OptionGroup Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +divider | Boolean | true | 是否显示分隔线 | N +label | String | - | 分组别名 | N diff --git a/src/select/_example/multiple.vue b/src/select/_example/multiple.vue index 806eca9c48..47c6be5a1b 100644 --- a/src/select/_example/multiple.vue +++ b/src/select/_example/multiple.vue @@ -7,6 +7,7 @@ + @@ -17,9 +18,10 @@