From cbe03a12b2f4a79311b6e7a95d13811ae3a41a92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 1 Mar 2017 17:58:40 +0800
Subject: [PATCH] support Checkbox

support Checkbox
---
 CHANGE.md                                  |  4 +
 README.md                                  |  2 +-
 src/components/checkbox/checkbox-group.vue | 23 ++++--
 src/components/checkbox/checkbox.vue       | 37 +++++----
 src/components/radio/radio-group.vue       |  2 +-
 src/components/radio/radio.vue             |  1 +
 src/index.js                               |  6 +-
 test/app.vue                               |  1 +
 test/main.js                               |  4 +
 test/routers/checkbox.vue                  | 95 ++++++++++++++++++++++
 10 files changed, 146 insertions(+), 29 deletions(-)
 create mode 100644 test/routers/checkbox.vue

diff --git a/CHANGE.md b/CHANGE.md
index 3e89c5fa..ffeca998 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -4,3 +4,7 @@
 使用 v-model
 ### Radio
 value 改为了 label，使用 v-model，废弃 checked
+### Checkbox
+使用 v-model
+### CheckboxGroup
+value 改为了 label，使用 v-model，废弃 checked
\ No newline at end of file
diff --git a/README.md b/README.md
index 81fe8fca..3244bf38 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@
 - [x] Icon
 - [x] Input
 - [x] Radio
-- [ ] Checkbox
+- [x] Checkbox
 - [ ] Switch
 - [ ] Table
 - [ ] Select
