From d4950678e695ceacbf46bffc2e1727e897abc1c2 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 1 Mar 2017 11:31:52 +0800
Subject: [PATCH] checkbox component

---
 docs/examples-docs/checkbox.md     | 132 ++++++++++++++++++++++++++++-
 docs/examples-docs/radio.md        |   6 ++
 docs/examples/checkbox.vue         |  44 +++++++---
 docs/examples/radio.vue            |   4 +-
 packages/checkbox/src/checkbox.vue |   9 ++
 5 files changed, 181 insertions(+), 14 deletions(-)

diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index 64a485a6a..ce1ca634e 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -1 +1,131 @@
-## Checkbox组件
\ No newline at end of file
+## Checkbox组件
+
+### 基础用法
+
+```html
+<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true
+    };
+  }
+}; 
+</script>
+```
+
+### 禁用状态
+
+```html
+<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
+
+<script>
+export default {
+  data() {
+    return {
+      checkbox2: true
+    };
+  }
+}; 
+</script>
+```
+
+### Checkbox组
+
+```html
+<zan-checkbox-group v-model="result">
+  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+</script>
+```
+
+### 禁用Checkbox组
+
+```html
+<zan-checkbox-group v-model="result" disabled>
+  <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+```
+
+### 与Cell组件一起使用
+
+```html
+<zan-checkbox-group v-model="result">
+  <zan-cell-group>
+    <zan-cell v-for="item in list">
+      <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+    </zan-cell>
+  </zan-cell-group>
+</zan-checkbox-group>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+```
+
+### Checkbox API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+| name | 根据这个来判断radio是否选中 | Boolean  | false |   |
+
+### CheckboxGroup API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | 是否禁用单选框 | Boolean  | false |   |
+
+### CheckboxGroup Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前组件的值 |
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index f1e92de89..433894a26 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -96,3 +96,9 @@ export default {
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
 | disabled | 是否禁用单选框 | Boolean  | false |   |
+
+### RadioGroup Event
+
+| 事件名称       | 说明      | 回调参数 |
+|-----------|-----------|-----------|
+| change | 当绑定值变化时触发的事件 | 当前组件的值 |
diff --git a/docs/examples/checkbox.vue b/docs/examples/checkbox.vue
index 5f1adfacb..e4ac8b63f 100644
--- a/docs/examples/checkbox.vue
+++ b/docs/examples/checkbox.vue
@@ -2,20 +2,32 @@
   <div class="page-checkbox">
     <h1 class="page-title">Checkbox</h1>
 
-    <h2 class="page-sub-title">基础用法</h2>
-    <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
+    <div class="checkbox-demo-wrapper">
+      <h2 class="page-sub-title">基础用法</h2>
+      <zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
 
-    <h2 class="page-sub-title">禁用状态</h2>
-    <zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
+      <h2 class="page-sub-title">禁用状态</h2>
+      <zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
+
+      <h2 class="page-sub-title">Checkbox组</h2>
+      <zan-checkbox-group v-model="result">
+        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+      </zan-checkbox-group>
+
+      <h2 class="page-sub-title">禁用Checkbox组</h2>
+      <zan-checkbox-group v-model="result" disabled>
+        <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+      </zan-checkbox-group>
+
+      <h2 class="page-sub-title">与Cell组件一起使用</h2>
+    </div>
 
-    <h2 class="page-sub-title">Checkbox组</h2>
     <zan-checkbox-group v-model="result">
-      <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
-    </zan-checkbox-group>
-
-    <h2 class="page-sub-title">禁用Checkbox组</h2>
-    <zan-checkbox-group v-model="result" disabled>
-      <zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
+      <zan-cell-group>
+        <zan-cell v-for="item in list">
+          <zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
+        </zan-cell>
+      </zan-cell-group>
     </zan-checkbox-group>
   </div>  
 </template>
@@ -42,3 +54,13 @@ export default {
   }
 };
 </script>
+
+<style>
+.checkbox-demo-wrapper {
+  padding: 0 15px;
+
+  .zan-checkbox {
+    margin: 10px 0;
+  }
+}
+</style>
diff --git a/docs/examples/radio.vue b/docs/examples/radio.vue
index 28e79e31d..780c71f39 100644
--- a/docs/examples/radio.vue
+++ b/docs/examples/radio.vue
@@ -2,7 +2,7 @@
   <div class="page-radio">
     <h1 class="page-title">Radio</h1>
 
-    <div class="demo-wrapper">
+    <div class="radio-demo-wrapper">
       <h2 class="page-sub-title">基础用法</h2>
       <zan-radio name="1" v-model="radio1">单选框1</zan-radio>
       <zan-radio name="2" v-model="radio1">单选框2</zan-radio>
@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style>
-.demo-wrapper {
+.radio-demo-wrapper {
   padding: 0 15px;
 
   .zan-radio {
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 357cd25c6..a829ac1b6 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -37,10 +37,16 @@ export default {
   },
 
   computed: {
+    /**
+     * `checkbox`是否在`zan-checkbox-group`中
+     */
     isGroup() {
       return !!this.findParentByComponentName('zan-checkbox-group');
     },
 
+    /**
+     * `checkbox`当前值
+     */
     currentValue: {
       get() {
         return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
@@ -78,6 +84,9 @@ export default {
       }
     },
 
+    /**
+     * `checkbox`是否被禁用
+     */
     isDisabled() {
       return this.isGroup && this.parentGroup
           ? this.parentGroup.disabled || this.disabled