Merge branch 'develop' of github.com:Tencent/tdesign-vue into hx-fix

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

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

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;

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;
 

src/config-provider/type.ts

@@ -142,10 +142,6 @@ export interface GlobalConfigProvider {
    * 树选择器组件全局配置
    */
   treeSelect?: TreeSelectConfig;
-  /**
-   * 排版组件全局配置
-   */
-  typography?: TypographyConfig;
   /**
    * 上传组件全局配置
    */
@@ -942,24 +938,6 @@ export interface EmptyConfig {
   titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string };
 }
 
-export interface TypographyConfig {
-  /**
-   * 语言配置，“收起”描述文本
-   * @default ''
-   */
-  collapseText?: string;
-  /**
-   * 语言配置，“复制成功”描述文本
-   * @default ''
-   */
-  copiedText?: string;
-  /**
-   * 语言配置，“展开”描述文本
-   * @default ''
-   */
-  expandText?: string;
-}
-
 export type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;

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>
       );
     };

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>
       );
     },

src/form/form.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Form Props
 
 name | type | default | description | required
@@ -44,6 +45,7 @@ submit | `(params?: { showErrorMessage?: boolean })` | \- | required
 validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
 validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | required
 
+
 ### FormItem Props
 
 name | type | default | description | required
@@ -102,3 +104,4 @@ required | String | - | \- | N
 telnumber | String | - | \- | N
 url | String | - | \- | N
 validator | String | - | \- | N
+whitespace | String | - | \- | N

src/form/form.md

@@ -3,9 +3,10 @@
 <!-- 可在这里自行添加 demo 展示 -->
 
 ## API
+
 ### Form Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
 data | Object | {} | 表单数据。TS 类型：`FormData` | N
@@ -46,9 +47,10 @@ submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表
 validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
 validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `Promise<FormValidateResult<FormData>>` | 必需。纯净的校验函数，仅返回校验结果，不对组件进行任何操作。泛型 `FormData` 表示表单数据 TS 类型。参数和返回值含义同 `validate` 方法
 
+
 ### FormItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 for | String | - | label 原生属性 | N
 help | String / Slot / Function | - | 表单项说明内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
@@ -66,7 +68,7 @@ tips | String / Slot / Function | - | 自定义提示内容，样式跟随 `stat
 
 ### FormRule
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 boolean | Boolean | - | 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }` | N
 date | Boolean / Object | - | 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N
@@ -89,7 +91,7 @@ whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示
 
 ### FormErrorMessage
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 boolean | String | - | 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'` | N
 date | String | - | 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
@@ -104,3 +106,4 @@ required | String | - | 没有填写必填项时的表单项显示文案，全
 telnumber | String | - | 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
 url | String | - | 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
 validator | String | - | 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求' | N
+whitespace | String | - | 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空` | N

src/form/type.ts

@@ -328,6 +328,11 @@ export interface FormErrorMessage {
    * @default ''
    */
   validator?: string;
+  /**
+   * 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空`
+   * @default ''
+   */
+  whitespace?: string;
 }
 
 export type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> };

src/list/__tests__/__snapshots__/index.test.jsx.snap

@@ -27,36 +27,36 @@ exports[`List > :props > :asyncLoading is a string 1`] = `
     text
   </ul>
   <div
-    class="t-list__load"
+    class="t-list__load t-list__load--loading"
   >
-    <div
-      class="t-loading--center t-size-m t-loading t-is-loading"
-    >
-      <svg
-        class="t-loading__gradient t-icon-loading"
-        height="1em"
-        size="medium"
-        version="1.1"
-        viewBox="0 0 12 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <foreignobject
-          height="12"
-          width="12"
-          x="0"
-          y="0"
-        >
-          <div
-            class="t-loading__gradient-conic"
-          />
-        </foreignobject>
-      </svg>
+    <div>
       <div
-        class="t-loading__text"
+        class="t-loading--center t-size-m t-loading"
       >
-        正在加载中，请稍后
+        <svg
+          class="t-loading__gradient t-icon-loading"
+          height="1em"
+          size="medium"
+          version="1.1"
+          viewBox="0 0 12 12"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <foreignobject
+            height="12"
+            width="12"
+            x="0"
+            y="0"
+          >
+            <div
+              class="t-loading__gradient-conic"
+            />
+          </foreignobject>
+        </svg>
       </div>
+      <span>
+        正在加载中，请稍等
+      </span>
     </div>
   </div>
 </div>
@@ -72,9 +72,11 @@ exports[`List > :props > :asyncLoading is load-more 1`] = `
     text
   </ul>
   <div
-    class="t-list__load"
+    class="t-list__load t-list__load--load-more"
   >
-    <!---->
+    <span>
+      点击加载更多
+    </span>
   </div>
 </div>
 `;

src/list/_example-composition/virtual-scroll.vue

@@ -0,0 +1,13 @@
+<template>
+  <t-list style="height: 300px" :scroll="{ type: 'virtual' }"
+  ><t-list-item v-for="(item, index) in list" :key="index">
+    <t-list-item-meta :image="imageUrl" title="列表标题" :description="item.content" /></t-list-item
+  ></t-list>
+</template>
+<script setup>
+const list = [];
+const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
+for (let i = 0; i < 3000; i++) {
+  list.push({ content: `第${i + 1}个列表内容的描述性文字` });
+}
+</script>