From 937fc42e47011077f1ba697f8f88c95c83e3320d Mon Sep 17 00:00:00 2001
From: Denis Loshkarev <denisko.2012@gmail.com>
Date: Wed, 29 Nov 2017 15:40:35 +0200
Subject: [PATCH 1/2] Fix v-model sync

---
 src/Switch.vue | 120 ++++++++++++++++++++++++-------------------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/src/Switch.vue b/src/Switch.vue
index e36e87d..11d63d8 100644
--- a/src/Switch.vue
+++ b/src/Switch.vue
@@ -1,6 +1,6 @@
 <template>
     <label class="switch">
-        <input :class="classes" type="checkbox" :checked="checked" :name="name" :disabled="disabled" v-model="value">
+        <input :class="classes" type="checkbox" :checked="checked" :name="name" :disabled="disabled" v-model="checked">
         <span><slot></slot></span>
     </label>
 </template>
@@ -10,26 +10,26 @@
         props: {
             disabled: Boolean,
             classes: String,
-            checked: Boolean,
+            value: Boolean,
             name: String
         },
         data() {
             return {
-                value: null
+                checked: null
             }
         },
         beforeMount() {
-            this.value = this.checked
+            this.checked = this.value
         },
         mounted() {
-            this.$emit('input', this.value)
+            this.$emit('input', this.checked)
         },
         watch: {
-            value(val) {
+            checked(val) {
                 this.$emit('input', val)
             },
-            checked (val) {
-                this.value = val
+            value (val) {
+                this.checked = val
             }
         }
     }
@@ -37,57 +37,57 @@
 
 <style lang="scss">
     label.switch {
-        input[type="checkbox"] {
-            display: none;
-            &:checked {
-                + span {
-                    &:before {
-                        background-color: rgba(#007FEB, 0.5);
-                    }
-                    &:after {
-                        background-color: #007FEB;
-                        transform: translate(80%, -50%);
-                    }
-                }
-            }
-            + span {
-                position: relative;
-                display: inline-block;
-                cursor: pointer;
-                font-weight: 500;
-                text-align: left;
-                margin: 0px;
-                padding: 0px 44px;
-                &:before,
-                &:after {
-                    content: '';
-                    cursor: pointer;
-                    position: absolute;
-                    margin: 0;
-                    outline: 0;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    transition: all 200ms ease-out;
-                }
-                &:before {
-                    left: 1px;
-                    width: 34px;
-                    height: 14px;
-                    background-color: rgba(0, 0, 0, 0.2);
-                    border-radius: 8px;
-                }
-                &:after {
-                    left: 0;
-                    width: 20px;
-                    height: 20px;
-                    background-color: rgba(0, 0, 0, 0.5);
-                    border-radius: 50%;
-                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
-                }
-            }
-            &:checked + span &:after {
-                transform: translate(80%, -50%);
-            }
-        }
+    input[type="checkbox"] {
+        display: none;
+    &:checked {
+    + span {
+    &:before {
+         background-color: rgba(#007FEB, 0.5);
+     }
+    &:after {
+         background-color: #007FEB;
+         transform: translate(80%, -50%);
+     }
+    }
+    }
+    + span {
+          position: relative;
+          display: inline-block;
+          cursor: pointer;
+          font-weight: 500;
+          text-align: left;
+          margin: 0px;
+          padding: 0px 44px;
+    &:before,
+    &:after {
+         content: '';
+         cursor: pointer;
+         position: absolute;
+         margin: 0;
+         outline: 0;
+         top: 50%;
+         transform: translate(0, -50%);
+         transition: all 200ms ease-out;
+     }
+    &:before {
+         left: 1px;
+         width: 34px;
+         height: 14px;
+         background-color: rgba(0, 0, 0, 0.2);
+         border-radius: 8px;
+     }
+    &:after {
+         left: 0;
+         width: 20px;
+         height: 20px;
+         background-color: rgba(0, 0, 0, 0.5);
+         border-radius: 50%;
+         box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
+     }
+    }
+    &:checked + span &:after {
+         transform: translate(80%, -50%);
+     }
+    }
     }
 </style>

From 782defbb79984ff5b46372b26da578a38382c32d Mon Sep 17 00:00:00 2001
From: Denis Loshkarev <denisko.2012@gmail.com>
Date: Wed, 29 Nov 2017 15:42:08 +0200
Subject: [PATCH 2/2] Fix spacing

---
 src/Switch.vue | 104 ++++++++++++++++++++++++-------------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/Switch.vue b/src/Switch.vue
index 11d63d8..9db8e2e 100644
--- a/src/Switch.vue
+++ b/src/Switch.vue
@@ -37,57 +37,57 @@
 
 <style lang="scss">
     label.switch {
-    input[type="checkbox"] {
-        display: none;
-    &:checked {
-    + span {
-    &:before {
-         background-color: rgba(#007FEB, 0.5);
-     }
-    &:after {
-         background-color: #007FEB;
-         transform: translate(80%, -50%);
-     }
-    }
-    }
-    + span {
-          position: relative;
-          display: inline-block;
-          cursor: pointer;
-          font-weight: 500;
-          text-align: left;
-          margin: 0px;
-          padding: 0px 44px;
-    &:before,
-    &:after {
-         content: '';
-         cursor: pointer;
-         position: absolute;
-         margin: 0;
-         outline: 0;
-         top: 50%;
-         transform: translate(0, -50%);
-         transition: all 200ms ease-out;
-     }
-    &:before {
-         left: 1px;
-         width: 34px;
-         height: 14px;
-         background-color: rgba(0, 0, 0, 0.2);
-         border-radius: 8px;
-     }
-    &:after {
-         left: 0;
-         width: 20px;
-         height: 20px;
-         background-color: rgba(0, 0, 0, 0.5);
-         border-radius: 50%;
-         box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
-     }
-    }
-    &:checked + span &:after {
-         transform: translate(80%, -50%);
-     }
-    }
+        input[type="checkbox"] {
+            display: none;
+            &:checked {
+                + span {
+                    &:before {
+                        background-color: rgba(#007FEB, 0.5);
+                    }
+                    &:after {
+                        background-color: #007FEB;
+                        transform: translate(80%, -50%);
+                    }
+                }
+            }
+            + span {
+                position: relative;
+                display: inline-block;
+                cursor: pointer;
+                font-weight: 500;
+                text-align: left;
+                margin: 0px;
+                padding: 0px 44px;
+                &:before,
+                &:after {
+                    content: '';
+                    cursor: pointer;
+                    position: absolute;
+                    margin: 0;
+                    outline: 0;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    transition: all 200ms ease-out;
+                }
+                &:before {
+                    left: 1px;
+                    width: 34px;
+                    height: 14px;
+                    background-color: rgba(0, 0, 0, 0.2);
+                    border-radius: 8px;
+                }
+                &:after {
+                    left: 0;
+                    width: 20px;
+                    height: 20px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    border-radius: 50%;
+                    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .098), 0 1px 5px 0 rgba(0, 0, 0, .084);
+                }
+            }
+            &:checked + span &:after {
+                transform: translate(80%, -50%);
+            }
+        }
     }
 </style>