feat: update comment

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

@@ -68,7 +68,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
             <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-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">a day 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>
@@ -86,7 +86,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
             <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-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">2 days 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>

components/comment/demo/basic.md

@@ -20,7 +20,7 @@ A basic comment with author, avatar, time and actions.
             @click="like"
           />
         </a-tooltip>
-        <span style="paddingLeft: '8px';cursor: 'auto'">
+        <span style="padding-left: '8px';cursor: 'auto'">
           {{likes}}
         </span>
       </span>
@@ -32,7 +32,7 @@ A basic comment with author, avatar, time and actions.
             @click="dislike"
           />
         </a-tooltip>
-        <span style="paddingLeft: '8px';cursor: 'auto'">
+        <span style="padding-left: '8px';cursor: 'auto'">
           {{dislikes}}
         </span>
       </span>

components/comment/demo/editor.md

@@ -35,7 +35,7 @@ Comment can be used as editor, user can customize the editor component.
       />
       <div slot="content">
         <a-form-item>
-          <a-textarea rows=4 @change="handleChange" :value="value" ></a-textarea>
+          <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
         </a-form-item>
         <a-form-item>
           <a-button

components/comment/demo/list.md

@@ -25,7 +25,7 @@ Displaying a series of comments using the `antd` List Component.
           <span v-for="action in item.actions">{{action}}</span>
         </template>
         <p slot="content">{{item.content}}</p>
-        <a-tooltip slot="dateTime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
+        <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
           <span>{{item.datetime.fromNow()}}</span>
         </a-tooltip>
       </a-comment>

components/comment/demo/nested.md

@@ -11,61 +11,41 @@ Comments can be nested.
 ```html
 <template>
   <a-comment>
-    <template slot="actions">
+    <span slot="actions">Reply to</span>
-      <span>Reply to</span>
+    <a slot="author">Han Solo</a>
-    </template>
+    <a-avatar
-    <template slot="author">
+      slot="avatar"
-      <a>Han Solo</a>
+      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-    </template>
+      alt="Han Solo"
-    <template slot="avatar">
+    />
+    <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+    <a-comment>
+      <span slot="actions">Reply to</span>
+      <a slot="author">Han Solo</a>
       <a-avatar
+        slot="avatar"
         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
         alt="Han Solo"
       />
-    </template>
+      <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
-    <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      <a-comment>
-    <a-comment>
+        <span slot="actions">Reply to</span>
-      <template slot="actions">
+        <a slot="author">Han Solo</a>
-        <span>Reply to</span>
-      </template>
-      <template slot="author">
-        <a>Han Solo</a>
-      </template>
-      <template slot="avatar">
         <a-avatar
+          slot="avatar"
           src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
           alt="Han Solo"
         />
-      </template>
-      <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
-      <a-comment>
-        <template slot="actions">
-          <span>Reply to</span>
-        </template>
-        <template slot="author">
-          <a>Han Solo</a>
-        </template>
-        <template slot="avatar">
-          <a-avatar
-            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            alt="Han Solo"
-          />
-        </template>
         <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
       </a-comment>
       <a-comment>
-        <template slot="actions">
+        <span slot="actions">Reply to</span>
-          <span>Reply to</span>
+        <a slot="author">Han Solo</a>
-        </template>
+        <a-avatar
-        <template slot="author">
+          slot="avatar"
-          <a>Han Solo</a>
+          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-        </template>
+          alt="Han Solo"
-        <template slot="avatar">
+        />
-          <a-avatar
-            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            alt="Han Solo"
-          />
-        </template>
         <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
       </a-comment>
     </a-comment>

components/comment/index.en-US.md

@@ -2,9 +2,8 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| actions | List of action items rendered below the comment content | Array | slot | - |
+| actions | List of action items rendered below the comment content | Array \| slot | - |
 | author | The element to display as the comment author | string\|slot | - |
 | avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|slot | - |
-| children | Nested comments should be provided as children of the Comment | slot | - |
 | content | The main content of the comment | string\|slot | - |
 | datetime | A datetime element containing the time to be displayed | string\|slot | - |

components/comment/index.jsx

@@ -32,7 +32,7 @@ const Comment = {
     renderNested (children) {
       const { prefixCls } = this.$props
 
-      return <div class={classNames(`${prefixCls}-nested`)}>{children}</div>
+      return <div class={`${prefixCls}-nested`}>{children}</div>
     },
   },
 
@@ -41,11 +41,11 @@ const Comment = {
       prefixCls,
     } = this.$props
 
-    const actions = this.$props.actions || getComponentFromProp(this, 'actions')
+    const actions = getComponentFromProp(this, 'actions')
-    const author = this.$props.author || getComponentFromProp(this, 'author')
+    const author = getComponentFromProp(this, 'author')
-    const avatar = this.$props.avatar || getComponentFromProp(this, 'avatar')
+    const avatar = getComponentFromProp(this, 'avatar')
-    const content = this.$props.content || getComponentFromProp(this, 'content')
+    const content = getComponentFromProp(this, 'content')
-    const datetime = this.$props.datetime || getComponentFromProp(this, 'datetime')
+    const datetime = getComponentFromProp(this, 'datetime')
 
     const avatarDom = (
       <div class={`${prefixCls}-avatar`}>
@@ -81,7 +81,7 @@ const Comment = {
     )
     const children = this.$slots.default
     return (
-      <div class={classNames(prefixCls)}>
+      <div class={prefixCls} {...{ on: this.$listeners }}>
         {comment}
         {children ? this.renderNested(children) : null}
       </div>

components/comment/index.zh-CN.md

@@ -2,9 +2,8 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| actions | 在评论内容下面呈现的操作项列表 | Array|slot | - |
+| actions | 在评论内容下面呈现的操作项列表 | Array\|slot | - |
 | author | 要显示为注释作者的元素 | string\|slot | - |
 | avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者src | string\|slot | - |
-| children | 嵌套注释应作为注释的子项提供 | slot | - |
 | content | 评论的主要内容 | string\|slot | - |
 | datetime | 展示时间描述 | string\|slot | - |