From f55d3cb7c4ad637c1273bba78d68ff06fa4f695f Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Tue, 14 Feb 2017 14:45:38 +0800
Subject: [PATCH] cell and cell-group component

---
 build/bin/build-entry.js                      |  4 +-
 build/webpack.config.js                       |  3 +-
 components.json                               |  3 +-
 docs/examples/cell.md                         | 67 +++++++++++++++++--
 package.json                                  |  1 -
 packages/button/index.pcss                    |  1 -
 packages/cell-group/index.js                  |  3 +
 packages/cell/src/cell-group.vue              | 11 +++
 packages/cell/src/cell.vue                    | 31 +--------
 packages/switch/index.pcss                    |  1 -
 packages/{zenui => zanui}/README.md           |  0
 packages/{zenui => zanui}/package.json        |  0
 packages/{button => zanui}/src/button.pcss    |  2 +-
 packages/zanui/src/cell.pcss                  | 63 +++++++++++++++++
 packages/{zenui => zanui}/src/common/var.pcss |  0
 packages/{zenui => zanui}/src/icon.pcss       |  0
 packages/zanui/src/index.pcss                 |  7 ++
 packages/zanui/src/mixins/border_retina.pcss  | 20 ++++++
 packages/{switch => zanui}/src/switch.pcss    |  0
 packages/zenui/src/index.pcss                 |  6 --
 src/index.js                                  |  9 ++-
 21 files changed, 180 insertions(+), 52 deletions(-)
 delete mode 100644 packages/button/index.pcss
 create mode 100644 packages/cell-group/index.js
 create mode 100644 packages/cell/src/cell-group.vue
 delete mode 100644 packages/switch/index.pcss
 rename packages/{zenui => zanui}/README.md (100%)
 rename packages/{zenui => zanui}/package.json (100%)
 rename packages/{button => zanui}/src/button.pcss (96%)
 create mode 100644 packages/zanui/src/cell.pcss
 rename packages/{zenui => zanui}/src/common/var.pcss (100%)
 rename packages/{zenui => zanui}/src/icon.pcss (100%)
 create mode 100644 packages/zanui/src/index.pcss
 create mode 100644 packages/zanui/src/mixins/border_retina.pcss
 rename packages/{switch => zanui}/src/switch.pcss (100%)
 delete mode 100644 packages/zenui/src/index.pcss

diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 2fc6e1d92..2419df433 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -8,8 +8,8 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
-// zenui
-import '../packages/zenui/src/index.pcss';
+// zanui
+import '../packages/zanui/src/index.pcss';
 
 const install = function(Vue) {
   if (install.installed) return;
diff --git a/build/webpack.config.js b/build/webpack.config.js
index b74416529..b5d758f6a 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -40,7 +40,8 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.runtime.common.js',
       'oxygen': path.join(__dirname, '..'),
-      'src': path.join(__dirname, '../src')
+      'src': path.join(__dirname, '../src'),
+      'packages': path.join(__dirname, '../packages')
     }
   },
   module: {
diff --git a/components.json b/components.json
index 2a8c24a1b..fa7c0daea 100644
--- a/components.json
+++ b/components.json
@@ -4,5 +4,6 @@
   "field": "./packages/field/index.js",
   "radio": "./packages/radio/index.js",
   "cell": "./packages/cell/index.js",
-  "icon": "./packages/icon/index.js"
+  "icon": "./packages/icon/index.js",
+  "cell-group": "./packages/cell-group/index.js"
 }
diff --git a/docs/examples/cell.md b/docs/examples/cell.md
index 036fd737e..58b3f5ab8 100644
--- a/docs/examples/cell.md
+++ b/docs/examples/cell.md
@@ -1,8 +1,8 @@
 <style>
