feat: descriptions api update (#218)

TDesignOteam · Dec 28, 2023 · 8d87e00 · 8d87e00
1 parent ff028f0
commit 8d87e00
Show file tree

Hide file tree

Showing 16 changed files with 412 additions and 55 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/descriptions/defaultProps.ts b/packages/products/tdesign-react/src/descriptions/defaultProps.ts
@@ -8,7 +8,8 @@ export const descriptionsDefaultProps: TdDescriptionsProps = {
   bordered: false,
   columns: 2,
   contentAlign: 'left',
-  labelAlign: 'right',
+  itemLayout: 'horizontal',
+  labelAlign: 'left',
   layout: 'horizontal',
   size: 'medium',
 };

diff --git a/packages/products/tdesign-react/src/descriptions/descriptions.en-US.md b/packages/products/tdesign-react/src/descriptions/descriptions.en-US.md
@@ -10,16 +10,21 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 bordered | Boolean | false | set description list with grey border | N
 colon | Boolean | - | set label with ":" on the right | N
 columns | Number | 2 | count of DescriptionItem in one row | N
-contentAlign | String | left | options：left/center | N
-labelAlign | String | right | options：left/right/top | N
-layout | String | horizontal | layout direction。options：horizontal/vertical | N
-size | String | medium | a descriptions has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+contentAlign | String | left | options: left/right/center | N
+itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N
+items | Array | - | list of descriptions items。Typescript：`Array<T>` | N
+labelAlign | String | left | options: left/right/center | N
+labelClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+layout | String | horizontal | layout direction。options: horizontal/vertical | N
+size | String | medium | a descriptions has three size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+title | TNode | - | title of descriptions。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+content | TNode | - | content of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 label | TNode | - | label of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 span | Number | 1 | width count | N
diff --git a/packages/products/tdesign-react/src/descriptions/descriptions.md b/packages/products/tdesign-react/src/descriptions/descriptions.md
@@ -10,16 +10,21 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 bordered | Boolean | false | 是否带边框 | N
 colon | Boolean | - | 字段名右侧是否携带冒号“：” | N
 columns | Number | 2 | 一行 DescriptionItem 的数量 | N
-contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/center | N
-labelAlign | String | right | 字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
+contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/right/center | N
+itemLayout | String | horizontal | 描述项的排列方向。可选项：horizontal/vertical | N
+items | Array | - | 描述项的列表。TS 类型：`Array<T>` | N
+labelAlign | String | left | 字段标签对齐方式：左对齐、右对齐、居中对齐。可选项：left/right/center | N
+labelClassName | String / Object / Array | - | 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 layout | String | horizontal | 排列方向。可选项：horizontal/vertical | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+title | TNode | - | 描述列表的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-label | TNode | - | 描述项字段名。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 描述项内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+label | TNode | - | 描述项标签。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 span | Number | 1 | 占用的宽度数量 | N
diff --git a/packages/products/tdesign-react/src/descriptions/type.ts b/packages/products/tdesign-react/src/descriptions/type.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, SizeEnum } from '../common';
+import { TNode, SizeEnum, ClassName } from '../common';
 
 export interface TdDescriptionsProps {
   /**
@@ -25,12 +25,25 @@ export interface TdDescriptionsProps {
    * 字段值内容的对齐方式：左对齐、居中对齐
    * @default left
    */
-  contentAlign?: 'left' | 'center';
+  contentAlign?: 'left' | 'right' | 'center';
   /**
-   * 字段标签对齐方式：左对齐、右对齐、顶部对齐
-   * @default right
+   * 描述项的排列方向
+   * @default horizontal
+   */
+  itemLayout?: 'horizontal' | 'vertical';
+  /**
+   * 描述项的列表
+   */
+  items?: Array<T>;
+  /**
+   * 字段标签对齐方式：左对齐、右对齐、居中对齐
+   * @default left
    */
-  labelAlign?: 'left' | 'right' | 'top';
+  labelAlign?: 'left' | 'right' | 'center';
+  /**
+   * 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
+   */
+  labelClassName?: ClassName;
   /**
    * 排列方向
    * @default horizontal
@@ -41,11 +54,19 @@ export interface TdDescriptionsProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 描述列表的标题
+   */
+  title?: TNode;
 }
 
 export interface TdDescriptionItemProps {
   /**
-   * 描述项字段名
+   * 描述项内容
+   */
+  content?: TNode;
+  /**
+   * 描述项标签
    */
   label?: TNode;
   /**

diff --git a/packages/products/tdesign-vue-next/src/descriptions/description-item-props.ts b/packages/products/tdesign-vue-next/src/descriptions/description-item-props.ts
@@ -8,7 +8,11 @@ import { TdDescriptionItemProps } from '../descriptions/type';
 import { PropType } from 'vue';
 
 export default {
-  /** 描述项字段名 */
+  /** 描述项内容 */
+  content: {
+    type: [String, Function] as PropType<TdDescriptionItemProps['content']>,
+  },
+  /** 描述项标签 */
   label: {
     type: [String, Function] as PropType<TdDescriptionItemProps['label']>,
   },

diff --git a/packages/products/tdesign-vue-next/src/descriptions/descriptions.en-US.md b/packages/products/tdesign-vue-next/src/descriptions/descriptions.en-US.md
@@ -8,14 +8,19 @@ name | type | default | description | required
 bordered | Boolean | false | set description list with grey border | N
 colon | Boolean | - | set label with ":" on the right | N
 columns | Number | 2 | count of DescriptionItem in one row | N
-contentAlign | String | left | options：left/center | N
-labelAlign | String | right | options：left/right/top | N
-layout | String | horizontal | layout direction。options：horizontal/vertical | N
-size | String | medium | a descriptions has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+contentAlign | String | left | options: left/right/center | N
+itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N
+items | Array | - | list of descriptions items。Typescript：`Array<T>` | N
+labelAlign | String | left | options: left/right/center | N
+labelClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+layout | String | horizontal | layout direction。options: horizontal/vertical | N
+size | String | medium | a descriptions has three size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | title of descriptions。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+content | String / Slot / Function | - | content of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | label of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 span | Number | 1 | width count | N
diff --git a/packages/products/tdesign-vue-next/src/descriptions/descriptions.md b/packages/products/tdesign-vue-next/src/descriptions/descriptions.md
@@ -8,14 +8,19 @@
 bordered | Boolean | false | 是否带边框 | N
 colon | Boolean | - | 字段名右侧是否携带冒号“：” | N
 columns | Number | 2 | 一行 DescriptionItem 的数量 | N
-contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/center | N
-labelAlign | String | right | 字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
+contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/right/center | N
+itemLayout | String | horizontal | 描述项的排列方向。可选项：horizontal/vertical | N
+items | Array | - | 描述项的列表。TS 类型：`Array<T>` | N
+labelAlign | String | left | 字段标签对齐方式：左对齐、右对齐、居中对齐。可选项：left/right/center | N
+labelClassName | String / Object / Array | - | 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 layout | String | horizontal | 排列方向。可选项：horizontal/vertical | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | 描述列表的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-label | String / Slot / Function | - | 描述项字段名。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+content | String / Slot / Function | - | 描述项内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+label | String / Slot / Function | - | 描述项标签。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 span | Number | 1 | 占用的宽度数量 | N
diff --git a/packages/products/tdesign-vue-next/src/descriptions/props.ts b/packages/products/tdesign-vue-next/src/descriptions/props.ts
@@ -23,18 +23,35 @@ export default {
     default: 'left' as TdDescriptionsProps['contentAlign'],
     validator(val: TdDescriptionsProps['contentAlign']): boolean {
       if (!val) return true;
-      return ['left', 'center'].includes(val);
+      return ['left', 'right', 'center'].includes(val);
     },
   },
-  /** 字段标签对齐方式：左对齐、右对齐、顶部对齐 */
+  /** 描述项的排列方向 */
+  itemLayout: {
+    type: String as PropType<TdDescriptionsProps['itemLayout']>,
+    default: 'horizontal' as TdDescriptionsProps['itemLayout'],
+    validator(val: TdDescriptionsProps['itemLayout']): boolean {
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
+    },
+  },
+  /** 描述项的列表 */
+  items: {
+    type: Array as PropType<TdDescriptionsProps['items']>,
+  },
+  /** 字段标签对齐方式：左对齐、右对齐、居中对齐 */
   labelAlign: {
     type: String as PropType<TdDescriptionsProps['labelAlign']>,
-    default: 'right' as TdDescriptionsProps['labelAlign'],
+    default: 'left' as TdDescriptionsProps['labelAlign'],
     validator(val: TdDescriptionsProps['labelAlign']): boolean {
       if (!val) return true;
-      return ['left', 'right', 'top'].includes(val);
+      return ['left', 'right', 'center'].includes(val);
     },
   },
+  /** 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]` */
+  labelClassName: {
+    type: [String, Object, Array] as PropType<TdDescriptionsProps['labelClassName']>,
+  },
   /** 排列方向 */
   layout: {
     type: String as PropType<TdDescriptionsProps['layout']>,
@@ -53,4 +70,8 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 描述列表的标题 */
+  title: {
+    type: [String, Function] as PropType<TdDescriptionsProps['title']>,
+  },
 };
diff --git a/packages/products/tdesign-vue-next/src/descriptions/type.ts b/packages/products/tdesign-vue-next/src/descriptions/type.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, SizeEnum } from '../common';
+import { TNode, SizeEnum, ClassName } from '../common';
 
 export interface TdDescriptionsProps {
   /**
@@ -25,12 +25,25 @@ export interface TdDescriptionsProps {
    * 字段值内容的对齐方式：左对齐、居中对齐
    * @default left
    */
-  contentAlign?: 'left' | 'center';
+  contentAlign?: 'left' | 'right' | 'center';
   /**
-   * 字段标签对齐方式：左对齐、右对齐、顶部对齐
-   * @default right
+   * 描述项的排列方向
+   * @default horizontal
+   */
+  itemLayout?: 'horizontal' | 'vertical';
+  /**
+   * 描述项的列表
+   */
+  items?: Array<T>;
+  /**
+   * 字段标签对齐方式：左对齐、右对齐、居中对齐
+   * @default left
    */
-  labelAlign?: 'left' | 'right' | 'top';
+  labelAlign?: 'left' | 'right' | 'center';
+  /**
+   * 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`
+   */
+  labelClassName?: ClassName;
   /**
    * 排列方向
    * @default horizontal
@@ -41,11 +54,19 @@ export interface TdDescriptionsProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 描述列表的标题
+   */
+  title?: string | TNode;
 }
 
 export interface TdDescriptionItemProps {
   /**
-   * 描述项字段名
+   * 描述项内容
+   */
+  content?: string | TNode;
+  /**
+   * 描述项标签
    */
   label?: string | TNode;
   /**

diff --git a/packages/products/tdesign-vue/src/descriptions/description-item-props.ts b/packages/products/tdesign-vue/src/descriptions/description-item-props.ts
@@ -8,7 +8,11 @@ import { TdDescriptionItemProps } from '../descriptions/type';
 import { PropType } from 'vue';
 
 export default {
-  /** 描述项字段名 */
+  /** 描述项内容 */
+  content: {
+    type: [String, Function] as PropType<TdDescriptionItemProps['content']>,
+  },
+  /** 描述项标签 */
   label: {
     type: [String, Function] as PropType<TdDescriptionItemProps['label']>,
   },

diff --git a/packages/products/tdesign-vue/src/descriptions/descriptions.en-US.md b/packages/products/tdesign-vue/src/descriptions/descriptions.en-US.md
@@ -8,14 +8,19 @@ name | type | default | description | required
 bordered | Boolean | false | set description list with grey border | N
 colon | Boolean | - | set label with ":" on the right | N
 columns | Number | 2 | count of DescriptionItem in one row | N
-contentAlign | String | left | options：left/center | N
-labelAlign | String | right | options：left/right/top | N
-layout | String | horizontal | layout direction。options：horizontal/vertical | N
-size | String | medium | a descriptions has three size。options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+contentAlign | String | left | options: left/right/center | N
+itemLayout | String | horizontal | layout direction of description item。options: horizontal/vertical | N
+items | Array | - | list of descriptions items。Typescript：`Array<T>` | N
+labelAlign | String | left | options: left/right/center | N
+labelClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+layout | String | horizontal | layout direction。options: horizontal/vertical | N
+size | String | medium | a descriptions has three size。options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | title of descriptions。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+content | String / Slot / Function | - | content of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | label of description item。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 span | Number | 1 | width count | N
diff --git a/packages/products/tdesign-vue/src/descriptions/descriptions.md b/packages/products/tdesign-vue/src/descriptions/descriptions.md
@@ -8,14 +8,19 @@
 bordered | Boolean | false | 是否带边框 | N
 colon | Boolean | - | 字段名右侧是否携带冒号“：” | N
 columns | Number | 2 | 一行 DescriptionItem 的数量 | N
-contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/center | N
-labelAlign | String | right | 字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
+contentAlign | String | left | 字段值内容的对齐方式：左对齐、居中对齐。可选项：left/right/center | N
+itemLayout | String | horizontal | 描述项的排列方向。可选项：horizontal/vertical | N
+items | Array | - | 描述项的列表。TS 类型：`Array<T>` | N
+labelAlign | String | left | 字段标签对齐方式：左对齐、右对齐、居中对齐。可选项：left/right/center | N
+labelClassName | String / Object / Array | - | 自定义描述项的标签的类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 layout | String | horizontal | 排列方向。可选项：horizontal/vertical | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+title | String / Slot / Function | - | 描述列表的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
 ### DescriptionItem Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-label | String / Slot / Function | - | 描述项字段名。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+content | String / Slot / Function | - | 描述项内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+label | String / Slot / Function | - | 描述项标签。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 span | Number | 1 | 占用的宽度数量 | N