Merge pull request #2882 from iview/pr/2867

Pr/2867

src/components/radio/radio-group.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes">
+    <div :class="classes" :name="name">
         <slot></slot>
     </div>
 </template>
@@ -9,6 +9,10 @@
 
     const prefixCls = 'ivu-radio-group';
 
+    let seed = 0;
+    const now = Date.now();
+    const getUuid = () => `ivuRadioGroup_${now}_${seed++}`;
+
     export default {
         name: 'RadioGroup',
         mixins: [ Emitter ],
@@ -30,6 +34,10 @@
             vertical: {
                 type: Boolean,
                 default: false
+            },
+            name: {
+                type: String,
+                default: getUuid
             }
         },
         data () {
@@ -56,12 +64,10 @@
         },
         methods: {
             updateValue () {
-                const value = this.value;
                 this.childrens = findComponentsDownward(this, 'Radio');
-
                 if (this.childrens) {
                     this.childrens.forEach(child => {
-                        child.currentValue = value == child.label;
+                        child.currentValue = this.value === child.label;
                         child.group = true;
                     });
                 }
@@ -76,6 +82,7 @@
         },
         watch: {
             value () {
+                this.currentValue = this.value;
                 this.updateValue();
             }
         }

src/components/radio/radio.vue

@@ -1,20 +1,18 @@
 <template>
-    <label
-        :class="wrapClasses"
-        :tabindex="disabled ? -1 : 0"
-        @keyup.space="change">
+    <label :class="wrapClasses">
         <span :class="radioClasses">
             <span :class="innerClasses"></span>
             <input
                 type="radio"
-                tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
-                :name="name"
+                :name="groupName"
                 @change="change"
-            >
-        </span><slot>{{ label }}</slot>
+                @focus="onFocus"
+                @blur="onBlur">
+        </span>
+        <slot>{{ label }}</slot>
     </label>
 </template>
 <script>
@@ -59,7 +57,10 @@
             return {
                 currentValue: this.value,
                 group: false,
-                parent: findComponentUpward(this, 'RadioGroup')
+                groupName: this.name,
+                parent: findComponentUpward(this, 'RadioGroup'),
+                focusWrapper: false,
+                focusInner: false
             };
         },
         computed: {
@@ -70,7 +71,8 @@
                         [`${prefixCls}-group-item`]: this.group,
                         [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled,
-                        [`${prefixCls}-${this.size}`]: !!this.size
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-focus`]: this.focusWrapper
                     }
                 ];
             },
@@ -84,18 +86,35 @@
                 ];
             },
             innerClasses () {
-                return `${prefixCls}-inner`;
+                return [
+                    `${prefixCls}-inner`,
+                    {
+                        [`${prefixCls}-focus`]: this.focusInner
+                    }
+                ];
             },
             inputClasses () {
                 return `${prefixCls}-input`;
             }
         },
         mounted () {
-            if (this.parent) this.group = true;
-            if (!this.group) {
-                this.updateValue();
-            } else {
+            if (this.parent) {
+                this.group = true;
+                if (this.name && this.name !== this.parent.name) {
+                    /* eslint-disable no-console */
+                    if (console.warn) {
+                        console.warn('[iview] Name does not match Radio Group name.');
+                    }
+                    /* eslint-enable no-console */
+                } else {
+                    this.groupName = this.parent.name; 
+                }
+            }
+
+            if (this.group) {
                 this.parent.updateValue();
+            } else {
+                this.updateValue();
             }
         },
         methods: {
@@ -107,30 +126,43 @@
                 const checked = event.target.checked;
                 this.currentValue = checked;
 
-                let value = checked ? this.trueValue : this.falseValue;
+                const value = checked ? this.trueValue : this.falseValue;
                 this.$emit('input', value);
 
-                if (this.group && this.label !== undefined) {
-                    this.parent.change({
-                        value: this.label,
-                        checked: this.value
-                    });
-                }
-                if (!this.group) {
+                if (this.group) {
+                    if (this.label !== undefined) {
+                        this.parent.change({
+                            value: this.label,
+                            checked: this.value
+                        });
+                    }
+                } else {
                     this.$emit('on-change', value);
                     this.dispatch('FormItem', 'on-form-change', value);
                 }
             },
             updateValue () {
                 this.currentValue = this.value === this.trueValue;
+            },
+            onBlur () {
+                this.focusWrapper = false;
+                this.focusInner = false;
+            },
+            onFocus () {
+                if (this.group && this.parent.type === 'button') {
+                    this.focusWrapper = true;
+                } else {
+                    this.focusInner = true;
+                }
             }
         },
         watch: {
             value (val) {
-                if (val !== this.trueValue && val !== this.falseValue) {
+                if (val === this.trueValue || val === this.falseValue) {
+                    this.updateValue();
+                } else {
                     throw 'Value should be trueValue or falseValue.';
                 }
-                this.updateValue();
             }
         }
     };