├── .npmignore ├── index.d.ts ├── .babelrc ├── demo ├── .babelrc ├── src │ ├── main.js │ └── App.vue ├── package.json ├── index.html └── webpack.config.js ├── .gitignore ├── webpack.ssr.config.js ├── src ├── index.js ├── utils.js └── Button.vue ├── LICENSE ├── webpack.config.js ├── package.json ├── README.md └── dist ├── ssr.index.js └── index.js /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | .babelrc 3 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'vue-js-toggle-button' 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | demo/dist 6 | *.map 7 | package-lock.json 8 | .vscode -------------------------------------------------------------------------------- /webpack.ssr.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const merge = require('webpack-merge') 4 | const base = require('./webpack.config') 5 | 6 | module.exports = merge(base, { 7 | target: 'node', 8 | output: { 9 | filename: 'ssr.index.js' 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ToggleButton from './Button.vue' 2 | 3 | let installed = false 4 | 5 | export default { 6 | install(Vue) { 7 | if (installed) { 8 | return 9 | } 10 | 11 | Vue.component('ToggleButton', ToggleButton) 12 | installed = true 13 | } 14 | } 15 | 16 | export { 17 | ToggleButton 18 | } 19 | -------------------------------------------------------------------------------- /demo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import ToggleButton from 'plugin' 4 | import { library } from '@fortawesome/fontawesome-svg-core' 5 | import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons' 6 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 7 | 8 | library.add([faCheck, faTimes]) 9 | Vue.component('fa', FontAwesomeIcon) 10 | 11 | Vue.use(ToggleButton) 12 | 13 | new Vue({ 14 | el: '#app', 15 | render: h => h(App) 16 | }) 17 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export const isString = (value) => { 2 | return typeof value === 'string' 3 | } 4 | 5 | export const isBoolean = (value) => { 6 | return typeof value === 'boolean' 7 | } 8 | 9 | export const isObject = (value) => { 10 | return typeof value === 'object' 11 | } 12 | 13 | export const has = (object, key) => { 14 | return isObject(object) && object.hasOwnProperty(key) 15 | } 16 | 17 | export const get = (object, key, defaultValue) => { 18 | return has(object, key) ? object[key] : defaultValue 19 | } 20 | 21 | export const px = value => { 22 | return `${value}px` 23 | } 24 | 25 | export const translate3d = (x, y, z = '0px') => { 26 | return `translate3d(${x}, ${y}, ${z})` 27 | } -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 6 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 7 | }, 8 | "dependencies": { 9 | "vue": "^2.0.0" 10 | }, 11 | "devDependencies": { 12 | "babel-core": "^6.0.0", 13 | "babel-loader": "^6.0.0", 14 | "babel-preset-latest": "^6.0.0", 15 | "cross-env": "^3.0.0", 16 | "css-loader": "^0.25.0", 17 | "file-loader": "^0.9.0", 18 | "node-sass": "^4.5.0", 19 | "sass-loader": "^5.0.1", 20 | "vue-loader": "^11.1.4", 21 | "vue-template-compiler": "^2.2.1", 22 | "webpack": "^2.2.0", 23 | "webpack-dev-server": "^2.2.0", 24 | "@fortawesome/fontawesome-svg-core": "^1.2.8", 25 | "@fortawesome/free-solid-svg-icons": "^5.5.0", 26 | "@fortawesome/vue-fontawesome": "^0.1.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Yev Vlasenko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.resolve(__dirname, './dist'), 9 | publicPath: '/dist/', 10 | filename: 'index.js', 11 | library:'vue-js-toggle-button', 12 | libraryTarget: 'umd' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.vue$/, 18 | loader: 'vue-loader', 19 | options: { 20 | loaders: { 21 | 'scss': 'vue-style-loader!css-loader!sass-loader' 22 | } 23 | } 24 | }, 25 | { 26 | test: /\.js$/, 27 | loader: 'babel-loader', 28 | exclude: /node_modules/ 29 | } 30 | ] 31 | }, 32 | externals: { 33 | vue: 'vue' 34 | }, 35 | resolve: { 36 | alias: { 37 | 'vue$': 'vue/dist/vue.esm.js' 38 | } 39 | }, 40 | performance: { 41 | hints: false 42 | }, 43 | devtool: '#source-map', 44 | plugins: [ 45 | new webpack.LoaderOptionsPlugin({ 46 | minimize: true 47 | }), 48 | new OptimizeCSSPlugin({ 49 | cssProcessorOptions: { 50 | safe: true 51 | } 52 | }) 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue.js Toggle Button 6 | 7 | 16 | 17 | 18 |
19 | 25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-js-toggle-button", 3 | "description": "A toggle button component for Vue.js 2+", 4 | "version": "1.3.3", 5 | "author": "euvl ", 6 | "private": false, 7 | "scripts": { 8 | "build:client": "webpack --config ./webpack.config.js --progress --hide-modules", 9 | "build:ssr": "webpack --config ./webpack.ssr.config.js --progress --hide-modules", 10 | "build": "npm run build:client && npm run build:ssr" 11 | }, 12 | "main": "dist/index.js", 13 | "types": "index.d.ts", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/euvl/vue-js-toggle-button.git" 17 | }, 18 | "bugs": { 19 | "url": "https://github.com/euvl/vue-js-toggle-button/issues" 20 | }, 21 | "peerDependencies": { 22 | "vue": "^2.0.0" 23 | }, 24 | "keywords": [ 25 | "vue", 26 | "toggle", 27 | "switch", 28 | "button" 29 | ], 30 | "devDependencies": { 31 | "babel-core": "^6.0.0", 32 | "babel-loader": "^6.0.0", 33 | "babel-preset-latest": "^6.0.0", 34 | "css-loader": "^0.25.0", 35 | "file-loader": "^0.9.0", 36 | "node-sass": "^4.5.0", 37 | "optimize-css-assets-webpack-plugin": "^3.1.1", 38 | "sass-loader": "^5.0.1", 39 | "vue": "^2.0.0", 40 | "vue-loader": "^11.1.4", 41 | "vue-template-compiler": "^2.0.0", 42 | "webpack": "^2.2.0", 43 | "webpack-merge": "^4.1.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this necessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.esm.js', 44 | 'plugin': path.resolve(__dirname, "../dist/index.js") 45 | } 46 | }, 47 | devServer: { 48 | historyApiFallback: true, 49 | noInfo: true 50 | }, 51 | performance: { 52 | hints: false 53 | }, 54 | devtool: '#eval-source-map' 55 | } 56 | 57 | if (process.env.NODE_ENV === 'production') { 58 | module.exports.devtool = '#source-map' 59 | // http://vue-loader.vuejs.org/en/workflow/production.html 60 | module.exports.plugins = (module.exports.plugins || []).concat([ 61 | new webpack.DefinePlugin({ 62 | 'process.env': { 63 | NODE_ENV: '"production"' 64 | } 65 | }), 66 | new webpack.optimize.UglifyJsPlugin({ 67 | sourceMap: true, 68 | compress: { 69 | warnings: false 70 | } 71 | }), 72 | new webpack.LoaderOptionsPlugin({ 73 | minimize: true 74 | }) 75 | ]) 76 | } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | # Vue.js toggle/switch button. 8 | 9 |

10 | 11 | Get a coffee 15 | 16 |

17 | 18 |

19 | 20 |

21 | 22 | [Live demo here](http://vue-js-toggle-button.yev.io/) 23 | 24 | ### Install 25 | 26 | ```bash 27 | npm install vue-js-toggle-button --save 28 | ``` 29 | 30 | ### Import 31 | 32 | Import plugin: 33 | 34 | ```javascript 35 | import ToggleButton from 'vue-js-toggle-button' 36 | 37 | Vue.use(ToggleButton) 38 | ``` 39 | **OR** 40 | 41 | Import component: 42 | 43 | ```javascript 44 | import { ToggleButton } from 'vue-js-toggle-button' 45 | 46 | Vue.component('ToggleButton', ToggleButton) 47 | ``` 48 | 49 | ### Use 50 | 51 | ```xml 52 | 53 | 54 | 55 | 56 | 60 | 61 | 63 | ``` 64 | 65 | ### Properties 66 | 67 | | Name | Type | Default | Description | 68 | | --- | --- | --- | --- | 69 | | value | Boolean | false | Initial state of the toggle button | 70 | | sync | Boolean | false | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes | 71 | | speed | Number | 300 | Transition time for the animation | 72 | | disabled | Boolean | false | Button does not react on mouse events | 73 | | color | [String, Object] | `#75C791` | If `String` - color of the button when checked
If `Object` - colors for the button when checked/unchecked or disabled
Example: `{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}` | 74 | | css-colors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling | 75 | | labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off")
If `Object` - sets custom labels for both states.
Example: `{checked: 'Foo', unchecked: 'Bar'}` | 76 | | switch-color | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked
If `Object` - colors or background property for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` | 77 | | width | Number | 50 | Width of the button | 78 | | height | Number | 22 | Height of the button | 79 | | margin | Number | 3 | Space between the switch and background border | 80 | | name | String | undefined | Name to attach to the generated input field | 81 | | font-size | Number | undefined | Font size | 82 | 83 | ### Events 84 | 85 | | Name | Description | 86 | | --- | --- | 87 | | change | Triggered whenever state of the component changes.
Contains:
`value` - state of the object
`srcEvent` - source click event | 88 | | input | Input event for v-model | 89 | 90 | ### SSR 91 | 92 | Include plugin in your `nuxt.config.js` file: 93 | 94 | ```javascript 95 | module.exports = { 96 | plugins: ['~plugins/vue-js-toggle-button'] 97 | } 98 | ``` 99 | 100 | And your `plugins/vue-js-toggle-button.js` will look like: 101 | 102 | ```javascript 103 | import Vue from 'vue' 104 | import Button from 'vue-js-toggle-button' 105 | 106 | Vue.use(Button) 107 | ``` 108 | 109 | ### Browser compatibility 110 | 111 | * Chrome: 40+ 112 | * Firefox: 25+ 113 | * Safari: 10+ 114 | * IE: 11+ 115 | 116 | -------------------------------------------------------------------------------- /demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 100 | 101 | 133 | 134 | 174 | -------------------------------------------------------------------------------- /src/Button.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 263 | 264 | 328 | -------------------------------------------------------------------------------- /dist/ssr.index.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["vue-js-toggle-button"] = factory(); 8 | else 9 | root["vue-js-toggle-button"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = "/dist/"; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 2); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | 84 | /* styles */ 85 | __webpack_require__(8) 86 | 87 | var Component = __webpack_require__(6)( 88 | /* script */ 89 | __webpack_require__(1), 90 | /* template */ 91 | __webpack_require__(7), 92 | /* scopeId */ 93 | "data-v-25adc6c0", 94 | /* cssModules */ 95 | null 96 | ) 97 | 98 | module.exports = Component.exports 99 | 100 | 101 | /***/ }), 102 | /* 1 */ 103 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 104 | 105 | "use strict"; 106 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 107 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(3); 108 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 109 | 110 | // 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // 117 | // 118 | // 119 | // 120 | // 121 | // 122 | // 123 | // 124 | // 125 | // 126 | // 127 | // 128 | // 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | // 145 | // 146 | // 147 | // 148 | // 149 | // 150 | // 151 | // 152 | 153 | 154 | 155 | var DEFAULT_COLOR_CHECKED = '#75c791'; 156 | var DEFAULT_COLOR_UNCHECKED = '#bfcbd9'; 157 | var DEFAULT_LABEL_CHECKED = 'on'; 158 | var DEFAULT_LABEL_UNCHECKED = 'off'; 159 | var DEFAULT_SWITCH_COLOR = '#fff'; 160 | 161 | /* harmony default export */ __webpack_exports__["default"] = ({ 162 | name: 'ToggleButton', 163 | props: { 164 | value: { 165 | type: Boolean, 166 | default: false 167 | }, 168 | name: { 169 | type: String 170 | }, 171 | disabled: { 172 | type: Boolean, 173 | default: false 174 | }, 175 | tag: { 176 | type: String 177 | }, 178 | sync: { 179 | type: Boolean, 180 | default: false 181 | }, 182 | speed: { 183 | type: Number, 184 | default: 300 185 | }, 186 | color: { 187 | type: [String, Object], 188 | validator: function validator(value) { 189 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["a" /* isString */])(value) || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'checked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'unchecked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'disabled'); 190 | } 191 | }, 192 | switchColor: { 193 | type: [String, Object], 194 | validator: function validator(value) { 195 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["a" /* isString */])(value) || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'checked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'unchecked'); 196 | } 197 | }, 198 | cssColors: { 199 | type: Boolean, 200 | default: false 201 | }, 202 | labels: { 203 | type: [Boolean, Object], 204 | default: false, 205 | validator: function validator(value) { 206 | return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'boolean'; 207 | } 208 | }, 209 | height: { 210 | type: Number, 211 | default: 22 212 | }, 213 | width: { 214 | type: Number, 215 | default: 50 216 | }, 217 | margin: { 218 | type: Number, 219 | default: 3 220 | }, 221 | fontSize: { 222 | type: Number 223 | } 224 | }, 225 | computed: { 226 | className: function className() { 227 | var toggled = this.toggled, 228 | disabled = this.disabled; 229 | 230 | 231 | return ['vue-js-switch', { 232 | toggled: toggled, 233 | disabled: disabled 234 | }]; 235 | }, 236 | coreStyle: function coreStyle() { 237 | return { 238 | width: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.width), 239 | height: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.height), 240 | backgroundColor: this.cssColors ? null : this.disabled ? this.colorDisabled : this.colorCurrent, 241 | borderRadius: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(Math.round(this.height / 2)) 242 | }; 243 | }, 244 | buttonRadius: function buttonRadius() { 245 | return this.height - this.margin * 2; 246 | }, 247 | distance: function distance() { 248 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.width - this.height + this.margin); 249 | }, 250 | buttonStyle: function buttonStyle() { 251 | var transition = 'transform ' + this.speed + 'ms'; 252 | var margin = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.margin); 253 | 254 | var transform = this.toggled ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["d" /* translate3d */])(this.distance, margin) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["d" /* translate3d */])(margin, margin); 255 | 256 | var background = this.switchColor ? this.switchColorCurrent : null; 257 | 258 | return { 259 | width: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.buttonRadius), 260 | height: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.buttonRadius), 261 | transition: transition, 262 | transform: transform, 263 | background: background 264 | }; 265 | }, 266 | labelStyle: function labelStyle() { 267 | return { 268 | lineHeight: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.height), 269 | fontSize: this.fontSize ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.fontSize) : null 270 | }; 271 | }, 272 | colorChecked: function colorChecked() { 273 | var color = this.color; 274 | 275 | 276 | if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["e" /* isObject */])(color)) { 277 | return color || DEFAULT_COLOR_CHECKED; 278 | } 279 | 280 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(color, 'checked', DEFAULT_COLOR_CHECKED); 281 | }, 282 | colorUnchecked: function colorUnchecked() { 283 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.color, 'unchecked', DEFAULT_COLOR_UNCHECKED); 284 | }, 285 | colorDisabled: function colorDisabled() { 286 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.color, 'disabled', this.colorCurrent); 287 | }, 288 | colorCurrent: function colorCurrent() { 289 | return this.toggled ? this.colorChecked : this.colorUnchecked; 290 | }, 291 | labelChecked: function labelChecked() { 292 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.labels, 'checked', DEFAULT_LABEL_CHECKED); 293 | }, 294 | labelUnchecked: function labelUnchecked() { 295 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.labels, 'unchecked', DEFAULT_LABEL_UNCHECKED); 296 | }, 297 | switchColorChecked: function switchColorChecked() { 298 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.switchColor, 'checked', DEFAULT_SWITCH_COLOR); 299 | }, 300 | switchColorUnchecked: function switchColorUnchecked() { 301 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.switchColor, 'unchecked', DEFAULT_SWITCH_COLOR); 302 | }, 303 | switchColorCurrent: function switchColorCurrent() { 304 | var switchColor = this.switchColor; 305 | 306 | 307 | if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["e" /* isObject */])(this.switchColor)) { 308 | return this.switchColor || DEFAULT_SWITCH_COLOR; 309 | } 310 | 311 | return this.toggled ? this.switchColorChecked : this.switchColorUnchecked; 312 | } 313 | }, 314 | watch: { 315 | value: function value(_value) { 316 | if (this.sync) { 317 | this.toggled = !!_value; 318 | } 319 | } 320 | }, 321 | data: function data() { 322 | return { 323 | toggled: !!this.value 324 | }; 325 | }, 326 | 327 | methods: { 328 | toggle: function toggle(event) { 329 | var toggled = !this.toggled; 330 | 331 | if (!this.sync) { 332 | this.toggled = toggled; 333 | } 334 | 335 | this.$emit('input', toggled); 336 | this.$emit('change', { 337 | value: toggled, 338 | tag: this.tag, 339 | srcEvent: event 340 | }); 341 | } 342 | } 343 | }); 344 | 345 | /***/ }), 346 | /* 2 */ 347 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 348 | 349 | "use strict"; 350 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 351 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Button_vue__ = __webpack_require__(0); 352 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Button_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__Button_vue__); 353 | /* harmony reexport (default from non-hamory) */ __webpack_require__.d(__webpack_exports__, "ToggleButton", function() { return __WEBPACK_IMPORTED_MODULE_0__Button_vue___default.a; }); 354 | 355 | 356 | var installed = false; 357 | 358 | /* harmony default export */ __webpack_exports__["default"] = ({ 359 | install: function install(Vue) { 360 | if (installed) { 361 | return; 362 | } 363 | 364 | Vue.component('ToggleButton', __WEBPACK_IMPORTED_MODULE_0__Button_vue___default.a); 365 | installed = true; 366 | } 367 | }); 368 | 369 | 370 | 371 | /***/ }), 372 | /* 3 */ 373 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 374 | 375 | "use strict"; 376 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isString; }); 377 | /* unused harmony export isBoolean */ 378 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isObject; }); 379 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return has; }); 380 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return get; }); 381 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return px; }); 382 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return translate3d; }); 383 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 384 | 385 | var isString = function isString(value) { 386 | return typeof value === 'string'; 387 | }; 388 | 389 | var isBoolean = function isBoolean(value) { 390 | return typeof value === 'boolean'; 391 | }; 392 | 393 | var isObject = function isObject(value) { 394 | return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object'; 395 | }; 396 | 397 | var has = function has(object, key) { 398 | return isObject(object) && object.hasOwnProperty(key); 399 | }; 400 | 401 | var get = function get(object, key, defaultValue) { 402 | return has(object, key) ? object[key] : defaultValue; 403 | }; 404 | 405 | var px = function px(value) { 406 | return value + 'px'; 407 | }; 408 | 409 | var translate3d = function translate3d(x, y) { 410 | var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0px'; 411 | 412 | return 'translate3d(' + x + ', ' + y + ', ' + z + ')'; 413 | }; 414 | 415 | /***/ }), 416 | /* 4 */ 417 | /***/ (function(module, exports, __webpack_require__) { 418 | 419 | exports = module.exports = __webpack_require__(5)(); 420 | // imports 421 | 422 | 423 | // module 424 | 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}", ""]); 425 | 426 | // exports 427 | 428 | 429 | /***/ }), 430 | /* 5 */ 431 | /***/ (function(module, exports) { 432 | 433 | /* 434 | MIT License http://www.opensource.org/licenses/mit-license.php 435 | Author Tobias Koppers @sokra 436 | */ 437 | // css base code, injected by the css-loader 438 | module.exports = function() { 439 | var list = []; 440 | 441 | // return the list of modules as css string 442 | list.toString = function toString() { 443 | var result = []; 444 | for(var i = 0; i < this.length; i++) { 445 | var item = this[i]; 446 | if(item[2]) { 447 | result.push("@media " + item[2] + "{" + item[1] + "}"); 448 | } else { 449 | result.push(item[1]); 450 | } 451 | } 452 | return result.join(""); 453 | }; 454 | 455 | // import a list of modules into the list 456 | list.i = function(modules, mediaQuery) { 457 | if(typeof modules === "string") 458 | modules = [[null, modules, ""]]; 459 | var alreadyImportedModules = {}; 460 | for(var i = 0; i < this.length; i++) { 461 | var id = this[i][0]; 462 | if(typeof id === "number") 463 | alreadyImportedModules[id] = true; 464 | } 465 | for(i = 0; i < modules.length; i++) { 466 | var item = modules[i]; 467 | // skip already imported module 468 | // this implementation is not 100% perfect for weird media query combinations 469 | // when a module is imported multiple times with different media queries. 470 | // I hope this will never occur (Hey this way we have smaller bundles) 471 | if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { 472 | if(mediaQuery && !item[2]) { 473 | item[2] = mediaQuery; 474 | } else if(mediaQuery) { 475 | item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; 476 | } 477 | list.push(item); 478 | } 479 | } 480 | }; 481 | return list; 482 | }; 483 | 484 | 485 | /***/ }), 486 | /* 6 */ 487 | /***/ (function(module, exports) { 488 | 489 | // this module is a runtime utility for cleaner component module output and will 490 | // be included in the final webpack user bundle 491 | 492 | module.exports = function normalizeComponent ( 493 | rawScriptExports, 494 | compiledTemplate, 495 | scopeId, 496 | cssModules 497 | ) { 498 | var esModule 499 | var scriptExports = rawScriptExports = rawScriptExports || {} 500 | 501 | // ES6 modules interop 502 | var type = typeof rawScriptExports.default 503 | if (type === 'object' || type === 'function') { 504 | esModule = rawScriptExports 505 | scriptExports = rawScriptExports.default 506 | } 507 | 508 | // Vue.extend constructor export interop 509 | var options = typeof scriptExports === 'function' 510 | ? scriptExports.options 511 | : scriptExports 512 | 513 | // render functions 514 | if (compiledTemplate) { 515 | options.render = compiledTemplate.render 516 | options.staticRenderFns = compiledTemplate.staticRenderFns 517 | } 518 | 519 | // scopedId 520 | if (scopeId) { 521 | options._scopeId = scopeId 522 | } 523 | 524 | // inject cssModules 525 | if (cssModules) { 526 | var computed = Object.create(options.computed || null) 527 | Object.keys(cssModules).forEach(function (key) { 528 | var module = cssModules[key] 529 | computed[key] = function () { return module } 530 | }) 531 | options.computed = computed 532 | } 533 | 534 | return { 535 | esModule: esModule, 536 | exports: scriptExports, 537 | options: options 538 | } 539 | } 540 | 541 | 542 | /***/ }), 543 | /* 7 */ 544 | /***/ (function(module, exports) { 545 | 546 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 547 | return _c('label', { 548 | class: _vm.className 549 | }, [_c('input', { 550 | staticClass: "v-switch-input", 551 | attrs: { 552 | "type": "checkbox", 553 | "name": _vm.name, 554 | "disabled": _vm.disabled 555 | }, 556 | domProps: { 557 | "checked": _vm.value 558 | }, 559 | on: { 560 | "change": function($event) { 561 | $event.stopPropagation(); 562 | return _vm.toggle($event) 563 | } 564 | } 565 | }), _vm._v(" "), _c('div', { 566 | staticClass: "v-switch-core", 567 | style: (_vm.coreStyle) 568 | }, [_c('div', { 569 | staticClass: "v-switch-button", 570 | style: (_vm.buttonStyle) 571 | })]), _vm._v(" "), (_vm.labels) ? [(_vm.toggled) ? _c('span', { 572 | staticClass: "v-switch-label v-left", 573 | style: (_vm.labelStyle) 574 | }, [_vm._t("checked", [ 575 | [_vm._v(_vm._s(_vm.labelChecked))] 576 | ])], 2) : _c('span', { 577 | staticClass: "v-switch-label v-right", 578 | style: (_vm.labelStyle) 579 | }, [_vm._t("unchecked", [ 580 | [_vm._v(_vm._s(_vm.labelUnchecked))] 581 | ])], 2)] : _vm._e()], 2) 582 | },staticRenderFns: []} 583 | 584 | /***/ }), 585 | /* 8 */ 586 | /***/ (function(module, exports, __webpack_require__) { 587 | 588 | // style-loader: Adds some css to the DOM by adding a ' 677 | } 678 | return css 679 | } 680 | 681 | 682 | /***/ }), 683 | /* 10 */ 684 | /***/ (function(module, exports) { 685 | 686 | /** 687 | * Translates the list format produced by css-loader into something 688 | * easier to manipulate. 689 | */ 690 | module.exports = function listToStyles (parentId, list) { 691 | var styles = [] 692 | var newStyles = {} 693 | for (var i = 0; i < list.length; i++) { 694 | var item = list[i] 695 | var id = item[0] 696 | var css = item[1] 697 | var media = item[2] 698 | var sourceMap = item[3] 699 | var part = { 700 | id: parentId + ':' + i, 701 | css: css, 702 | media: media, 703 | sourceMap: sourceMap 704 | } 705 | if (!newStyles[id]) { 706 | styles.push(newStyles[id] = { id: id, parts: [part] }) 707 | } else { 708 | newStyles[id].parts.push(part) 709 | } 710 | } 711 | return styles 712 | } 713 | 714 | 715 | /***/ }) 716 | /******/ ]); 717 | }); 718 | //# sourceMappingURL=ssr.index.js.map -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(); 4 | else if(typeof define === 'function' && define.amd) 5 | define([], factory); 6 | else if(typeof exports === 'object') 7 | exports["vue-js-toggle-button"] = factory(); 8 | else 9 | root["vue-js-toggle-button"] = factory(); 10 | })(this, function() { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = "/dist/"; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 2); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | 84 | /* styles */ 85 | __webpack_require__(8) 86 | 87 | var Component = __webpack_require__(6)( 88 | /* script */ 89 | __webpack_require__(1), 90 | /* template */ 91 | __webpack_require__(7), 92 | /* scopeId */ 93 | "data-v-25adc6c0", 94 | /* cssModules */ 95 | null 96 | ) 97 | 98 | module.exports = Component.exports 99 | 100 | 101 | /***/ }), 102 | /* 1 */ 103 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 104 | 105 | "use strict"; 106 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 107 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(3); 108 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 109 | 110 | // 111 | // 112 | // 113 | // 114 | // 115 | // 116 | // 117 | // 118 | // 119 | // 120 | // 121 | // 122 | // 123 | // 124 | // 125 | // 126 | // 127 | // 128 | // 129 | // 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | // 143 | // 144 | // 145 | // 146 | // 147 | // 148 | // 149 | // 150 | // 151 | // 152 | 153 | 154 | 155 | var DEFAULT_COLOR_CHECKED = '#75c791'; 156 | var DEFAULT_COLOR_UNCHECKED = '#bfcbd9'; 157 | var DEFAULT_LABEL_CHECKED = 'on'; 158 | var DEFAULT_LABEL_UNCHECKED = 'off'; 159 | var DEFAULT_SWITCH_COLOR = '#fff'; 160 | 161 | /* harmony default export */ __webpack_exports__["default"] = ({ 162 | name: 'ToggleButton', 163 | props: { 164 | value: { 165 | type: Boolean, 166 | default: false 167 | }, 168 | name: { 169 | type: String 170 | }, 171 | disabled: { 172 | type: Boolean, 173 | default: false 174 | }, 175 | tag: { 176 | type: String 177 | }, 178 | sync: { 179 | type: Boolean, 180 | default: false 181 | }, 182 | speed: { 183 | type: Number, 184 | default: 300 185 | }, 186 | color: { 187 | type: [String, Object], 188 | validator: function validator(value) { 189 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["a" /* isString */])(value) || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'checked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'unchecked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'disabled'); 190 | } 191 | }, 192 | switchColor: { 193 | type: [String, Object], 194 | validator: function validator(value) { 195 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["a" /* isString */])(value) || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'checked') || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["b" /* has */])(value, 'unchecked'); 196 | } 197 | }, 198 | cssColors: { 199 | type: Boolean, 200 | default: false 201 | }, 202 | labels: { 203 | type: [Boolean, Object], 204 | default: false, 205 | validator: function validator(value) { 206 | return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'boolean'; 207 | } 208 | }, 209 | height: { 210 | type: Number, 211 | default: 22 212 | }, 213 | width: { 214 | type: Number, 215 | default: 50 216 | }, 217 | margin: { 218 | type: Number, 219 | default: 3 220 | }, 221 | fontSize: { 222 | type: Number 223 | } 224 | }, 225 | computed: { 226 | className: function className() { 227 | var toggled = this.toggled, 228 | disabled = this.disabled; 229 | 230 | 231 | return ['vue-js-switch', { 232 | toggled: toggled, 233 | disabled: disabled 234 | }]; 235 | }, 236 | coreStyle: function coreStyle() { 237 | return { 238 | width: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.width), 239 | height: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.height), 240 | backgroundColor: this.cssColors ? null : this.disabled ? this.colorDisabled : this.colorCurrent, 241 | borderRadius: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(Math.round(this.height / 2)) 242 | }; 243 | }, 244 | buttonRadius: function buttonRadius() { 245 | return this.height - this.margin * 2; 246 | }, 247 | distance: function distance() { 248 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.width - this.height + this.margin); 249 | }, 250 | buttonStyle: function buttonStyle() { 251 | var transition = 'transform ' + this.speed + 'ms'; 252 | var margin = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.margin); 253 | 254 | var transform = this.toggled ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["d" /* translate3d */])(this.distance, margin) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["d" /* translate3d */])(margin, margin); 255 | 256 | var background = this.switchColor ? this.switchColorCurrent : null; 257 | 258 | return { 259 | width: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.buttonRadius), 260 | height: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.buttonRadius), 261 | transition: transition, 262 | transform: transform, 263 | background: background 264 | }; 265 | }, 266 | labelStyle: function labelStyle() { 267 | return { 268 | lineHeight: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.height), 269 | fontSize: this.fontSize ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["c" /* px */])(this.fontSize) : null 270 | }; 271 | }, 272 | colorChecked: function colorChecked() { 273 | var color = this.color; 274 | 275 | 276 | if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["e" /* isObject */])(color)) { 277 | return color || DEFAULT_COLOR_CHECKED; 278 | } 279 | 280 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(color, 'checked', DEFAULT_COLOR_CHECKED); 281 | }, 282 | colorUnchecked: function colorUnchecked() { 283 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.color, 'unchecked', DEFAULT_COLOR_UNCHECKED); 284 | }, 285 | colorDisabled: function colorDisabled() { 286 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.color, 'disabled', this.colorCurrent); 287 | }, 288 | colorCurrent: function colorCurrent() { 289 | return this.toggled ? this.colorChecked : this.colorUnchecked; 290 | }, 291 | labelChecked: function labelChecked() { 292 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.labels, 'checked', DEFAULT_LABEL_CHECKED); 293 | }, 294 | labelUnchecked: function labelUnchecked() { 295 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.labels, 'unchecked', DEFAULT_LABEL_UNCHECKED); 296 | }, 297 | switchColorChecked: function switchColorChecked() { 298 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.switchColor, 'checked', DEFAULT_SWITCH_COLOR); 299 | }, 300 | switchColorUnchecked: function switchColorUnchecked() { 301 | return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["f" /* get */])(this.switchColor, 'unchecked', DEFAULT_SWITCH_COLOR); 302 | }, 303 | switchColorCurrent: function switchColorCurrent() { 304 | var switchColor = this.switchColor; 305 | 306 | 307 | if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__utils__["e" /* isObject */])(this.switchColor)) { 308 | return this.switchColor || DEFAULT_SWITCH_COLOR; 309 | } 310 | 311 | return this.toggled ? this.switchColorChecked : this.switchColorUnchecked; 312 | } 313 | }, 314 | watch: { 315 | value: function value(_value) { 316 | if (this.sync) { 317 | this.toggled = !!_value; 318 | } 319 | } 320 | }, 321 | data: function data() { 322 | return { 323 | toggled: !!this.value 324 | }; 325 | }, 326 | 327 | methods: { 328 | toggle: function toggle(event) { 329 | var toggled = !this.toggled; 330 | 331 | if (!this.sync) { 332 | this.toggled = toggled; 333 | } 334 | 335 | this.$emit('input', toggled); 336 | this.$emit('change', { 337 | value: toggled, 338 | tag: this.tag, 339 | srcEvent: event 340 | }); 341 | } 342 | } 343 | }); 344 | 345 | /***/ }), 346 | /* 2 */ 347 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 348 | 349 | "use strict"; 350 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 351 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Button_vue__ = __webpack_require__(0); 352 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Button_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__Button_vue__); 353 | /* harmony reexport (default from non-hamory) */ __webpack_require__.d(__webpack_exports__, "ToggleButton", function() { return __WEBPACK_IMPORTED_MODULE_0__Button_vue___default.a; }); 354 | 355 | 356 | var installed = false; 357 | 358 | /* harmony default export */ __webpack_exports__["default"] = ({ 359 | install: function install(Vue) { 360 | if (installed) { 361 | return; 362 | } 363 | 364 | Vue.component('ToggleButton', __WEBPACK_IMPORTED_MODULE_0__Button_vue___default.a); 365 | installed = true; 366 | } 367 | }); 368 | 369 | 370 | 371 | /***/ }), 372 | /* 3 */ 373 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 374 | 375 | "use strict"; 376 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isString; }); 377 | /* unused harmony export isBoolean */ 378 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isObject; }); 379 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return has; }); 380 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return get; }); 381 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return px; }); 382 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return translate3d; }); 383 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 384 | 385 | var isString = function isString(value) { 386 | return typeof value === 'string'; 387 | }; 388 | 389 | var isBoolean = function isBoolean(value) { 390 | return typeof value === 'boolean'; 391 | }; 392 | 393 | var isObject = function isObject(value) { 394 | return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object'; 395 | }; 396 | 397 | var has = function has(object, key) { 398 | return isObject(object) && object.hasOwnProperty(key); 399 | }; 400 | 401 | var get = function get(object, key, defaultValue) { 402 | return has(object, key) ? object[key] : defaultValue; 403 | }; 404 | 405 | var px = function px(value) { 406 | return value + 'px'; 407 | }; 408 | 409 | var translate3d = function translate3d(x, y) { 410 | var z = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '0px'; 411 | 412 | return 'translate3d(' + x + ', ' + y + ', ' + z + ')'; 413 | }; 414 | 415 | /***/ }), 416 | /* 4 */ 417 | /***/ (function(module, exports, __webpack_require__) { 418 | 419 | exports = module.exports = __webpack_require__(5)(); 420 | // imports 421 | 422 | 423 | // module 424 | 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}", ""]); 425 | 426 | // exports 427 | 428 | 429 | /***/ }), 430 | /* 5 */ 431 | /***/ (function(module, exports) { 432 | 433 | /* 434 | MIT License http://www.opensource.org/licenses/mit-license.php 435 | Author Tobias Koppers @sokra 436 | */ 437 | // css base code, injected by the css-loader 438 | module.exports = function() { 439 | var list = []; 440 | 441 | // return the list of modules as css string 442 | list.toString = function toString() { 443 | var result = []; 444 | for(var i = 0; i < this.length; i++) { 445 | var item = this[i]; 446 | if(item[2]) { 447 | result.push("@media " + item[2] + "{" + item[1] + "}"); 448 | } else { 449 | result.push(item[1]); 450 | } 451 | } 452 | return result.join(""); 453 | }; 454 | 455 | // import a list of modules into the list 456 | list.i = function(modules, mediaQuery) { 457 | if(typeof modules === "string") 458 | modules = [[null, modules, ""]]; 459 | var alreadyImportedModules = {}; 460 | for(var i = 0; i < this.length; i++) { 461 | var id = this[i][0]; 462 | if(typeof id === "number") 463 | alreadyImportedModules[id] = true; 464 | } 465 | for(i = 0; i < modules.length; i++) { 466 | var item = modules[i]; 467 | // skip already imported module 468 | // this implementation is not 100% perfect for weird media query combinations 469 | // when a module is imported multiple times with different media queries. 470 | // I hope this will never occur (Hey this way we have smaller bundles) 471 | if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { 472 | if(mediaQuery && !item[2]) { 473 | item[2] = mediaQuery; 474 | } else if(mediaQuery) { 475 | item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; 476 | } 477 | list.push(item); 478 | } 479 | } 480 | }; 481 | return list; 482 | }; 483 | 484 | 485 | /***/ }), 486 | /* 6 */ 487 | /***/ (function(module, exports) { 488 | 489 | // this module is a runtime utility for cleaner component module output and will 490 | // be included in the final webpack user bundle 491 | 492 | module.exports = function normalizeComponent ( 493 | rawScriptExports, 494 | compiledTemplate, 495 | scopeId, 496 | cssModules 497 | ) { 498 | var esModule 499 | var scriptExports = rawScriptExports = rawScriptExports || {} 500 | 501 | // ES6 modules interop 502 | var type = typeof rawScriptExports.default 503 | if (type === 'object' || type === 'function') { 504 | esModule = rawScriptExports 505 | scriptExports = rawScriptExports.default 506 | } 507 | 508 | // Vue.extend constructor export interop 509 | var options = typeof scriptExports === 'function' 510 | ? scriptExports.options 511 | : scriptExports 512 | 513 | // render functions 514 | if (compiledTemplate) { 515 | options.render = compiledTemplate.render 516 | options.staticRenderFns = compiledTemplate.staticRenderFns 517 | } 518 | 519 | // scopedId 520 | if (scopeId) { 521 | options._scopeId = scopeId 522 | } 523 | 524 | // inject cssModules 525 | if (cssModules) { 526 | var computed = Object.create(options.computed || null) 527 | Object.keys(cssModules).forEach(function (key) { 528 | var module = cssModules[key] 529 | computed[key] = function () { return module } 530 | }) 531 | options.computed = computed 532 | } 533 | 534 | return { 535 | esModule: esModule, 536 | exports: scriptExports, 537 | options: options 538 | } 539 | } 540 | 541 | 542 | /***/ }), 543 | /* 7 */ 544 | /***/ (function(module, exports) { 545 | 546 | module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h; 547 | return _c('label', { 548 | class: _vm.className 549 | }, [_c('input', { 550 | staticClass: "v-switch-input", 551 | attrs: { 552 | "type": "checkbox", 553 | "name": _vm.name, 554 | "disabled": _vm.disabled 555 | }, 556 | domProps: { 557 | "checked": _vm.value 558 | }, 559 | on: { 560 | "change": function($event) { 561 | $event.stopPropagation(); 562 | return _vm.toggle($event) 563 | } 564 | } 565 | }), _vm._v(" "), _c('div', { 566 | staticClass: "v-switch-core", 567 | style: (_vm.coreStyle) 568 | }, [_c('div', { 569 | staticClass: "v-switch-button", 570 | style: (_vm.buttonStyle) 571 | })]), _vm._v(" "), (_vm.labels) ? [(_vm.toggled) ? _c('span', { 572 | staticClass: "v-switch-label v-left", 573 | style: (_vm.labelStyle) 574 | }, [_vm._t("checked", [ 575 | [_vm._v(_vm._s(_vm.labelChecked))] 576 | ])], 2) : _c('span', { 577 | staticClass: "v-switch-label v-right", 578 | style: (_vm.labelStyle) 579 | }, [_vm._t("unchecked", [ 580 | [_vm._v(_vm._s(_vm.labelUnchecked))] 581 | ])], 2)] : _vm._e()], 2) 582 | },staticRenderFns: []} 583 | 584 | /***/ }), 585 | /* 8 */ 586 | /***/ (function(module, exports, __webpack_require__) { 587 | 588 | // style-loader: Adds some css to the DOM by adding a