From 7340fb1d15b9370428fb23ac4f6185a732b9d518 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 25 Jun 2022 23:47:08 +0800 Subject: [PATCH 1/7] feat: global-config update --- examples/config-provider/config-provider.md | 157 +++++----- examples/pagination/demos/more.vue | 9 +- src/config-provider/type.ts | 326 +++++++++++--------- src/dialog/dialog.tsx | 4 +- src/drawer/drawer.tsx | 10 +- src/input/input.tsx | 2 +- src/locale/ja_JP.ts | 3 + src/locale/ko_KR.ts | 3 + src/select/select.tsx | 2 +- 9 files changed, 280 insertions(+), 236 deletions(-) create mode 100644 src/locale/ja_JP.ts create mode 100644 src/locale/ko_KR.ts diff --git a/examples/config-provider/config-provider.md b/examples/config-provider/config-provider.md index 459bdf751..9bfd62997 100644 --- a/examples/config-provider/config-provider.md +++ b/examples/config-provider/config-provider.md @@ -30,19 +30,21 @@ tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N -### TreeSelectConfig +### InputConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | - | 语言配置，“暂无数据”描述文本 | N -loadingText | String | - | 语言配置，“加载中”描述文本 | N -placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N +autocomplete | String | - | 是否开启自动填充功能 | N +placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N -### InputConfig +### PaginationConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N +itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N +jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N +page | String | - | 语言配置，“页”描述文本 | N +total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N ### CalendarConfig @@ -78,19 +80,23 @@ clearConfirmText | String | - | 语言配置，“确定清空最近使用的颜 recentColorTitle | String | - | 语言配置，“最近使用颜色” 区域标题文本 | N swatchColorTitle | String | - | 语言配置，"系统预设颜色" 区域标题文本 | N -### AnchorConfig +### TransferConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N -copyText | String | - | 语言配置，“复制链接” 描述文本 | N +empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N +placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N +title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N -### AlertConfig +### TimePickerConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -collapseText | String | - | 语言配置，“收起”描述文本 | N -expandText | String | - | 语言配置，“展开更多”描述文本 | N +anteMeridiem | String | - | 语言配置，“上午”描述文本 | N +confirm | String | - | 语言配置，“确定”描述文本 | N +now | String | - | 语言配置，“此刻”描述文本 | N +placeholder | String | - | 语言配置，"请选择时间"占位符描述文本 | N +postMeridiem | String | - | 语言配置，“下午”描述文本 | N ### DatePickerConfig @@ -124,6 +130,8 @@ yearAriaLabel | String | - | 语言配置，“年” 描述文本 | N 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancel | Object | - | 取消按钮风格。TS 类型：`string | ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发对话框关闭事件 | N +closeOnOverlayClick | Boolean | - | 点击蒙层时是否触发关闭事件 | N confirm | Object | - | 确认按钮风格。TS 类型：`string | ButtonProps` | N confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; info: string; warning: string; danger: string; success: string; }` | N @@ -132,40 +140,10 @@ confirmBtnTheme | Object | - | 确认按钮主题色，即 Dialog 的 `theme` 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- cancel | String | - | 语言配置，“取消”描述文本。TS 类型：`string | ButtonProps` | N +closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发抽屉关闭事件 | N +closeOnOverlayClick | Boolean | - | 点击蒙层时是否触发关闭事件 | N confirm | String | - | 语言配置，“确认”描述文本。TS 类型：`string | ButtonProps` | N - -### FormConfig - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N - -### UploadConfigFileList - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -fileNameText | String | - | 语言配置，“文件名” 描述文本 | N -fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N -fileOperationText | String | - | 语言配置，“操作” 描述文本 | N -fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N -fileStatusText | String | - | 语言配置，“状态” 描述文本 | N - -### ListConfig - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N -loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N - -### PaginationConfig - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N -jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N -page | String | - | 语言配置，“页”描述文本 | N -total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N +size | String | - | 尺寸配置，配置Drawer尺寸 | N ### PopconfirmConfig @@ -200,51 +178,37 @@ sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述 sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode<{ type: 'expand' | 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### StepsConfig - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N - ### SelectConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N empty | String | - | 语言配置，“暂无数据”描述文本 | N +filterable | Boolean | - | 全局配置是否可筛选 | N loadingText | String | - | 语言配置，“加载中”描述文本 | N placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### TagConfig - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N - -### TimePickerConfig +### TreeConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -anteMeridiem | String | - | 语言配置，“上午”描述文本 | N -confirm | String | - | 语言配置，“确定”描述文本 | N -now | String | - | 语言配置，“此刻”描述文本 | N -placeholder | String | - | 语言配置，"请选择时间"占位符描述文本 | N -postMeridiem | String | - | 语言配置，“下午”描述文本 | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### TransferConfig +### TreeSelectConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N -placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N -title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### TreeConfig +### ListConfig 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -empty | String | - | 语言配置，“暂无数据”描述文本 | N -folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N +loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N ### UploadConfig @@ -257,6 +221,15 @@ progress | Object | - | 语言配置，上传进度相关。示例：{ uploadTex sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件',reupload: '重新上传',fileInput: '删除' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +### UploadConfigProgress + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +failText | String | - | 语言配置，“上传失败”文本描述 | N +successText | String | - | 语言配置，“上传成功”文本描述 | N +uploadingText | String | - | 语言配置，“上传中”文本描述 | N +waitingText | String | - | 语言配置，“待上传”文本描述 | N + ### UploadConfigDragger 名称 | 类型 | 默认值 | 说明 | 必传 @@ -265,11 +238,45 @@ clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件 dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N -### UploadConfigProgress +### UploadConfigFileList 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -failText | String | - | 语言配置，“上传失败”文本描述 | N -successText | String | - | 语言配置，“上传成功”文本描述 | N -uploadingText | String | - | 语言配置，“上传中”文本描述 | N -waitingText | String | - | 语言配置，“待上传”文本描述 | N +fileNameText | String | - | 语言配置，“文件名” 描述文本 | N +fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N +fileOperationText | String | - | 语言配置，“操作” 描述文本 | N +fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N +fileStatusText | String | - | 语言配置，“状态” 描述文本 | N + +### FormConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N + +### TagConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### StepsConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N + +### AlertConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +collapseText | String | - | 语言配置，“收起”描述文本 | N +expandText | String | - | 语言配置，“展开更多”描述文本 | N + +### AnchorConfig + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N +copyText | String | - | 语言配置，“复制链接” 描述文本 | N diff --git a/examples/pagination/demos/more.vue b/examples/pagination/demos/more.vue index c1d95b992..f7ce3f50c 100644 --- a/examples/pagination/demos/more.vue +++ b/examples/pagination/demos/more.vue @@ -1,10 +1,9 @@ diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index 17c7a2560..1336b1e66 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -109,30 +109,40 @@ export interface GlobalConfigProvider { upload?: UploadConfig; } -export interface TreeSelectConfig { - /** - * 语言配置，“暂无数据”描述文本 - * @default '' - */ - empty?: string; +export interface InputConfig { /** - * 语言配置，“加载中”描述文本 + * 是否开启自动填充功能 * @default '' */ - loadingText?: string; + autocomplete?: string; /** - * 语言配置，“请选择”占位符描述文本 + * 语言配置，“请输入”占位符描述文本 * @default '' */ placeholder?: string; } -export interface InputConfig { +export interface PaginationConfig { /** - * 语言配置，“请输入”占位符描述文本 + * 语言配置，每页条数文本，示例：`'{size} 条/页'` * @default '' */ - placeholder?: string; + itemsPerPage?: string; + /** + * 语言配置，页码跳转文本，示例：'跳至' + * @default '' + */ + jumpTo?: string; + /** + * 语言配置，“页”描述文本 + * @default '' + */ + page?: string; + /** + * 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` + * @default '' + */ + total?: string; } export interface CalendarConfig { @@ -238,30 +248,50 @@ export interface ColorPickerConfig { swatchColorTitle?: string; } -export interface AnchorConfig { +export interface TransferConfig { /** - * 语言配置，“链接复制成功”描述文本 + * 语言配置，“暂无数据”空数据描述文本 * @default '' */ - copySuccessText?: string; + empty?: string; /** - * 语言配置，“复制链接” 描述文本 + * 语言配置，“请输入关键词搜索”占位符描述文本 * @default '' */ - copyText?: string; + placeholder?: string; + /** + * 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” + * @default '' + */ + title?: string; } -export interface AlertConfig { +export interface TimePickerConfig { /** - * 语言配置，“收起”描述文本 + * 语言配置，“上午”描述文本 * @default '' */ - collapseText?: string; + anteMeridiem?: string; /** - * 语言配置，“展开更多”描述文本 + * 语言配置，“确定”描述文本 * @default '' */ - expandText?: string; + confirm?: string; + /** + * 语言配置，“此刻”描述文本 + * @default '' + */ + now?: string; + /** + * 语言配置，"请选择时间"占位符描述文本 + * @default '' + */ + placeholder?: string; + /** + * 语言配置，“下午”描述文本 + * @default '' + */ + postMeridiem?: string; } export interface DatePickerConfig { @@ -378,6 +408,14 @@ export interface DialogConfig { * 取消按钮风格 */ cancel?: string | ButtonProps; + /** + * 按下 ESC 时是否触发对话框关闭事件 + */ + closeOnEscKeydown?: boolean; + /** + * 点击蒙层时是否触发关闭事件 + */ + closeOnOverlayClick?: boolean; /** * 确认按钮风格 */ @@ -395,86 +433,23 @@ export interface DrawerConfig { */ cancel?: string | ButtonProps; /** - * 语言配置，“确认”描述文本 - * @default '' - */ - confirm?: string | ButtonProps; -} - -export interface FormConfig { - /** - * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` - */ - errorMessage?: FormErrorMessage; - /** - * 是否显示必填符号（*），默认显示 - * @default true - */ - requiredMark?: boolean; -} - -export interface UploadConfigFileList { - /** - * 语言配置，“文件名” 描述文本 - * @default '' - */ - fileNameText?: string; - /** - * 语言配置，“上传日期” 描述文本 - * @default '' - */ - fileOperationDateText?: string; - /** - * 语言配置，“操作” 描述文本 - * @default '' - */ - fileOperationText?: string; - /** - * 语言配置，“文件尺寸” 描述文本 - * @default '' - */ - fileSizeText?: string; - /** - * 语言配置，“状态” 描述文本 - * @default '' - */ - fileStatusText?: string; -} - -export interface ListConfig { - /** - * 语言配置，'点击加载更多' 描述文本 - * @default '' + * 按下 ESC 时是否触发抽屉关闭事件 */ - loadingMoreText?: string; + closeOnEscKeydown?: boolean; /** - * 语言配置，'正在加载中，请稍后' 描述文本 - * @default '' + * 点击蒙层时是否触发关闭事件 */ - loadingText?: string; -} - -export interface PaginationConfig { + closeOnOverlayClick?: boolean; /** - * 语言配置，每页条数文本，示例：`'{size} 条/页'` - * @default '' - */ - itemsPerPage?: string; - /** - * 语言配置，页码跳转文本，示例：'跳至' + * 语言配置，“确认”描述文本 * @default '' */ - jumpTo?: string; + confirm?: string | ButtonProps; /** - * 语言配置，“页”描述文本 + * 尺寸配置，配置Drawer尺寸 * @default '' */ - page?: string; - /** - * 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` - * @default '' - */ - total?: string; + size?: string; } export interface PopconfirmConfig { @@ -590,13 +565,6 @@ export interface TableConfig { treeExpandAndFoldIcon?: TNode<{ type: 'expand' | 'fold' }>; } -export interface StepsConfig { - /** - * 错误步骤图标，【注意】使用渲染函数输出图标组件 - */ - errorIcon?: TNode; -} - export interface SelectConfig { /** * 清除图标，【注意】使用渲染函数输出图标组件 @@ -607,6 +575,10 @@ export interface SelectConfig { * @default '' */ empty?: string; + /** + * 全局配置是否可筛选 + */ + filterable?: boolean; /** * 语言配置，“加载中”描述文本 * @default '' @@ -619,69 +591,47 @@ export interface SelectConfig { placeholder?: string; } -export interface TagConfig { - /** - * 关闭图标，【注意】使用渲染函数输出图标组件 - */ - closeIcon?: TNode; -} - -export interface TimePickerConfig { - /** - * 语言配置，“上午”描述文本 - * @default '' - */ - anteMeridiem?: string; - /** - * 语言配置，“确定”描述文本 - * @default '' - */ - confirm?: string; - /** - * 语言配置，“此刻”描述文本 - * @default '' - */ - now?: string; +export interface TreeConfig { /** - * 语言配置，"请选择时间"占位符描述文本 + * 语言配置，“暂无数据”描述文本 * @default '' */ - placeholder?: string; + empty?: string; /** - * 语言配置，“下午”描述文本 - * @default '' + * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件 */ - postMeridiem?: string; + folderIcon?: TNode; } -export interface TransferConfig { +export interface TreeSelectConfig { /** - * 语言配置，“暂无数据”空数据描述文本 + * 语言配置，“暂无数据”描述文本 * @default '' */ empty?: string; /** - * 语言配置，“请输入关键词搜索”占位符描述文本 + * 语言配置，“加载中”描述文本 * @default '' */ - placeholder?: string; + loadingText?: string; /** - * 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” + * 语言配置，“请选择”占位符描述文本 * @default '' */ - title?: string; + placeholder?: string; } -export interface TreeConfig { +export interface ListConfig { /** - * 语言配置，“暂无数据”描述文本 + * 语言配置，'点击加载更多' 描述文本 * @default '' */ - empty?: string; + loadingMoreText?: string; /** - * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件 + * 语言配置，'正在加载中，请稍后' 描述文本 + * @default '' */ - folderIcon?: TNode; + loadingText?: string; } export interface UploadConfig { @@ -713,6 +663,29 @@ export interface UploadConfig { triggerUploadText?: UploadTriggerUploadText; } +export interface UploadConfigProgress { + /** + * 语言配置，“上传失败”文本描述 + * @default '' + */ + failText?: string; + /** + * 语言配置，“上传成功”文本描述 + * @default '' + */ + successText?: string; + /** + * 语言配置，“上传中”文本描述 + * @default '' + */ + uploadingText?: string; + /** + * 语言配置，“待上传”文本描述 + * @default '' + */ + waitingText?: string; +} + export interface UploadConfigDragger { /** * 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 @@ -731,27 +704,84 @@ export interface UploadConfigDragger { draggingText?: string; } -export interface UploadConfigProgress { +export interface UploadConfigFileList { /** - * 语言配置，“上传失败”文本描述 + * 语言配置，“文件名” 描述文本 * @default '' */ - failText?: string; + fileNameText?: string; /** - * 语言配置，“上传成功”文本描述 + * 语言配置，“上传日期” 描述文本 * @default '' */ - successText?: string; + fileOperationDateText?: string; /** - * 语言配置，“上传中”文本描述 + * 语言配置，“操作” 描述文本 * @default '' */ - uploadingText?: string; + fileOperationText?: string; /** - * 语言配置，“待上传”文本描述 + * 语言配置，“文件尺寸” 描述文本 * @default '' */ - waitingText?: string; + fileSizeText?: string; + /** + * 语言配置，“状态” 描述文本 + * @default '' + */ + fileStatusText?: string; +} + +export interface FormConfig { + /** + * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` + */ + errorMessage?: FormErrorMessage; + /** + * 是否显示必填符号（*），默认显示 + * @default true + */ + requiredMark?: boolean; +} + +export interface TagConfig { + /** + * 关闭图标，【注意】使用渲染函数输出图标组件 + */ + closeIcon?: TNode; +} + +export interface StepsConfig { + /** + * 错误步骤图标，【注意】使用渲染函数输出图标组件 + */ + errorIcon?: TNode; +} + +export interface AlertConfig { + /** + * 语言配置，“收起”描述文本 + * @default '' + */ + collapseText?: string; + /** + * 语言配置，“展开更多”描述文本 + * @default '' + */ + expandText?: string; +} + +export interface AnchorConfig { + /** + * 语言配置，“链接复制成功”描述文本 + * @default '' + */ + copySuccessText?: string; + /** + * 语言配置，“复制链接” 描述文本 + * @default '' + */ + copyText?: string; } export type AnimationType = 'ripple' | 'expand' | 'fade'; diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 6dae967ef..da8be9d02 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -184,7 +184,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d if (e.code === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); // 根据 closeOnEscKeydown 判断按下ESC时是否触发close事件 - if (this.closeOnEscKeydown) { + if (this.global.closeOnEscKeydown ?? this.closeOnEscKeydown) { this.emitCloseEvent({ trigger: 'esc', e, @@ -194,7 +194,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, overlayAction(e: MouseEvent) { // 根据closeOnClickOverlay判断点击蒙层时是否触发close事件 - if (this.closeOnOverlayClick) { + if (this.global.closeOnOverlayClick ?? this.closeOnOverlayClick) { emitEvent>(this, 'overlay-click', { e }); this.emitCloseEvent({ trigger: 'overlay', diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index 46e2c2265..ae7ea130f 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -52,13 +52,15 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, sizeValue(): string { if (this.draggedSizeValue) return this.draggedSizeValue; - const defaultSize = isNaN(Number(this.size)) ? this.size : `${this.size}px`; + + const size = this.global.size ?? this.size; + const defaultSize = isNaN(Number(size)) ? size : `${size}px`; return ( { small: '300px', medium: '500px', large: '760px', - }[this.size] || defaultSize + }[size] || defaultSize ); }, wrapperStyles(): Styles { @@ -273,14 +275,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, handleWrapperClick(e: MouseEvent) { emitEvent>(this, 'overlay-click', { e }); - if (this.closeOnOverlayClick) { + if (this.global.closeOnOverlayClick ?? this.closeOnOverlayClick) { this.closeDrawer({ trigger: 'overlay', e }); } }, onKeyDown(e: KeyboardEvent) { if (e.key === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); - if (this.closeOnEscKeydown) { + if (this.global.closeOnEscKeydown ?? this.closeOnEscKeydown) { this.closeDrawer({ trigger: 'esc', e }); } } diff --git a/src/input/input.tsx b/src/input/input.tsx index bb98a3da2..74a929d8c 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -64,7 +64,7 @@ export default mixins(getConfigReceiverMixins('input autofocus: this.autofocus, disabled: this.tDisabled, readonly: this.readonly, - autocomplete: this.autocomplete, + autocomplete: this.global.autocomplete ?? this.autocomplete, placeholder: this.tPlaceholder, maxlength: this.maxlength, name: this.name || undefined, diff --git a/src/locale/ja_JP.ts b/src/locale/ja_JP.ts new file mode 100644 index 000000000..f47440577 --- /dev/null +++ b/src/locale/ja_JP.ts @@ -0,0 +1,3 @@ +import jaJP from '../_common/js/global-config/locale/ja_JP'; + +export default jaJP; diff --git a/src/locale/ko_KR.ts b/src/locale/ko_KR.ts new file mode 100644 index 000000000..85940e834 --- /dev/null +++ b/src/locale/ko_KR.ts @@ -0,0 +1,3 @@ +import koKR from '../_common/js/global-config/locale/ko_KR'; + +export default koKR; diff --git a/src/select/select.tsx b/src/select/select.tsx index 3828b796d..8188ecedd 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -177,7 +177,7 @@ export default defineComponent({ }); const selectedValue = computed(() => (multiple.value ? selectedMultiple.value : selectedSingle.value)); - const canFilter = computed(() => filterable.value || isFunction(props.filter)); + const canFilter = computed(() => Boolean((global.value.filterable ?? props.filterable) || isFunction(props.filter))); const isGroupOption = computed(() => { const firstOption = options.value?.[0]; return !!(firstOption && 'group' in firstOption && 'children' in firstOption); From fa6276a41909dfb28eead89cba7a16aeb7010d36 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sat, 25 Jun 2022 23:57:57 +0800 Subject: [PATCH 2/7] feat: pagination pageEllipsisMode --- examples/pagination/pagination.md | 1 + src/pagination/pagination.tsx | 17 ++- src/pagination/props.ts | 9 ++ src/pagination/type.ts | 5 + test/ssr/__snapshots__/ssr.test.js.snap | 25 +++- .../__snapshots__/demo.test.js.snap | 128 ++++++++++++++++++ 6 files changed, 178 insertions(+), 7 deletions(-) diff --git a/examples/pagination/pagination.md b/examples/pagination/pagination.md index 8c553be7b..362ffaa99 100644 --- a/examples/pagination/pagination.md +++ b/examples/pagination/pagination.md @@ -9,6 +9,7 @@ defaultCurrent | Number | 1 | 当前页。非受控属性 | N disabled | Boolean | false | 是否禁用分页组件 | N foldedMaxPageBtn | Number | 5 | 折叠时最多显示页码按钮数 | N maxPageBtn | Number | 10 | 最多显示页码按钮数 | N +pageEllipsisMode | String | mid | 页码数量超出时，前后省略模式, `mid`表示中间省略, `both-ends` 表示两端省略。可选项：mid/both-ends | N pageSize | Number | 10 | 分页总页数。支持语法糖 `.sync` | N defaultPageSize | Number | 10 | 分页总页数。非受控属性 | N pageSizeOptions | Array | () => [5, 10, 20, 50] | 分页大小控制器，值为 [] 则不显示。TS 类型：`Array` | N diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx index bfd4ef004..453f48da6 100644 --- a/src/pagination/pagination.tsx +++ b/src/pagination/pagination.tsx @@ -186,8 +186,10 @@ export default mixins(getConfigReceiverMixins('pagination start = this.current - this.curPageLeftCount; end = this.current + this.curPageRightCount; } else { - start = this.isPrevMoreShow ? this.pageCount - this.foldedMaxPageBtn + 1 : 2; - end = this.isPrevMoreShow ? this.pageCount - 1 : this.foldedMaxPageBtn; + const foldedStart = this.isMidEllipsis ? 2 : 1; + const foldedEnd = this.isMidEllipsis ? this.pageCount - 1 : this.pageCount; + start = this.isPrevMoreShow ? this.pageCount - this.foldedMaxPageBtn + 1 : foldedStart; + end = this.isPrevMoreShow ? foldedEnd : this.foldedMaxPageBtn; } } else { start = 1; @@ -203,6 +205,9 @@ export default mixins(getConfigReceiverMixins('pagination isFolded(): boolean { return this.pageCount > this.maxPageBtn; }, + isMidEllipsis(): boolean { + return this.pageEllipsisMode === 'mid'; + }, }, methods: { @@ -337,12 +342,12 @@ export default mixins(getConfigReceiverMixins('pagination {/* 常规版 */} {this.showPageNumber && this.theme === 'default' ? (
    - {this.isFolded ? ( + {this.isFolded && this.isMidEllipsis ? (
  • this.toPage(min)}> {min}
    • ) : null} - {this.isFolded && this.isPrevMoreShow ? ( + {this.isFolded && this.isPrevMoreShow && this.isMidEllipsis ? (
  • ('pagination {i}
    • ))} - {this.isFolded && this.isNextMoreShow ? ( + {this.isFolded && this.isNextMoreShow && this.isMidEllipsis ? (
  • ('pagination {this.nextMore ? : }
    • ) : null} - {this.isFolded ? ( + {this.isFolded && this.isMidEllipsis ? (
  • this.toPage(this.pageCount)}> {this.pageCount}
    • diff --git a/src/pagination/props.ts b/src/pagination/props.ts index fe322139d..2e88314e3 100644 --- a/src/pagination/props.ts +++ b/src/pagination/props.ts @@ -30,6 +30,15 @@ export default { type: Number, default: 10, }, + /** 页码数量超出时，前后省略模式, `mid`表示中间省略, `both-ends` 表示两端省略 */ + pageEllipsisMode: { + type: String as PropType, + default: 'mid' as TdPaginationProps['pageEllipsisMode'], + validator(val: TdPaginationProps['pageEllipsisMode']): boolean { + if (!val) return true; + return ['mid', 'both-ends'].includes(val); + }, + }, /** 分页总页数 */ pageSize: { type: Number, diff --git a/src/pagination/type.ts b/src/pagination/type.ts index e12f376df..a976fa700 100644 --- a/src/pagination/type.ts +++ b/src/pagination/type.ts @@ -32,6 +32,11 @@ export interface TdPaginationProps { * @default 10 */ maxPageBtn?: number; + /** + * 页码数量超出时，前后省略模式, `mid`表示中间省略, `both-ends` 表示两端省略 + * @default mid + */ + pageEllipsisMode?: 'mid' | 'both-ends'; /** * 分页总页数 * @default 10 diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 11c56a122..c179c874f 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -10497,7 +10497,7 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/mini.vue correctl `; exports[`ssr snapshot test renders ./examples/pagination/demos/more.vue correctly 1`] = ` -
    +
    展示首尾页码省略
    共 100 项数据
    @@ -10528,6 +10528,29 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/more.vue correctl
    +
    不展示首尾页码省略 +
    +
    共 100 项数据
    +
    +
    +
    +
    5 +
    +
    +
    +
    + +
    +
      +
    • 10
      • +
    • 11
      • +
    • 12
      • +
    • 13
      • +
    • 14
      • +
    +
    + +
    `; diff --git a/test/unit/pagination/__snapshots__/demo.test.js.snap b/test/unit/pagination/__snapshots__/demo.test.js.snap index d56e84284..5467933fb 100644 --- a/test/unit/pagination/__snapshots__/demo.test.js.snap +++ b/test/unit/pagination/__snapshots__/demo.test.js.snap @@ -1073,6 +1073,10 @@ exports[`Pagination Pagination miniVue demo works fine 1`] = ` exports[`Pagination Pagination moreVue demo works fine 1`] = `
    + + 展示首尾页码省略 + +
    @@ -1236,6 +1240,130 @@ exports[`Pagination Pagination moreVue demo works fine 1`] = `
    + + + 不展示首尾页码省略 + + +
    +
    + 共 100 项数据 +
    +
    +
    +
    +
    + + + 5 + + + + + + +
    +
    +
    +
    + + + +
    +
      +
    • + 10 +
      • +
    • + 11 +
      • +
    • + 12 +
      • +
    • + 13 +
      • +
    • + 14 +
      • +
    +
    + + + +
    +
    `; From b44c0602e62470f4c53745d3a38554dc4f89fe91 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Sun, 26 Jun 2022 14:24:20 +0800 Subject: [PATCH 3/7] feat: updatecommon --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index c42669bc4..0da827d33 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c42669bc414d17c444cf96025db6ea72d2c84e35 +Subproject commit 0da827d33bf508aab7a72f284fc84558be327de4 From 949b12b16132ff9bb3c0e8655c6e9ed1fa4fe318 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Mon, 27 Jun 2022 10:15:12 +0800 Subject: [PATCH 4/7] feat: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 0da827d33..9ef641a2b 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 0da827d33bf508aab7a72f284fc84558be327de4 +Subproject commit 9ef641a2baaff41da520661acadb743f0857c22f From ed1635dcf3273178d966f37e347de6e690190d2f Mon Sep 17 00:00:00 2001 From: pengYYY Date: Mon, 27 Jun 2022 12:28:18 +0800 Subject: [PATCH 5/7] fix: global config default value --- examples/dialog/dialog.md | 24 ++++++++++++------------ examples/drawer/drawer.md | 8 ++++---- examples/input/input.md | 2 +- examples/select/select.md | 6 +++--- src/_common | 2 +- src/dialog/dialog.tsx | 4 ++-- src/dialog/props.ts | 10 ++-------- src/dialog/type.ts | 4 +--- src/drawer/drawer.tsx | 6 +++--- src/drawer/props.ts | 17 ++++++----------- src/drawer/type.ts | 11 ++--------- src/input/input.tsx | 2 +- src/input/props.ts | 2 +- src/input/type.ts | 3 +-- src/select/props.ts | 4 ++-- src/select/select.tsx | 2 +- src/select/type.ts | 6 +++--- 17 files changed, 46 insertions(+), 67 deletions(-) diff --git a/examples/dialog/dialog.md b/examples/dialog/dialog.md index 35fb9ad53..a6c19a088 100644 --- a/examples/dialog/dialog.md +++ b/examples/dialog/dialog.md @@ -36,10 +36,10 @@ -- | -- | -- | -- | -- attach | String / Function | '' | 对话框挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N body | String / Slot / Function | '' | 对话框内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string | ButtonProps | TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N +cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string | ButtonProps | TNode | null`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts) | N closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭事件 | N -closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N +closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发对话框关闭事件 | N +closeOnOverlayClick | Boolean | - | 点击蒙层时是否触发关闭事件 | N confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string | ButtonProps | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 对话框内容，同 body。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N @@ -72,10 +72,10 @@ onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 close | `(context: DialogCloseContext)` | 关闭事件，点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/dialog/type.ts)。
    `type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`

    `interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent | KeyboardEvent }`
    close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发 -closed | - | 对话框消失动画效果结束后触发 +closed | \- | 对话框消失动画效果结束后触发 confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在，则点击“确认”按钮时触发 esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 时触发事件 -opened | - | 对话框弹出动画效果结束后触发 +opened | \- | 对话框弹出动画效果结束后触发 overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙层时触发 ### DialogOptions @@ -85,16 +85,16 @@ overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙 attach | String / Function | 'body' | 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string | Styles`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -`Omit` | - | - | 继承 `Omit` 中的全部 API | N +`Omit` | \- | - | 继承 `Omit` 中的全部 API | N ### DialogInstance 名称 | 参数 | 返回值 | 描述 -- | -- | -- | -- -destroy | - | - | 销毁弹框 -hide | - | - | 隐藏弹框 -show | - | - | 显示弹框 -update | `(props: DialogOptions)` | - | 更新弹框内容 +destroy | \- | \- | 销毁弹框 +hide | \- | \- | 隐藏弹框 +show | \- | \- | 显示弹框 +update | `(props: DialogOptions)` | \- | 更新弹框内容 ### DialogPlugin @@ -102,7 +102,7 @@ update | `(props: DialogOptions)` | - | 更新弹框内容 参数名称 | 参数类型 | 参数默认值 | 参数说明 -- | -- | -- | -- -options | - | - | TS 类型：`DialogOptions` +options | \- | - | TS 类型：`DialogOptions` 插件返回值：`DialogInstance` @@ -112,7 +112,7 @@ options | - | - | TS 类型：`DialogOptions` 参数名称 | 参数类型 | 参数默认值 | 参数说明 -- | -- | -- | -- -options | - | - | TS 类型：`DialogOptions` +options | \- | - | TS 类型：`DialogOptions` ### DialogPlugin.alert diff --git a/examples/drawer/drawer.md b/examples/drawer/drawer.md index 9ad7f6f3f..dce6eef24 100644 --- a/examples/drawer/drawer.md +++ b/examples/drawer/drawer.md @@ -8,20 +8,20 @@ attach | String / Function | '' | 抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N body | String / Slot / Function | - | 抽屉内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`FooterButton` | N -closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N +closeBtn | String / Boolean / Slot / Function | - | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发抽屉关闭事件 | N closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`FooterButton` `type FooterButton = string | ButtonProps | TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/drawer/type.ts) | N default | String / Slot / Function | - | 抽屉内容，同 body。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N footer | Boolean / Slot / Function | true | 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -header | String / Boolean / Slot / Function | undefined | 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N mode | String | overlay | 展开方式，有两种：直接展示在内容上方 和 推开内容区域。可选项：overlay/push | N placement | String | right | 抽屉方向。可选项：left/right/top/bottom | N preventScrollThrough | Boolean | true | 防止滚动穿透 | N showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N showOverlay | Boolean | true | 是否显示遮罩层 | N -size | String | small | 尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 | N +size | String | undefined | 尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 | N sizeDraggable | Boolean | false | 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 | N visible | Boolean | false | 组件是否可见 | N zIndex | Number | - | 抽屉层级，样式默认为 1500 | N diff --git a/examples/input/input.md b/examples/input/input.md index 9c894faba..e8d4bf9d1 100644 --- a/examples/input/input.md +++ b/examples/input/input.md @@ -7,7 +7,7 @@ -- | -- | -- | -- | -- align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否还允许输入 | N -autocomplete | String | - | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N +autocomplete | String | undefined | 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N autofocus | Boolean | false | 自动聚焦 | N autoWidth | Boolean | false | 宽度随内容自适应 | N clearable | Boolean | false | 是否可清空 | N diff --git a/examples/select/select.md b/examples/select/select.md index ec68407f7..1882d4cca 100644 --- a/examples/select/select.md +++ b/examples/select/select.md @@ -34,11 +34,11 @@ prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[ readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动，`scroll.threshold` 默认为 `100`。TS 类型：`TScroll`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -selectInputProps | Object | - | 【开发中】透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N showArrow | Boolean | true | 是否显示右侧箭头，默认显示 | N size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -tagInputProps | Object | - | 【开发中】透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N -tagProps | Object | - | 【开发中】透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +tagInputProps | Object | - | 透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N +tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N value | String / Number / Object / Array | - | 选中值。支持语法糖 `v-model`。TS 类型：`SelectValue` `type SelectValue = string | number | T | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue = string | number | T | Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts) | N valueDisplay | String / Slot / Function | - | 自定义选中项呈现方式。TS 类型：`string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/_common b/src/_common index 9ef641a2b..19f72c3a9 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 9ef641a2baaff41da520661acadb743f0857c22f +Subproject commit 19f72c3a9145193278e94bdeb62c8ab9f2afd52e diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index da8be9d02..b6c1082b4 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -184,7 +184,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d if (e.code === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); // 根据 closeOnEscKeydown 判断按下ESC时是否触发close事件 - if (this.global.closeOnEscKeydown ?? this.closeOnEscKeydown) { + if (this.closeOnEscKeydown || this.global.closeOnEscKeydown) { this.emitCloseEvent({ trigger: 'esc', e, @@ -194,7 +194,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, overlayAction(e: MouseEvent) { // 根据closeOnClickOverlay判断点击蒙层时是否触发close事件 - if (this.global.closeOnOverlayClick ?? this.closeOnOverlayClick) { + if (this.closeOnOverlayClick || this.global.closeOnOverlayClick) { emitEvent>(this, 'overlay-click', { e }); this.emitCloseEvent({ trigger: 'overlay', diff --git a/src/dialog/props.ts b/src/dialog/props.ts index f9631867f..4f024c31d 100644 --- a/src/dialog/props.ts +++ b/src/dialog/props.ts @@ -29,15 +29,9 @@ export default { default: true, }, /** 按下 ESC 时是否触发对话框关闭事件 */ - closeOnEscKeydown: { - type: Boolean, - default: true, - }, + closeOnEscKeydown: Boolean, /** 点击蒙层时是否触发关闭事件 */ - closeOnOverlayClick: { - type: Boolean, - default: true, - }, + closeOnOverlayClick: Boolean, /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */ confirmBtn: { type: [String, Object, Function] as PropType, diff --git a/src/dialog/type.ts b/src/dialog/type.ts index bb6fe8582..dfb26f950 100644 --- a/src/dialog/type.ts +++ b/src/dialog/type.ts @@ -22,7 +22,7 @@ export interface TdDialogProps { * 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 * @default '' */ - cancelBtn?: string | ButtonProps | TNode; + cancelBtn?: string | ButtonProps | TNode | null; /** * 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 * @default true @@ -30,12 +30,10 @@ export interface TdDialogProps { closeBtn?: string | boolean | TNode; /** * 按下 ESC 时是否触发对话框关闭事件 - * @default true */ closeOnEscKeydown?: boolean; /** * 点击蒙层时是否触发关闭事件 - * @default true */ closeOnOverlayClick?: boolean; /** diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index ae7ea130f..23825c2d2 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -53,7 +53,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d sizeValue(): string { if (this.draggedSizeValue) return this.draggedSizeValue; - const size = this.global.size ?? this.size; + const size = this.size ?? this.global.size; const defaultSize = isNaN(Number(size)) ? size : `${size}px`; return ( { @@ -275,14 +275,14 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d }, handleWrapperClick(e: MouseEvent) { emitEvent>(this, 'overlay-click', { e }); - if (this.global.closeOnOverlayClick ?? this.closeOnOverlayClick) { + if (this.closeOnOverlayClick || this.global.closeOnOverlayClick) { this.closeDrawer({ trigger: 'overlay', e }); } }, onKeyDown(e: KeyboardEvent) { if (e.key === 'Escape') { emitEvent>(this, 'esc-keydown', { e }); - if (this.global.closeOnEscKeydown ?? this.closeOnEscKeydown) { + if (this.closeOnEscKeydown || this.global.closeOnEscKeydown) { this.closeDrawer({ trigger: 'esc', e }); } } diff --git a/src/drawer/props.ts b/src/drawer/props.ts index ac687f00c..61f020576 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-26 14:30:54 * */ import { TdDrawerProps } from './type'; @@ -26,13 +25,9 @@ export default { /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */ closeBtn: { type: [String, Boolean, Function] as PropType, - default: undefined, }, /** 按下 ESC 时是否触发抽屉关闭事件 */ - closeOnEscKeydown: { - type: Boolean, - default: true, - }, + closeOnEscKeydown: Boolean, /** 点击蒙层时是否触发抽屉关闭事件 */ closeOnOverlayClick: { type: Boolean, @@ -49,7 +44,7 @@ export default { }, /** 抽屉关闭时是否销毁节点 */ destroyOnClose: Boolean, - /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 TNode 表示自定义底部内容 */ + /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容 */ footer: { type: [Boolean, Function] as PropType, default: true, @@ -57,13 +52,14 @@ export default { /** 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容 */ header: { type: [String, Boolean, Function] as PropType, - default: undefined, + default: true, }, /** 展开方式，有两种：直接展示在内容上方 和 推开内容区域 */ mode: { type: String as PropType, default: 'overlay' as TdDrawerProps['mode'], validator(val: TdDrawerProps['mode']): boolean { + if (!val) return true; return ['overlay', 'push'].includes(val); }, }, @@ -72,6 +68,7 @@ export default { type: String as PropType, default: 'right' as TdDrawerProps['placement'], validator(val: TdDrawerProps['placement']): boolean { + if (!val) return true; return ['left', 'right', 'top', 'bottom'].includes(val); }, }, @@ -90,14 +87,12 @@ export default { /** 尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 */ size: { type: String, - default: 'small', + default: undefined, }, /** 抽屉大小可拖拽调整，横向抽屉调整宽度，纵向抽屉调整高度 */ sizeDraggable: Boolean, /** 组件是否可见 */ visible: Boolean, - /** 组件是否可见，非受控属性 */ - defaultVisible: Boolean, /** 抽屉层级，样式默认为 1500 */ zIndex: { type: Number, diff --git a/src/drawer/type.ts b/src/drawer/type.ts index 608555be4..c60e2a773 100644 --- a/src/drawer/type.ts +++ b/src/drawer/type.ts @@ -2,7 +2,6 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-26 14:30:54 * */ import { ButtonProps } from '../button'; @@ -29,7 +28,6 @@ export interface TdDrawerProps { closeBtn?: string | boolean | TNode; /** * 按下 ESC 时是否触发抽屉关闭事件 - * @default true */ closeOnEscKeydown?: boolean; /** @@ -52,12 +50,13 @@ export interface TdDrawerProps { */ destroyOnClose?: boolean; /** - * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 TNode 表示自定义底部内容 + * 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容，值类型为 TNode 表示自定义底部内容 * @default true */ footer?: boolean | TNode; /** * 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容 + * @default true */ header?: string | boolean | TNode; /** @@ -87,7 +86,6 @@ export interface TdDrawerProps { showOverlay?: boolean; /** * 尺寸，支持 'small', 'medium', 'large'，'35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度，横向抽屉调整的是抽屉高度 - * @default small */ size?: string; /** @@ -100,11 +98,6 @@ export interface TdDrawerProps { * @default false */ visible?: boolean; - /** - * 组件是否可见，非受控属性 - * @default false - */ - defaultVisible?: boolean; /** * 抽屉层级，样式默认为 1500 */ diff --git a/src/input/input.tsx b/src/input/input.tsx index 74a929d8c..77ffb89f1 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -64,7 +64,7 @@ export default mixins(getConfigReceiverMixins('input autofocus: this.autofocus, disabled: this.tDisabled, readonly: this.readonly, - autocomplete: this.global.autocomplete ?? this.autocomplete, + autocomplete: this.autocomplete ?? this.global.autocomplete, placeholder: this.tPlaceholder, maxlength: this.maxlength, name: this.name || undefined, diff --git a/src/input/props.ts b/src/input/props.ts index 5f1aa70eb..b0ec4785b 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -22,7 +22,7 @@ export default { /** 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ autocomplete: { type: String, - default: '', + default: undefined, }, /** 自动聚焦 */ autofocus: Boolean, diff --git a/src/input/type.ts b/src/input/type.ts index 540cbeb7a..f7f9061a5 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -19,7 +19,6 @@ export interface TdInputProps { allowInputOverMax?: boolean; /** * 是否开启自动填充功能，HTML5 原生属性，[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) - * @default '' */ autocomplete?: string; /** @@ -127,7 +126,7 @@ export interface TdInputProps { /** * 输入框值发生变化时触发 */ - onChange?: (value: InputValue, context?: { e?: InputEvent | MouseEvent | CompositionEvent }) => void; + onChange?: (value: InputValue, context?: { e?: InputEvent | MouseEvent }) => void; /** * 清空按钮点击时触发 */ diff --git a/src/select/props.ts b/src/select/props.ts index 62192fde2..b726dd4a3 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -130,11 +130,11 @@ export default { return ['small', 'medium', 'large'].includes(val); }, }, - /** 【开发中】透传 TagInput 标签输入框组件的全部属性 */ + /** 透传 TagInput 标签输入框组件的全部属性 */ tagInputProps: { type: Object as PropType, }, - /** 【开发中】透传 Tag 标签组件全部属性 */ + /** 透传 Tag 标签组件全部属性 */ tagProps: { type: Object as PropType, }, diff --git a/src/select/select.tsx b/src/select/select.tsx index 8188ecedd..2c90a0acf 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -177,7 +177,7 @@ export default defineComponent({ }); const selectedValue = computed(() => (multiple.value ? selectedMultiple.value : selectedSingle.value)); - const canFilter = computed(() => Boolean((global.value.filterable ?? props.filterable) || isFunction(props.filter))); + const canFilter = computed(() => Boolean(props.filterable || global.value.filterable || isFunction(props.filter))); const isGroupOption = computed(() => { const firstOption = options.value?.[0]; return !!(firstOption && 'group' in firstOption && 'children' in firstOption); diff --git a/src/select/type.ts b/src/select/type.ts index a01a81f25..818316a46 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -148,7 +148,7 @@ export interface TdSelectProps { */ scroll?: TScroll; /** - * 【开发中】透传 SelectInput 筛选器输入框组件的全部属性 + * 透传 SelectInput 筛选器输入框组件的全部属性 */ selectInputProps?: SelectInputProps; /** @@ -162,11 +162,11 @@ export interface TdSelectProps { */ size?: SizeEnum; /** - * 【开发中】透传 TagInput 标签输入框组件的全部属性 + * 透传 TagInput 标签输入框组件的全部属性 */ tagInputProps?: TagInputProps; /** - * 【开发中】透传 Tag 标签组件全部属性 + * 透传 Tag 标签组件全部属性 */ tagProps?: TagProps; /** From b704e5741d63815bcb1ebb4929e4896ff57f7565 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Mon, 27 Jun 2022 12:35:41 +0800 Subject: [PATCH 6/7] fix: lint fix --- src/input/input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/input/input.tsx b/src/input/input.tsx index 77ffb89f1..3b28b6332 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -256,7 +256,7 @@ export default mixins(getConfigReceiverMixins('input const stringInfo = getCharacterLength(val, this.maxcharacter); val = typeof stringInfo === 'object' && stringInfo.characters; } - emitEvent>(this, 'change', val, { e }); + emitEvent>(this, 'change', val, { e } as { e: MouseEvent | InputEvent }); // 受控，重要，勿删 this.$nextTick(() => { this.setInputValue(this.value); From a4fc7c2615901994826606e2e7dae74909584671 Mon Sep 17 00:00:00 2001 From: pengYYY Date: Mon, 27 Jun 2022 13:00:37 +0800 Subject: [PATCH 7/7] chore: props update --- src/drawer/props.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/drawer/props.ts b/src/drawer/props.ts index 61f020576..65af9daa1 100644 --- a/src/drawer/props.ts +++ b/src/drawer/props.ts @@ -25,6 +25,7 @@ export default { /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */ closeBtn: { type: [String, Boolean, Function] as PropType, + default: undefined, }, /** 按下 ESC 时是否触发抽屉关闭事件 */ closeOnEscKeydown: Boolean, @@ -52,7 +53,7 @@ export default { /** 头部内容。值为 true 显示空白头部，值为 false 不显示头部，值类型为 string 则直接显示值，值类型为 TNode 表示自定义头部内容 */ header: { type: [String, Boolean, Function] as PropType, - default: true, + default: undefined, }, /** 展开方式，有两种：直接展示在内容上方 和 推开内容区域 */ mode: {