Adapting components to work with v-model

mariomka · Jun 7, 2017 · bb3de47 · bb3de47
1 parent 48b4b2b
commit bb3de47
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -70,28 +70,43 @@ Vue.component('radio', Radio);
 
 ## Params
 
+### Checkbox
+
 Parameter | Type | Default
 --------- | ---- | ------
-id | `string` | (checkbox/radio)-id-(element uid)
+id | `string` | checkbox-id-(element uid)
+class-name | `string` | `null`
 name | `string` | `null`
+v-model | `String | Array` | `undefined`
 value | `string` | `null`
+checked | `boolean` | `false`
+required | `boolean` | `false`
+
+### Radio
+
+Parameter | Type | Default
+--------- | ---- | ------
+id | `string` | radio-id-(element uid)
 class-name | `string` | `null`
+name | `string` | `null`
+v-model | `String` | `undefined`
+value | `string` | `null`
 checked | `boolean` | `false`
 required | `boolean` | `false`
 
 ## Events
 
-Both components emit `change` event.
+Both components emit the `input` event to work with `v-model`.
 
 ## Full example
 
 ```html
 <checkbox
     id="input-terms"
+    class-name="terms"
     name="terms"
     value="1"
-    class-name="terms"
-    @change="someMethod"
+    v-model="model"
     checked
     required>
     I agree to the <a href="#">terms of service</a>

diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
@@ -53,7 +53,7 @@
                :class="className"
                :required="required"
                @change="onChange"
-               ref="input">
+               :checked="state">
         <label :for="id">
             <span class="input-box">
                 <svg class="input-box-tick" viewBox="0 0 16 16">
@@ -67,6 +67,11 @@
 
 <script>
     export default {
+        model: {
+            prop: 'modelValue',
+            event: 'input'
+        },
+
         props: {
             id: {
                 type: String,
@@ -82,6 +87,10 @@
                 type: String,
                 default: null,
             },
+            modelValue: {
+                type: String | Array,
+                default: undefined,
+            },
             className: {
                 type: String,
                 default: null,
@@ -94,22 +103,59 @@
                 type: Boolean,
                 default: false,
             },
+            model: {}
         },
 
-        watch: {
-            checked(value) {
-                this.$refs.input.checked = value;
-            }
-        },
+        computed: {
+            state () {
+                if (this.modelValue === undefined) {
+                    return this.checked;
+                }
 
-        mounted() {
-            this.$refs.input.checked = this.checked;
+                if (Array.isArray(this.modelValue)) {
+                    return this.modelValue.indexOf(this.value) > -1;
+                }
+
+                return !!this.modelValue;
+            }
         },
 
         methods: {
-            onChange(event) {
-                this.$emit('change', event);
+            onChange() {
+                this.toggle();
             },
+
+            toggle() {
+                let value;
+
+                if (Array.isArray(this.modelValue)) {
+                    value = this.modelValue.slice(0);
+
+                    if (this.state) {
+                        value.splice(value.indexOf(this.value), 1);
+                    } else {
+                        value.push(this.value);
+                    }
+                } else {
+                    value = !this.state;
+                }
+
+                this.$emit('input', value);
+            }
+        },
+
+        watch: {
+            checked(newValue) {
+                if (newValue !== this.state) {
+                    this.toggle();
+                }
+            }
+        },
+
+        mounted() {
+            if (this.checked && !this.state) {
+                this.toggle();
+            }
         },
     };
 </script>
diff --git a/src/components/Radio.vue b/src/components/Radio.vue
@@ -52,7 +52,7 @@
                :class="className"
                :required="required"
                @change="onChange"
-               ref="input">
+               :checked="state">
         <label :for="id">
             <span class="input-box">
                 <span class="input-box-circle"></span>
@@ -64,6 +64,11 @@
 
 <script>
     export default {
+        model: {
+            prop: 'modelValue',
+            event: 'input'
+        },
+
         props: {
             id: {
                 type: String,
@@ -77,7 +82,11 @@
             },
             value: {
                 type: String,
-                default: null,
+                default: '',
+            },
+            modelValue: {
+                type: String,
+                default: undefined,
             },
             className: {
                 type: String,
@@ -91,22 +100,41 @@
                 type: Boolean,
                 default: false,
             },
+            model: {}
         },
 
-        watch: {
-            checked(value) {
-                this.$refs.input.checked = value;
-            }
-        },
+        computed: {
+            state () {
+                if (this.modelValue === undefined) {
+                    return this.checked;
+                }
 
-        mounted() {
-            this.$refs.input.checked = this.checked;
+                return this.modelValue === this.value;
+            }
         },
 
         methods: {
-            onChange(event) {
-                this.$emit('change', event);
+            onChange() {
+                this.toggle();
             },
+
+            toggle() {
+                this.$emit('input', this.state ? '' : this.value);
+            }
+        },
+
+        watch: {
+            checked(newValue) {
+                if (newValue !== this.state) {
+                    this.toggle();
+                }
+            }
+        },
+
+        mounted() {
+            if (this.checked && !this.state) {
+                this.toggle();
+            }
         },
     }
 </script>