From 96f71eda55df85d14d097831dbe1de5c6593ec46 Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Fri, 25 Nov 2016 13:13:41 +0800
Subject: [PATCH 1/2] Radio/Checkbox: fix radio-radiogroup
 checkbox-checkboxgroup nested bug fixed #1152

---
 packages/checkbox/src/checkbox-group.vue |  5 ++
 packages/checkbox/src/checkbox.vue       | 98 ++++++++++++------------
 packages/radio/src/radio-group.vue       |  6 +-
 packages/radio/src/radio.vue             | 44 +++++++----
 src/mixins/emitter.js                    |  2 +-
 test/unit/specs/checkbox.spec.js         | 27 +++++++
 test/unit/specs/radio.spec.js            | 18 +++--
 7 files changed, 125 insertions(+), 75 deletions(-)

diff --git a/packages/checkbox/src/checkbox-group.vue b/packages/checkbox/src/checkbox-group.vue
index 8a891fac4..c6246a9d0 100644
--- a/packages/checkbox/src/checkbox-group.vue
+++ b/packages/checkbox/src/checkbox-group.vue
@@ -16,7 +16,12 @@
       value(value) {
         this.$emit('change', value);
         this.dispatch('form-item', 'el.form.change', [value]);
+        this.broadcast('ElCheckbox', 'initData', [value]);
       }
+    },
+
+    mounted() {
+      this.broadcast('ElCheckbox', 'initData', [this.value]);
     }
   };
 </script>
diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index 4d67e7f78..e473cf9c1 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -17,11 +17,9 @@
         :disabled="disabled"
         :true-value="trueLabel"
         :false-value="falseLabel"
-        v-model="_value"
+        v-model="model"
         @focus="focus = true"
-        @blur="focus = false"
-        @change="handleChange"
-        ref="checkbox">
+        @blur="focus = false">
       <input
         v-else
         class="el-checkbox__original"
@@ -29,10 +27,9 @@
         :disabled="disabled"
         :value="label"
         :name="name"
-        v-model="_value"
+        v-model="model"
         @focus="focus = true"
-        @blur="focus = false"
-        @change="handleChange">
+        @blur="focus = false">
     </span>
     <span class="el-checkbox__label" v-if="$slots.default || label">
       <slot></slot>
@@ -48,6 +45,34 @@
 
     mixins: [Emitter],
 
+    componentName: 'ElCheckbox',
+
+    computed: {
+      model: {
+        get() {
+          return this.isGroup ? this.store : this.value;
+        },
+
+        set(val) {
+          if (this.isGroup) {
+            this.dispatch('ElCheckboxGroup', 'input', [val]);
+          } else {
+            this.$emit('input', val);
+          }
+        }
+      },
+
+      isChecked() {
+        if ({}.toString.call(this.model) === '[object Boolean]') {
+          return this.model;
+        } else if (Array.isArray(this.model)) {
+          return this.model.indexOf(this.label) > -1;
+        } else if (this.model !== null && this.model !== undefined) {
+          return this.model === this.trueLabel;
+        }
+      }
+    },
+
     props: {
       value: {},
       label: String,
@@ -59,59 +84,30 @@
       falseLabel: [String, Number]
     },
 
-    computed: {
-      _value: {
-        get() {
-          return !this.wrapInGroup ? this.value : this.$parent.value;
-        },
-        set(newValue) {
-          if (!this.wrapInGroup) {
-            this.$emit('input', newValue);
-          } else {
-            this.$parent.$emit('input', newValue);
-          }
-        }
-      },
-      isChecked() {
-        var type = Object.prototype.toString.call(this._value);
-
-        if (type === '[object Boolean]') {
-          return this._value;
-        } else if (type === '[object Array]') {
-          return this._value.indexOf(this.label) > -1;
-        } else if (type === '[object String]' || type === '[object Number]') {
-          return this._value === this.trueLabel;
-        }
-      }
-    },
-
     data() {
       return {
-        focus: false,
-        wrapInGroup: this.$parent.$options.componentName === 'ElCheckboxGroup'
+        store: [],
+        isGroup: false
       };
     },
 
