feat/card

- add new component card and it's tests, docs

packages/card/__tests__/card.spec.ts

@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils'
+import Card from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Card.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(Card, {
+      slots: {
+        default: AXIOM,
+      },
+    })
+    expect(wrapper.text()).toEqual(AXIOM)
+  })
+
+  test('string header', () => {
+    const header = 'I am header'
+    const wrapper = mount(Card, {
+      slots: {
+        default: AXIOM,
+      },
+      props: {
+        header,
+      },
+    })
+    expect(wrapper.text()).toContain(header)
+  })
+
+  test('vnode header', () => {
+    const headerCls = 'header-text'
+    const btnCls = 'test-btn'
+    const wrapper = mount(Card, {
+      slots: {
+        default: AXIOM,
+        header: `<div>
+          <span class="${headerCls}">card header</span>
+          <button class="${btnCls}">click me</button>
+        </div>`,
+      },
+    })
+    expect(wrapper.find('.header-text').exists()).toBe(true)
+    expect(wrapper.find('.test-btn').exists()).toBe(true)
+  })
+
+  test('body style', () => {
+    const style = 'font-size: 14px;'
+    const wrapper = mount(Card, {
+      props: {
+        slots: {
+          default: AXIOM,
+        },
+        bodyStyle: style,
+      },
+    })
+    expect(wrapper.find('.el-card__body').attributes('style')).toBe(style)
+  })
+
+  test('shadow', () => {
+    const shadow = 'test-shadow'
+    const wrapper = mount(Card, {
+      props: {
+        slots: {
+          default: AXIOM,
+        },
+        shadow,
+      },
+    })
+
+    expect(wrapper.find(`.is-${shadow}-shadow`).exists()).toBe(true)
+  })
+})

packages/card/doc/complex.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-card class="box-card">
+    <template #header class="clearfix">
+      <span>卡片名称</span>
+      <el-button style="float: right; padding: 3px 0" type="text" @click="alert">点我</el-button>
+    </template>
+    <div v-for="o in 4" :key="o" class="text item">{{ '列表内容 ' + o }}</div>
+  </el-card>
+</template>
+
+<script lang="ts">
+export default {
+  methods: {
+    alert(): void {
+      alert('点我干嘛')
+    },
+  },
+}
+</script>

packages/card/doc/index.stories.ts

@@ -0,0 +1,7 @@
+export default {
+  title: 'Card',
+}
+
+export const BasicCard = () :string => '<el-card header="I am the header">basic card</el-card>'
+export const MinimalCard = (): string => '<el-card>minimal card with no header</el-card>'
+export { default as ComplexCard } from './complex.vue'

packages/card/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Card from './src/index.vue'
+export default (app: App): void => {
+  app.component(Card.name, Card)
+}

packages/card/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/card",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/card/src/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
+      <div v-if="$slots.header || header" class="el-card__header">
+        <slot name="header">{{ header }}</slot>
+      </div>
+      <div class="el-card__body" :style="bodyStyle">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang='ts'>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ElCard',
+  props: {
+    header: {
+      type: String,
+      default: '',
+    },
+    bodyStyle: {
+      type: String,
+      default: '',
+    },
+    shadow: {
+      type: String,
+      default: '',
+    },
+  },
+})
+</script>

packages/element-plus/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import ElButton from '@element-plus/button'
 import ElBadge from '@element-plus/badge'
+import ElCard from '@element-plus/card'
 import ElTag from '@element-plus/tag'
 import ElDivider from '@element-plus/divider'
 
@@ -11,6 +12,7 @@ export {
 export default function install(app: App): void {
   ElButton(app)
   ElBadge(app)
+  ElCard(app)
   ElTag(app)
   ElDivider(app)
 }

packages/element-plus/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@element-plus/badge": "^0.0.0",
     "@element-plus/button": "^0.0.0",
+    "@element-plus/card": "^0.0.0",
     "@element-plus/tag": "^0.0.0"
   }
 }