add context

components/checkbox/Checkbox.vue

@@ -27,15 +27,23 @@ export default {
     value: [String, Number, Boolean],
     name: String,
     indeterminate: Boolean,
-    onGroupChange: Function,
   },
   model: {
     prop: 'checked',
   },
+  inject: {
+    context: { default: undefined },
+  },
   data () {
-    const { checked, defaultChecked } = this
+    const { context, checked, defaultChecked, value } = this
+    let stateChecked
+    if (context && context.checkedStatus) {
+      stateChecked = context.checkedStatus.has(value)
+    }
     return {
-      stateChecked: checked === undefined ? defaultChecked : checked,
+      stateChecked: stateChecked === undefined
+        ? checked === undefined ? defaultChecked : checked
+        : stateChecked,
     }
   },
   computed: {
@@ -64,15 +72,18 @@ export default {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked } = this
-      if (checked === undefined) {
+      const { name, value, checked, context, stateChecked } = this
+      if ((checked === undefined && !context) || (context && context.value === undefined)) {
         this.stateChecked = targetChecked
       }
       const target = {
         name,
         value,
-        checked: targetChecked,
+        checked: !stateChecked,
       }
+      if (this.context) {
+        this.context.handleChange({ target })
+      } else {
         this.$emit('change', {
           target,
           stopPropagation () {
@@ -82,8 +93,6 @@ export default {
             event.preventDefault()
           },
         })
-      if (this.isGroup) {
-        this.onGroupChange({ target })
       }
     },
   },
@@ -91,6 +100,9 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
+    'context.checkedStatus': function (checkedStatus) {
+      this.stateChecked = checkedStatus.has(this.value)
+    },
   },
 }
 </script>

components/checkbox/Group.vue

@@ -31,6 +31,11 @@ export default {
   model: {
     prop: 'value',
   },
+  provide () {
+    return {
+      context: this,
+    }
+  },
   data () {
     const { value, defaultValue } = this
     return {
@@ -50,9 +55,6 @@ export default {
       })
     },
   },
-  created () {
-    this.setChildCheckbox(this.$slots.default)
-  },
   methods: {
     handleChange (event) {
       const target = event.target
@@ -73,31 +75,12 @@ export default {
       this.$emit('input', newVal)
       this.$emit('change', newVal)
     },
-    setChildCheckbox (children = []) {
-      const { options, $slots, checkedStatus } = this
-      if (options.length === 0 && $slots.default) {
-        children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { Ctor, propsData } = componentOptions
-          if (Ctor && Ctor.options.name === 'Checkbox') {
-            propsData.isGroup = true
-            propsData.onGroupChange = this.handleChange
-            propsData.checked = checkedStatus.has(propsData.value)
-          } else {
-            this.setChildCheckbox(newChildren)
-          }
-        }, this)
-      }
-    },
   },
   mounted () {
   },
-  beforeUpdate () {
-    this.setChildCheckbox(this.$slots.default)
-  },
   watch: {
     value (val) {
       this.stateValue = val
-      this.setChildCheckbox(this.$slots.default)
     },
   },
   components: {

components/checkbox/demo/controller.vue

@@ -1,18 +1,62 @@
 <template>
   <div>
-    <Checkbox @change="onChange">Checkbox</Checkbox>
+    <p :style="{ marginBottom: '20px' }">
+      <Checkbox
+        :checked="checked"
+        :disabled="disabled"
+        @change="onChange"
+      >
+        {{label}}
+      </Checkbox>
+    </p>
+    <p>
+      <AntButton
+        type="primary"
+        size="small"
+        @click="toggleChecked"
+      >
+        {{!checked ? 'Check' : 'Uncheck'}}
+      </AntButton>
+      <AntButton
+        :style="{ marginLeft: '10px' }"
+        type="primary"
+        size="small"
+        @click="toggleDisable"
+      >
+        {{!disabled ? 'Disable' : 'Enable'}}
+      </AntButton>
+    </p>
   </div>
 </template>
 <script>
-import { Checkbox } from 'antd'
+import { Checkbox, Button } from 'antd'
 export default {
+  data () {
+    return {
+      checked: true,
+      disabled: false,
+    }
+  },
+  computed: {
+    label () {
+      const { checked, disabled } = this
+      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
+    },
+  },
   methods: {
+    toggleChecked () {
+      this.checked = !this.checked
+    },
+    toggleDisable () {
+      this.disabled = !this.disabled
+    },
     onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
+      this.checked = e.target.checked
     },
   },
   components: {
     Checkbox,
+    AntButton: Button,
   },
 }
 </script>

components/checkbox/demo/group.vue

@@ -4,7 +4,7 @@
     <br />
     <CheckboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
     <br />
-    <CheckboxGroup :options="options" :defaultValue="['Pear']" @change="onChange" />
+    <CheckboxGroup :options="options" :value="['Pear']" @change="onChange" />
     <br />
     <CheckboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
   </div>

components/checkbox/demo/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>CheckAll</h1>
+    <CheckAll />
+    <h1>Controller</h1>
+    <Controller />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>Group</h1>
+    <Group />
+    <h1>Layout</h1>
+    <Layout />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import CheckAll from './check-all'
+import Controller from './controller'
+import Disabled from './disabled'
+
+import Group from './group'
+import Layout from './layout'
+export default {
+  components: {
+    Basic,
+    CheckAll,
+    Disabled,
+    Controller,
+    Group,
+    Layout,
+  },
+}
+</script>

components/checkbox/demo/layout.vue

@@ -1,18 +1,27 @@
 <template>
-  <div>
-    <Checkbox @change="onChange">Checkbox</Checkbox>
-  </div>
+  <CheckboxGroup @change="onChange">
+    <Row>
+      <Col :span="8"><Checkbox value="A">A</Checkbox></Col>
+      <Col :span="8"><Checkbox value="B">B</Checkbox></Col>
+      <Col :span="8"><Checkbox value="C">C</Checkbox></Col>
+      <Col :span="8"><Checkbox value="D">D</Checkbox></Col>
+      <Col :span="8"><Checkbox value="E">E</Checkbox></Col>
+    </Row>
+  </CheckboxGroup>
 </template>
 <script>
-import { Checkbox } from 'antd'
+import { Checkbox, Row, Col } from 'antd'
 export default {
   methods: {
-    onChange (e) {
-      console.log(`checked = ${e.target.checked}`)
+    onChange (checkedValues) {
+      console.log('checked = ', checkedValues)
     },
   },
   components: {
     Checkbox,
+    Row,
+    Col,
+    CheckboxGroup: Checkbox.Group,
   },
 }
 </script>

components/index.js

@@ -11,3 +11,7 @@ export { default as Grid } from './grid'
 export { default as Rate } from './rate'
 
 export { default as ToolTip } from './tooltip'
+
+export { default as Row } from './grid/row'
+
+export { default as Col } from './grid/col'

components/style.js

@@ -2,3 +2,4 @@ import './button/style'
 import './icon/style'
 import './radio/style'
 import './checkbox/style'
+import './grid/style'