cell and cell-group component

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;

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: {

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"
 }

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
 

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",

packages/button/index.pcss

@@ -1 +0,0 @@
-@import "./src/button.pcss";

packages/cell-group/index.js

@@ -0,0 +1,3 @@
+import CellGroup from '../cell/src/cell-group';
+
+export default CellGroup;

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>

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>

packages/switch/index.pcss

@@ -1 +0,0 @@
-@import "./src/switch.pcss";

packages/zanui/src/button.pcss

@@ -1,4 +1,4 @@
-@import "../../zenui/src/common/var.pcss";
+@import "./common/var.pcss";
 
 @component-namespace o2 {
   @component button {

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;
+    }
+  }
+}

packages/zanui/src/index.pcss

@@ -0,0 +1,7 @@
+/**
+  css组件库入口，组装成css组件库
+ */
+@import './button.pcss';
+@import './cell.pcss';
+@import './icon.pcss';
+@import './switch.pcss';

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;
+  }
+}

packages/zenui/src/index.pcss

@@ -1,6 +0,0 @@
-/**
-  css组件库 入口,从各个地方拿css文件，组装成css组件库
- */
-@import '../../button/index.pcss';
-@import '../../switch/index.pcss';
-@import './icon.pcss';

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
 };