init

init

components/checkbox/checkbox-group.vue

@@ -0,0 +1,51 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-checkbox-group';
+
+    export default {
+        props: {
+            model: {
+                type: Array,
+                default: []
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            }
+        },
+        compiled () {
+            this.updateModel(true);
+        },
+        methods: {
+            updateModel (update) {
+                const model = this.model;
+
+                this.$children.forEach((child) => {
+                    child.model = model;
+
+                    if (update) {
+                        child.selected = model.indexOf(child.value) >= 0;
+                        child.group = true;
+                    }
+                });
+            },
+            change (data) {
+                this.$emit('on-change', data);
+            }
+        },
+        watch: {
+            model (val, oldVal) {
+                if (val == oldVal) {
+                    this.updateModel();
+                } else {
+                    this.updateModel(true);
+                }
+            }
+        }
+    }
+</script>

components/checkbox/checkbox.vue

@@ -0,0 +1,104 @@
+<template>
+    <label :class="wrapClasses">
+        <span :class="checkboxClasses">
+            <span :class="innerClasses"></span>
+            <input
+                v-if="group"
+                type="checkbox"
+                :class="inputClasses"
+                :disabled="disabled"
+                :value="value"
+                v-model="model"
+                @change="change">
+            <input
+                v-if="!group"
+                type="checkbox"
+                :class="inputClasses"
+                :disabled="disabled"
+                v-model="checked"
+                @change="change">
+        </span>
+        <slot>{{ value }}</slot>
+    </label>
+</template>
+<script>
+    const prefixCls = 'ivu-checkbox';
+
+    export default {
+        props: {
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: [String, Number, Boolean]
+            },
+            checked: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                model: [],
+                selected: false,
+                group: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-group-item`]: this.group,
+                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-disabled`]: this.disabled
+                    }
+                ]
+            },
+            checkboxClasses () {
+                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;
+
+                if (this.group) {
+                    this.$parent.change(this.model);
+                } else {
+                    this.$emit('on-change', this.checked);
+                }
+            },
+            updateModel () {
+                this.selected = this.checked;
+            }
+        },
+        watch: {
+            checked () {
+                this.updateModel();
+            }
+        }
+    }
+</script>

components/checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox from './checkbox.vue';
+import CheckboxGroup from './checkbox-group.vue';
+
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;