init

init

components/radio/index.js

@@ -0,0 +1,5 @@
+import Radio from './radio.vue';
+import RadioGroup from './radio-group.vue';
+
+Radio.Group = RadioGroup;
+export default Radio;

components/radio/radio-group.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-radio-group';
+
+    export default {
+        props: {
+            model: {
+                type: [String, Number],
+                default: ''
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+            type: {
+                validator (value) {
+                    return oneOf(value, ['button']);
+                }
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-${this.type}`]: !!this.type
+                    }
+                ]
+            }
+        },
+        compiled () {
+            this.updateModel();
+        },
+        methods: {
+            updateModel () {
+                const model = this.model;
+                this.$children.forEach((child) => {
+                    child.selected = model == child.value;
+                    child.group = true;
+                });
+            },
+            change (data) {
+                this.model = data.value;
+                this.updateModel();
+                this.$emit('on-change', data.value);
+            }
+        },
+        watch: {
+            model () {
+                this.updateModel()
+            }
+        }
+    }
+</script>

components/radio/radio.vue

@@ -0,0 +1,96 @@
+<template>
+    <label :class="wrapClasses">
+        <span :class="radioClasses">
+            <span :class="innerClasses"></span>
+            <input
+                type="radio"
+                :class="inputClasses"
+                :disabled="disabled"
+                :checked="selected"
+                @change="change">
+        </span>
+        <slot>{{ value }}</slot>
+    </label>
+</template>
+<script>
+    const prefixCls = 'ivu-radio';
+
+    export default {
+        props: {
+            checked: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: [String, Number]
+            }
+        },
+        data () {
+            return {
+                selected: false,
+                group: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-group-item`]: this.group,
+                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-disabled`]: this.disabled
+                    }
+                ]
+            },
+            radioClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            },
+            inputClasses () {
+                return `${prefixCls}-input`;
+            }
+        },
+        ready () {
+            if (!this.group) {
+                this.updateModel();
+            }
+        },
+        methods: {
+            change (event) {
+                if (this.disabled) {
+                    return false;
+                }
+
+                this.selected = event.target.checked;
+                this.checked = this.selected;
+
+                if (this.group && this.checked) {
+                    this.$parent.change({
+                        value: this.value,
+                        checked: this.checked
+                    });
+                }
+            },
+            updateModel () {
+                this.selected = this.checked;
+            }
+        },
+        watch: {
+            checked () {
+                this.updateModel();
+            }
+        }
+    }
+</script>