-.cell-groups {
-  padding-left: 10px;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+.official-img {
+  width: 31px;
+  vertical-align: middle;
+  border: 0;
 }
 </style>
 
@@ -12,10 +12,61 @@
 
 :::demo 样例代码
 ```html
-<div class="cell-groups">
+<o2-cell-group>
   <o2-cell title="单元格1" value="单元格1内容"></o2-cell>
   <o2-cell title="单元格2" value="单元格2内容"></o2-cell>
-</div>
+</o2-cell-group>
+```
+:::
+
+### 标题带描述信息
+
+:::demo 传入`label`属性，属性值为描述信息的值。
+```html
+<o2-cell-group>
+  <o2-cell title="单元格1" label="描述信息" is-link></o2-cell>
+  <o2-cell title="单元格2" label="描述信息"></o2-cell>
+</o2-cell-group>
+```
+:::
+
+### 带图标
+
+:::demo 传入`icon`属性
+```html
+<o2-cell-group>
+  <o2-cell title="起码运动馆" icon="home"></o2-cell>
+  <o2-cell title="线下门店" icon="location"></o2-cell>
+</o2-cell-group>
+```
+:::
+
+### 可点击的链接
+
+:::demo 传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
+```html
+<o2-cell-group>
+  <o2-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></o2-cell>
+  <o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
+</o2-cell-group>
+```
+:::
+
+### 高级用法
+
+如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。
+
+:::demo 包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
+```html
+<o2-cell-group>
+  <o2-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
+    <template slot="title">
+      <span class="o2-cell-text">起码运动馆</span>
+      <img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
+    </template>
+  </o2-cell>
+  <o2-cell title="线下门店" icon="location" url="http://youzan.com" is-link></o2-cell>
+</o2-cell-group>
 ```
 :::
 
@@ -26,7 +77,9 @@
 | icon | 左侧图标 | string  | ''          | ''          |
 | title | 左侧标题 | string  | ''          | ''          |
 | value | 右侧内容 | string  | ''          | ''          |
-| isLink | 是否为链接，链接会在右侧出现箭头 | string  | ''          | ''          |
+| isLink | 是否为链接，链接会在右侧出现箭头 | boolean  | ''          | ''          |
+| url | 跳转链接 | string  | ''          | ''          |
+| label | 描述信息，显示在标题下方 | string  | ''          | ''          |
 
 ### Slot
 
diff --git a/package.json b/package.json
index 5b4a0e712..1c17dd150 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,6 @@
     "markdown-it": "^6.1.1",
     "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
-    "node-sass": "^3.10.1",
     "pixrem": "^3.0.0",
     "postcss": "^5.1.2",
     "postcss-calc": "^5.0.0",
diff --git a/packages/button/index.pcss b/packages/button/index.pcss
deleted file mode 100644
index 6dd330220..000000000
--- a/packages/button/index.pcss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./src/button.pcss";
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
new file mode 100644
index 000000000..ccbfd514e
--- /dev/null
+++ b/packages/cell-group/index.js
@@ -0,0 +1,3 @@
+import CellGroup from '../cell/src/cell-group';
+
+export default CellGroup;
diff --git a/packages/cell/src/cell-group.vue b/packages/cell/src/cell-group.vue
new file mode 100644
index 000000000..6b9bcee43
--- /dev/null
+++ b/packages/cell/src/cell-group.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="o2-cell-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'o2-cell-group'
+};
+</script>
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index 1df1d260e..a1e2e519e 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -6,9 +6,10 @@
       </slot>
       <slot name="title">
         <span class="o2-cell-text" v-text="title"></span>
+        <span class="o2-cell-label" v-text="label"></span>
       </slot>
     </div>
-    <div class="o2-cell-value">
+    <div class="o2-cell-value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>
@@ -26,34 +27,8 @@ export default {
     title: String,
     value: String,
     url: String,
+    label: String,
     isLink: Boolean
   }
 };
 </script>
