From 245f03309f0acbfc464dd4b3c03f7e9ee7e54189 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Mon, 28 Aug 2017 17:38:32 +0800
Subject: [PATCH] add CellSwitch component

---
 docs/examples-docs/switch-cell.md     | 81 +++++++++++++++++++++++++++
 docs/src/doc.config.js                |  9 +++
 packages/index.js                     |  3 +
 packages/switch-cell/index.vue        | 32 +++++++++++
 packages/vant-css/src/index.css       |  1 +
 packages/vant-css/src/switch-cell.css |  9 +++
 test/unit/specs/switch-cell.spec.js   | 74 ++++++++++++++++++++++++
 7 files changed, 209 insertions(+)
 create mode 100644 docs/examples-docs/switch-cell.md
 create mode 100644 packages/switch-cell/index.vue
 create mode 100644 packages/vant-css/src/switch-cell.css
 create mode 100644 test/unit/specs/switch-cell.spec.js

diff --git a/docs/examples-docs/switch-cell.md b/docs/examples-docs/switch-cell.md
new file mode 100644
index 000000000..24ff57fc8
--- /dev/null
+++ b/docs/examples-docs/switch-cell.md
@@ -0,0 +1,81 @@
+## SwitchCell 开关单元格
+
+`SwitchCell`组件是对`Switch`和`Cell`组件的封装
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
+
+### 使用指南
+``` javascript
+import { SwitchCell } from 'vant';
+
+Vue.component(SwitchCell.name, SwitchCell);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<template>
+ <van-cell-group>
+   <van-switch-cell v-model="checked" title="标题" />
+ </van-cell-group>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+</script>
+```
+:::
+
+#### 禁用状态
+通过`disabled`属性可以将组件设置为禁用状态
+
+:::demo 禁用状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :disabled="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+#### 加载状态
+通过`loading`属性可以将组件设置为加载状态
+
+:::demo 加载状态
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" :loading="true" title="标题" />
+</van-cell-group>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值      |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 开关状态 | `Boolean`  |   | |
+| title | 左侧标题 |  `String` | `''` | |
+| loading | 是否为加载状态 |  `Boolean` | `false` | |
+| disabled | 是否为禁用状态 |  `Boolean` | `false` | |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | 开关状态切换回调 | checked: 是否选中开关 |
\ No newline at end of file
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 0e3afd423..58c899777 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -181,6 +181,15 @@ module.exports = {
                 "title": "Toast 轻提示"
               }
             ]
+          },
+          {
+            "groupName": "业务组件",
+            "list": [
+              {
+                "path": "/switch-cell",
+                "title": "SwitchCell 开关单元格"
+              }
+            ]
           }
         ]
       }
diff --git a/packages/index.js b/packages/index.js
index e1ff78211..fcb708c38 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -31,6 +31,7 @@ import Steps from './steps';
 import Swipe from './swipe';
 import SwipeItem from './swipe-item';
 import Switch from './switch';
+import SwitchCell from './switch-cell';
 import Tab from './tab';
 import Tabs from './tabs';
 import Tag from './tag';
@@ -70,6 +71,7 @@ const components = [
   Swipe,
   SwipeItem,
   Switch,
+  SwitchCell,
   Tab,
   Tabs,
   Tag,
@@ -125,6 +127,7 @@ export {
   Swipe,
   SwipeItem,
   Switch,
+  SwitchCell,
   Tab,
   Tabs,
   Tag,
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
new file mode 100644
index 000000000..911d33da5
--- /dev/null
+++ b/packages/switch-cell/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <van-cell :title="title" class="van-switch-cell">
+    <van-switch :value="value" @input="$emit('input', $event)" :disabled="disabled" :loading="loading" />
+  </van-cell>
+</template>
+
+<script>
+import Cell from '../cell';
+import Switch from '../switch';
+
+export default {
+  name: 'van-switch-cell',
+
+  components: {
+    [Cell.name]: Cell,
+    [Switch.name]: Switch
+  },
+
+  props: {
+    title: String,
+    value: Boolean,
+    loading: Boolean,
+    disabled: Boolean
+  },
+
+  watch: {
+    value() {
+      this.$emit('change', this.value);
+    }
+  }
+};
+</script>
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 6a7bfa8df..d897aacbd 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -31,3 +31,4 @@
 @import './uploader.css';
 @import './swipe.css';
 @import './notice-bar.css';
+@import './switch-cell.css';
diff --git a/packages/vant-css/src/switch-cell.css b/packages/vant-css/src/switch-cell.css
new file mode 100644
index 000000000..7edabe8bd
--- /dev/null
+++ b/packages/vant-css/src/switch-cell.css
@@ -0,0 +1,9 @@
+.van-switch-cell {
+  .van-cell__title {
+    vertical-align: middle;
+  }
+
+  .van-switch {
+    float: right;
+  }
+}
\ No newline at end of file
diff --git a/test/unit/specs/switch-cell.spec.js b/test/unit/specs/switch-cell.spec.js
new file mode 100644
index 000000000..a363c5ced
--- /dev/null
+++ b/test/unit/specs/switch-cell.spec.js
@@ -0,0 +1,74 @@
+import SwitchCell from 'packages/switch-cell';
+import { mount } from 'avoriaz';
+import { DOMChecker } from '../utils';
+
+describe('SwitchCell', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('default', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('set title', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        title: '测试标题'
+      }
+    });
+
+    DOMChecker(wrapper, {
+      text: {
+        '.van-cell__text': '测试标题'
+      },
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('checked', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        value: true
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--on': 1,
+        '.van-switch--disabled': 0
+      }
+    });
+  });
+
+  it('disabled', () => {
+    wrapper = mount(SwitchCell, {
+      attachToDocument: true,
+      propsData: {
+        disabled: true
+      }
+    });
+
+    DOMChecker(wrapper, {
+      count: {
+        '.van-switch--off': 1,
+        '.van-switch--disabled': 1
+      }
+    });
+  });
+});