From 9ee6c4bf59519a3bad3e9c9144acef8fccc87c66 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Sun, 26 Feb 2017 18:50:34 +0800
Subject: [PATCH] card component

---
 components.json                               |  4 +-
 docs/examples-docs/card.md                    | 60 ++++++++++++++
 docs/nav.config.json                          |  4 -
 packages/card/CHANGELOG.md                    |  8 ++
 packages/card/README.md                       | 26 ++++++
 packages/card/index.js                        |  3 +
 packages/card/package.json                    | 10 +++
 packages/card/src/card.vue                    | 31 +++++++
 packages/panel/CHANGELOG.md                   |  8 ++
 packages/panel/README.md                      | 26 ++++++
 packages/panel/index.js                       |  3 +
 packages/panel/package.json                   | 10 +++
 packages/panel/src/panel.vue                  | 11 +++
 packages/radio/src/radio.vue                  | 10 +--
 packages/zanui-css/src/button.css             |  2 +-
 packages/zanui-css/src/card.css               | 82 +++++++++++++++++++
 packages/zanui-css/src/cell.css               |  4 +-
 .../src/common/{var.pcss => var.css}          |  0
 packages/zanui-css/src/dialog.css             |  2 +-
 packages/zanui-css/src/field.css              |  4 +-
 packages/zanui-css/src/index.css              |  2 +
 .../{border_retina.pcss => border_retina.css} |  0
 packages/zanui-css/src/mixins/ellipsis.css    |  7 ++
 packages/zanui-css/src/panel.css              |  7 ++
 src/index.js                                  |  8 +-
 25 files changed, 312 insertions(+), 20 deletions(-)
 create mode 100644 docs/examples-docs/card.md
 create mode 100644 packages/card/CHANGELOG.md
 create mode 100644 packages/card/README.md
 create mode 100644 packages/card/index.js
 create mode 100644 packages/card/package.json
 create mode 100644 packages/card/src/card.vue
 create mode 100644 packages/panel/CHANGELOG.md
 create mode 100644 packages/panel/README.md
 create mode 100644 packages/panel/index.js
 create mode 100644 packages/panel/package.json
 create mode 100644 packages/panel/src/panel.vue
 create mode 100644 packages/zanui-css/src/card.css
 rename packages/zanui-css/src/common/{var.pcss => var.css} (100%)
 rename packages/zanui-css/src/mixins/{border_retina.pcss => border_retina.css} (100%)
 create mode 100644 packages/zanui-css/src/mixins/ellipsis.css
 create mode 100644 packages/zanui-css/src/panel.css

diff --git a/components.json b/components.json
index 579038825..5d694f816 100644
--- a/components.json
+++ b/components.json
@@ -10,5 +10,7 @@
   "dialog": "./packages/dialog/index.js",
   "picker": "./packages/picker/index.js",
   "radio-group": "./packages/radio-group/index.js",
-  "loading": "./packages/loading/index.js"
+  "loading": "./packages/loading/index.js",
+  "panel": "./packages/panel/index.js",
+  "card": "./packages/card/index.js"
 }
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
new file mode 100644
index 000000000..01e8995ce
--- /dev/null
+++ b/docs/examples-docs/card.md
@@ -0,0 +1,60 @@
+## Card 图文组件
+
+### 基础用法
+
+当没有底部按钮时，右侧内容会居中显示。
+
+:::demo 不带底部按钮时，右侧内容会居中显示。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="描述"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+</z-card>
+
+```
+:::
+
+### 高级用法
+
+可以使用具名`slot`自定义对应的内容。
+
+:::demo 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
+```html
+<z-card
+  title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
+  desc="商品SKU1，商品SKU2"
+  thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
+  <div class="z-card__row" slot="title">
+    <h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+    <span class="z-card__price">¥ 2.00</span>
+  </div>
+  <div class="z-card__row" slot="desc">
+    <h4 class="z-card__desc">商品sku</h4>
+    <span class="z-card__num">x 2</span>
+  </div>
+  <div class="z-card__footer" slot="footer">
+    <z-button size="mini">按钮一</z-button>
+    <z-button size="mini">按钮二</z-button>
+  </div>
+</z-card>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | 左侧图片 | string  | ''          | ''          |
+| title | 标题 | string  | ''          | ''          |
+| desc | 描述 | string  | ''          | ''          |
+
+
+### Slot
+
+| name       | 描述      |
+|-----------|-----------|
+| title | 自定义标题 |
+| desc | 自定义描述 |
+| tags | 自定义tags |
+| footer | 自定义footer |
diff --git a/docs/nav.config.json b/docs/nav.config.json
index 2fecec6e8..b5fa757ab 100644
--- a/docs/nav.config.json
+++ b/docs/nav.config.json
@@ -14,10 +14,6 @@
               "path": "/cell",
               "title": "Cell"
             },
