From 5de1ec0eceabb993d0bde2a0dc124780d08287f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 8 Jan 2025 23:03:44 +0800 Subject: [PATCH 1/2] feat(auto-complete): support empty api --- src/auto-complete/auto-complete.en-US.md | 1 + src/auto-complete/auto-complete.md | 3 ++- src/auto-complete/option-list.tsx | 7 +++++- src/auto-complete/props.ts | 6 ++++- src/auto-complete/type.ts | 6 ++++- src/config-provider/config-provider.en-US.md | 7 ++++++ src/config-provider/config-provider.md | 7 ++++++ src/config-provider/type.ts | 24 ++++++++++---------- 8 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md index 52fcfb067..44c3cd218 100644 --- a/src/auto-complete/auto-complete.en-US.md +++ b/src/auto-complete/auto-complete.en-US.md @@ -11,6 +11,7 @@ borderless | Boolean | false | \- | N clearable | Boolean | - | \- | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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: T) => boolean \| Promise` | N filterable | Boolean | true | \- | N highlightKeyword | Boolean | true | \- | N diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md index f516f6bd1..2e8bd6270 100644 --- a/src/auto-complete/auto-complete.md +++ b/src/auto-complete/auto-complete.md @@ -11,6 +11,7 @@ borderless | Boolean | false | 无边框模式 | N clearable | Boolean | - | 是否允许清空 | N default | String / Slot / Function | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | undefined | 是否禁用 | N +empty | String / Slot / Function | - | 当下拉联想词列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N filter | Function | - | 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise` | N filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同，此时可以设置为 `false` | N highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N @@ -19,7 +20,7 @@ options | Array | - | 下拉联想词列表。示例一：`['联想词一', '联 panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placeholder | String | undefined | 输入框为空时的占位提示。组件本身默认值为 `undefined`，但全局配置存在默认值，不同语言全局默认值不同 | N -popupProps | Object | - | 透传 Popup 组件全部特性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/auto-complete/type.ts) | N +popupProps | Object | - | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/auto-complete/type.ts) | N readonly | Boolean | - | 是否只读 | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N diff --git a/src/auto-complete/option-list.tsx b/src/auto-complete/option-list.tsx index d8cb86640..c77f823f7 100644 --- a/src/auto-complete/option-list.tsx +++ b/src/auto-complete/option-list.tsx @@ -9,6 +9,7 @@ import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type'; import log from '../_common/js/log'; import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { on, off } from '../utils/dom'; +import { renderTNodeJSX } from '../utils/render-tnode'; export default defineComponent({ name: 'AutoCompleteOptionList', @@ -22,6 +23,7 @@ export default defineComponent({ highlightKeyword: Boolean, filterable: Boolean, filter: Function as PropType, + empty: [String, Function] as PropType, }, setup(props, { emit }) { @@ -144,7 +146,10 @@ export default defineComponent({ }, render() { - if (!this.tOptions.length) return
{this.globalConfig.empty}
; + if (!this.tOptions.length) { + const empty = renderTNodeJSX(this, 'empty'); + return
{empty || this.globalConfig.empty}
; + } return (
    {this.tOptions.map((item) => { diff --git a/src/auto-complete/props.ts b/src/auto-complete/props.ts index 3b9e4de8c..0d0a591fc 100644 --- a/src/auto-complete/props.ts +++ b/src/auto-complete/props.ts @@ -23,6 +23,10 @@ export default { type: Boolean, default: undefined, }, + /** 当下拉联想词列表为空时显示的内容 */ + empty: { + type: [String, Function] as PropType, + }, /** 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable` */ filter: { type: Function as PropType, @@ -58,7 +62,7 @@ export default { type: String, default: undefined, }, - /** 透传 Popup 组件全部特性 */ + /** 透传 Popup 组件全部属性 */ popupProps: { type: Object as PropType, }, diff --git a/src/auto-complete/type.ts b/src/auto-complete/type.ts index be5b1f973..c1bd54181 100644 --- a/src/auto-complete/type.ts +++ b/src/auto-complete/type.ts @@ -31,6 +31,10 @@ export interface TdAutoCompleteProps>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N attach | String / Object / Function | - | Typescript：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +autoComplete | Object | - | AutoComplete global configs。Typescript：`AutoCompleteConfig` | N calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N classPrefix | String | t | \- | N @@ -399,3 +400,9 @@ name | type | default | description | required -- | -- | -- | -- | -- image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N + +### AutoCompleteConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +empty | String | - | \- | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index caeb433e6..cbd984c73 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -64,6 +64,7 @@ alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N attach | String / Object / Function | - | TS 类型：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +autoComplete | Object | - | 自动填充组件全局配置。TS 类型：`AutoCompleteConfig` | N calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N classPrefix | String | t | CSS 类名前缀 | N @@ -400,3 +401,9 @@ rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', -- | -- | -- | -- | -- image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N + +### AutoCompleteConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +empty | String | - | 语言配置，“暂无数据”描述文本 | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index 827a3dca9..cb43f8218 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -13,10 +13,6 @@ import { ImageProps } from '../image'; import { TNode, SizeEnum, AttachNode } from '../common'; export interface GlobalConfigProvider { - /** - * 自动填充全局配置 - */ - autoComplete?: AutoCompleteConfig; /** * 警告全局配置 */ @@ -33,6 +29,10 @@ export interface GlobalConfigProvider { * null */ attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode }; + /** + * 自动填充组件全局配置 + */ + autoComplete?: AutoCompleteConfig; /** * 日历组件全局配置 */ @@ -152,14 +152,6 @@ export interface GlobalConfigProvider { upload?: UploadConfig; } -export interface AutoCompleteConfig { - /** - * 语言配置，“暂无数据”描述文本 - * @default '' - */ - empty?: string; -} - export interface InputConfig { /** * 是否开启自动填充功能 @@ -950,6 +942,14 @@ export interface EmptyConfig { titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string }; } +export interface AutoCompleteConfig { + /** + * 语言配置，“暂无数据”描述文本 + * @default '' + */ + empty?: string; +} + export type AnimationType = 'ripple' | 'expand' | 'fade'; export type IconConfig = GlobalIconConfig; From 77fa24e00a1fff8cd4d096a7a8e3a2f4e74518a3 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Fri, 10 Jan 2025 12:08:18 +0800 Subject: [PATCH 2/2] fix(autocomplete): fix --- src/auto-complete/auto-complete.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/auto-complete/auto-complete.tsx b/src/auto-complete/auto-complete.tsx index 9c676d69e..154071dea 100644 --- a/src/auto-complete/auto-complete.tsx +++ b/src/auto-complete/auto-complete.tsx @@ -170,8 +170,10 @@ export default defineComponent({ highlightKeyword={this.highlightKeyword} filterable={this.filterable} filter={this.filter} + empty={this.empty} scopedSlots={{ option: this.$scopedSlots.option, + empty: this.$scopedSlots.empty, }} /> );