diff --git a/src/components/checkbox/checkbox-group.vue b/src/components/checkbox/checkbox-group.vue
index 74f99002..c6e9942a 100644
--- a/src/components/checkbox/checkbox-group.vue
+++ b/src/components/checkbox/checkbox-group.vue
@@ -9,42 +9,49 @@
     export default {
         name: 'checkboxGroup',
         props: {
-            model: {
+            value: {
                 type: Array,
                 default () {
                     return [];
                 }
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            };
+        },
         computed: {
             classes () {
                 return `${prefixCls}`;
             }
         },
-        compiled () {
+        mounted () {
             this.updateModel(true);
         },
         methods: {
             updateModel (update) {
-                const model = this.model;
+                const value = this.value;
 
                 this.$children.forEach((child) => {
-                    child.model = model;
+                    child.model = value;
 
                     if (update) {
-                        child.selected = model.indexOf(child.value) >= 0;
+                        child.currentValue = value.indexOf(child.label) >= 0;
                         child.group = true;
                     }
                 });
             },
             change (data) {
-                this.model = data;
+                this.currentValue = data;
+                this.$emit('input', data);
                 this.$emit('on-change', data);
-                this.$dispatch('on-form-change', data);
+                // todo 事件
+//                this.$dispatch('on-form-change', data);
             }
         },
         watch: {
-            model () {
+            value () {
                 this.updateModel(true);
             }
         }
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 90d99b72..bc652294 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -7,7 +7,7 @@
                 type="checkbox"
                 :class="inputClasses"
                 :disabled="disabled"
-                :value="value"
+                :value="label"
                 v-model="model"
                 @change="change">
             <input
@@ -15,28 +15,29 @@
                 type="checkbox"
                 :class="inputClasses"
                 :disabled="disabled"
-                v-model="checked"
+                :checked="currentValue"
                 @change="change">
         </span>
-        <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
+        <slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot>
     </label>
 </template>
 <script>
     const prefixCls = 'ivu-checkbox';
 
     export default {
+        name: 'Checkbox',
         props: {
             disabled: {
                 type: Boolean,
                 default: false
             },
             value: {
-                type: [String, Number, Boolean]
-            },
-            checked: {
                 type: Boolean,
                 default: false
             },
+            label: {
+                type: [String, Number, Boolean]
+            },
             indeterminate: {
                 type: Boolean,
                 default: false
@@ -45,7 +46,7 @@
         data () {
             return {
                 model: [],
-                selected: false,
+                currentValue: this.value,
                 group: false,
                 showSlot: true
             };
@@ -56,7 +57,7 @@
                     `${prefixCls}-wrapper`,
                     {
                         [`${prefixCls}-group-item`]: this.group,
-                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled
                     }
                 ];
@@ -65,7 +66,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-checked`]: this.currentValue,
                         [`${prefixCls}-disabled`]: this.disabled,
                         [`${prefixCls}-indeterminate`]: this.indeterminate
                     }
@@ -78,11 +79,12 @@
                 return `${prefixCls}-input`;
             }
         },
-        ready () {
+        mounted () {
+            // todo 使用 while向上查找
             if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
             if (!this.group) {
                 this.updateModel();
-                if (this.$els.slot && this.$els.slot.innerHTML === '') {
+                if (this.$refs.slot && this.$refs.slot.innerHTML === '') {
                     this.showSlot = false;
                 }
             }
@@ -93,21 +95,24 @@
                     return false;
                 }
 
-                this.selected = event.target.checked;
+                const checked = event.target.checked;
+                this.currentValue = checked;
+                this.$emit('input', checked);
 
                 if (this.group) {
                     this.$parent.change(this.model);
                 } else {
-                    this.$emit('on-change', this.checked);
-                    this.$dispatch('on-form-change', this.checked);
+                    this.$emit('on-change', checked);
+                    // todo 事件
+//                    this.$dispatch('on-form-change', checked);
                 }
             },
             updateModel () {
-                this.selected = this.checked;
+                this.currentValue = this.value;
             }
         },
         watch: {
-            checked () {
+            value () {
                 this.updateModel();
             }
         }
diff --git a/src/components/radio/radio-group.vue b/src/components/radio/radio-group.vue
index f66250c8..e472b604 100644
--- a/src/components/radio/radio-group.vue
+++ b/src/components/radio/radio-group.vue
@@ -33,7 +33,7 @@
         data () {
             return {
                 currentValue: this.value
-            }
+            };
         },
         computed: {
             classes () {
diff --git a/src/components/radio/radio.vue b/src/components/radio/radio.vue
index 3c7e7371..2585804c 100644
--- a/src/components/radio/radio.vue
+++ b/src/components/radio/radio.vue
@@ -63,6 +63,7 @@
             }
         },
         mounted () {
+            // todo 使用 while向上查找
             if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
             if (!this.group) {
                 this.updateValue();
diff --git a/src/index.js b/src/index.js
index 64c8d1e9..7f062497 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ import Button from './components/button';
 // import Card from './components/card';
 // import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
-// import Checkbox from './components/checkbox';
+import Checkbox from './components/checkbox';
 // import Circle from './components/circle';
 // import Collapse from './components/collapse';
 // import DatePicker from './components/date-picker';
@@ -60,8 +60,8 @@ const iview = {
     // Carousel,
     // CarouselItem: Carousel.Item,
     // Cascader,
-    // Checkbox,
-    // CheckboxGroup: Checkbox.Group,
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
     // Circle,
     // DatePicker,
     // Dropdown,
diff --git a/test/app.vue b/test/app.vue
index 302a7ad3..60c82c31 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -29,6 +29,7 @@ li + li {
                 <li><router-link to="/button">Button</router-link></li>
                 <li><router-link to="/input">Input</router-link></li>
                 <li><router-link to="/radio">Radio</router-link></li>
+                <li><router-link to="/checkbox">Checkbox</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 935e14e7..9500e84f 100644
--- a/test/main.js
+++ b/test/main.js
@@ -36,6 +36,10 @@ const router = new VueRouter({
         {
             path: '/radio',
             component: require('./routers/radio.vue')
+        },
+        {
+            path: '/checkbox',
+            component: require('./routers/checkbox.vue')
         }
     ]
 });
diff --git a/test/routers/checkbox.vue b/test/routers/checkbox.vue
new file mode 100644
index 00000000..0da86ab7
--- /dev/null
+++ b/test/routers/checkbox.vue
@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <Checkbox v-model="single" @on-change="s">Checkbox</Checkbox>
+        {{ single }}
+        <div @click="single = !single">single-change</div>
+        <br>
+        {{ social }}
+        <Checkbox-group v-model="social" @on-change="s">
+            <Checkbox label="twitter">
+                <Icon type="social-twitter"></Icon>
+                <span>Twitter</span>
+            </Checkbox>
+            <Checkbox label="facebook">
+                <Icon type="social-facebook"></Icon>
+                <span>Facebook</span>
+            </Checkbox>
+            <Checkbox label="github">
+                <Icon type="social-github"></Icon>
+                <span>Github</span>
+            </Checkbox>
+            <Checkbox label="snapchat">
+                <Icon type="social-snapchat"></Icon>
+                <span>Snapchat</span>
+            </Checkbox>
+        </Checkbox-group>
+        <br>
+        <div @click="c">修改1</div>
+        {{ fruit }}
+        <Checkbox-group v-model="fruit">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </Checkbox-group>
+        <br><br>
+        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
+            <Checkbox
+                    :indeterminate="indeterminate"
+                    v-model="checkAll"
+                    @click.prevent.native="handleCheckAll">全选</Checkbox>
+        </div>
+        <Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </Checkbox-group>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                social: ['facebook', 'github'],
+                fruit: ['苹果'],
+                single: false,
+                indeterminate: true,
+                checkAll: false,
+                checkAllGroup: ['香蕉', '西瓜']
+            }
+        },
+        methods: {
+            c () {
+                this.social.splice(0, 1)
+            },
+            s (d) {
+                console.log(d)
+            },
+            handleCheckAll () {
+                if (this.indeterminate) {
+                    this.checkAll = false;
+                } else {
+                    this.checkAll = !this.checkAll;
+                }
+                this.indeterminate = false;
+
+                if (this.checkAll) {
+                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
+                } else {
+                    this.checkAllGroup = [];
+                }
+            },
+            checkAllGroupChange (data) {
+                if (data.length === 3) {
+                    this.indeterminate = false;
+                    this.checkAll = true;
+                } else if (data.length > 0) {
+                    this.indeterminate = true;
+                    this.checkAll = false;
+                } else {
+                    this.indeterminate = false;
+                    this.checkAll = false;
+                }
+            }
+        }
+    }
+</script>