-            {
-              "path": "/loading",
-              "title": "Loading"
-            },
             {
               "path": "/progress",
               "title": "Progress"
diff --git a/packages/card/CHANGELOG.md b/packages/card/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/card/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/card/README.md b/packages/card/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/card/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/card/index.js b/packages/card/index.js
new file mode 100644
index 000000000..84dfc6611
--- /dev/null
+++ b/packages/card/index.js
@@ -0,0 +1,3 @@
+import Card from './src/card';
+
+export default Card;
diff --git a/packages/card/package.json b/packages/card/package.json
new file mode 100644
index 000000000..7dbfa2900
--- /dev/null
+++ b/packages/card/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
new file mode 100644
index 000000000..90732293f
--- /dev/null
+++ b/packages/card/src/card.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="z-card">
+    <img :src="thumb" alt="" class="z-card__img">
+    <div class="z-card__content" :class="{'is-center': !this.$slots.footer}">
+      <div class="z-card__info">
+        <slot name="title">
+          <h4 v-text="title" class="z-card__title"></h4>
+        </slot>
+        <slot name="desc">
+          <p v-if="desc" v-text="desc" class="z-card__title"></p>
+        </slot>
+        <slot name="tags"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-card',
+  props: {
+    thumb: {
+      type: String,
+      required: true
+    },
+    title: String,
+    desc: String
+  }
+};
+</script>
diff --git a/packages/panel/CHANGELOG.md b/packages/panel/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/panel/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/panel/README.md b/packages/panel/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/panel/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/panel/index.js b/packages/panel/index.js
new file mode 100644
index 000000000..35f2b3d2c
--- /dev/null
+++ b/packages/panel/index.js
@@ -0,0 +1,3 @@
+import Panel from './src/panel';
+
+export default Panel;
diff --git a/packages/panel/package.json b/packages/panel/package.json
new file mode 100644
index 000000000..1da2d27ee
--- /dev/null
+++ b/packages/panel/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/z-panel",
+  "version": "0.0.1",
+  "description": "picker component",
+  "main": "./index.js",
+  "author": "zhangmin <zhangmin@youzan.com>",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/panel/src/panel.vue b/packages/panel/src/panel.vue
new file mode 100644
index 000000000..cef7f4526
--- /dev/null
+++ b/packages/panel/src/panel.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="z-panel">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-panel',
+  props: []
+};
+</script>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index cae6c3e9d..e51e1db7c 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -1,5 +1,5 @@
 <template>
-  <z-cell
+  <div
     class="z-radio"
     :class="{
       'is-disabled': disabled
@@ -11,19 +11,13 @@
     <span class="z-radio__label">
       <slot></slot>
     </span>
-  </z-cell>
+  </div>
 </template>
 
 <script>
