Merge branch 'master' of https://github.com/vueComponent/ant-design

components/checkbox/Checkbox.vue

@@ -32,13 +32,13 @@ export default {
     prop: 'checked',
   },
   inject: {
-    context: { default: undefined },
+    checkboxGroupContext: { default: undefined },
   },
   data () {
-    const { context, checked, defaultChecked, value } = this
+    const { checkboxGroupContext, checked, defaultChecked, value } = this
     let stateChecked
-    if (context && context.checkedStatus) {
+    if (checkboxGroupContext && checkboxGroupContext.checkedStatus) {
-      stateChecked = context.checkedStatus.has(value)
+      stateChecked = checkboxGroupContext.checkedStatus.has(value)
     }
     return {
       stateChecked: stateChecked === undefined
@@ -72,8 +72,8 @@ export default {
     handleChange (event) {
       const targetChecked = event.target.checked
       this.$emit('input', targetChecked)
-      const { name, value, checked, context, stateChecked } = this
+      const { name, value, checked, checkboxGroupContext, stateChecked } = this
-      if ((checked === undefined && !context) || (context && context.value === undefined)) {
+      if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.value === undefined)) {
         this.stateChecked = targetChecked
       }
       const target = {
@@ -81,8 +81,8 @@ export default {
         value,
         checked: !stateChecked,
       }
-      if (this.context) {
+      if (this.checkboxGroupContext) {
-        this.context.handleChange({ target })
+        this.checkboxGroupContext.handleChange({ target })
       } else {
         this.$emit('change', {
           target,
@@ -100,7 +100,7 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
-    'context.checkedStatus': function (checkedStatus) {
+    'checkboxGroupContext.checkedStatus': function (checkedStatus) {
       this.stateChecked = checkedStatus.has(this.value)
     },
   },

components/checkbox/Group.vue

@@ -1,8 +1,9 @@
 <template>
   <div :class="`${prefixCls}`">
-    <Checkbox v-for="item in checkOptions" :key="item.value" :checked="checkedStatus.has(item.value)"
+    <Checkbox v-for="item in checkOptions" :key="item.value" :value="item.value" :disabled="item.disabled">
-      :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox>
+      {{item.label}}
-    <slot v-if="options.length === 0"></slot>
+    </Checkbox>
+    <slot v-if="checkOptions.length === 0"></slot>
   </div>
 </template>
 <script>
@@ -33,7 +34,7 @@ export default {
   },
   provide () {
     return {
-      context: this,
+      checkboxGroupContext: this,
     }
   },
   data () {

components/radio/Group.vue

@@ -1,8 +1,8 @@
 <template>
-  <div :class="`${prefixCls}`">
+  <div :class="classes">
-    <Radio v-for="item in options" :key="item.value" :checked="item.value === stateValue"
+    <Radio v-for="item in radioOptions" :key="item.value"
-      :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Radio>
+      :value="item.value" :disabled="item.disabled" :name="name">{{item.label}}</Radio>
-    <slot v-if="options.length === 0"></slot>
+    <slot v-if="radioOptions.length === 0"></slot>
   </div>
 </template>
 <script>
@@ -32,6 +32,8 @@ export default {
       default: () => [],
       type: Array,
     },
+    disabled: Boolean,
+    name: String,
   },
   data () {
     const { value, defaultValue } = this
@@ -42,17 +44,30 @@ export default {
   model: {
     prop: 'value',
   },
-  computed: {
+  provide () {
-
+    return {
+      radioGroupContext: this,
+    }
   },
-  created () {
+  computed: {
-    this.setChildRadio(this.$slots.default)
+    radioOptions () {
+      const { disabled } = this
+      return this.options.map(option => {
+        return typeof option === 'string'
+          ? { label: option, value: option }
+          : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
+      })
+    },
+    classes () {
+      const { prefixCls, size } = this
+      return {
+        [`${prefixCls}`]: true,
+        [`${prefixCls}-${size}`]: size,
+      }
+    },
   },
   methods: {
     handleChange (event) {
-      if (this.disabled) {
-        return false
-      }
       const target = event.target
       const { value: targetValue } = target
       if (this.value === undefined) {
@@ -61,29 +76,10 @@ export default {
       this.$emit('input', targetValue)
       this.$emit('change', event)
     },
-    setChildRadio (children = []) {
-      const { options, $slots, stateValue } = this
-      if (options.length === 0 && $slots.default) {
-        children.forEach(({ componentOptions = {}, children: newChildren }) => {
-          const { Ctor, propsData } = componentOptions
-          if (Ctor && Ctor.options.name === 'Radio') {
-            propsData.isGroup = true
-            propsData.onGroupChange = this.handleChange
-            propsData.checked = propsData.value === stateValue
-          } else {
-            this.setChildRadio(newChildren)
-          }
-        }, this)
-      }
-    },
-  },
-  beforeUpdate () {
-    this.setChildRadio(this.$slots.default)
   },
   watch: {
     value (val) {
       this.stateValue = val
-      this.setChildRadio(this.$slots.default)
     },
   },
   components: {

components/radio/Radio.vue

@@ -26,15 +26,23 @@ export default {
     isGroup: Boolean,
     value: [String, Number, Boolean],
     name: String,
-    onGroupChange: Function,
   },
   model: {
     prop: 'checked',
   },
+  inject: {
+    radioGroupContext: { default: undefined },
+  },
   data () {
-    const { checked, defaultChecked } = this
+    const { radioGroupContext, checked, defaultChecked, value } = this
+    let stateChecked
+    if (radioGroupContext && radioGroupContext.stateValue) {
+      stateChecked = radioGroupContext.stateValue === value
+    }
     return {
-      stateChecked: checked === undefined ? defaultChecked : checked,
+      stateChecked: stateChecked === undefined
+        ? checked === undefined ? defaultChecked : checked
+        : stateChecked,
     }
   },
   computed: {
@@ -61,27 +69,28 @@ export default {
   methods: {
     handleChange (event) {
       const targetChecked = event.target.checked
-      const { name, value, checked } = this
+      this.$emit('input', targetChecked)
-      if (checked === undefined) {
+      const { name, value, checked, radioGroupContext, stateChecked } = this
+      if ((checked === undefined && !radioGroupContext) || (radioGroupContext && radioGroupContext.value === undefined)) {
         this.stateChecked = targetChecked
       }
-      this.$emit('input', targetChecked)
       const target = {
         name,
         value,
-        checked: targetChecked,
+        checked: !stateChecked,
       }
-      this.$emit('change', {
+      if (this.radioGroupContext) {
-        target,
+        this.radioGroupContext.handleChange({ target })
-        stopPropagation () {
+      } else {
-          event.stopPropagation()
+        this.$emit('change', {
-        },
+          target,
-        preventDefault () {
+          stopPropagation () {
-          event.preventDefault()
+            event.stopPropagation()
-        },
+          },
-      })
+          preventDefault () {
-      if (this.isGroup) {
+            event.preventDefault()
-        this.onGroupChange({ target })
+          },
+        })
       }
     },
   },
@@ -89,6 +98,9 @@ export default {
     checked (val) {
       this.stateChecked = val
     },
+    'radioGroupContext.stateValue': function (stateValue) {
+      this.stateChecked = stateValue === this.value
+    },
   },
 }
 </script>

components/radio/demo/basic.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <Radio>Radio</Radio>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    Radio,
+  },
+}
+</script>

components/radio/demo/disabled.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
+    <br />
+    <Radio defaultChecked :disabled="disabled">Disabled</Radio>
+    <div :style="{ marginTop: 20 }">
+      <AntButton type="primary" @click="toggleDisabled">
+        Toggle disabled
+      </AntButton>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio, Button } from 'antd'
+export default {
+  data () {
+    return {
+      disabled: true,
+    }
+  },
+  methods: {
+    toggleDisabled () {
+      this.disabled = !this.disabled
+    },
+  },
+  components: {
+    Radio,
+    AntButton: Button,
+  },
+}
+</script>

components/radio/demo/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Basic</h1>
+    <Basic />
+    <h1>Disabled</h1>
+    <Disabled />
+    <h1>RadioButton</h1>
+    <RadioButton />
+    <h1>RadioGroupMore</h1>
+    <RadioGroupMore />
+    <h1>RadioGroupOptions</h1>
+    <RadioGroupOptions />
+    <h1>RadioGroupWithName</h1>
+    <RadioGroupWithName />
+    <h1>RadioGroup</h1>
+    <RadioGroup />
+    <h1>Size</h1>
+    <Size />
+  </div>
+</template>
+<script>
+import Basic from './basic'
+import Disabled from './disabled'
+import RadioButton from './radioButton'
+import RadioGroupMore from './radioGroup-more'
+import RadioGroupOptions from './radioGroup-options'
+import RadioGroupWithName from './radioGroup-with-name'
+import RadioGroup from './radioGroup'
+import Size from './size'
+export default {
+  components: {
+    Basic,
+    Disabled,
+    RadioButton,
+    RadioGroupMore,
+    RadioGroupOptions,
+    RadioGroupWithName,
+    RadioGroup,
+    Size,
+  },
+}
+</script>

components/radio/demo/radioButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <div>
+      <RadioGroup @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b" disabled>Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup disabled @change="onChange" defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  methods: {
+    onChange (e) {
+      console.log(`checked = ${e.target.value}`)
+    },
+  },
+  components: {
+    RadioButton: Radio.Button,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>

components/radio/demo/radioGroup-more.vue

@@ -0,0 +1,35 @@
+<template>
+  <RadioGroup @change="onChange" v-model="value">
+    <Radio :style="radioStyle" :value="1">Option A</Radio>
+    <Radio :style="radioStyle" :value="2">Option B</Radio>
+    <Radio :style="radioStyle" :value="3">Option C</Radio>
+    <Radio :style="radioStyle" :value="4">
+      More...
+      <Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
+    </Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  data () {
+    return {
+      value: 1,
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px',
+      },
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>

components/radio/demo/radioGroup-options.vue

@@ -0,0 +1,50 @@
+<template>
+<div>
+  <RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
+  <br />
+  <RadioGroup :options="options" @change="onChange2" v-model="value2" />
+  <br />
+  <RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
+</div>
+</template>
+<script>
+import { Radio } from 'antd'
+const plainOptions = ['Apple', 'Pear', 'Orange']
+const options = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange' },
+]
+const optionsWithDisabled = [
+  { label: 'Apple', value: 'Apple' },
+  { label: 'Pear', value: 'Pear' },
+  { label: 'Orange', value: 'Orange', disabled: false },
+]
+export default {
+  data () {
+    return {
+      plainOptions,
+      options,
+      optionsWithDisabled,
+      value1: 'Apple',
+      value2: 'Apple',
+      value3: 'Apple',
+    }
+  },
+  methods: {
+    onChange1 (e) {
+      console.log('radio1 checked', e.target.value)
+    },
+    onChange2 (e) {
+      console.log('radio2 checked', e.target.value)
+    },
+    onChange3 (e) {
+      console.log('radio3 checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>

components/radio/demo/radioGroup-with-name.vue

@@ -0,0 +1,17 @@
+<template>
+  <RadioGroup name="radioGroup" :defaultValue="1">
+    <Radio :value="1">A</Radio>
+    <Radio :value="2">B</Radio>
+    <Radio :value="3">C</Radio>
+    <Radio :value="4">D</Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>

components/radio/demo/radioGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <RadioGroup @change="onChange" v-model="value">
+    <Radio :value="1">A</Radio>
+    <Radio :value="2">B</Radio>
+    <Radio :value="3">C</Radio>
+    <Radio :value="4">D</Radio>
+  </RadioGroup>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  data () {
+    return {
+      value: 1,
+    }
+  },
+  methods: {
+    onChange (e) {
+      console.log('radio checked', e.target.value)
+    },
+  },
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>

components/radio/demo/size.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <div>
+      <RadioGroup defaultValue="a" size="large">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div :style="{ marginTop: 16 }">
+      <RadioGroup defaultValue="a" size="small">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+  </div>
+</template>
+<script>
+import { Radio } from 'antd'
+export default {
+  components: {
+    RadioButton: Radio.Button,
+    RadioGroup: Radio.Group,
+  },
+}
+</script>