Merge branch 'master' into hotfix/switch_loading_fix

packages/radio/src/radio-group.vue

@@ -9,7 +9,14 @@ export default {
   name: 'z-radio-group',
 
   props: {
-    value: [String, Number]
+    value: {},
+    disabled: Boolean
+  },
+
+  watch: {
+    value(value) {
+      this.$emit('change', value);
+    }
   }
 };
 </script>

packages/radio/src/radio.vue

@@ -2,11 +2,20 @@
   <div
     class="z-radio"
     :class="{
-      'is-disabled': disabled
+      'is-disabled': isDisabled
     }">
     <span class="z-radio__input">
-      <input type="radio" class="z-radio__control">
-      <span class="z-radio__circle"></span>
+      <input
+        :value="name"
+        v-model="currentValue"
+        type="radio"
+        class="z-radio__control"
+        :disabled="isDisabled">
+      <span class="zui-icon" :class="{
+        'zui-icon-checked': currentValue === name,
+        'zui-icon-check': currentValue !== name
+      }">
+      </span>
     </span>
     <span class="z-radio__label">
       <slot></slot>
@@ -21,35 +30,50 @@ export default {
   props: {
     disabled: Boolean,
     value: {},
-    parentGroup: null
+    name: [String, Number]
   },
 
   computed: {
     isGroup() {
-      let parent = this.$parent;
-      while (parent) {
-        if (parent.$options.name === 'z-radio-group') {
-          this.parentGroup = parent;
-          return true;
-        } else {
-          parent = parent.$parent;
-        }
-      }
-      return false;
+      return !!this.findRadioGroup()
     },
 
-    model: {
+    currentValue: {
       get() {
         return this.isGroup ? this.parentGroup.value : this.value;
       },
 
       set(val) {
         if (this.isGroup) {
-
+          this.parentGroup.$emit('input', val);
         } else {
           this.$emit('input', val);
         }
       }
+    },
+
+    isDisabled() {
+      return this.isGroup
+          ? this.parentGroup.disabled || this.disabled
+          : this.disabled;
+    }
+  },
+
+  methods: {
+    findRadioGroup() {
+      if (this.parentGroup) return;
+
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.name === 'z-radio-group') {
+          this.parentGroup = parent;
+          break;
+        } else {
+          parent = parent.$parent;
+        }
+      }
+
+      return this.parentGroup;
     }
   }
 };

packages/zanui-css/src/radio.css

@@ -1,5 +1,46 @@
+@import "./common/var.css";
+
 @component-namespace z {
   @b radio {
+    margin: 10px 0;
 
+    @when disabled {
+      .zui-icon {
+        color: #d1dbe5;
+      }
+    }
+
+    @e input {
+      position: relative;
+      height: 22px;
+      margin-right: 15px;
+    }
+
+    @e control {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 22px;
+      height: 22px;
+      opacity: 0;
+      margin: 0;
+    }
+
+    @e label {
+      line-height: 22px;
+    }
+
+    .zui-icon {
+      font-size: 22px;
+      line-height: 1;
+    }
+
+    .zui-icon-checked {
+      color: $c-green;
+    }
+
+    .zui-icon-check {
+      color: $c-gray-dark;
+    }
   }
 }