feat(config-provider): support colonText rateText checkIcon (#3288)

* docs(Input): value type remove Number * feat(config-provider): support colonText rateText checkIcon * chore: fix lint * chore: fix lint * chore: update snapshot * chore: fix doc --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Aug 29, 2024 · 5a78f88 · 5a78f88
1 parent 44466c3
commit 5a78f88
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<TdDescriptionsProps>(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 (
         <td colspan={labelSpan} class={labelClass} {...{ style: this.descriptionsProps.labelStyle }}>
           {label}
-          {this.descriptionsProps.colon && ':'}
+          {this.descriptionsProps.colon && this.global.colonText}
         </td>
       );
     };

diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx
@@ -120,7 +120,6 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
         `${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<FormItemConstructor, FormConfig>('
       return (
         <div class={this.labelClasses} style={labelStyle}>
           <label for={this.for}>{labelContent}</label>
+          {this.hasColon && this.global.colonText}
         </div>
       );
     },

diff --git 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
@@ -1,14 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Rate Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 allowHalf | Boolean | false | \- | N
 color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | 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
@@ -1,18 +1,19 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Rate Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 allowHalf | Boolean | false | 是否允许半选 | N
 color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | 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<string>` | N
 value | Number | 0 | 选择评分的值。支持语法糖 `v-model` | N
 defaultValue | Number | 0 | 选择评分的值。非受控属性 | N

diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx
@@ -23,9 +23,10 @@ export default defineComponent({
     const hoverValue = ref(undefined);
     const rootRef = ref<HTMLTableElement>();
     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
@@ -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
@@ -47,7 +47,11 @@ export default mixins(getConfigReceiverMixins<StepItemType, StepsConfig>('steps'
         const { CheckIcon, CloseIcon } = this.useGlobalIcon({ CheckIcon: TdCheckIcon, CloseIcon: TdCloseIcon });
         switch (this.status) {
           case 'finish':
-            icon = <CheckIcon />;
+            if (isFunction(this.global.checkIcon)) {
+              icon = this.global.checkIcon(this.$createElement);
+            } else {
+              icon = <CheckIcon />;
+            }
             break;
           case 'error':
             if (isFunction(this.global.errorIcon)) {