card

.babelrc

@@ -3,6 +3,7 @@
   "plugins": [
     "transform-vue-jsx",
     "transform-object-rest-spread",
-    "syntax-dynamic-import"
+    "syntax-dynamic-import",
+    "transform-decorators-legacy"
   ]
 }

components/card/Card.vue

@@ -0,0 +1,184 @@
+<script>
+  import { Tabs } from 'antd'
+  import omit from 'omit.js'
+  import PropTypes from '../_util/vue-types'
+  import addEventListener from '../_util/Dom/addEventListener'
+  import { hasProp, getComponentFromProp } from '../_util/props-util'
+  import { getComponentName } from '../_util/vnode'
+  import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
+  import BaseMixin from '../_util/BaseMixin'
+
+  const { TabPane } = Tabs
+  export default {
+    name: 'Card',
+    mixins: [BaseMixin],
+    props: {
+      prefixCls: PropTypes.string.def('ant-card'),
+      title: PropTypes.string,
+      extra: PropTypes.any,
+      bordered: PropTypes.bool.def(true),
+      bodyStyle: PropTypes.object,
+      loading: PropTypes.bool.def(false),
+      noHovering: PropTypes.bool.def(false),
+      hoverable: PropTypes.bool.def(false),
+      type: PropTypes.string,
+      actions: PropTypes.any,
+      tabList: PropTypes.array,
+    },
+    data () {
+      return {
+        widerPadding: false,
+        updateWiderPaddingCalled: false,
+      }
+    },
+    mounted () {
+      this.updateWiderPadding = throttleByAnimationFrame(this.updateWiderPadding)
+      this.updateWiderPadding()
+      this.resizeEvent = addEventListener(window, 'resize', this.updateWiderPadding)
+
+      // if (hasProp(this, 'noHovering')) {
+      //   warning(
+      //     !this.noHovering,
+      //     '`noHovering` of Card is deperated, you can remove it safely or use `hoverable` instead.',
+      //   )
+      //   warning(!!this.noHovering, '`noHovering={false}` of Card is deperated, use `hoverable` instead.')
+      // }
+    },
+    beforeMount () {
+      if (this.resizeEvent) {
+        this.resizeEvent.remove()
+      }
+      this.updateWiderPadding.cancel && this.updateWiderPadding.cancel()
+    },
+    methods: {
+      updateWiderPadding () {
+        const cardContainerRef = this.$refs.cardContainerRef
+        if (!cardContainerRef) {
+          return
+        }
+        // 936 is a magic card width pixer number indicated by designer
+        const WIDTH_BOUDARY_PX = 936
+        if (cardContainerRef.offsetWidth >= WIDTH_BOUDARY_PX && !this.widerPadding) {
+          this.setState({ widerPadding: true }, () => {
+            this.updateWiderPaddingCalled = true // first render without css transition
+          })
+        }
+        if (cardContainerRef.offsetWidth < WIDTH_BOUDARY_PX && this.widerPadding) {
+          this.setState({ widerPadding: false }, () => {
+            this.updateWiderPaddingCalled = true // first render without css transition
+          })
+        }
+      },
+      onHandleTabChange (key) {
+        this.$emit('tabChange', key)
+      },
+      isContainGrid (obj = []) {
+        let containGrid
+        obj.forEach((element) => {
+          if (
+            element &&
+            element.componentOptions &&
+            getComponentName(element.componentOptions) === 'Grid'
+          ) {
+            containGrid = true
+          }
+        })
+        return containGrid
+      },
+      // For 2.x compatible
+      getCompatibleHoverable () {
+        const { noHovering, hoverable } = this.$props
+        if (hasProp(this, 'noHovering')) {
+          return !noHovering || hoverable
+        }
+        return !!hoverable
+      },
+    },
+    render () {
+      const {
+        prefixCls = 'ant-card', extra, bodyStyle, title, loading,
+        bordered = true, type, tabList, ...others
+      } = this.$props
+
+      const { $slots } = this
+
+      const classString = {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-loading`]: loading,
+        [`${prefixCls}-bordered`]: bordered,
+        [`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
+        [`${prefixCls}-wider-padding`]: this.widerPadding,
+        [`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
+        [`${prefixCls}-contain-grid`]: this.isContainGrid($slots.default),
+        [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
+        [`${prefixCls}-type-${type}`]: !!type,
+      }
+
+      const loadingBlock = (
+        <div class={`${prefixCls}-loading-content`}>
+          <p class={`${prefixCls}-loading-block`} style={{ width: '94%' }} />
+          <p>
+            <span class={`${prefixCls}-loading-block`} style={{ width: '28%' }} />
+            <span class={`${prefixCls}-loading-block`} style={{ width: '62%' }} />
+          </p>
+          <p>
+            <span class={`${prefixCls}-loading-block`} style={{ width: '22%' }} />
+            <span class={`${prefixCls}-loading-block`} style={{ width: '66%' }} />
+          </p>
+          <p>
+            <span class={`${prefixCls}-loading-block`} style={{ width: '56%' }} />
+            <span class={`${prefixCls}-loading-block`} style={{ width: '39%' }} />
+          </p>
+          <p>
+            <span class={`${prefixCls}-loading-block`} style={{ width: '21%' }} />
+            <span class={`${prefixCls}-loading-block`} style={{ width: '15%' }} />
+            <span class={`${prefixCls}-loading-block`} style={{ width: '40%' }} />
+          </p>
+        </div>
+      )
+
+      let head
+      const tabs = tabList && tabList.length ? (
+        // size='large' Tabs组件暂时未支持
+        <Tabs class={`${prefixCls}-head-tabs`} onChange={this.onHandleTabChange}>
+          {tabList.map(item => <TabPane tab={item.tab} key={item.key} />)}
+        </Tabs>
+      ) : null
+      const titleDom = title || getComponentFromProp(this, 'title')
+      const extraDom = extra || getComponentFromProp(this, 'extra')
+      if (titleDom || extraDom || tabs) {
+        head = (
+          <div class={`${prefixCls}-head`}>
+            <div class={`${prefixCls}-head-wrapper`}>
+              {titleDom && <div class={`${prefixCls}-head-title`}>{titleDom}</div>}
+              {extraDom && <div class={`${prefixCls}-extra`}>{extraDom}</div>}
+            </div>
+            {tabs}
+          </div>
+        )
+      }
+
+      const children = $slots.default
+      const cover = getComponentFromProp(this, 'cover')
+      const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null
+      const body = (
+        <div class={`${prefixCls}-body`} style={bodyStyle}>
+          {loading ? loadingBlock : <div>{children}</div>}
+        </div>
+      )
+      const actions = getComponentFromProp(this, 'actions')
+      const actionDom = actions || null
+      const divProps = omit(others, [
+        'onTabChange',
+      ])
+      return (
+        <div {...divProps} class={classString} ref='cardContainerRef'>
+          {head}
+          {coverDom}
+          {children ? body : null}
+          {actionDom}
+        </div>
+      )
+    },
+  }
+</script>

components/card/Grid.vue

@@ -0,0 +1,19 @@
+<script>
+import PropTypes from '../_util/vue-types'
+
+export default {
+  name: 'Grid',
+  props: {
+    prefixCls: PropTypes.string.def('ant-card'),
+  },
+  render () {
+    const { prefixCls = 'ant-card', ...others } = this.$props
+    const classString = {
+      [`${prefixCls}-grid`]: true,
+    }
+    return (
+      <div {...others} class={classString}>{this.$slots.default}</div>
+    )
+  },
+}
+</script>

components/card/Meta.vue

@@ -0,0 +1,36 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import { getComponentFromProp } from '../_util/props-util'
+
+export default {
+  name: 'Meta',
+  props: {
+    prefixCls: PropTypes.string.def('ant-card'),
+    title: PropTypes.string,
+    description: PropTypes.string,
+  },
+  render () {
+    const { prefixCls = 'ant-card', title, description, ...others } = this.$props
+    const classString = {
+      [`${prefixCls}-meta`]: true,
+    }
+
+    const avatar = getComponentFromProp(this, 'avatar')
+    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
+      ? <div class={`${prefixCls}-meta-description`}>{description}</div> : null
+    const MetaDetail = titleDom || descriptionDom
+      ? <div class={`${prefixCls}-meta-detail`}>
+        {titleDom}
+        {descriptionDom}
+      </div> : null
+    return (
+      <div {...others} class={classString}>
+        {avatarDom}
+        {MetaDetail}
+      </div>
+    )
+  },
+}
+</script>

components/card/demo/basic.vue

@@ -0,0 +1,23 @@
+<template>
+<div>
+<md>
+## 基本
+</md>
+<Card title="Card title" >
+  <a href="#" slot="extra">More</a>
+  <p>Card content</p>
+  <p>Card content</p>
+  <p>Card content</p>
+</Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>

components/card/demo/colRowCard.vue

@@ -0,0 +1,32 @@
+<template>
+<div>
+<md>
+## 栅格卡片
+</md>
+<div style="background: #ECECEC; padding: 30px">
+  <Row :gutter="16">
+    <Col :span="8">
+      <Card title="Card title" :bordered="false">Card content</Card>
+    </Col>
+    <Col :span="8">
+      <Card title="Card title" :bordered="false">Card content</Card>
+    </Col>
+    <Col :span="8">
+      <Card title="Card title" :bordered="false">Card content</Card>
+    </Col>
+  </Row>
+</div>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card, Col, Row } from 'antd'
+export default {
+  components: {
+    Card,
+    Col,
+    Row,
+  },
+}
+</script>

components/card/demo/concise.vue

@@ -0,0 +1,32 @@
+<template>
+<div>
+<md>
+## 简洁卡片
+</md>
+<Card
+  hoverable
+  style="width: 240px"
+>
+  <img
+    alt="example"
+    src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
+    slot="cover"
+  />
+  <Meta
+    title="Europe Street beat"
+    description="www.instagram.com"
+  />
+</Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+    Meta: Card.Meta,
+  },
+}
+</script>

components/card/demo/grid.vue

@@ -0,0 +1,27 @@
+<template>
+<div>
+<md>
+## 网格型内嵌卡片
+</md>
+<Card title="Card Title">
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+  <CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
+</Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+    CardGrid: Card.Grid,
+  },
+}
+</script>

components/card/demo/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Basic />
+    <br>
+    <NoBorder />
+    <br>
+    <Concise />
+    <br>
+    <ColRowCard />
+    <br>
+    <Loading />
+    <br>
+    <Grid />
+    <br>
+    <Inline />
+    <br>
+    <TabsCard />
+    <br>
+    <MoreConfigs />
+    <br>
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import NoBorder from './noBorder'
+import Concise from './concise'
+import ColRowCard from './colRowCard'
+import Loading from './loading'
+import Grid from './grid'
+import Inline from './inline'
+import TabsCard from './tabsCard'
+import MoreConfigs from './moreConfigs'
+export default {
+  components: {
+    Basic,
+    NoBorder,
+    Concise,
+    ColRowCard,
+    Loading,
+    Grid,
+    Inline,
+    TabsCard,
+    MoreConfigs,
+  },
+}
+</script>

components/card/demo/inline.vue

@@ -0,0 +1,39 @@
+<template>
+<div>
+<md>
+## 内部卡片
+</md>
+<Card title="Card title">
+    <p
+      style="fontSize: 14px;color: 'rgba(0, 0, 0, 0.85)'; marginBottom: 16px;fontWeight: 500"
+    >
+      Group title
+    </p>
+    <Card
+      type="inner"
+      title="Inner Card title"
+    >
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </Card>
+    <Card
+      style="margin-top: 16px"
+      type="inner"
+      title="Inner Card title"
+    >
+      <a href="#" slot="extra">More</a>
+      Inner Card content
+    </Card>
+  </Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>

components/card/demo/loading.vue

@@ -0,0 +1,20 @@
+<template>
+<div>
+<md>
+## 预加载卡片
+</md>
+<Card loading title="Card title" style="width: 34%">
+  Whatever content
+</Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>

components/card/demo/moreConfigs.vue

@@ -0,0 +1,40 @@
+<template>
+<div>
+<md>
+## 支持更多内容配置
+</md>
+<Card
+  hoverable
+  style="width: 300px"
+>
+  <img
+    alt="example"
+    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+    slot="cover"
+  />
+  <ul class="ant-card-actions" slot="actions">
+    <li style="width: 33.3333%;"><Icon type="setting" /></li>
+    <li style="width: 33.3333%;"><Icon type="edit" /></li>
+    <li style="width: 33.3333%;"> <Icon type="ellipsis" /></li>
+  </ul>
+  <Meta
+    title="Card title"
+    description="This is the description">
+    <Avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+  </Meta>
+</Card>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card, Icon, Avatar } from 'antd'
+export default {
+  components: {
+    Card,
+    Icon,
+    Avatar,
+    Meta: Card.Meta,
+  },
+}
+</script>

components/card/demo/noBorder.vue

@@ -0,0 +1,24 @@
+<template>
+<div>
+<md>
+## 无边框
+</md>
+<div style="background:#ECECEC; padding:30px">
+  <Card title="Card title" :bordered="false" style="width: 300px">
+    <p>Card content</p>
+    <p>Card content</p>
+    <p>Card content</p>
+  </Card>
+</div>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  components: {
+    Card,
+  },
+}
+</script>

components/card/demo/tabsCard.vue

@@ -0,0 +1,74 @@
+<template>
+<div>
+  <md>
+  ## 带页签的卡片
+  </md>
+  <div>
+    <Card
+      style="width:100%"
+      title="Card title"
+      :tabList="tabList"
+      @tabChange="key => onTabChange(key, 'key')"
+    >
+      <a href="#" slot="extra">More</a>
+      {{contentList[key]}}
+    </Card>
+    <br /><br />
+    <Card
+      style="width:100%"
+      :tabList="tabListNoTitle"
+      @tabChange="key => onTabChange(key, 'noTitleKey')"
+    >
+      <div v-html="contentListNoTitle[noTitleKey]"></div>
+    </Card>
+  </div>
+</div>
+</template>
+
+<script>
+import '../style'
+import { Card } from 'antd'
+export default {
+  data () {
+    return {
+      tabList: [{
+        key: 'tab1',
+        tab: 'tab1',
+      }, {
+        key: 'tab2',
+        tab: 'tab2',
+      }],
+      contentList: {
+        tab1: 'content1',
+        tab2: 'content2',
+      },
+      tabListNoTitle: [{
+        key: 'article',
+        tab: 'article',
+      }, {
+        key: 'app',
+        tab: 'app',
+      }, {
+        key: 'project',
+        tab: 'project',
+      }],
+      contentListNoTitle: {
+        article: '<p>article content</p>',
+        app: '<p>app content</p>',
+        project: '<p>project content</p>',
+      },
+      key: 'tab1',
+      noTitleKey: 'article',
+    }
+  },
+  methods: {
+    onTabChange (key, type) {
+      console.log(key, type)
+      this[type] = key
+    },
+  },
+  components: {
+    Card,
+  },
+}
+</script>

components/card/index.js

@@ -0,0 +1,6 @@
+import Card from './Card'
+import Meta from './Meta'
+import Grid from './Grid'
+Card.Meta = Meta
+Card.Grid = Grid
+export default Card

components/index.js

@@ -35,3 +35,5 @@ export { default as Popover } from './popover'
 export { default as Popconfirm } from './popconfirm'
 
 export { default as Menu } from './menu'
+
+export { default as Card } from './card'

examples/routes.js

@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const com = pathnameArr[1] || 'button'
   const demo = pathnameArr[2] || 'index'
   return {
-    component: import(`../components/menu/demo/${demo}.vue`),
+    component: import(`../components/card/demo/${demo}.vue`),
   }
 }
 export default [

package.json

@@ -34,6 +34,8 @@
     "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-polyfill": "^6.26.0",