feat(components): 增加DescriptionList组件

src/components/DescriptionList/Description.vue

@@ -0,0 +1,38 @@
+<template>
+  <ACol v-bind="columnConfig">
+    <div v-if="term || $slots.term" :class="genCls('term')">
+      <slot name="term">{{ term }}</slot>
+    </div>
+    <div :class="genCls('detail')"><slot></slot></div>
+  </ACol>
+</template>
+
+<script>
+import PropTypes from "ant-design-vue/lib/_util/vue-types";
+import responsive from "./responsive";
+import { Col } from "ant-design-vue";
+import { useBEM } from "@/utils/bem";
+const prefixCls = "antd-vue-components__description-list";
+const genCls = useBEM(prefixCls);
+
+export default {
+  name: "Description",
+  components: {
+    ACol: Col
+  },
+  props: {
+    term: PropTypes.string.def("")
+  },
+  computed: {
+    columnConfig() {
+      const { column } = this.$parent.$attrs;
+      return responsive[column];
+    }
+  },
+  methods: {
+    genCls
+  }
+};
+</script>
+
+<style lang="less" src="./index.less"></style>

src/components/DescriptionList/DescriptionList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="genCls([layout, size])">
+    <div v-if="title || $slots.title" :class="genCls('title')">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <ARow :gutter="gutter" :column="column">
+      <slot></slot>
+    </ARow>
+  </div>
+</template>
+
+<script>
+import PropTypes from "ant-design-vue/lib/_util/vue-types";
+import { Row } from "ant-design-vue";
+import { useBEM } from "@/utils/bem";
+const prefixCls = "antd-vue-components__description-list";
+const genCls = useBEM(prefixCls);
+export default {
+  name: "description-list",
+  components: {
+    ARow: Row
+  },
+  props: {
+    title: PropTypes.string,
+    col: PropTypes.number.def(3),
+    layout: PropTypes.string.def("horizontal"),
+    gutter: PropTypes.number.def(32),
+    size: PropTypes.string.def("")
+  },
+  computed: {
+    clsString() {
+      return `${prefixCls} ${genCls([this.layout, this.size])}`;
+    },
+    column() {
+      return this.col > 4 ? 4 : this.col;
+    }
+  },
+  methods: {
+    genCls
+  }
+};
+</script>
+
+<style lang="less" src="./index.less"></style>

src/components/DescriptionList/demo/basic.md

@@ -0,0 +1,51 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+基本描述列表。
+
+## en-US
+
+Basic DescriptionList.
+```html
+<template>
+  <DescriptionList size="large" title="title">
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+  </DescriptionList>
+</template>
+```
+
+````js
+import DescriptionList from 'ant-design-vue-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+export default {
+  components: {
+    DescriptionList,
+    Description
+  }
+}
+````

src/components/DescriptionList/demo/vertical.md

@@ -0,0 +1,51 @@
+---
+order: 1
+title:
+  zh-CN: 垂直型
+  en-US: Vertical
+---
+
+## zh-CN
+
+垂直布局。
+
+## en-US
+
+Vertical layout.
+
+```html
+<template>
+  <DescriptionList size="large" title="title" layout="vertical">
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+    <Description term="Firefox">
+      A free, open source, cross-platform,
+      graphical web browser developed by the
+      Mozilla Corporation and hundreds of
+      volunteers.
+    </Description>
+  </DescriptionList>
+</template>
+```
+````js
+import DescriptionList from 'ant-design-vue-pro/lib/DescriptionList';
+
+const { Description } = DescriptionList;
+
+export default {
+  components: {
+    DescriptionList,
+    Description
+  }
+}
+````

src/components/DescriptionList/index.en-US.md

