From da76a284d0e2bd462843c6b9ae9daeec15576c48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 20 Jun 2018 16:56:54 +0800
Subject: [PATCH] update Cell

---
 examples/routers/cell.vue         | 25 +++++++--
 src/components/cell/cell-item.vue | 34 ++++++++++++
 src/components/cell/cell.vue      | 88 +++++++++++++++++++++++++++++--
 src/styles/components/cell.less   | 60 ++++++++++++++++++++-
 4 files changed, 199 insertions(+), 8 deletions(-)
 create mode 100644 src/components/cell/cell-item.vue

diff --git a/examples/routers/cell.vue b/examples/routers/cell.vue
index fb8956f1..e66e24a7 100644
--- a/examples/routers/cell.vue
+++ b/examples/routers/cell.vue
@@ -1,7 +1,26 @@
 <template>
-<div>
-    <div>cell</div>
-</div>
+    <div style="margin: 100px;background: #f8f8f9;padding: 100px;">
+        <Card title="选项" :padding="0" shadow style="width: 300px;">
+            <CellGroup>
+                <Cell title="标题一" label="附属内容" to="/button"></Cell>
+                <Cell title="标题一" label="附属内容" extra="详细信息"></Cell>
+                <Cell title="标题一" label="附属内容" extra="详细信息" to="/button"></Cell>
+                <Cell title="标题一" label="附属内容" selected></Cell>
+                <Cell title="标题二">
+                    <Icon type="trash-a" slot="icon"></Icon>
+                </Cell>
+                <Cell title="标题三"></Cell>
+                <Cell title="标题四" selected></Cell>
+                <Cell title="标题五"></Cell>
+                <Cell title="标题六" disabled></Cell>
+                <Cell title="标题七" extra="详细信息"></Cell>
+                <Cell title="标题七" extra="详细信息" selected></Cell>
+                <Cell title="标题七" label="附属内容" extra="详细信息"></Cell>
+                <Cell title="标题八"></Cell>
+                <Cell title="标题九"></Cell>
+            </CellGroup>
+        </Card>
+    </div>
 </template>
 <script>
     export default {
diff --git a/src/components/cell/cell-item.vue b/src/components/cell/cell-item.vue
new file mode 100644
index 00000000..f4b3afc7
--- /dev/null
+++ b/src/components/cell/cell-item.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="ivu-cell-item">
+        <div class="ivu-cell-icon">
+            <slot name="icon"></slot>
+        </div>
+        <div class="ivu-cell-main">
+            <div class="ivu-cell-title" v-if="title !== ''">{{ title }}</div>
+            <div class="ivu-cell-label" v-if="label !== ''">{{ label }}</div>
+            <slot></slot>
+        </div>
+        <div class="ivu-cell-footer">
+            <span class="ivu-cell-extra" v-if="extra !== ''">{{ extra }}</span>
+            <slot name="extra" v-else></slot>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+            label: {
+                type: String,
+                default: ''
+            },
+            extra: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/cell/cell.vue b/src/components/cell/cell.vue
index 7cc468d5..a8690b55 100644
--- a/src/components/cell/cell.vue
+++ b/src/components/cell/cell.vue
@@ -1,11 +1,93 @@
 <template>
-
+    <div :class="classes">
+        <a v-if="to" class="ivu-cell-link" @click="handleClick">
+            <CellItem :title="title" :label="label" :extra="extra">
+                <slot name="icon" slot="icon"></slot>
+                <slot></slot>
+                <slot name="extra" slot="extra"></slot>
+            </CellItem>
+        </a>
+        <div class="ivu-cell-link" v-else>
+            <CellItem :title="title" :label="label" :extra="extra">
+                <slot name="icon" slot="icon"></slot>
+                <slot></slot>
+                <slot name="extra" slot="extra"></slot>
+            </CellItem>
+        </div>
+        <div class="ivu-cell-arrow" v-if="to">
+            <slot name="arrow">
+                <Icon type="ios-arrow-right"></Icon>
+            </slot>
+        </div>
+    </div>
 </template>
 <script>
+    import CellItem from './cell-item.vue';
+    import Icon from '../icon/icon.vue';
+
+    const prefixCls = 'ivu-cell';
+
     export default {
+        name: 'Cell',
+        components: { CellItem, Icon },
         props: {
-
+            name: {
+                type: [String, Number]
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            label: {
+                type: String,
+                default: ''
+            },
+            extra: {
+                type: String,
+                default: ''
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            selected: {
+                type: Boolean,
+                default: false
+            },
+            to: {
+                type: [Object, String]
+            },
+            replace: {
+                type: Boolean,
+                default: false
+            }
         },
-
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-selected`]: this.selected,
+                        [`${prefixCls}-with-link`]: this.to
+                    }
+                ];
+            }
+        },
+        methods: {
+            handleClick () {
+                const isRoute = this.$router;
+                if (isRoute) {
+                    this.replace ? this.$router.replace(this.to) : this.$router.push(this.to);
+                } else {
+                    window.location.href = this.to;
+                }
+            }
+        }
     }
 </script>
\ No newline at end of file
diff --git a/src/styles/components/cell.less b/src/styles/components/cell.less
index 9edbbf92..446805cb 100644
--- a/src/styles/components/cell.less
+++ b/src/styles/components/cell.less
@@ -1,5 +1,61 @@
 @cell-prefix-cls: ~"@{css-prefix}cell";
 
-.@{cell-prefix-cls} {
 
-}
\ No newline at end of file
+.@{cell-prefix-cls} {
+    position: relative;
+    overflow: hidden;
+
+    &-link, &-link:hover, &-link:active{
+        color: inherit;
+    }
+
+    &-icon{
+        display: inline-block;
+        margin-right: 4px;
+        font-size: @font-size-base;
+        vertical-align: middle;
+        &:empty{
+            display: none
+        }
+    }
+    &-main{
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-title{
+        line-height: 24px;
+        font-size: @font-size-base;
+    }
+    &-label{
+        line-height: 1.2;
+        font-size: @font-size-small;
+        color: @subsidiary-color;
+    }
+    &-selected &-label{
+        color: inherit;
+    }
+    &-footer{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        color: @text-color;
+    }
+    &-with-link &-footer{
+        right: 32px;
+    }
+    &-selected &-footer{
+        color: inherit;
+    }
+
+    &-arrow{
+        display: inline-block;
+        position: absolute;
+        transform: translateY(-50%);
+        top: 50%;
+        right: 16px;
+        font-size: @font-size-base;
+    }
+}
+.select-item(@cell-prefix-cls, @cell-prefix-cls);
\ No newline at end of file