From 91f2bd4033873a9d929b4ab0a5406b53914ede9a Mon Sep 17 00:00:00 2001
From: Domantas Petrauskas <domantas.pet@gmail.com>
Date: Sun, 24 Feb 2019 15:32:18 +0200
Subject: [PATCH] Add margin prop (#99)

---
 README.md         |  1 +
 demo/src/App.vue  |  7 ++++++-
 dist/index.js     | 12 ++++++++----
 dist/ssr.index.js | 12 ++++++++----
 src/Button.vue    | 16 ++++++++--------
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index c8e7a12..5182037 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ Vue.component('ToggleButton', ToggleButton)
 | switch-color     | [String, Object]  | `#BFCBD9`  | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
 | width           | Number            | 50         | Width of the button |
 | height          | Number            | 22         | Height of the button |
+| margin          | Number            | 3          | Space between the switch and background border |
 | name            | String            | undefined  | Name to attach to the generated input field |
 | font-size        | Number            | undefined  | Font size |
 
diff --git a/demo/src/App.vue b/demo/src/App.vue
index 6e4ff6b..414f58d 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -43,7 +43,7 @@
           :disabled="true"/>
 
         <toggle-button :value="true"
-          :labels="{checked: 'Button', unchecked: 'Collor'}"
+          :labels="{checked: 'Button', unchecked: 'Color'}"
           :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
           :width="80"
           :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>
@@ -63,6 +63,11 @@
           </template>
         </toggle-button>
 
+        <toggle-button
+          :value="true"
+          :width="80"
+          :labels="{checked: 'Custom', unchecked: 'Margin'}"
+          :margin="7"/>
       </div>
       <div style="padding-top: 20px;">
         <toggle-button
diff --git a/dist/index.js b/dist/index.js
index ac50cdb..0d92a38 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -206,6 +206,10 @@ var px = function px(v) {
       type: Number,
       default: 50
     },
+    margin: {
+      type: Number,
+      default: 3
+    },
     fontSize: {
       type: Number
     }
@@ -227,15 +231,15 @@ var px = function px(v) {
       };
     },
     buttonRadius: function buttonRadius() {
-      return this.height - MARGIN * 2;
+      return this.height - this.margin * 2;
     },
     distance: function distance() {
-      return px(this.width - this.height + MARGIN);
+      return px(this.width - this.height + this.margin);
     },
     buttonStyle: function buttonStyle() {
       var transition = 'transform ' + this.speed + 'ms';
 
-      var transform = this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null;
+      var transform = this.toggled ? 'translate3d(' + this.distance + ', ' + px(this.margin) + ', 0px)' : 'translate3d(' + px(this.margin) + ', ' + px(this.margin) + ', 0px)';
 
       var background = this.switchColor ? this.switchColorCurrent : null;
 
@@ -373,7 +377,7 @@ exports = module.exports = __webpack_require__(4)();
 
 
 // module
-exports.push([module.i, ".vue-js-switch[data-v-25adc6c0]{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;user-select:none;font-size:10px;cursor:pointer}.vue-js-switch .v-switch-input[data-v-25adc6c0]{opacity:0;position:absolute;width:1px;height:1px}.vue-js-switch .v-switch-label[data-v-25adc6c0]{position:absolute;top:0;font-weight:600;color:#fff;z-index:1}.vue-js-switch .v-switch-label.v-left[data-v-25adc6c0]{left:10px}.vue-js-switch .v-switch-label.v-right[data-v-25adc6c0]{right:10px}.vue-js-switch .v-switch-core[data-v-25adc6c0]{display:block;position:relative;box-sizing:border-box;outline:0;margin:0;transition:border-color .3s,background-color .3s;user-select:none}.vue-js-switch .v-switch-core .v-switch-button[data-v-25adc6c0]{display:block;position:absolute;overflow:hidden;top:0;left:0;transform:translate3d(3px,3px,0);border-radius:100%;background-color:#fff;z-index:2}.vue-js-switch.disabled[data-v-25adc6c0]{pointer-events:none;opacity:.6}", ""]);
+exports.push([module.i, ".vue-js-switch[data-v-25adc6c0]{display:inline-block;position:relative;vertical-align:middle;user-select:none;font-size:10px;cursor:pointer}.vue-js-switch .v-switch-input[data-v-25adc6c0]{opacity:0;position:absolute;width:1px;height:1px}.vue-js-switch .v-switch-label[data-v-25adc6c0]{position:absolute;top:0;font-weight:600;color:#fff;z-index:1}.vue-js-switch .v-switch-label.v-left[data-v-25adc6c0]{left:10px}.vue-js-switch .v-switch-label.v-right[data-v-25adc6c0]{right:10px}.vue-js-switch .v-switch-core[data-v-25adc6c0]{display:block;position:relative;box-sizing:border-box;outline:0;margin:0;transition:border-color .3s,background-color .3s;user-select:none}.vue-js-switch .v-switch-core .v-switch-button[data-v-25adc6c0]{display:block;position:absolute;overflow:hidden;top:0;left:0;border-radius:100%;background-color:#fff;z-index:2}.vue-js-switch.disabled[data-v-25adc6c0]{pointer-events:none;opacity:.6}", ""]);
 
 // exports
 
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index f49a4bc..df326f4 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -206,6 +206,10 @@ var px = function px(v) {
       type: Number,
       default: 50
     },
+    margin: {
+      type: Number,
+      default: 3
+    },
     fontSize: {
       type: Number
     }
@@ -227,15 +231,15 @@ var px = function px(v) {
       };
     },
     buttonRadius: function buttonRadius() {
-      return this.height - MARGIN * 2;
+      return this.height - this.margin * 2;
     },
     distance: function distance() {
-      return px(this.width - this.height + MARGIN);
+      return px(this.width - this.height + this.margin);
     },
     buttonStyle: function buttonStyle() {
       var transition = 'transform ' + this.speed + 'ms';
 
-      var transform = this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null;
+      var transform = this.toggled ? 'translate3d(' + this.distance + ', ' + px(this.margin) + ', 0px)' : 'translate3d(' + px(this.margin) + ', ' + px(this.margin) + ', 0px)';
 
       var background = this.switchColor ? this.switchColorCurrent : null;
 
@@ -373,7 +377,7 @@ exports = module.exports = __webpack_require__(4)();
 
 
 // module
-exports.push([module.i, ".vue-js-switch[data-v-25adc6c0]{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;user-select:none;font-size:10px;cursor:pointer}.vue-js-switch .v-switch-input[data-v-25adc6c0]{opacity:0;position:absolute;width:1px;height:1px}.vue-js-switch .v-switch-label[data-v-25adc6c0]{position:absolute;top:0;font-weight:600;color:#fff;z-index:1}.vue-js-switch .v-switch-label.v-left[data-v-25adc6c0]{left:10px}.vue-js-switch .v-switch-label.v-right[data-v-25adc6c0]{right:10px}.vue-js-switch .v-switch-core[data-v-25adc6c0]{display:block;position:relative;box-sizing:border-box;outline:0;margin:0;transition:border-color .3s,background-color .3s;user-select:none}.vue-js-switch .v-switch-core .v-switch-button[data-v-25adc6c0]{display:block;position:absolute;overflow:hidden;top:0;left:0;transform:translate3d(3px,3px,0);border-radius:100%;background-color:#fff;z-index:2}.vue-js-switch.disabled[data-v-25adc6c0]{pointer-events:none;opacity:.6}", ""]);
+exports.push([module.i, ".vue-js-switch[data-v-25adc6c0]{display:inline-block;position:relative;vertical-align:middle;user-select:none;font-size:10px;cursor:pointer}.vue-js-switch .v-switch-input[data-v-25adc6c0]{opacity:0;position:absolute;width:1px;height:1px}.vue-js-switch .v-switch-label[data-v-25adc6c0]{position:absolute;top:0;font-weight:600;color:#fff;z-index:1}.vue-js-switch .v-switch-label.v-left[data-v-25adc6c0]{left:10px}.vue-js-switch .v-switch-label.v-right[data-v-25adc6c0]{right:10px}.vue-js-switch .v-switch-core[data-v-25adc6c0]{display:block;position:relative;box-sizing:border-box;outline:0;margin:0;transition:border-color .3s,background-color .3s;user-select:none}.vue-js-switch .v-switch-core .v-switch-button[data-v-25adc6c0]{display:block;position:absolute;overflow:hidden;top:0;left:0;border-radius:100%;background-color:#fff;z-index:2}.vue-js-switch.disabled[data-v-25adc6c0]{pointer-events:none;opacity:.6}", ""]);
 
 // exports
 
diff --git a/src/Button.vue b/src/Button.vue
index 2417fb4..c546d5d 100644
--- a/src/Button.vue
+++ b/src/Button.vue
@@ -36,7 +36,6 @@ const DEFAULT_COLOR_UNCHECKED = '#bfcbd9'
 const DEFAULT_LABEL_CHECKED = 'on'
 const DEFAULT_LABEL_UNCHECKED = 'off'
 const DEFAULT_SWITCH_COLOR = '#fff'
-const MARGIN = 3
 
 const contains = (object, title) => 
   typeof object === 'object' && object.hasOwnProperty(title)
@@ -102,6 +101,10 @@ export default {
       type: Number,
       default: 50
     },
+    margin: {
+      type: Number,
+      default: 3
+    },
     fontSize: {
       type: Number
     }
@@ -125,19 +128,19 @@ export default {
     },
 
     buttonRadius () {
-      return this.height - MARGIN * 2;
+      return this.height - this.margin * 2;
     },
 
     distance () {
-      return px(this.width - this.height + MARGIN)
+      return px(this.width - this.height + this.margin)
     },
 
     buttonStyle () {
       const transition = `transform ${this.speed}ms`
 
       const transform = this.toggled
-        ? `translate3d(${this.distance}, 3px, 0px)`
-        : null
+        ? `translate3d(${this.distance}, ${px(this.margin)}, 0px)`
+        : `translate3d(${px(this.margin)}, ${px(this.margin)}, 0px)`
 
       const background = this.switchColor
         ? this.switchColorCurrent
@@ -264,12 +267,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$margin: 3px;
 
 .vue-js-switch {
   display: inline-block;
   position: relative;
-  overflow: hidden;
   vertical-align: middle;
   user-select: none;
   font-size: 10px;
@@ -317,7 +318,6 @@ $margin: 3px;
       top: 0;
       left: 0;
 
-      transform: translate3d($margin, $margin, 0);
       border-radius: 100%;
       background-color: #fff;
       z-index: 2;