@@ -0,0 +1,33 @@
+---
+title: DescriptionList
+cols: 1
+order: 4
+---
+
+Groups display multiple read-only fields, which are common to informational displays on detail pages.
+
+## API
+
+### DescriptionList
+
+| Property      | Description                         | Type        | Default |
+|----------|------------------------------------------|-------------|---------|
+| layout    | type of layout                          | Enum{'horizontal', 'vertical'}  | 'horizontal' |
+| col       | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules)             | number(0 < col <= 4)  | 3 |
+| title     | title                                 | string or slot="title"  | - |
+| gutter    | specify the distance between two items, unit is `px`  | number  | 32 |
+| size     | size of list       | Enum{'large', 'small'}  | - |
+
+#### Responsive Rules
+
+| Window Width        | Columns Number                             | 
+|---------------------|---------------------------------------------|
+| `≥768px`           |  `col`                                       |
+| `≥576px`           |  `col < 2 ? col : 2`                         |
+| `<576px`           |  `1`                                         |
+
+### DescriptionList.Description
+
+| Property | Description                                      | Type         | Default |
+|----------|------------------------------------------|-------------|-------|
+| term     | item title                                 | string or slot="term"  | - |

src/components/DescriptionList/index.js

@@ -0,0 +1,5 @@
+import DescriptionList from "./DescriptionList.vue";
+import Description from "./Description.vue";
+
+DescriptionList.Description = Description;
+export default DescriptionList;

src/components/DescriptionList/index.less

@@ -0,0 +1,73 @@
+@import "~ant-design-vue/lib/style/themes/default.less";
+
+.antd-vue-components {
+  &__description-list {
+    // offset the padding-bottom of last row
+    :global {
+      .ant-row {
+        margin-bottom: -16px;
+        overflow: hidden;
+      }
+    }
+  
+    &__title {
+      font-size: 14px;
+      color: @heading-color;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+  
+    &__term {
+      // Line-height is 22px IE dom height will calculate error
+      line-height: 20px;
+      padding-bottom: 16px;
+      margin-right: 8px;
+      color: @heading-color;
+      white-space: nowrap;
+      display: table-cell;
+  
+      &:after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -0.5px;
+      }
+    }
+  
+    &__detail {
+      line-height: 20px;
+      width: 100%;
+      padding-bottom: 16px;
+      color: @text-color;
+      display: table-cell;
+    }
+  
+    &_small :global {
+      .ant-row {
+        margin-bottom: -8px;
+      }
+    }
+    &_small &__title {
+      margin-bottom: 12px;
+      color: @text-color;
+    }
+    &_small &__term,
+    &_small &__detail {
+      padding-bottom: 8px;
+    }
+    &_large &__title{
+      font-size: 16px;
+    }
+  
+    &_vertical &__term{
+      padding-bottom: 8px;
+      display: block;
+    }
+  
+    &_vertical &__detail {
+      display: block;
+    }
+    
+  }
+}
+

src/components/DescriptionList/index.zh-CN.md

@@ -0,0 +1,37 @@
+---
+title: DescriptionList
+subtitle: 描述列表
+cols: 1
+order: 4
+---
+
+成组展示多个只读字段，常见于详情页的信息展示。
+
+## API
+
+### DescriptionList
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| layout    | 布局方式                                 | Enum{'horizontal', 'vertical'}  | 'horizontal' |
+| col       | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定          | number(0 < col <= 4)  | 3 |
+| title     | 列表标题                                 | string or slot="title"  | - |
+| gutter    | 列表项间距，单位为 `px`                    | number  | 32 |
+| size     | 列表型号        | Enum{'large', 'small'}  | - |
+
+#### 响应式规则
+
+| 窗口宽度             | 展示列数                                      | 
+|---------------------|---------------------------------------------|
+| `≥768px`           |  `col`                                       |
+| `≥576px`           |  `col < 2 ? col : 2`                         |
+| `<576px`           |  `1`                                         |
+
+### DescriptionList.Description
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| term     | 列表项标题                                 | string or slot="term"  | - |
+
+
+

src/components/DescriptionList/responsive.js

@@ -0,0 +1,6 @@
+export default {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+};