feat(descriptions): add descriptions (#3035)

* feat(descriptions): add descriptions

* feat(descriptions): example test

* feat(descriptions): utils ts

* feat(descriptions): descriptions body

* test(descriptions): update snap

* fix(descriptions): tDescriptionsBody

* chore(descriptions): remove

script/generate-usage/config.js

@@ -664,4 +664,17 @@ module.exports = {
       `,
     },
   },
+  descriptions: {
+    panelStr: `const panelList = [{label: 'descriptions', value: 'descriptions'}];`,
+    render: {
+      descriptions: `
+        <t-descriptions title="Shipping address" v-bind="configProps">
+          <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+          <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+          <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+          <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+        </t-descriptions>
+      `,
+    },
+  },
 };

site/site.config.mjs

@@ -456,6 +456,14 @@ const docs = [
         component: () => import('tdesign-vue/comment/comment.md'),
         componentEn: () => import('tdesign-vue/comment/comment.en-US.md'),
       },
+      {
+        title: 'Descriptions 描述',
+        titleEn: 'Descriptions',
+        name: 'descriptions',
+        path: '/vue/components/descriptions',
+        component: () => import('tdesign-vue/descriptions/descriptions.md'),
+        componentEn: () => import('tdesign-vue/descriptions/descriptions.en-US.md'),
+      },
       {
         title: 'Image 图片',
         titleEn: 'Image',

src/components.ts

@@ -49,6 +49,7 @@ export * from './badge';
 export * from './calendar';
 export * from './card';
 export * from './comment';
+export * from './descriptions';
 export * from './image';
 export * from './image-viewer';
 export * from './list';

src/descriptions/_example/base.vue

@@ -0,0 +1,10 @@
+<template>
+  <t-descriptions title="Shipping address">
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address"
+    >Shenzhen Penguin Island D1 4A Mail Center<template #content>asds</template></t-descriptions-item
+    >
+  </t-descriptions>
+</template>

src/descriptions/_example/bordered.vue

@@ -0,0 +1,8 @@
+<template>
+  <t-descriptions title="Shipping address" bordered :column="3">
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+  </t-descriptions>
+</template>

src/descriptions/_example/colon.vue

@@ -0,0 +1,21 @@
+<template>
+  <t-space direction="vertical">
+    <t-checkbox v-model="checked">colon</t-checkbox>
+    <t-descriptions title="Shipping address" bordered :colon="checked" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: false,
+    };
+  },
+};
+</script>

src/descriptions/_example/column.vue

@@ -0,0 +1,22 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="column" :options="columnOptions"></t-radio-group>
+    <t-descriptions bordered :column="column">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      columnOptions: [2, 3, 4],
+      column: 2,
+    };
+  },
+};
+</script>

src/descriptions/_example/custom-style.vue

@@ -0,0 +1,14 @@
+<template>
+  <t-descriptions
+    title="Shipping address"
+    bordered
+    :label-style="{ width: '100px', textAlign: 'left' }"
+    :content-style="{ textAlign: 'right' }"
+    :column="3"
+  >
+    <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+    <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+    <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+    <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+  </t-descriptions>
+</template>

src/descriptions/_example/items.vue

@@ -0,0 +1,20 @@
+<template>
+  <t-descriptions title="Shipping address" :items="items" :column="3" />
+</template>
+
+<script lang="jsx">
+import Base from './base.vue';
+
+const items = [
+  { label: 'Name', content: 'TDesign' },
+  { label: Base, content: '139****0609' },
+];
+
+export default {
+  data() {
+    return {
+      items,
+    };
+  },
+};
+</script>

src/descriptions/_example/layout.vue

@@ -0,0 +1,33 @@
+<template>
+  <t-space direction="vertical">
+    <t-row>
+      <span>layout：</span>
+      <t-radio-group v-model="layout" :options="layoutOptions"></t-radio-group>
+    </t-row>
+
+    <t-row>
+      <span>itemLayout：</span>
+      <t-radio-group v-model="itemLayout" :options="itemLayoutOptions"></t-radio-group>
+    </t-row>
+
+    <t-descriptions title="Shipping address" bordered :layout="layout" :item-layout="itemLayout" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      layout: 'horizontal',
+      itemLayout: 'horizontal',
+      layoutOptions: ['horizontal', 'vertical'],
+      itemLayoutOptions: ['horizontal', 'vertical'],
+    };
+  },
+};
+</script>

src/descriptions/_example/size.vue

@@ -0,0 +1,22 @@
+<template>
+  <t-space direction="vertical">
+    <t-radio-group v-model="size" :options="sizeOptions"></t-radio-group>
+    <t-descriptions bordered :size="size" :column="3">
+      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+    </t-descriptions>
+  </t-space>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      size: 'medium',
+      sizeOptions: ['large', 'medium', 'small'],
+    };
+  },
+};
+</script>

src/descriptions/_usage/index.vue

@@ -0,0 +1,32 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage.js 中调整 -->
+<template>
+  <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @PanelChange="onPanelChange">
+    <template #descriptions="{ configProps }">
+      <t-descriptions title="Shipping address" v-bind="configProps">
+        <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+        <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
+        <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
+        <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
+      </t-descriptions>
+    </template>
+  </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from '@vue/composition-api';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'descriptions', value: 'descriptions' }];
+
+const usageCodeMap = {
+  descriptions:
+    '\n        <t-descriptions title="Shipping address" v-bind="configProps">\n          <t-descriptions-item label="Name">TDesign</t-descriptions-item>\n          <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>\n          <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>\n          <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>\n        </t-descriptions>\n      ',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+  usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+</script>

src/descriptions/_usage/props.json

@@ -0,0 +1,63 @@
+[
+  {
+    "name": "bordered",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "colon",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
+  {
+    "name": "size",
+    "type": "enum",
+    "defaultValue": "medium",
+    "options": [
+      {
+        "label": "large",
+        "value": "large"
+      },
+      {
+        "label": "medium",
+        "value": "medium"
+      },
+      {
+        "label": "small",
+        "value": "small"
+      }
+    ]
+  },
+  {
+    "name": "layout",
+    "type": "enum",
+    "defaultValue": "horizontal",
+    "options": [
+      {
+        "label": "horizontal",
+        "value": "horizontal"
+      },
+      {
+        "label": "vertical",
+        "value": "vertical"
+      }
+    ]
+  },
+  {
+    "name": "itemLayout",
+    "type": "enum",
+    "defaultValue": "horizontal",
+    "options": [
+      {
+        "label": "horizontal",
+        "value": "horizontal"
+      },
+      {
+        "label": "vertical",
+        "value": "vertical"
+      }
+    ]
+  }
+]

src/descriptions/const/index.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from '@vue/composition-api';
+import { TdDescriptionsProps } from '../type';
+
+const descriptionsKey: InjectionKey<TdDescriptionsProps> = Symbol('TDescriptions');
+
+export default descriptionsKey;

src/descriptions/description-item-props.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDescriptionItemProps } from '../descriptions/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 描述项内容 */
+  content: {
+    type: [String, Function] as PropType<TdDescriptionItemProps['content']>,
+  },
+  /** 描述项内容，同 `content` */
+  default: {
+    type: [String, Function] as PropType<TdDescriptionItemProps['default']>,
+  },
+  /** 描述项标签 */
+  label: {
+    type: [String, Function] as PropType<TdDescriptionItemProps['label']>,
+  },
+  /** 占用的宽度数量 */
+  span: {
+    type: Number,
+    default: 1,
+  },
+};