diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md index e3de1d3e2..d936d9930 100644 --- a/src/config-provider/config-provider.en-US.md +++ b/src/config-provider/config-provider.en-US.md @@ -46,6 +46,7 @@ cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` classPrefix | String | t | \- | N colorPicker | Object | - | ColorPicker global configs。Typescript：`ColorPickerConfig` | N datePicker | Object | - | DatePicker global configs。Typescript：`DatePickerConfig` | N +descriptions | Object | - | Descriptions global configs。Typescript：`DescriptionsConfig` | N dialog | Object | - | Dialog global configs。Typescript：`DialogConfig` | N drawer | Object | - | Drawer global configs。Typescript：`DrawerConfig` | N form | Object | - | Form global configs。Typescript：`FormConfig` | N @@ -58,6 +59,7 @@ list | Object | - | List global configs。Typescript：`ListConfig` | N message | Object | - | Message Component global configs。Typescript：`MessageConfig` | N pagination | Object | - | Pagination global configs。Typescript：`PaginationConfig` | N popconfirm | Object | - | Popconfirm global configs。Typescript：`PopconfirmConfig` | N +rate | Object | - | Rate global configs。Typescript：`RateConfig` | N select | Object | - | Select global configs。Typescript：`SelectConfig` | N steps | Object | - | Steps global configs。Typescript：`StepsConfig` | N table | Object | - | Table global configs。Typescript：`TableConfig` | N @@ -293,6 +295,7 @@ fileStatusText | String | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- +colonText | String | - | colon on the right of label ":" | N errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N requiredMark | Boolean | true | \- | N @@ -306,6 +309,7 @@ closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https name | type | default | description | required -- | -- | -- | -- | -- +checkIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### AlertConfig @@ -315,6 +319,12 @@ name | type | default | description | required collapseText | String | - | \- | N expandText | String | - | \- | N +### DescriptionsConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +colonText | String | - | colon on the right of label, ":" | N + ### AnchorConfig name | type | default | description | required @@ -353,3 +363,9 @@ finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N + +### RateConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +rateText | Array | - | Typescript：`string[]` | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index 5f83a10dc..a03d579e3 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -47,6 +47,7 @@ cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfi classPrefix | String | t | CSS 类名前缀 | N colorPicker | Object | - | 颜色选择器全局配置。TS 类型：`ColorPickerConfig` | N datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerConfig` | N +descriptions | Object | - | 描述全局配置。TS 类型：`DescriptionsConfig` | N dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N @@ -59,6 +60,7 @@ list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N message | Object | - | 消息组件全局配置。TS 类型：`MessageConfig` | N pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N +rate | Object | - | 评分全局配置。TS 类型：`RateConfig` | N select | Object | - | 选择器组件全局配置。TS 类型：`SelectConfig` | N steps | Object | - | 步骤条组件全局配置。TS 类型：`StepsConfig` | N table | Object | - | 表格组件全局配置。TS 类型：`TableConfig` | N @@ -294,6 +296,7 @@ fileStatusText | String | - | 语言配置，“状态” 描述文本 | N 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +colonText | String | - | 字段旁边的冒号，中文为“：” | N 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 @@ -307,6 +310,7 @@ closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +checkIcon | Slot / Function | - | 已完成步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### AlertConfig @@ -316,6 +320,12 @@ errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染 collapseText | String | - | 语言配置，“收起”描述文本 | N expandText | String | - | 语言配置，“展开更多”描述文本 | N +### DescriptionsConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +colonText | String | - | 字段旁边的冒号，中文为“：” | N + ### AnchorConfig 名称 | 类型 | 默认值 | 描述 | 必传 @@ -354,3 +364,9 @@ finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ co nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N + +### RateConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N diff --git a/src/config-provider/config-provider.tsx b/src/config-provider/config-provider.tsx index cea38e376..68b21e3a7 100644 --- a/src/config-provider/config-provider.tsx +++ b/src/config-provider/config-provider.tsx @@ -25,7 +25,7 @@ const ConfigProvider = Vue.extend({ computed: { mergedGlobalConfig() { - const mergedGlobalConfig = mergeWith(this.defaultData, this.globalConfig); + const mergedGlobalConfig = mergeWith(this.defaultData as unknown as GlobalConfigProvider, this.globalConfig); // 用于直接调用实例、plugin的方式使用 Vue.prototype[globalConfigSymbol] = mergedGlobalConfig; return mergedGlobalConfig; diff --git a/src/config-provider/context.ts b/src/config-provider/context.ts index b41959242..4bc797980 100644 --- a/src/config-provider/context.ts +++ b/src/config-provider/context.ts @@ -10,7 +10,7 @@ export enum EAnimationType { fade = 'fade', } -export const defaultGlobalConfig: GlobalConfigProvider = merge(defaultConfig, defaultZhCN); +export const defaultGlobalConfig = merge(defaultConfig, defaultZhCN); export type Locale = typeof defaultZhCN; diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index bff90e984..58750f220 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -46,6 +46,10 @@ export interface GlobalConfigProvider { * 日期选择器全局配置 */ datePicker?: DatePickerConfig; + /** + * 描述全局配置 + */ + descriptions?: DescriptionsConfig; /** * 对话框全局配置 */ @@ -94,6 +98,10 @@ export interface GlobalConfigProvider { * 气泡确认框全局配置 */ popconfirm?: PopconfirmConfig; + /** + * 评分全局配置 + */ + rate?: RateConfig; /** * 选择器组件全局配置 */ @@ -775,6 +783,11 @@ export interface UploadConfigFileList { } export interface FormConfig { + /** + * 字段旁边的冒号，中文为“：” + * @default '' + */ + colonText?: string; /** * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` */ @@ -794,6 +807,10 @@ export interface TagConfig { } export interface StepsConfig { + /** + * 已完成步骤图标，【注意】使用渲染函数输出图标组件 + */ + checkIcon?: TNode; /** * 错误步骤图标，【注意】使用渲染函数输出图标组件 */ @@ -813,6 +830,14 @@ export interface AlertConfig { expandText?: string; } +export interface DescriptionsConfig { + /** + * 字段旁边的冒号，中文为“：” + * @default '' + */ + colonText?: string; +} + export interface AnchorConfig { /** * 语言配置，“链接复制成功”描述文本 @@ -887,6 +912,13 @@ export interface GuideConfig { skipButtonProps?: ButtonProps; } +export interface RateConfig { + /** + * 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜'] + */ + rateText?: string[]; +} + export type AnimationType = 'ripple' | 'expand' | 'fade'; export type IconConfig = GlobalIconConfig; diff --git a/src/descriptions/descriptions-body.tsx b/src/descriptions/descriptions-body.tsx index fed23539c..323511345 100644 --- a/src/descriptions/descriptions-body.tsx +++ b/src/descriptions/descriptions-body.tsx @@ -1,7 +1,7 @@ import { defineComponent, inject, PropType } from '@vue/composition-api'; import { LayoutEnum } from '../common'; -import { usePrefixClass, useCommonClassName } from '../hooks/useConfig'; +import { usePrefixClass, useCommonClassName, useConfig } from '../hooks/useConfig'; import descriptionsKey from './const'; import { ItemsType, TdDescriptionItem } from './interface'; @@ -18,11 +18,13 @@ export default defineComponent({ const descriptionsProps = inject(descriptionsKey); const COMPONENT_NAME = usePrefixClass('descriptions'); const { SIZE } = useCommonClassName(); + const { global } = useConfig('descriptions'); return { descriptionsProps, COMPONENT_NAME, SIZE, + global, }; }, render() { @@ -46,7 +48,7 @@ export default defineComponent({ return ( {label} - {this.descriptionsProps.colon && ':'} + {this.descriptionsProps.colon && this.global.colonText} ); }; diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index eaef7c80f..2d7080238 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -120,7 +120,6 @@ export default mixins(getConfigReceiverMixins(' `${this.componentName}__label`, { [`${this.componentName}__label--required`]: this.needRequiredMark, - [`${this.componentName}__label--colon`]: this.hasColon, [`${this.componentName}__label--top`]: this.getLabelContent() && (labelAlign === 'top' || !labelWidth), [`${this.componentName}__label--left`]: labelAlign === 'left' && labelWidth, [`${this.componentName}__label--right`]: labelAlign === 'right' && labelWidth, @@ -363,6 +362,7 @@ export default mixins(getConfigReceiverMixins(' return (
+ {this.hasColon && this.global.colonText}
); }, diff --git a/src/rate/props.ts b/src/rate/props.ts index addd0de5b..ecb63c667 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -21,7 +21,10 @@ export default { default: 5, }, /** 是否禁用评分 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 评分图标的间距 */ gap: { type: Number, @@ -33,7 +36,7 @@ export default { }, /** 是否显示对应的辅助文字 */ showText: Boolean, - /** 评分图标的大小，示例：`20px` */ + /** 评分图标的大小 */ size: { type: String, default: '24px', diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md index 898ea3953..8e87cf758 100644 --- a/src/rate/rate.en-US.md +++ b/src/rate/rate.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Rate Props name | type | default | description | required @@ -8,7 +9,7 @@ name | type | default | description | required allowHalf | Boolean | false | \- | N color | String / Array | '#ED7B2F' | Typescript：`string \| Array` | N count | Number | 5 | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N gap | Number | 4 | \- | N icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showText | Boolean | false | \- | N diff --git a/src/rate/rate.md b/src/rate/rate.md index adff78675..89a465e9e 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -1,18 +1,19 @@ :: BASE_DOC :: ## API + ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowHalf | Boolean | false | 是否允许半选 | N color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array` | N count | Number | 5 | 评分的数量 | N -disabled | Boolean | - | 是否禁用评分 | N +disabled | Boolean | undefined | 是否禁用评分 | N gap | Number | 4 | 评分图标的间距 | N icon | Slot / Function | - | 自定义评分图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showText | Boolean | false | 是否显示对应的辅助文字 | N -size | String | 24px | 评分图标的大小，示例：`20px` | N +size | String | 24px | 评分图标的大小 | N texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array` | N value | Number | 0 | 选择评分的值。支持语法糖 `v-model` | N defaultValue | Number | 0 | 选择评分的值。非受控属性 | N diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx index 6678af3f5..06b93f9cd 100644 --- a/src/rate/rate.tsx +++ b/src/rate/rate.tsx @@ -23,9 +23,10 @@ export default defineComponent({ const hoverValue = ref(undefined); const rootRef = ref(); const { classPrefix } = useConfig('classPrefix'); + const { global } = useConfig('rate'); const displayValue = computed(() => Number(hoverValue.value || starValue.value)); - const displayText = computed(() => props.texts.length === 0 ? ['极差', '失望', '一般', '满意', '惊喜'] : props.texts); + const displayText = computed(() => (props.texts.length === 0 ? global.value.rateText : props.texts)); const getStarValue = (event: MouseEvent, index: number) => { if (props.allowHalf) { diff --git a/src/rate/type.ts b/src/rate/type.ts index e9de15171..3a0e12aef 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -24,7 +24,6 @@ export interface TdRateProps { count?: number; /** * 是否禁用评分 - * @default false */ disabled?: boolean; /** @@ -42,7 +41,7 @@ export interface TdRateProps { */ showText?: boolean; /** - * 评分图标的大小，示例：`20px` + * 评分图标的大小 * @default 24px */ size?: string; diff --git a/src/steps/step-item.tsx b/src/steps/step-item.tsx index 7b8b5a1f7..54b572f42 100644 --- a/src/steps/step-item.tsx +++ b/src/steps/step-item.tsx @@ -47,7 +47,11 @@ export default mixins(getConfigReceiverMixins('steps' const { CheckIcon, CloseIcon } = this.useGlobalIcon({ CheckIcon: TdCheckIcon, CloseIcon: TdCloseIcon }); switch (this.status) { case 'finish': - icon = ; + if (isFunction(this.global.checkIcon)) { + icon = this.global.checkIcon(this.$createElement); + } else { + icon = ; + } break; case 'error': if (isFunction(this.global.errorIcon)) { diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index a1f953588..7636e1529 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -52043,7 +52043,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__name" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__college" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__address1" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__address2" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__date" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__personalProfile" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__message" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__gender" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__course" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__gradePoint" >
+ ：
csr test ./src/form/_example/disabled.vue 1`] = ` class="t-form__item t-form-item__avatar" >
+ ：
csr test ./src/form/_example/reset.vue 1`] = ` class="t-form__item t-form-item__name" >
+ ：
csr test ./src/form/_example/reset.vue 1`] = ` class="t-form__item t-form-item__tel" >
+ ：
csr test ./src/form/_example/reset.vue 1`] = ` class="t-form__item t-form-item__course" >
+ ：
renders ./src/form/_example/clear-validate.vue corr exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"
同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化
自定义异步校验方法
"`; -exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
接受
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; +exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
：
：
：
：
：
：
：
接受
：
：
：
：
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `"
这里可以展示一段说明文字
一句话介绍自己
"`; @@ -432,7 +432,7 @@ exports[`ssr snapshot test > renders ./src/form/_example/layout.vue correctly 1` exports[`ssr snapshot test > renders ./src/form/_example/login.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
：
：
：
"`; exports[`ssr snapshot test > renders ./src/form/_example/size.vue correctly 1`] = `"
"`;