-    watch: {
-      checked: {
-        immediate: true,
-        handler(value) {
-          if (value) {
-            let type = Object.prototype.toString.call(this._value);
-            if (type !== '[object Array]') {
-              this._value = this.trueLabel || true;
-            } else {
-              this._value.push(this.label);
-            }
-          }
+    methods: {
+      addToStore() {
+        if (Array.isArray(this.model)) {
+          this.model.indexOf(this.label) === -1 && this.model.push(this.label);
+        } else {
+          this.model = this.trueLabel || true;
         }
       }
     },
 
-    methods: {
-      handleChange(ev) {
-        this.$emit('change', ev);
-      }
+    created() {
+      this.checked && this.addToStore();
+      this.$on('initData', data => {
+        this.store = data;
+        this.isGroup = true;
+        this.checked && this.addToStore();
+      });
     }
   };
 </script>
diff --git a/packages/radio/src/radio-group.vue b/packages/radio/src/radio-group.vue
index 78a56fde2..be357cf31 100644
--- a/packages/radio/src/radio-group.vue
+++ b/packages/radio/src/radio-group.vue
@@ -4,7 +4,7 @@
   export default {
     name: 'ElRadioGroup',
 
-    componentName: 'radio-group',
+    componentName: 'ElRadioGroup',
 
     mixins: [Emitter],
 
@@ -15,8 +15,12 @@
     watch: {
       value(value) {
         this.$emit('change', value);
+        this.broadcast('ElRadio', 'initData', value);
         this.dispatch('form-item', 'el.form.change', [this.value]);
       }
+    },
+    mounted() {
+      this.broadcast('ElRadio', 'initData', this.value);
     }
   };
 </script>
diff --git a/packages/radio/src/radio.vue b/packages/radio/src/radio.vue
index db5d74eab..75b962295 100644
--- a/packages/radio/src/radio.vue
+++ b/packages/radio/src/radio.vue
@@ -4,14 +4,14 @@
       <span class="el-radio__inner"
         :class="{
         'is-disabled': disabled,
-        'is-checked': _value === label,
+        'is-checked': store === label,
         'is-focus': focus
       }"></span>
       <input
         class="el-radio__original"
         :value="label"
         type="radio"
-        v-model="_value"
+        v-model="store"
         @focus="focus = true"
         @blur="focus = false"
         :name="name"
@@ -24,9 +24,15 @@
   </label>
 </template>
 <script>
+  import Emitter from 'element-ui/src/mixins/emitter';
+
   export default {
     name: 'ElRadio',
 
+    mixins: [Emitter],
+
+    componentName: 'ElRadio',
+
     props: {
       value: [String, Number],
       label: {
@@ -36,24 +42,34 @@
       disabled: Boolean,
       name: String
     },
+
     data() {
       return {
-        focus: false
+        focus: false,
+        isGroup: false,
+        store: this.value
       };
     },
-    computed: {
-      _value: {
-        get() {
-          return this.value !== undefined ? this.value : this.$parent.value;
-        },
-        set(newValue) {
-          if (this.value !== undefined) {
-            this.$emit('input', newValue);
-          } else {
-            this.$parent.$emit('input', newValue);
-          }
+
+    watch: {
+      store(store) {
+        if (this.isGroup) {
+          this.dispatch('ElRadioGroup', 'input', store);
+        } else {
+          this.$emit('input', store);
         }
+      },
+
+      value(val) {
+        this.store = val;
       }
+    },
+
+    created() {
+      this.$on('initData', data => {
+        this.store = data;
+        this.isGroup = true;
+      });
     }
   };
 </script>
diff --git a/src/mixins/emitter.js b/src/mixins/emitter.js
index 117243e4d..c12d167c4 100644
--- a/src/mixins/emitter.js
+++ b/src/mixins/emitter.js
@@ -5,7 +5,7 @@ function broadcast(componentName, eventName, params) {
     if (name === componentName) {
       child.$emit.apply(child, [eventName].concat(params));
     } else {
-      broadcast.apply(child, [componentName, eventName].concat(params));
+      broadcast.apply(child, [componentName, eventName].concat([params]));
     }
   });
 }
diff --git a/test/unit/specs/checkbox.spec.js b/test/unit/specs/checkbox.spec.js
index 13783754c..d79ed0549 100644
--- a/test/unit/specs/checkbox.spec.js
+++ b/test/unit/specs/checkbox.spec.js
@@ -67,6 +67,33 @@ describe('Checkbox', () => {
       done();
     });
   });
+
+  it('nested group', done => {
+    vm = createVue({
+      template: `
+        <el-checkbox-group v-model="checkList">
+          <el-row>
+            <el-checkbox label="a" ref="a"></el-checkbox>
+            <el-checkbox label="b" ref="b"></el-checkbox>
+            <el-checkbox label="c" ref="c"></el-checkbox>
+            <el-checkbox label="d" ref="d"></el-checkbox>
+          </el-row>
+        </el-checkbox-group>
+      `,
+      data() {
+        return {
+          checkList: []
+        };
+      }
+    }, true);
+    expect(vm.checkList.length === 0).to.be.true;
+    vm.$refs.a.$el.click();
+    vm.$nextTick(_ => {
+      expect(vm.checkList.indexOf('a') !== -1).to.be.true;
+      done();
+    });
+  });
+
   it('true false label', done => {
     vm = createVue({
       template: `
diff --git a/test/unit/specs/radio.spec.js b/test/unit/specs/radio.spec.js
index a25a7b988..3d442e055 100644
--- a/test/unit/specs/radio.spec.js
+++ b/test/unit/specs/radio.spec.js
@@ -65,14 +65,16 @@ describe('Radio', () => {
         };
       }
     }, true);
-    expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
-    let radioElm = vm.$refs.radio2.$el;
-    radioElm.click();
-    vm.$nextTick(_ => {
-      expect(radioElm.querySelector('.is-checked')).to.be.ok;
-      expect(vm.radio === 6).to.be.true;
-      done();
-    });
+    setTimeout(_ => {
+      expect(vm.$refs.radio1.$el.querySelector('.is-checked')).to.be.ok;
+      let radioElm = vm.$refs.radio2.$el;
+      radioElm.click();
+      vm.$nextTick(_ => {
+        expect(radioElm.querySelector('.is-checked')).to.be.ok;
+        expect(vm.radio === 6).to.be.true;
+        done();
+      });
+    }, 50);
   });
   it('radio button', done => {
     vm = createVue({

From cf38b8c32e082386cb8c7e0ad37422d38f48a95e Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Fri, 25 Nov 2016 17:17:05 +0800
Subject: [PATCH 2/2] Tree: import checkbox

---
 packages/checkbox/src/checkbox.vue | 2 ++
 packages/tree/src/tree-node.vue    | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/checkbox/src/checkbox.vue b/packages/checkbox/src/checkbox.vue
index e473cf9c1..00217a0e8 100644
--- a/packages/checkbox/src/checkbox.vue
+++ b/packages/checkbox/src/checkbox.vue
@@ -18,6 +18,7 @@
         :true-value="trueLabel"
         :false-value="falseLabel"
         v-model="model"
+        @change="$emit('change', $event)"
         @focus="focus = true"
         @blur="focus = false">
       <input
@@ -28,6 +29,7 @@
         :value="label"
         :name="name"
         v-model="model"
+        @change="$emit('change', $event)"
         @focus="focus = true"
         @blur="focus = false">
     </span>
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index a135bb2e0..38509592e 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -40,6 +40,7 @@
 
 <script type="text/jsx">
   import CollapseTransition from './transition';
+  import ElCheckbox from 'element-ui/packages/checkbox'
 
   export default {
     name: 'el-tree-node',
@@ -55,6 +56,7 @@
     },
 
     components: {
+      ElCheckbox,
       CollapseTransition,
       NodeContent: {
         props: {