Merge branch 'feat-1.3.0' of https://github.com/vueComponent/ant-design-vue into feat-1.3.0

Author: tangjinzhou

components/comment/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
+<div class="ant-comment">
+  <div class="ant-comment-inner">
+    <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+    <div class="ant-comment-content">
+      <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span><span class="ant-comment-content-author-time"><span class="">a few seconds ago</span></span></div>
+      <div class="ant-comment-content-detail">
+        <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+      </div>
+      <ul class="ant-comment-actions">
+        <li><span><i class="anticon anticon-like"><svg viewBox="64 64 896 896" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i> <span style="cursor: 'auto';">
+        0
+      </span></span></li>
+        <li> </li>
+        <li><span><i class="anticon anticon-dislike"><svg viewBox="64 64 896 896" data-icon="dislike" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"></path></svg></i> <span style="cursor: 'auto';">
+        0
+      </span></span></li>
+        <li> </li>
+        <li><span>Reply to</span></li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
+<div>
+  <!---->
+  <div class="ant-comment">
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-detail">
+          <div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea value="" rows="4" class="ant-input"></textarea></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Add Comment</span></button></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/list.md correctly 1`] = `
+<div class="comment-list ant-list ant-list-split">
+  <div class="ant-list-header">2 replies</div>
+  <div class="ant-spin-nested-loading">
+    <div class="ant-spin-container">
+      <div class="ant-list-item">
+        <div class="ant-list-item-content ant-list-item-content-single">
+          <div class="ant-comment">
+            <div class="ant-comment-inner">
+              <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+              <div class="ant-comment-content">
+                <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
+                <div class="ant-comment-content-detail">
+                  <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+                </div>
+                <ul class="ant-comment-actions">
+                  <li><span>Reply to</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-list-item">
+        <div class="ant-list-item-content ant-list-item-content-single">
+          <div class="ant-comment">
+            <div class="ant-comment-inner">
+              <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+              <div class="ant-comment-content">
+                <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span></div>
+                <div class="ant-comment-content-detail">
+                  <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+                </div>
+                <ul class="ant-comment-actions">
+                  <li><span>Reply to</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
+<div class="ant-comment">
+  <div class="ant-comment-inner">
+    <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+    <div class="ant-comment-content">
+      <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+      <div class="ant-comment-content-detail">
+        <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      </div>
+      <ul class="ant-comment-actions">
+        <li><span>Reply to</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="ant-comment-nested">
+    <div class="ant-comment">
+      <div class="ant-comment-inner">
+        <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+        <div class="ant-comment-content">
+          <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+          <div class="ant-comment-content-detail">
+            <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+          </div>
+          <ul class="ant-comment-actions">
+            <li><span>Reply to</span></li>
+          </ul>
+        </div>
+      </div>
+      <div class="ant-comment-nested">
+        <div class="ant-comment">
+          <div class="ant-comment-inner">
+            <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+            <div class="ant-comment-content">
+              <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+              <div class="ant-comment-content-detail">
+                <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </div>
+              <ul class="ant-comment-actions">
+                <li><span>Reply to</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="ant-comment">
+          <div class="ant-comment-inner">
+            <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+            <div class="ant-comment-content">
+              <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+              <div class="ant-comment-content-detail">
+                <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </div>
+              <ul class="ant-comment-actions">
+                <li><span>Reply to</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/comment/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('comment')

components/comment/demo/basic.md

@@ -0,0 +1,78 @@
+<cn>
+#### 基本评论
+一个基本的评论组件，带有作者、头像、时间和操作。
+</cn>
+
+<us>
+#### Basic comment
+A basic comment with author, avatar, time and actions.
+</us>
+
+```html
+<template>
+  <a-comment>
+    <template slot="actions">
+      <span>
+        <a-tooltip title="Like">
+          <a-icon
+            type="like"
+            :theme="action === 'liked' ? 'filled' : 'outlined'"
+            @click="like"
+          />
+        </a-tooltip>
+        <span style="paddingLeft: '8px';cursor: 'auto'">
+          {{likes}}
+        </span>
+      </span>
+      <span>
+        <a-tooltip title="Dislike">
+          <a-icon
+            type="dislike"
+            :theme="action === 'disliked' ? 'filled' : 'outlined'"
+            @click="dislike"
+          />
+        </a-tooltip>
+        <span style="paddingLeft: '8px';cursor: 'auto'">
+          {{dislikes}}
+        </span>
+      </span>
+      <span>Reply to</span>
+    </template>
+    <a slot="author">Han Solo</a>
+    <a-avatar
+      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      alt="Han Solo"
+      slot="avatar"
+    />
+    <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+    <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
+      <span>{{moment().fromNow()}}</span>
+    </a-tooltip>
+  </a-comment>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  data () {
+    return {
+      likes: 0,
+      dislikes: 0,
+      action: null,
+      moment,
+    }
+  },
+  methods: {
+    like() {
+      this.likes = 1
+      this.dislikes = 0
+      this.action = 'liked'
+    },
+    dislike() {
+      this.likes = 0
+      this.dislikes = 1
+      this.action = 'disliked'
+    }
+  }
+}
+</script>
+```

components/comment/demo/editor.md

@@ -0,0 +1,93 @@
+<cn>
+#### 回复框
+评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
+</cn>
+
+<us>
+#### Reply Editor
+Comment can be used as editor, user can customize the editor component.
+</us>
+
+```html
+<template>
+  <div>
+    <a-list
+      v-if="comments.length"
+      :dataSource="comments"
+      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
+      itemLayout="horizontal"
+    >
+      <a-list-item slot="renderItem" slot-scope="item, index">
+        <a-comment
+          :author="item.author"
+          :avatar="item.avatar"
+          :content="item.content"
+          :datetime="item.datetime"
+        >
+        </a-comment>
+      </a-list-item>
+    </a-list>
+    <a-comment>
+      <a-avatar
+        slot="avatar"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+        alt="Han Solo"
+      />
+      <div slot="content">
+        <a-form-item>
+          <a-textarea rows=4 @change="handleChange" :value="value" ></a-textarea>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+            htmlType="submit"
+            :loading="submitting"
+            @click="handleSubmit"
+            type="primary"
+          >
+            Add Comment
+          </a-button>
+        </a-form-item>
+      </div>
+    </a-comment>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  data () {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+    }
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.value) {
+        return;
+      }
+
+      this.submitting = true
+
+      setTimeout(() => {
+        this.submitting = false
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow(),
+          },
+          ...this.comments,
+        ]
+        this.value = ''
+      }, 1000)
+    },
+    handleChange(e) {
+      this.value = e.target.value
+    }
+  },
+}
+</script>
+```

components/comment/demo/index.vue

@@ -0,0 +1,52 @@
+<script>
+import Basic from './basic'
+import Editor from './editor'
+import List from './list'
+import Nested from './nested'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Comment评论
+对网站内容的反馈、评价和讨论。
+
+## 何时使用
+
+评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。`,
+  us: `# Comment
+A comment displays user feedback and discussion to website content.
+
+## When To Use
+
+Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.`,
+}
+export default {
+  category: 'Components',
+  type: 'Data Display',
+  zhType: '数据展示',
+  title: 'Comment',
+  subtitle: '评论',
+  cols: 1,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <br/>
+        <List/>
+        <br/>
+        <Nested/>
+        <br/>
+        <Editor/>
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>