Initial Release

Author: jogeshpi03

README.md

@@ -1,6 +1,19 @@
-# vue-toggle-button
+# Vue Toggle Button
+
+![Vue Toggle Button](./screenshot.png?raw=true "Vue Toggle Button")
+
+## Table of contents
+---
+- [Getting started](#getting-started)
+- [Usage](#usage)
+- [Options](#options)
+    - [Handle Event](#handle-event)
+    - [Custom Label](#custom-label)
+    - [Default State](#default-state)
+    - [Disable Button](#disable-button)
+
+## Getting started
 
-## Project setup
 ```
 npm install
 ```
@@ -10,15 +23,76 @@ npm install
 npm run serve
 ```
 
-### Compiles and minifies for production
+## Usage
+```js
+<template>
+    <div>
+        <ToggleButton id="switch" />
+    </div>
+</template>
+
+<script>
+import ToggleButton from './components/ToggleButton.vue'
+
+export default {
+    components: {
+        ToggleButton
+    }
+}
+</script>
 ```
-npm run build
+
+## Options
+
+### Handle Event
+```js
+<template>
+    <div>
+        <ToggleButton 
+            id="switch"
+            v-on:change="eventHandler"
+        />
+    </div>
+</template>
+
+<script>
+import ToggleButton from './components/ToggleButton.vue'
+
+export default {
+    components: {
+        ToggleButton
+    },
+
+    methods: {
+        eventHandler(value) {
+            console.log(value);
+        }
+    }
+}
+</script>
 ```
 
-### Lints and fixes files
+### Custom Label
+```html
+<ToggleButton 
+    id="switch"
+    labelEnableText="Live"
+    labelDisableText="Draft"
+/>
 ```
-npm run lint
+
+### Default State
+```html
+<ToggleButton 
+    id="switch"
+    :defaultState="true"
+/>
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Disable Button
+```html
+<ToggleButton 
+    id="switch"
+    :disabled="true"
+/>
+```

screenshot.png

@@ -1,17 +1,51 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div class="box">
+      <p><strong>Basic Toggle Button</strong></p>
+      <ToggleButton />
+    </div>
+    <div class="box">
+      <p><strong>Another Toggle Button with default state</strong></p>
+      <ToggleButton id="secondary" :defaultState="true" />
+    </div>
+    <div class="box">
+      <p><strong>Handle Event</strong></p>
+      <div :class="{'active': active}" class="toggle_container">
+        <ToggleButton id="event_handle" v-on:change="triggerEvent" />
+      </div>
+    </div>
+    <div class="box">
+      <p><strong>Custom Label Example</strong></p>
+      <ToggleButton id="label_example" labelEnableText="True" labelDisableText="False" />
+    </div>
+    <div class="box">
+      <p><strong>Disabled Example</strong></p>
+      <ToggleButton id="disabled_example" :disabled="true" />
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import ToggleButton from './components/ToggleButton.vue'
 
 export default {
   name: 'App',
+
   components: {
-    HelloWorld
+    ToggleButton
+  },
+
+  data() {
+    return {
+      active: false
+    }
+  },
+
+  methods: {
+    triggerEvent(value) {
+      this.active = value;
+    }
   }
 }
 </script>
@@ -25,4 +59,21 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.box {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.toggle_container {
+    margin: 0px auto;
+    background: #efefef;
+    width: 120px;
+    padding: 10px 0;
+    border-radius: 30px;
+    transition: all .25s;
+}
+.toggle_container.active {
+    background: #e9ffef;
+}
 </style>

src/App.vue

@@ -0,0 +1,136 @@
+<template>
+    <label :for="id + '_button'" :class="{'active': isActive}" class="toggle__button">
+        <span v-if="isActive" class="toggle__label">{{ enableText }}</span>
+        <span v-if="! isActive" class="toggle__label">{{ disabledText }}</span>
+
+        <input type="checkbox" :disabled="disabled" :id="id + '_button'" v-model="checkedValue">
+        <span class="toggle__switch"></span>
+    </label>
+</template>
+
+<script>
+export default {
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+
+        labelEnableText: {
+            type: String,
+            default: 'On'
+        },
+        
+        labelDisableText: {
+            type: String,
+            default: 'Off'
+        },
+
+        id: {
+            type: String,
+            default: 'primary'
+        }, 
+
+        defaultState: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    data() {
+        return {
+            currentState: this.defaultState
+        }
+    },
+
+    computed: {
+        isActive() {
+            return this.currentState;
+        },
+
+        enableText() {
+            return this.labelEnableText;
+        },
+
+        disabledText() {
+            return this.labelDisableText;
+        },
+
+        checkedValue: {
+            get() {
+                return this.defaultState;
+            },
+
+            set(newValue) {
+                this.currentState = newValue;
+                this.$emit('change', newValue);
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.toggle__button {
+    vertical-align: middle;
+    user-select: none;
+    cursor: pointer;
+}
+.toggle__button input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+}
+.toggle__button .toggle__switch {
+    display:inline-block;
+    height:12px;
+    border-radius:6px;
+    width:40px;
+    background: #BFCBD9;
+    box-shadow: inset 0 0 1px #BFCBD9;
+    position:relative;
+    margin-left: 10px;
+    transition: all .25s;
+}
+
+.toggle__button .toggle__switch::after, 
+.toggle__button .toggle__switch::before {
+    content: "";
+    position: absolute;
+    display: block;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    left: 0;
+    top: -3px;
+    transform: translateX(0);
+    transition: all .25s cubic-bezier(.5, -.6, .5, 1.6);
+}
+
+.toggle__button .toggle__switch::after {
+    background: #4D4D4D;
+    box-shadow: 0 0 1px #666;
+}
+.toggle__button .toggle__switch::before {
+    background: #4D4D4D;
+    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
+    opacity:0;
+}
+
+.active .toggle__switch {
+    background: #adedcb;
+    box-shadow: inset 0 0 1px #adedcb;
+}
+
+.active .toggle__switch::after,
+.active .toggle__switch::before{
+    transform:translateX(40px - 18px);
+}
+
+.active .toggle__switch::after {
+    left: 23px;
+    background: #53B883;
+    box-shadow: 0 0 1px #53B883;
+}
+</style>