diff --git a/db/TDesign.db b/db/TDesign.db index c49967ca4..b37e48d49 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-react/packages/components/popup/popup.en-US.md b/packages/products/tdesign-react/packages/components/popup/popup.en-US.md index 35c2cba43..6d05a1863 100644 --- a/packages/products/tdesign-react/packages/components/popup/popup.en-US.md +++ b/packages/products/tdesign-react/packages/components/popup/popup.en-US.md @@ -6,29 +6,29 @@ name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -delay | Number / Array | - | delay to show or hide popover。Typescript:`number \| Array` | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +children | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +delay | Number / Array | - | delay to show or hide popover。Typescript: `number \| Array` | N destroyOnClose | Boolean | false | \- | N disabled | Boolean | - | \- | N hideEmptyPopup | Boolean | false | \- | N -overlayClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -overlayInnerClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -overlayInnerStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -overlayStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -placement | String | top | Typescript:`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/popup/type.ts) | N +overlayClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +overlayInnerClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +overlayStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +placement | String | top | Typescript: `PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/popup/type.ts) | N popperOptions | Object | - | popper initial options,details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N -triggerElement | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -visible | Boolean | - | Typescript:`boolean` | N -defaultVisible | Boolean | - | uncontrolled property。Typescript:`boolean` | N +triggerElement | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +visible | Boolean | - | Typescript: `boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript: `boolean` | N zIndex | Number | - | \- | N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
trigger on popup content click | N -onScroll | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onScrollToBottom | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
trigger on popup content click | N +onScroll | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onScrollToBottom | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onVisibleChange | Function | | Typescript: `(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### PopupInstanceFunctions 组件实例方法 diff --git a/packages/products/tdesign-react/packages/components/popup/type.ts b/packages/products/tdesign-react/packages/components/popup/type.ts index 5db067652..ee435823e 100644 --- a/packages/products/tdesign-react/packages/components/popup/type.ts +++ b/packages/products/tdesign-react/packages/components/popup/type.ts @@ -5,8 +5,8 @@ * */ import { Instance } from '@popperjs/core'; -import { TNode, ClassName, Styles, AttachNode } from '../common'; -import { MouseEvent, KeyboardEvent, FocusEvent, WheelEvent } from 'react'; +import type { TNode, ClassName, Styles, AttachNode } from '../common'; +import type { MouseEvent, KeyboardEvent, FocusEvent, WheelEvent } from 'react'; export interface TdPopupProps { /** diff --git a/packages/products/tdesign-react/packages/components/tree-select/tree-select.en-US.md b/packages/products/tdesign-react/packages/components/tree-select/tree-select.en-US.md index 4117d6ccc..ec686153d 100644 --- a/packages/products/tdesign-react/packages/components/tree-select/tree-select.en-US.md +++ b/packages/products/tdesign-react/packages/components/tree-select/tree-select.en-US.md @@ -7,54 +7,54 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | TElement | - | Typescript:`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -data | Array | [] | Typescript:`Array` | N +collapsedItems | TElement | - | Typescript: `TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +data | Array | [] | Typescript: `Array` | N disabled | Boolean | undefined | \- | N -empty | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -filter | Function | - | Typescript:`(filterWords: string, option: DataOption) => boolean` | N +empty | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +filter | Function | - | Typescript: `(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N -inputValue | String / Number | - | input value。Typescript:`string` | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string` | N -keys | Object | - | alias filed name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -label | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +inputProps | Object | - | Typescript: `InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +inputValue | String / Number | - | input value。Typescript: `string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript: `string` | N +keys | Object | - | alias filed name in data。Typescript: `TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +label | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N loading | Boolean | false | \- | N -loadingText | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +loadingText | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -panelBottomContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -panelTopContent | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelBottomContent | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +panelTopContent | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/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-react/blob/develop/packages/components/tree-select/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N popupVisible | Boolean | undefined | show popup | N defaultPopupVisible | Boolean | undefined | show popup。uncontrolled property | N -prefixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +prefixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N readonly | Boolean | undefined | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N -suffix | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -suffixIcon | TElement | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N -tips | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N -treeProps | Object | - | Typescript:`TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N -value | String / Number / Object / Array | - | Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N -valueDisplay | TElement | - | Typescript:`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffix | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +suffixIcon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | Typescript: `TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +tips | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +treeProps | Object | - | Typescript: `TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +value | String / Number / Object / Array | - | Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts) | N +valueDisplay | TElement | - | Typescript: `string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N valueType | String | value | options: value/object | N -onBlur | Function | | Typescript:`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N -onChange | Function | | Typescript:`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N -onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N -onFocus | Function | | Typescript:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript:`(value: string, context: SelectInputValueChangeContext) => void`
| N -onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | Typescript:`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N -onSearch | Function | | Typescript:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N +onBlur | Function | | Typescript: `(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N +onChange | Function | | Typescript: `(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onEnter | Function | | Typescript: `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N +onFocus | Function | | Typescript: `(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onInputChange | Function | | Typescript: `(value: string, context: SelectInputValueChangeContext) => void`
| N +onPopupVisibleChange | Function | | Typescript: `(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | Typescript: `(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onSearch | Function | | Typescript: `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N diff --git a/packages/products/tdesign-react/packages/components/tree-select/tree-select.md b/packages/products/tdesign-react/packages/components/tree-select/tree-select.md index c204fa041..f489308f4 100644 --- a/packages/products/tdesign-react/packages/components/tree-select/tree-select.md +++ b/packages/products/tdesign-react/packages/components/tree-select/tree-select.md @@ -55,6 +55,6 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInputChange | Function | | TS 类型:`(value: string, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 | N -onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | TS 类型:`(options: RemoveOptions) => void`
多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 | N diff --git a/packages/products/tdesign-react/packages/components/tree-select/type.ts b/packages/products/tdesign-react/packages/components/tree-select/type.ts index b135a460f..7a9610136 100644 --- a/packages/products/tdesign-react/packages/components/tree-select/type.ts +++ b/packages/products/tdesign-react/packages/components/tree-select/type.ts @@ -10,8 +10,8 @@ import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext import { TagProps } from '../tag'; import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TElement, TreeOptionData, TreeKeysType } from '../common'; -import { MouseEvent, KeyboardEvent, FocusEvent } from 'react'; +import type { TNode, TElement, TreeOptionData, TreeKeysType } from '../common'; +import type { MouseEvent, KeyboardEvent, FocusEvent } from 'react'; export interface TdTreeSelectProps< DataOption extends TreeOptionData = TreeOptionData, @@ -254,7 +254,7 @@ export interface TreeSelectChangeContext { export type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; export interface TreeSelectPopupVisibleContext { - e?: PopupTriggerEvent | Event; + e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; } diff --git a/packages/products/tdesign-vue-next/packages/components/popup/popup.en-US.md b/packages/products/tdesign-vue-next/packages/components/popup/popup.en-US.md index 4065cb0de..0b745412e 100644 --- a/packages/products/tdesign-vue-next/packages/components/popup/popup.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/popup/popup.en-US.md @@ -6,29 +6,29 @@ name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -content | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -delay | Number / Array | - | delay to show or hide popover。Typescript:`number \| Array` | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +content | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +delay | Number / Array | - | delay to show or hide popover。Typescript: `number \| Array` | N destroyOnClose | Boolean | false | \- | N disabled | Boolean | - | \- | N hideEmptyPopup | Boolean | false | \- | N -overlayClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -overlayInnerClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -overlayInnerStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -overlayStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -placement | String | top | Typescript:`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/popup/type.ts) | N +overlayClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +overlayInnerClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +overlayStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +placement | String | top | Typescript: `PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/popup/type.ts) | N popperOptions | Object | - | popper initial options,details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N -triggerElement | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -visible | Boolean | - | `v-model` and `v-model:visible` is supported。Typescript:`boolean` | N -defaultVisible | Boolean | - | uncontrolled property。Typescript:`boolean` | N +triggerElement | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +visible | Boolean | - | `v-model` and `v-model:visible` is supported。Typescript: `boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript: `boolean` | N zIndex | Number | - | \- | N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
trigger on popup content click | N -onScroll | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onScrollToBottom | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
trigger on popup content click | N +onScroll | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onScrollToBottom | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onVisibleChange | Function | | Typescript: `(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events diff --git a/packages/products/tdesign-vue-next/packages/components/popup/type.ts b/packages/products/tdesign-vue-next/packages/components/popup/type.ts index 5d48cdd6b..83606655a 100644 --- a/packages/products/tdesign-vue-next/packages/components/popup/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/popup/type.ts @@ -5,7 +5,7 @@ * */ import { Instance } from '@popperjs/core'; -import { TNode, ClassName, Styles, AttachNode } from '../common'; +import type { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { /** diff --git a/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.en-US.md b/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.en-US.md index 39447b47b..b56bcf3d8 100644 --- a/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.en-US.md @@ -10,52 +10,52 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -data | Array | [] | Typescript:`Array` | N +collapsedItems | Slot / Function | - | Typescript: `TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +data | Array | [] | Typescript: `Array` | N disabled | Boolean | undefined | \- | N -empty | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -filter | Function | - | Typescript:`(filterWords: string, option: DataOption) => boolean` | N +empty | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +filter | Function | - | Typescript: `(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N -inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`string` | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string` | N -keys | Object | - | alias filed name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +inputProps | Object | - | Typescript: `InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript: `string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript: `string` | N +keys | Object | - | alias filed name in data。Typescript: `TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.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/packages/components/common.ts) | N +loadingText | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -panelBottomContent | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -panelTopContent | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +panelBottomContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +panelTopContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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/blob/develop/packages/components/tree-select/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N popupVisible | Boolean | undefined | show popup。`v-model:popupVisible` is supported | N defaultPopupVisible | Boolean | undefined | show popup。uncontrolled property | N -prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N readonly | Boolean | undefined | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N -suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N -tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -treeProps | Object | - | Typescript:`TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N -value | String / Number / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N -valueDisplay | Slot / Function | - | Typescript:`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +suffix | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +suffixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +tagProps | Object | - | Typescript: `TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +tips | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +treeProps | Object | - | Typescript: `TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +value | String / Number / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts) | N +valueDisplay | Slot / Function | - | Typescript: `string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N valueType | String | value | options: value/object | N -onBlur | Function | | Typescript:`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N -onChange | Function | | Typescript:`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N -onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N -onFocus | Function | | Typescript:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript:`(value: string, context: SelectInputValueChangeContext) => void`
| N -onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | Typescript:`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N -onSearch | Function | | Typescript:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N +onBlur | Function | | Typescript: `(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N +onChange | Function | | Typescript: `(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onEnter | Function | | Typescript: `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N +onFocus | Function | | Typescript: `(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onInputChange | Function | | Typescript: `(value: string, context: SelectInputValueChangeContext) => void`
| N +onPopupVisibleChange | Function | | Typescript: `(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | Typescript: `(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onSearch | Function | | Typescript: `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N ### TreeSelect Events @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | \- focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- input-change | `(value: string, context: SelectInputValueChangeContext)` | \- -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | \- diff --git a/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.md b/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.md index 3e61d4bec..7a2b9c46d 100644 --- a/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.md +++ b/packages/products/tdesign-vue-next/packages/components/tree-select/tree-select.md @@ -53,7 +53,7 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInputChange | Function | | TS 类型:`(value: string, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 | N -onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | TS 类型:`(options: RemoveOptions) => void`
多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 | N @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | 回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | 输入框获得焦点时触发 input-change | `(value: string, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | 多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | 输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 diff --git a/packages/products/tdesign-vue-next/packages/components/tree-select/type.ts b/packages/products/tdesign-vue-next/packages/components/tree-select/type.ts index cb6cd1ad7..ec5f84cc1 100644 --- a/packages/products/tdesign-vue-next/packages/components/tree-select/type.ts +++ b/packages/products/tdesign-vue-next/packages/components/tree-select/type.ts @@ -10,7 +10,7 @@ import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext import { TagProps } from '../tag'; import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TreeOptionData, TreeKeysType } from '../common'; +import type { TNode, TreeOptionData, TreeKeysType } from '../common'; export interface TdTreeSelectProps< DataOption extends TreeOptionData = TreeOptionData, @@ -254,7 +254,7 @@ export interface TreeSelectChangeContext { export type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; export interface TreeSelectPopupVisibleContext { - e?: PopupTriggerEvent | Event; + e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; } diff --git a/packages/products/tdesign-vue/src/popup/popup.en-US.md b/packages/products/tdesign-vue/src/popup/popup.en-US.md index d6fb74dea..fa8340190 100644 --- a/packages/products/tdesign-vue/src/popup/popup.en-US.md +++ b/packages/products/tdesign-vue/src/popup/popup.en-US.md @@ -6,29 +6,29 @@ name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript:`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -content | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -default | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -delay | Number / Array | - | delay to show or hide popover。Typescript:`number \| Array` | N +attach | String / Function | 'body' | Typescript: `AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +content | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delay | Number / Array | - | delay to show or hide popover。Typescript: `number \| Array` | N destroyOnClose | Boolean | false | \- | N disabled | Boolean | - | \- | N hideEmptyPopup | Boolean | false | \- | N -overlayClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayInnerClassName | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayInnerStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -overlayStyle | Boolean / Object / Function | - | Typescript:`Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -placement | String | top | Typescript:`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N +overlayClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | Typescript: `ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayStyle | Boolean / Object / Function | - | Typescript: `Styles \| ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +placement | String | top | Typescript: `PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N popperOptions | Object | - | popper initial options,details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N -triggerElement | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -visible | Boolean | - | `v-model` is supported。Typescript:`boolean` | N -defaultVisible | Boolean | - | uncontrolled property。Typescript:`boolean` | N +triggerElement | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +visible | Boolean | - | `v-model` is supported。Typescript: `boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript: `boolean` | N zIndex | Number | - | \- | N -onOverlayClick | Function | | Typescript:`(context: { e: MouseEvent }) => void`
trigger on popup content click | N -onScroll | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onScrollToBottom | Function | | Typescript:`(context: { e: WheelEvent }) => void`
| N -onVisibleChange | Function | | Typescript:`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N +onOverlayClick | Function | | Typescript: `(context: { e: MouseEvent }) => void`
trigger on popup content click | N +onScroll | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onScrollToBottom | Function | | Typescript: `(context: { e: WheelEvent }) => void`
| N +onVisibleChange | Function | | Typescript: `(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N ### Popup Events diff --git a/packages/products/tdesign-vue/src/popup/type.ts b/packages/products/tdesign-vue/src/popup/type.ts index 113b4277b..79ab3c3f9 100644 --- a/packages/products/tdesign-vue/src/popup/type.ts +++ b/packages/products/tdesign-vue/src/popup/type.ts @@ -5,7 +5,7 @@ * */ import { Instance } from '@popperjs/core'; -import { TNode, ClassName, Styles, AttachNode } from '../common'; +import type { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { /** diff --git a/packages/products/tdesign-vue/src/tree-select/tree-select.en-US.md b/packages/products/tdesign-vue/src/tree-select/tree-select.en-US.md index 8f1fbcd25..0d5341aeb 100644 --- a/packages/products/tdesign-vue/src/tree-select/tree-select.en-US.md +++ b/packages/products/tdesign-vue/src/tree-select/tree-select.en-US.md @@ -10,52 +10,52 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -data | Array | [] | Typescript:`Array` | N +collapsedItems | Slot / Function | - | Typescript: `TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +data | Array | [] | Typescript: `Array` | N disabled | Boolean | undefined | \- | N -empty | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -filter | Function | - | Typescript:`(filterWords: string, option: DataOption) => boolean` | N +empty | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filter | Function | - | Typescript: `(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N -inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | input value。`.sync` is supported。Typescript:`string` | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string` | N -keys | Object | - | alias filed name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +inputProps | Object | - | Typescript: `InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | input value。`.sync` is supported。Typescript: `string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript: `string` | N +keys | Object | - | alias filed name in data。Typescript: `TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +label | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N -loadingText | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loadingText | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N max | Number | 0 | \- | N minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N -panelBottomContent | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -panelTopContent | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelBottomContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +panelTopContent | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/tree-select/type.ts) | N +popupProps | Object | - | Typescript: `PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N popupVisible | Boolean | undefined | show popup。`.sync` is supported | N defaultPopupVisible | Boolean | undefined | show popup。uncontrolled property | N -prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +prefixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N readonly | Boolean | undefined | \- | N reserveKeyword | Boolean | false | \- | N -selectInputProps | Object | - | Typescript:`SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +selectInputProps | Object | - | Typescript: `SelectInputProps`,[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N -suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -treeProps | Object | - | Typescript:`TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -value | String / Number / Object / Array | - | `v-model` is supported。Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript:`TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N -valueDisplay | Slot / Function | - | Typescript:`string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffix | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +tagProps | Object | - | Typescript: `TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +tips | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeProps | Object | - | Typescript: `TreeProps`,[Tree API Documents](./tree?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +value | String / Number / Object / Array | - | `v-model` is supported。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +defaultValue | String / Number / Object / Array | - | uncontrolled property。Typescript: `TreeValueType` `type TreeSelectValue = string \| number \| TreeOptionData \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts) | N +valueDisplay | Slot / Function | - | Typescript: `string \| TNode<{ value: TreeOptionData \| TreeOptionData[]; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N valueType | String | value | options: value/object | N -onBlur | Function | | Typescript:`(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N -onChange | Function | | Typescript:`(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N -onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void`
| N -onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N -onFocus | Function | | Typescript:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript:`(value: string, context: SelectInputValueChangeContext) => void`
| N -onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N -onRemove | Function | | Typescript:`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N -onSearch | Function | | Typescript:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N +onBlur | Function | | Typescript: `(context: SelectInputBlurContext & { value: TreeSelectValue }) => void`
| N +onChange | Function | | Typescript: `(value: TreeValueType, context: TreeSelectChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`interface TreeSelectChangeContext { node: TreeNodeModel; data: DataOption; index?: number; trigger: TreeSelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent \| Event }`

`type TreeSelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`
| N +onClear | Function | | Typescript: `(context: { e: MouseEvent }) => void`
| N +onEnter | Function | | Typescript: `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N +onFocus | Function | | Typescript: `(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N +onInputChange | Function | | Typescript: `(value: string, context: SelectInputValueChangeContext) => void`
| N +onPopupVisibleChange | Function | | Typescript: `(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onRemove | Function | | Typescript: `(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N +onSearch | Function | | Typescript: `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N ### TreeSelect Events @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | \- focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- input-change | `(value: string, context: SelectInputValueChangeContext)` | \- -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | \- diff --git a/packages/products/tdesign-vue/src/tree-select/tree-select.md b/packages/products/tdesign-vue/src/tree-select/tree-select.md index 22b628365..3a2abfa72 100644 --- a/packages/products/tdesign-vue/src/tree-select/tree-select.md +++ b/packages/products/tdesign-vue/src/tree-select/tree-select.md @@ -53,7 +53,7 @@ onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`
onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onInputChange | Function | | TS 类型:`(value: string, context: SelectInputValueChangeContext) => void`
输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 | N -onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N +onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | TS 类型:`(options: RemoveOptions) => void`
多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | TS 类型:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 | N @@ -67,6 +67,6 @@ clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | 回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | 输入框获得焦点时触发 input-change | `(value: string, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 -popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
+popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
remove | `(options: RemoveOptions)` | 多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | 输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 diff --git a/packages/products/tdesign-vue/src/tree-select/type.ts b/packages/products/tdesign-vue/src/tree-select/type.ts index 4b14a9228..bcd7c8690 100644 --- a/packages/products/tdesign-vue/src/tree-select/type.ts +++ b/packages/products/tdesign-vue/src/tree-select/type.ts @@ -10,7 +10,7 @@ import { SelectInputProps, SelectInputBlurContext, SelectInputValueChangeContext import { TagProps } from '../tag'; import { TreeProps, TreeNodeModel, TreeKeysType } from '../tree'; import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '../popup'; -import { TNode, TreeOptionData, TreeKeysType } from '../common'; +import type { TNode, TreeOptionData, TreeKeysType } from '../common'; export interface TdTreeSelectProps< DataOption extends TreeOptionData = TreeOptionData, @@ -250,7 +250,7 @@ export interface TreeSelectChangeContext { export type TreeSelectValueChangeTrigger = 'clear' | 'tag-remove' | 'backspace' | 'check' | 'uncheck'; export interface TreeSelectPopupVisibleContext { - e?: PopupTriggerEvent | Event; + e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; } diff --git a/packages/scripts/api.json b/packages/scripts/api.json index a1118f4b3..635885e00 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -150975,7 +150975,7 @@ "field_desc_zh": "下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`", "field_desc_en": null, "field_required": 0, - "event_input": "(visible: boolean, context: TreeSelectPopupVisibleContext)【import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'】【interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent | Event; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; }】", + "event_input": "(visible: boolean, context: TreeSelectPopupVisibleContext)【import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'】【interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent; node?: TreeNodeModel; trigger?: PopupTriggerSource | 'clear'; }】", "create_time": "2022-03-08 11:01:06", "update_time": "2022-03-08 11:01:06", "event_output": null,