-import zCell from 'packages/cell';
-
 export default {
   name: 'z-radio',
 
-  components: {
-    zCell
-  },
-
   props: {
     disabled: Boolean,
     value: {},
diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css
index 77da7b848..ec35e2f45 100644
--- a/packages/zanui-css/src/button.css
+++ b/packages/zanui-css/src/button.css
@@ -1,4 +1,4 @@
-@import "./common/var.pcss";
+@import "./common/var.css";
 
 @component-namespace z {
   @b button {
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
new file mode 100644
index 000000000..47a6d29af
--- /dev/null
+++ b/packages/zanui-css/src/card.css
@@ -0,0 +1,82 @@
+@import "./mixins/ellipsis.css";
+
+@component-namespace z {
+  @b card {
+    padding: 5px 15px;
+    background: #FAFAFA;
+    overflow: hidden;
+    position: relative;
+    margin-bottom: 10px;
+
+    @e img {
+      float: left;
+      width: 90px;
+      height: 90px;
+      border: 0;
+    }
+
+    @e content {
+      margin-left: 100px;
+      display: table;
+
+      @when center {
+        display: table;
+        height: 90px;
+
+        .z-card__info {
+          display: table-cell;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    @e row {
+      overflow: hidden;
+      padding-right: 80px;
+      position: relative;
+    }
+
+    @e title {
+      line-height: 20px;
+      color: #333;
+      max-height: 40px;
+      margin-bottom: 5px;
+      @mixin multi-ellipsis 2;
+    }
+
+    @e desc {
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e price {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #333;
+    }
+
+    @e num {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 80px;
+      text-align: right;
+      font-size: 12px;
+      color: #666;
+    }
+
+    @e footer {
+      position: absolute;
+      right: 15px;
+      bottom: 5px;
+
+      .z-button {
+        margin-left: 5px;
+      }
+    }
+  }
+}
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index b70ccc877..de643840a 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -1,5 +1,5 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b cell-group {
diff --git a/packages/zanui-css/src/common/var.pcss b/packages/zanui-css/src/common/var.css
similarity index 100%
rename from packages/zanui-css/src/common/var.pcss
rename to packages/zanui-css/src/common/var.css
diff --git a/packages/zanui-css/src/dialog.css b/packages/zanui-css/src/dialog.css
index dabf78197..ad3ab3ffc 100644
--- a/packages/zanui-css/src/dialog.css
+++ b/packages/zanui-css/src/dialog.css
@@ -1,4 +1,4 @@
-@import "./mixins/border_retina.pcss";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b dialog-wrapper {
diff --git a/packages/zanui-css/src/field.css b/packages/zanui-css/src/field.css
index a9333e609..4b82672b3 100644
--- a/packages/zanui-css/src/field.css
+++ b/packages/zanui-css/src/field.css
@@ -1,5 +1,5 @@
-@import "./common/var.pcss";
-@import "./mixins/border_retina.pcss";
+@import "./common/var.css";
+@import "./mixins/border_retina.css";
 
 @component-namespace z {
   @b field {
diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css
index 50bad75d3..a4233691b 100644
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -4,6 +4,7 @@
 @import './button.css';
 @import './button_group.css';
 @import './cell.css';
+@import './card.css';
 @import './dialog.css';
 @import './field.css';
 @import './icon.css';
@@ -12,3 +13,4 @@
 @import './popup.css';
 @import './radio.css';
 @import './switch.css';
+@import './panel.css';
diff --git a/packages/zanui-css/src/mixins/border_retina.pcss b/packages/zanui-css/src/mixins/border_retina.css
similarity index 100%
rename from packages/zanui-css/src/mixins/border_retina.pcss
rename to packages/zanui-css/src/mixins/border_retina.css
diff --git a/packages/zanui-css/src/mixins/ellipsis.css b/packages/zanui-css/src/mixins/ellipsis.css
new file mode 100644
index 000000000..cfe063a5b
--- /dev/null
+++ b/packages/zanui-css/src/mixins/ellipsis.css
@@ -0,0 +1,7 @@
+@define-mixin multi-ellipsis $lines {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
diff --git a/packages/zanui-css/src/panel.css b/packages/zanui-css/src/panel.css
new file mode 100644
index 000000000..acf82a9ef
--- /dev/null
+++ b/packages/zanui-css/src/panel.css
@@ -0,0 +1,7 @@
+@component-namespace z {
+  @b panel {
+    padding: 5px 15px;
+    background: #D8D8D8;
+    overflow: hidden;
+  }
+}
diff --git a/src/index.js b/src/index.js
index d591aba7e..9dd314a94 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,8 @@ import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import Loading from '../packages/loading/index.js';
+import Panel from '../packages/panel/index.js';
+import Card from '../packages/card/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -25,6 +27,8 @@ const install = function(Vue) {
   Vue.component(Picker.name, Picker);
   Vue.component(RadioGroup.name, RadioGroup);
   Vue.component(Loading.name, Loading);
+  Vue.component(Panel.name, Panel);
+  Vue.component(Card.name, Card);
 };
 
 // auto install
@@ -46,5 +50,7 @@ module.exports = {
   Dialog,
   Picker,
   RadioGroup,
-  Loading
+  Loading,
+  Panel,
+  Card
 };