Merge pull request #84 from wangxueliang/master

fix: support card description and title slot
vueComponent · Jul 27, 2018 · 8560f0e · 8560f0e
2 parents 5a96e78 + 84a9d1d
commit 8560f0e
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 45 deletions.
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
@@ -12,7 +12,7 @@ export default {
   mixins: [BaseMixin],
   props: {
     prefixCls: PropTypes.string.def('ant-card'),
-    title: PropTypes.string,
+    title: PropTypes.any,
     extra: PropTypes.any,
     bordered: PropTypes.bool.def(true),
     bodyStyle: PropTypes.object,

diff --git a/components/card/Grid.jsx b/components/card/Grid.jsx
@@ -7,12 +7,12 @@ export default {
     prefixCls: PropTypes.string.def('ant-card'),
   },
   render () {
-    const { prefixCls = 'ant-card', ...others } = this.$props
+    const { prefixCls = 'ant-card' } = this.$props
     const classString = {
       [`${prefixCls}-grid`]: true,
     }
     return (
-      <div {...others} class={classString}>{this.$slots.default}</div>
+      <div {...{ on: this.$listeners }} class={classString}>{this.$slots.default}</div>
     )
   },
 }

diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx
@@ -6,16 +6,19 @@ export default {
   name: 'ACardMeta',
   props: {
     prefixCls: PropTypes.string.def('ant-card'),
-    title: PropTypes.string,
-    description: PropTypes.string,
+    title: PropTypes.any,
+    description: PropTypes.any,
   },
   render () {
-    const { prefixCls = 'ant-card', title, description, ...others } = this.$props
+    const { prefixCls = 'ant-card' } = this.$props
     const classString = {
       [`${prefixCls}-meta`]: true,
     }
 
     const avatar = getComponentFromProp(this, 'avatar')
+    const title = getComponentFromProp(this, 'title')
+    const description = getComponentFromProp(this, 'description')
+
     const avatarDom = avatar ? <div class={`${prefixCls}-meta-avatar`}>{avatar}</div> : null
     const titleDom = title ? <div class={`${prefixCls}-meta-title`}>{title}</div> : null
     const descriptionDom = description
@@ -26,7 +29,7 @@ export default {
         {descriptionDom}
       </div> : null
     return (
-      <div {...others} class={classString}>
+      <div {...{ on: this.$listeners }} class={classString}>
         {avatarDom}
         {MetaDetail}
       </div>

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -71,6 +71,22 @@ exports[`renders ./components/card/demo/concise.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
+<div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 240px;">
+  <div class="ant-card-cover">
+    <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png">
+  </div>
+  <div class="ant-card-body">
+    <div class="ant-card-meta">
+      <div class="ant-card-meta-detail">
+        <div class="ant-card-meta-title">Europe Street beat</div>
+        <div class="ant-card-meta-description">www.instagram.com</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/card/demo/grid.md correctly 1`] = `
 <div class="ant-card ant-card-bordered">
   <div class="ant-card-head">
@@ -130,21 +146,24 @@ exports[`renders ./components/card/demo/inline.md correctly 1`] = `
 `;
 
 exports[`renders ./components/card/demo/loading.md correctly 1`] = `
-<div class="ant-card ant-card-loading ant-card-bordered" style="width: 34%;">
-  <div class="ant-card-head">
-    <div class="ant-card-head-wrapper">
-      <div class="ant-card-head-title">Card title</div>
+<div>
+  <div class="ant-card ant-card-loading ant-card-bordered">
+    <div class="ant-card-head">
+      <div class="ant-card-head-wrapper">
+        <div class="ant-card-head-title">Card title</div>
+      </div>
     </div>
-  </div>
-  <div class="ant-card-body">
-    <div class="ant-card-loading-content">
-      <p class="ant-card-loading-block" style="width: 94%;"></p>
-      <p><span class="ant-card-loading-block" style="width: 28%;"></span><span class="ant-card-loading-block" style="width: 62%;"></span></p>
-      <p><span class="ant-card-loading-block" style="width: 22%;"></span><span class="ant-card-loading-block" style="width: 66%;"></span></p>
-      <p><span class="ant-card-loading-block" style="width: 56%;"></span><span class="ant-card-loading-block" style="width: 39%;"></span></p>
-      <p><span class="ant-card-loading-block" style="width: 21%;"></span><span class="ant-card-loading-block" style="width: 15%;"></span><span class="ant-card-loading-block" style="width: 40%;"></span></p>
+    <div class="ant-card-body">
+      <div class="ant-card-loading-content">
+        <p class="ant-card-loading-block" style="width: 94%;"></p>
+        <p><span class="ant-card-loading-block" style="width: 28%;"></span><span class="ant-card-loading-block" style="width: 62%;"></span></p>
+        <p><span class="ant-card-loading-block" style="width: 22%;"></span><span class="ant-card-loading-block" style="width: 66%;"></span></p>
+        <p><span class="ant-card-loading-block" style="width: 56%;"></span><span class="ant-card-loading-block" style="width: 39%;"></span></p>
+        <p><span class="ant-card-loading-block" style="width: 21%;"></span><span class="ant-card-loading-block" style="width: 15%;"></span><span class="ant-card-loading-block" style="width: 40%;"></span></p>
+      </div>
     </div>
   </div>
+  <button type="button" class="ant-btn ant-btn-default" style="margin-top: 16px;"><span>Toggle loading</span></button>
 </div>
 `;
 

diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md
@@ -0,0 +1,28 @@
+<cn>
+  #### 更灵活的内容展示
+  可以利用 `Card.Meta` 支持更灵活的内容
+</cn>
+
+<us>
+  #### Customized content
+  You can use `Card.Meta` to support more flexible content.
+</us>
+
+```html
+<template>
+<a-card
+  hoverable
+  style="width: 240px"
+>
+  <img
+    alt="example"
+    src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+    slot="cover"
+  />
+  <a-card-meta
+    title="Europe Street beat">
+    <template slot="description">www.instagram.com</template>
+  </a-card-meta>
+</a-card>
+</template>
+```
diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue
@@ -8,6 +8,7 @@ import Grid from './grid'
 import Inline from './inline'
 import TabsCard from './tabsCard'
 import MoreConfigs from './moreConfigs'
+import FlexibleContent from './flexible-content'
 
 import CN from './../index.zh-CN.md'
 import US from './../index.en-US.md'
@@ -41,6 +42,7 @@ export default {
         <Basic />
         <NoBorder />
         <Concise />
+        <FlexibleContent />
         <ColRowCard />
         <Loading />
         <Grid />

diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
@@ -10,10 +10,27 @@
 
 ```html
 <template>
-  <a-card loading title="Card title" style="width: 34%;">
-    whatever content
-  </a-card>
+  <div>
+    <a-card :loading="loading" title="Card title">
+      whatever content
+    </a-card>
+    <a-button @click="handleClick" style="marginTop: 16px">Toggle loading</a-button>
+  </div>
 </template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: true,
+      }
+    },
+    methods: {
+      handleClick() {
+        this.loading = !this.loading
+      }
+    },
+  }
+</script>
 ```
 
 
diff --git a/components/card/demo/moreConfigs.md b/components/card/demo/moreConfigs.md
@@ -1,11 +1,11 @@
 <cn>
-  #### 更灵活的内容展示
-  可以利用 `Card.Meta` 支持更灵活的内容
+  #### 支持更多内容配置
+  一种支持封面、头像、标题和描述信息的卡片。
 </cn>
 
 <us>
-  #### Customized content
-  You can use `Card.Meta` to support more flexible content.
+  #### Support more content configuration
+  A Card that supports `cover`, `avatar`, `title` and `description`.
 </us>
 
 ```html

diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
@@ -18,19 +18,17 @@
 | type | Card style type, can be set to `inner` or not set | string | - |
 | onTabChange | Callback when tab is switched | (key) => void | - |
 
-### Card.Grid
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| tabChange | Callback when tab is switched | (key) => void | - |
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| className | className of container | string | - |
-| style | style object of container | object | - |
+### Card.Grid
 
 ### Card.Meta
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | avatar | avatar or icon | slot | - |
-| className | className of container | string | - |
-| description | description content | slot | - |
-| style | style object of container | object | - |
-| title | title content | slot | - |
+| description | description content | string\|slot | - |
+| title | title content | string\|slot | - |
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
@@ -19,19 +19,17 @@
 | type      | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
 | onTabChange | 页签切换的回调 | (key) => void | - |
 
-### Card.Grid
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| tabChange | 页签切换的回调 | (key) => void | - |
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| className | 网格容器类名 | string | - |
-| style | 定义网格容器类名的样式 | object | - |
+### Card.Grid
 
 ### Card.Meta
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | avatar   | 头像/图标 | slot | - |
-| className | 容器类名 | string | - |
-| description | 描述内容 | slot | - |
-| style | 定义容器类名的样式 | object | - |
-| title | 标题内容 | slot | - |
+| description | 描述内容 | string\|slot | - |
+| title | 标题内容 | string\|slot | - |
diff --git a/site/dev.js b/site/dev.js
@@ -10,7 +10,7 @@ import Api from './components/api'
 import './components'
 import demoBox from './components/demoBox'
 import demoContainer from './components/demoContainer'
-import Test from '../components/test/index'
+import Test from '../components/card/demo/index'
 
 Vue.use(VueClipboard)
 Vue.use(VueRouter)