├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── toggle-btn.vue
└── toggle_btn.gif


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-toggle-btn
 2 | ## A Highly Customizable, easy-to-use elegant toggle/switch button component
 3 | 
 4 | ![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")
 5 | [![view on npm](http://img.shields.io/npm/v/vue-toggle-btn.svg?colorB=red)](https://www.npmjs.org/package/vue-toggle-btn)
 6 | 
 7 | ###### Demo
 8 | ![toggle-btn](https://github.com/JonathanDn/vue-toggle-btn/blob/master/toggle_btn.gif "Vue Toggle Btn")
 9 | 
10 | # Usage
11 | Install via NPM ```npm i vue-toggle-btn```
12 | 
13 | Then require in your project:
14 | ```js
15 | var VueToggleBtn = require('vue-toggle-btn');
16 | ```
17 | or ES6 syntax:
18 | ```js
19 | import VueToggleBtn from 'vue-toggle-btn';
20 | ```
21 | Then you can register the component globally:
22 | ```js
23 | Vue.component('vue-toggle-btn', VueToggleBtn);
24 | ```
25 | Or in your Vue component:
26 | ```js
27 | components: {
28 |   ToggleBtn
29 | }
30 | ```
31 | You can then use the following selector anywhere in your project:
32 | * To get up and running quick the package now supports rendering just the selector with default values
33 | ```html
34 | <vue-toggle-btn></vue-toggle-btn>
35 | ```
36 | ## Properties
37 | ```options``` is a full configuration object holding the toggle-button building blocks which are ```handle```,  ```track``` and ```isActive```
38 | 
39 | | property | Type  | Description |
40 | | --- | ---  | --- |
41 | | options | object | holds all toggle button style configurations |
42 | | isActive | false | holds the current boolean state of the button - can be `false` or `true` |
43 | | handle | object | holds all handle style configurations |
44 | | track | object | holds all track style configurations |
45 | 
46 | 
47 | ### handle
48 | | property | Type | Default | Description |
49 | | --- | --- | --- | --- |
50 | | diameter | number | 30 | Sets the handle diameter (the round button moving) |
51 | | color | string | ```#fff``` | Sets the handle color |
52 | | borderRadius | string | ```50%``` | Sets the handle border radius |
53 | 
54 | ### track
55 | | property | Type | Default | Description |
56 | | --- | --- | --- | --- |
57 | | width | number | 70 | Sets the track width |
58 | | height | number | 30 | Sets the track height |
59 | | color | string | ```#ccc``` | Sets the default track color |
60 | | activeColor | string | ```#2196F3``` | Sets the active status track color(after toggled) |
61 | | borderWidth | number | 0 | Sets the track border width |
62 | | borderRadius | string | ```34px``` | Sets the track border radius |
63 | 
64 | ### events
65 | | Event Name | Returns | Description |
66 | | --- | ---  | --- |
67 | | **setIsActive** | `isActive` | Clicking the toggle button emits an its current `isActive` boolean state |
68 | 
69 | Listening to the event e.g:
70 | ```html
71 | <vue-toggle-btn @isActive="myLocalSetterFunction($event)"></vue-toggle-btn>
72 | ```
73 | 
74 | Feedback would be much appreciated, questions, suggestions, issues are more than welcome.
75 | 
76 | ---
77 | 👨‍💻 Follow me on [Twitter](https://twitter.com/jodoron).
78 | 
79 | ### Donation
80 | If this project helped you reduce development time, you can buy me a cup of coffee :)
81 | 
82 | * Paypal - yonidn7@gmail.com
83 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-toggle-btn",
 3 |   "version": "0.1.2",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "peerDependencies": {
11 |     "vue": "^2.5.17"
12 |   },
13 |   "devDependencies": {
14 |     "@vue/cli-plugin-babel": "^3.0.3",
15 |     "@vue/cli-service": "^3.0.3",
16 |     "node-sass": "4.9.3",
17 |     "sass-loader": "7.1.0",
18 |     "vue-template-compiler": "^2.5.17"
19 |   },
20 |   "postcss": {
21 |     "plugins": {
22 |       "autoprefixer": {}
23 |     }
24 |   },
25 |   "browserslist": [
26 |     "> 1%",
27 |     "last 2 versions",
28 |     "not ie <= 8"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/toggle-btn.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<!--Binding css variables to use as height/width of :before -> the slider -->
  3 | 	<div class="toggle-slider" :style="getStyleObject">
  4 | 		<label class="switch">
  5 | 			<input v-model="isActive" type="checkbox" @click="setNewToggleState">
  6 | 			<span class="track">
  7 | 				<span class="handle"></span>
  8 | 			</span>
  9 | 		</label>
 10 | 	</div>
 11 | </template>
 12 | 
 13 | <script>
 14 | const PROP_KEYS = {
 15 | 	DIAMETER: 'diameter',
 16 | 	COLOR: 'color',
 17 | 	BORDER_RADIOUS: 'borderRadius',
 18 | 	BORDER_WIDTH: 'borderWidth',
 19 | 	WIDTH: 'width',
 20 | 	HEIGHT: 'height',
 21 | 	ACTIVE_COLOR: 'activeColor'
 22 | };
 23 | export default {
 24 | 	name: 'toggleButton',
 25 | 	props: ["options"],
 26 | 	data() {
 27 | 		return {
 28 | 			handle: {
 29 | 				diameter: 30, // optional
 30 | 				distance: 40, // optional
 31 | 				color: '#fff', // optional
 32 | 				borderRadius: "50%", // optional
 33 | 			},
 34 | 			track: {
 35 | 				color: '#ccc', // optional
 36 | 				width: 70, // optional
 37 | 				height: 30, // optional
 38 | 				activeColor: '#2196F3', // optional
 39 | 				borderWidth: 0, // optional
 40 | 				borderRadius: '34px', // optional
 41 | 			},
 42 | 			isActive: true,
 43 | 		}
 44 | 	},
 45 | 	computed: {
 46 | 		getHandleDistance: function() {
 47 | 			let handleDistance = 0;
 48 | 			if (this.options && this.options.handle && this.options.track) {
 49 | 				handleDistance = this.options.track.width - this.options.handle.diameter;
 50 | 			} else {
 51 | 				handleDistance = this.handle.distance;
 52 | 			}
 53 | 			return handleDistance;
 54 | 		},
 55 | 		getStyleObject: function(){
 56 | 			let styleObj = {
 57 | 				'--handle-diameter' : this.handle.diameter + 'px',
 58 | 				'--handle-color': this.handle.color,
 59 | 				'--handle-border-radius': this.handle.borderRadius,
 60 | 				'--handle-distance': this.getHandleDistance + 'px',
 61 | 				'--track-color': this.track.color,
 62 | 				'--track-width': this.track.width + 'px',
 63 | 				'--track-height': this.track.height + 'px',
 64 | 				'--track-active-color': this.track.activeColor,
 65 | 				'--track-border-width': this.track.borderWidth + 'px',
 66 | 				'--track-border-radius': this.track.borderRadius
 67 | 			};
 68 | 			return styleObj;
 69 | 		}
 70 | 	},
 71 | 	methods: {
 72 | 		setConfigData() {
 73 | 			if (!this.options) {
 74 | 				return;
 75 | 			}
 76 | 
 77 | 			if (this.options.handle) {
 78 | 				[
 79 | 					PROP_KEYS.COLOR,
 80 | 					PROP_KEYS.DIAMETER,
 81 | 					PROP_KEYS.BORDER_RADIOUS
 82 | 				].forEach(element => {
 83 | 					this.setBindedProp('handle', element);
 84 | 				});
 85 | 			}
 86 | 
 87 | 			if (this.options.track) {
 88 | 				// TODO - track border width, track border radius - 24.12.18
 89 | 				[
 90 | 					PROP_KEYS.COLOR,
 91 | 					PROP_KEYS.WIDTH,
 92 | 					PROP_KEYS.HEIGHT,
 93 | 					PROP_KEYS.ACTIVE_COLOR,
 94 | 					PROP_KEYS.BORDER_WIDTH,
 95 | 					PROP_KEYS.BORDER_RADIOUS
 96 | 				].forEach(element => {
 97 | 					this.setBindedProp('track', element);
 98 | 				});
 99 | 			}
100 | 
101 | 			if (this.options.isActive) {
102 | 				this.isActive = this.options.isActive;
103 | 			}
104 | 		},
105 | 		setBindedProp(key, propToBind) {
106 | 			if (this.option[key][propToBind]) {
107 | 				this[key][propToBind] = this.option[key][propToBind];
108 | 			}
109 | 		},
110 | 		setNewToggleState() {
111 | 			this.isActive = !this.isActive;
112 | 			this.$emit('setIsActive', this.isActive);
113 | 		}
114 | 	},
115 | 	created() {
116 | 		this.setConfigData();
117 | 	}
118 | }
119 | </script>
120 | 
121 | <style scoped lang="scss">
122 | .switch {
123 | 	position: relative;
124 | 	display: inline-block;
125 | 	width: var(--track-width);
126 | 	height: var(--track-height);
127 | 	input {
128 | 		display: none;
129 | 	}
130 | 	.track {
131 | 		display: flex;
132 | 		align-items: center;
133 | 		position: absolute;
134 | 		width: 100%;
135 | 		height: 100%;
136 | 		top: 0;
137 | 		left: 0;
138 | 		right: 0;
139 | 		bottom: 0;
140 | 		background-color: var(--track-color);
141 | 		cursor: pointer;
142 | 		border: var(--track-border-width) solid var(--track-color);
143 | 		border-radius: var(--track-border-radius);
144 | 		transition: .4s;
145 | 		.handle {
146 | 			display: flex;
147 | 			width: var(--handle-diameter);
148 | 			height: var(--handle-diameter);
149 | 			background-color: var(--handle-color);
150 | 			border-radius: var(--handle-border-radius);
151 | 			transition: .4s;
152 | 		}
153 | 	}
154 | 	input:checked+.track {
155 | 		background-color: var(--track-active-color);
156 | 		border: var(--track-border-width) solid var(--track-active-color);
157 | 	}
158 | 	input:focus+.track {
159 | 		box-shadow: 0 0 1px var(--track-active-color);
160 | 	}
161 | 	input:checked+.track>.handle {
162 | 		transform: translateX(var(--handle-distance));
163 | 	}
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------
/toggle_btn.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JonathanDn/vue-toggle-btn/b9ee4a17301295c131a7cdf05458636e294edd49/toggle_btn.gif


--------------------------------------------------------------------------------