-
-<style>
-@component-namespace o2 {
-  @component cell {
-    display: block;
-    overflow: hidden;
-    position: relative;
-    padding: 10px 10px 10px 0;
-    line-height: 22px;
-    color: #666;
-    text-decoration: none;
-    border-bottom: 1px solid #ccc;
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    @descendent title {
-      float: left;
-    }
-
-    @descendent value {
-      float: right;
-    }
-  }
-}
-</style>
diff --git a/packages/switch/index.pcss b/packages/switch/index.pcss
deleted file mode 100644
index 617bc489f..000000000
--- a/packages/switch/index.pcss
+++ /dev/null
@@ -1 +0,0 @@
-@import "./src/switch.pcss";
diff --git a/packages/zenui/README.md b/packages/zanui/README.md
similarity index 100%
rename from packages/zenui/README.md
rename to packages/zanui/README.md
diff --git a/packages/zenui/package.json b/packages/zanui/package.json
similarity index 100%
rename from packages/zenui/package.json
rename to packages/zanui/package.json
diff --git a/packages/button/src/button.pcss b/packages/zanui/src/button.pcss
similarity index 96%
rename from packages/button/src/button.pcss
rename to packages/zanui/src/button.pcss
index 44471eb30..5b15a3308 100644
--- a/packages/button/src/button.pcss
+++ b/packages/zanui/src/button.pcss
@@ -1,4 +1,4 @@
-@import "../../zenui/src/common/var.pcss";
+@import "./common/var.pcss";
 
 @component-namespace o2 {
   @component button {
diff --git a/packages/zanui/src/cell.pcss b/packages/zanui/src/cell.pcss
new file mode 100644
index 000000000..8e923d2ee
--- /dev/null
+++ b/packages/zanui/src/cell.pcss
@@ -0,0 +1,63 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace o2 {
+  @component cell-group {
+    padding-left: 10px;
+    position: relative;
+
+    &::after {
+      @mixin border-retina (top, bottom);
+    }
+  }
+
+  @component cell {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 10px 10px 10px 0;
+    line-height: 22px;
+    background-color: $c-white;
+    color: #333;
+    font-size: 14px;
+    text-decoration: none;
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+
+    @descendent title {
+      float: left;
+    }
+
+    @descendent label {
+      display: block;
+      font-size: 12px;
+      line-height: 1.2;
+      color: #666;
+    }
+
+    @descendent value {
+      float: right;
+
+      @when link {
+        margin-right: 20px;
+      }
+    }
+
+    .zui-icon-arrow {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
diff --git a/packages/zenui/src/common/var.pcss b/packages/zanui/src/common/var.pcss
similarity index 100%
rename from packages/zenui/src/common/var.pcss
rename to packages/zanui/src/common/var.pcss
diff --git a/packages/zenui/src/icon.pcss b/packages/zanui/src/icon.pcss
similarity index 100%
rename from packages/zenui/src/icon.pcss
rename to packages/zanui/src/icon.pcss
diff --git a/packages/zanui/src/index.pcss b/packages/zanui/src/index.pcss
new file mode 100644
index 000000000..d734655e7
--- /dev/null
+++ b/packages/zanui/src/index.pcss
@@ -0,0 +1,7 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.pcss';
+@import './cell.pcss';
+@import './icon.pcss';
+@import './switch.pcss';
diff --git a/packages/zanui/src/mixins/border_retina.pcss b/packages/zanui/src/mixins/border_retina.pcss
new file mode 100644
index 000000000..404c323e5
--- /dev/null
+++ b/packages/zanui/src/mixins/border_retina.pcss
@@ -0,0 +1,20 @@
+$border-poses: top, right, bottom, left;
+
+@define-mixin border-retina $poses: $border-poses, $border-retina-color: #e5e5e5 {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  transform: scale(.5);
+  transform-origin: left top;
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+  pointer-events: none;
+
+  @each $pos in $poses {
+    border-$(pos): 1px solid $border-retina-color;
+  }
+}
\ No newline at end of file
diff --git a/packages/switch/src/switch.pcss b/packages/zanui/src/switch.pcss
similarity index 100%
rename from packages/switch/src/switch.pcss
rename to packages/zanui/src/switch.pcss
diff --git a/packages/zenui/src/index.pcss b/packages/zenui/src/index.pcss
deleted file mode 100644
index 6ef6a9441..000000000
--- a/packages/zenui/src/index.pcss
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
-  css组件库 入口,从各个地方拿css文件，组装成css组件库
- */
-@import '../../button/index.pcss';
-@import '../../switch/index.pcss';
-@import './icon.pcss';
diff --git a/src/index.js b/src/index.js
index e314f26fa..3ffa774fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,8 +4,9 @@ import Field from '../packages/field/index.js';
 import Radio from '../packages/radio/index.js';
 import Cell from '../packages/cell/index.js';
 import Icon from '../packages/icon/index.js';
-// zenui
-import '../packages/zenui/src/index.pcss';
+import CellGroup from '../packages/cell-group/index.js';
+// zanui
+import '../packages/zanui/src/index.pcss';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -16,6 +17,7 @@ const install = function(Vue) {
   Vue.component(Radio.name, Radio);
   Vue.component(Cell.name, Cell);
   Vue.component(Icon.name, Icon);
+  Vue.component(CellGroup.name, CellGroup);
 };
 
 // auto install
@@ -31,5 +33,6 @@ module.exports = {
   Field,
   Radio,
   Cell,
-  Icon
+  Icon,
+  CellGroup
 };