├── .gitignore ├── docs ├── demo.gif ├── tick.png ├── demo-switcher.gif ├── src │ ├── app.js │ └── app.scss ├── webpack.config.js ├── build │ ├── app.css │ └── app.js └── index.html ├── .babelrc ├── src ├── index.js └── components │ ├── Radio.vue │ └── Checkbox.vue ├── webpack.config.js ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /yarn.lock 3 | /dist 4 | -------------------------------------------------------------------------------- /docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/HEAD/docs/demo.gif -------------------------------------------------------------------------------- /docs/tick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/HEAD/docs/tick.png -------------------------------------------------------------------------------- /docs/demo-switcher.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/HEAD/docs/demo-switcher.gif -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ], 5 | "plugins": [ 6 | "transform-runtime" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './components/Checkbox'; 2 | import Radio from './components/Radio'; 3 | 4 | export default { 5 | install (Vue) { 6 | Vue.component('checkbox', Checkbox); 7 | Vue.component('radio', Radio); 8 | } 9 | } 10 | 11 | export { Checkbox, Radio } 12 | -------------------------------------------------------------------------------- /docs/src/app.js: -------------------------------------------------------------------------------- 1 | // Vue 2 | import Vue from 'vue'; 3 | import CheckboxRadio from '../../src'; 4 | 5 | Vue.use(CheckboxRadio); 6 | 7 | new Vue({ 8 | el: '#app', 9 | 10 | data() { 11 | return { 12 | checkboxValue: [], 13 | radioValue: '', 14 | } 15 | }, 16 | }); 17 | 18 | // App 19 | require('./app.scss'); 20 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | context: __dirname, 5 | 6 | entry: './src/index.js', 7 | 8 | output: { 9 | path: path.resolve(__dirname, 'dist'), 10 | filename: 'index.js', 11 | library: 'vue-checkbox-radio', 12 | libraryTarget: 'umd', 13 | }, 14 | 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader', 20 | exclude: /node_modules/, 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/, 26 | }, 27 | { 28 | test: /\.scss$/, 29 | loaders: ['style-loader', 'css-loader', 'sass-loader'], 30 | } 31 | ] 32 | }, 33 | 34 | resolve: { 35 | extensions: ['.js', '.vue'], 36 | }, 37 | 38 | externals: { 39 | vue: 'vue', 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-present Mario Juárez (http://www.mjp.one) 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-checkbox-radio", 3 | "version": "0.6.0", 4 | "description": "Checkbox and radio component for Vue.js", 5 | "keywords": [ 6 | "checkbox", 7 | "radio", 8 | "vue" 9 | ], 10 | "main": "dist/index.js", 11 | "files": [ 12 | "dist" 13 | ], 14 | "scripts": { 15 | "build": "webpack -p --progress", 16 | "docs": "webpack -p --progress --config docs/webpack.config.js", 17 | "docs-watch": "webpack --progress --config docs/webpack.config.js --watch" 18 | }, 19 | "author": { 20 | "name": "Mario Juárez", 21 | "email": "mario@mjp.one", 22 | "url": "http://www.mjp.one" 23 | }, 24 | "repository": "mariomka/vue-checkbox-radio", 25 | "bugs": { 26 | "url": "https://github.com/mariomka/vue-checkbox-radio/issues" 27 | }, 28 | "homepage": "https://github.com/mariomka/vue-checkbox-radio#readme", 29 | "license": "MIT", 30 | "devDependencies": { 31 | "babel-core": "^6.24.1", 32 | "babel-loader": "^7.0.0", 33 | "babel-plugin-transform-runtime": "^6.23.0", 34 | "babel-preset-env": "^1.5.1", 35 | "css-loader": "^0.28.2", 36 | "extract-text-webpack-plugin": "^2.1.0", 37 | "node-sass": "^4.5.3", 38 | "sass-loader": "^6.0.5", 39 | "style-loader": "^0.18.1", 40 | "vue": "^2.3.3", 41 | "vue-loader": "^12.1.0", 42 | "vue-template-compiler": "^2.3.3", 43 | "webpack": "^2.6.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'), 2 | ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | 4 | module.exports = { 5 | context: __dirname, 6 | 7 | entry: './src/app.js', 8 | 9 | output: { 10 | path: path.resolve(__dirname, 'build'), 11 | filename: 'app.js', 12 | publicPath: '/', 13 | }, 14 | 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader', 20 | exclude: /node_modules/, 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/, 26 | }, 27 | { 28 | test: /\.scss$/, 29 | loader: ExtractTextPlugin.extract({ 30 | fallback: 'style-loader', 31 | use: [ 32 | { 33 | loader: 'css-loader', 34 | options: { 35 | url: false 36 | } 37 | }, 38 | 'sass-loader', 39 | ] 40 | }), 41 | }, 42 | ] 43 | }, 44 | 45 | resolve: { 46 | alias: { 47 | vue: 'vue/dist/vue.js', 48 | }, 49 | extensions: ['.js', '.vue'], 50 | }, 51 | 52 | plugins: [ 53 | new ExtractTextPlugin("app.css") 54 | ], 55 | }; 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-checkbox-radio 2 | > A Vue component to easily styling checkbox and radio inputs. 3 | 4 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) 5 | [![Latest Version on NPM](https://img.shields.io/npm/v/vue-checkbox-radio.svg?style=flat-square)](https://npmjs.com/package/vue-checkbox-radio) 6 | [![npm](https://img.shields.io/npm/dt/vue-checkbox-radio.svg?style=flat-square)](https://www.npmjs.com/package/vue-checkbox-radio) 7 | 8 | ## Example 9 | 10 | [![demo](https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/master/docs/demo.gif)](http://mariomka.github.io/vue-checkbox-radio) 11 | 12 | [![demo](https://raw.githubusercontent.com/mariomka/vue-checkbox-radio/master/docs/demo-switcher.gif)](http://mariomka.github.io/vue-checkbox-radio) 13 | 14 | Check out **[demo and styling examples](http://mariomka.github.io/vue-checkbox-radio)**. 15 | 16 | ## Usage 17 | 18 | **Checkbox** 19 | 20 | ```html 21 | 22 | I agree to the terms of service 23 | 24 | ``` 25 | 26 | **Radio** 27 | 28 | ```html 29 | 30 | I'm a robot 31 | 32 | 33 | I'm not a robot 34 | 35 | ``` 36 | 37 | ## Install 38 | 39 | yarn 40 | 41 | ```bash 42 | yarn add vue-checkbox-radio 43 | ``` 44 | 45 | npm 46 | 47 | 48 | ```bash 49 | npm install vue-checkbox-radio --save 50 | ``` 51 | 52 | ## Setup 53 | 54 | Register the plugin. 55 | 56 | ```js 57 | import CheckboxRadio from 'vue-checkbox-radio'; 58 | 59 | Vue.use(CheckboxRadio); 60 | ``` 61 | 62 | Or register components manually. 63 | 64 | ```js 65 | import {Checkbox, Radio} from 'vue-checkbox-radio'; 66 | 67 | Vue.component('checkbox', Checkbox); 68 | Vue.component('radio', Radio); 69 | ``` 70 | 71 | ## Params 72 | 73 | ### Checkbox 74 | 75 | Parameter | Type | Default 76 | --------- | ---- | ------ 77 | id | `string` | checkbox-id-(element uid) 78 | class-name | `string` | `null` 79 | name | `string` | `null` 80 | v-model | `string`, `boolean` or `array` | `undefined` 81 | value | `string` or `boolean` | `null` 82 | checked | `boolean` | `false` 83 | required | `boolean` | `false` 84 | disabled | `boolean` | `false` 85 | 86 | ### Radio 87 | 88 | Parameter | Type | Default 89 | --------- | ---- | ------ 90 | id | `string` | radio-id-(element uid) 91 | class-name | `string` | `null` 92 | name | `string` | `null` 93 | v-model | `string` or `boolean` | `undefined` 94 | value | `string` or `boolean` | `null` 95 | checked | `boolean` | `false` 96 | required | `boolean` | `false` 97 | disabled | `boolean` | `false` 98 | 99 | ## Events 100 | 101 | Both components emit the `input` event to work with `v-model`. 102 | 103 | ## Full example 104 | 105 | ```html 106 | 114 | I agree to the terms of service 115 | 116 | ``` 117 | 118 | ## Slots 119 | 120 | Slot ``input-box`` allow overwriting ``input-box`` for specific customizations. 121 | 122 | ```html 123 | 124 | 125 | [...] 126 | 127 | Test 128 | 129 | ``` 130 | 131 | ## License 132 | 133 | MIT © [Mario Juárez](https://github.com/mariomka) 134 | -------------------------------------------------------------------------------- /docs/build/app.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box;margin:0;padding:0;position:relative}body{background-color:#eee;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:16px;padding:1em;color:#333}.page{background-color:#fff;margin:0 auto;padding:1em 1.5em;width:100%;max-width:900px}h1{margin:0 0 30px;border-bottom:1px solid #999;font-weight:100;font-size:48px}h1 a{color:#333;text-decoration:none}h2{margin:20px 0;border-bottom:1px solid #ccc;font-weight:100;font-size:26px}h3{margin:10px 0;font-weight:600;font-size:20px}.example{margin:0 0 30px}.example .example-inputs .input-wrapper{margin:10px 0}.example .example-code{margin-top:20px}.example .example-code pre{width:100%;font-size:14px;overflow:scroll}.example .example-code pre code{padding:1.5em}@media screen and (min-width:900px){.example{display:flex}.example .example-inputs{width:32%}.example .example-code{margin-top:0;width:68%}}.values{margin-top:20px;font-size:14px}footer{margin:50px 0 0;font-size:14px;font-weight:lighter;color:#aaa}footer a{color:#aaa;text-decoration:none}footer a:hover{text-decoration:underline}.example-color .checkbox-component>input+label>.input-box,.example-color .radio-component>input+label>.input-box{border-color:#42a5f5;background:#42a5f5}.example-color .checkbox-component>input+label>.input-box>.input-box-tick>path,.example-color .radio-component>input+label>.input-box>.input-box-tick>path{stroke:#fff}.example-color .checkbox-component>input+label>.input-box>.input-box-circle,.example-color .radio-component>input+label>.input-box>.input-box-circle{background:#fff}.example-switcher .checkbox-component>input+label>.input-box,.example-switcher .radio-component>input+label>.input-box{position:relative;border:1px solid #939393;border-radius:1em;width:1.6em;background:#fff;transition:background .2s ease-in;vertical-align:-15%}.example-switcher .checkbox-component>input+label>.input-box>.input-box-circle,.example-switcher .checkbox-component>input+label>.input-box>.input-box-tick,.example-switcher .radio-component>input+label>.input-box>.input-box-circle,.example-switcher .radio-component>input+label>.input-box>.input-box-tick{display:none}.example-switcher .checkbox-component>input+label>.input-box:before,.example-switcher .radio-component>input+label>.input-box:before{content:"";position:absolute;top:-1px;left:-1px;border:1px solid #939393;border-radius:50%;width:1em;height:1em;background:#fff;transition:transform .3s ease-out}.example-switcher .checkbox-component>input:checked+label>.input-box,.example-switcher .radio-component>input:checked+label>.input-box{background:#63b65d}.example-switcher .checkbox-component>input:checked+label>.input-box:before,.example-switcher .radio-component>input:checked+label>.input-box:before{border-color:#498d47;transform:translateX(.6em)}.example-image .checkbox-component>input+label>.input-box>.input-box-circle,.example-image .checkbox-component>input+label>.input-box>.input-box-tick,.example-image .radio-component>input+label>.input-box>.input-box-circle,.example-image .radio-component>input+label>.input-box>.input-box-tick{display:none}.example-image .checkbox-component>input:checked+label>.input-box,.example-image .radio-component>input:checked+label>.input-box{background:url("../tick.png") no-repeat 50%;background-size:100% 100%}.example-character .checkbox-component>input+label>.input-box,.example-character .radio-component>input+label>.input-box{font-size:1em;text-align:center;line-height:1;color:transparent}.example-character .checkbox-component>input+label>.input-box>.input-box-circle,.example-character .checkbox-component>input+label>.input-box>.input-box-tick,.example-character .radio-component>input+label>.input-box>.input-box-circle,.example-character .radio-component>input+label>.input-box>.input-box-tick{display:none}.example-character .checkbox-component>input+label>.input-box:before,.example-character .radio-component>input+label>.input-box:before{content:"\2718"}.example-character .checkbox-component>input:checked+label>.input-box:before,.example-character .radio-component>input:checked+label>.input-box:before{color:#000} -------------------------------------------------------------------------------- /src/components/Radio.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 71 | 72 | 150 | -------------------------------------------------------------------------------- /docs/src/app.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | position: relative; 8 | } 9 | 10 | body { 11 | background-color: #eee; 12 | font-family: -apple-system, BlinkMacSystemFont, 13 | "Segoe UI", "Roboto", "Oxygen", 14 | "Ubuntu", "Cantarell", "Fira Sans", 15 | "Droid Sans", "Helvetica Neue", sans-serif; 16 | font-size: 16px; 17 | padding: 1em; 18 | color: #333; 19 | } 20 | 21 | .page { 22 | background-color: #fff; 23 | margin: 0 auto; 24 | padding: 1em 1.5em; 25 | width: 100%; 26 | max-width: 900px; 27 | } 28 | 29 | h1 { 30 | margin: 0 0 30px; 31 | border-bottom: solid 1px #999; 32 | font-weight: 100; 33 | font-size: 48px; 34 | 35 | a { 36 | color: #333; 37 | text-decoration: none; 38 | } 39 | } 40 | 41 | h2 { 42 | margin: 20px 0; 43 | border-bottom: solid 1px #ccc; 44 | font-weight: 100; 45 | font-size: 26px; 46 | } 47 | 48 | h3 { 49 | margin: 10px 0; 50 | font-weight: 600; 51 | font-size: 20px; 52 | } 53 | 54 | .example { 55 | margin: 0 0 30px; 56 | 57 | .example-inputs { 58 | .input-wrapper { 59 | margin: 10px 0; 60 | } 61 | } 62 | 63 | .example-code { 64 | margin-top: 20px; 65 | 66 | pre { 67 | width: 100%; 68 | font-size: 14px; 69 | overflow: scroll; 70 | 71 | code { 72 | padding: 1.5em; 73 | } 74 | } 75 | } 76 | 77 | @media screen and (min-width: 900px) { 78 | display: flex; 79 | 80 | .example-inputs { 81 | width: 32%; 82 | } 83 | 84 | .example-code { 85 | margin-top: 0; 86 | width: 68%; 87 | } 88 | } 89 | } 90 | 91 | .values { 92 | margin-top: 20px; 93 | font-size: 14px; 94 | } 95 | 96 | footer { 97 | margin: 50px 0 0; 98 | font-size: 14px; 99 | font-weight: lighter; 100 | color: #aaa; 101 | 102 | a { 103 | color: #aaa; 104 | text-decoration: none; 105 | 106 | &:hover { 107 | text-decoration: underline; 108 | } 109 | } 110 | } 111 | 112 | // Examples 113 | .example-color { 114 | .checkbox-component, 115 | .radio-component { 116 | > input + label > .input-box { 117 | border-color: #42A5F5; 118 | background: #42A5F5; 119 | 120 | > .input-box-tick > path { 121 | stroke: #fff; 122 | } 123 | 124 | > .input-box-circle { 125 | background: #fff; 126 | } 127 | } 128 | } 129 | } 130 | 131 | .example-switcher { 132 | .checkbox-component, 133 | .radio-component { 134 | > input { 135 | + label > .input-box { 136 | position: relative; 137 | border: 1px solid #939393; 138 | border-radius: 1em; 139 | width: 1.6em; 140 | background: #fff; 141 | transition: background 0.2s ease-in; 142 | vertical-align: -15%; 143 | 144 | > .input-box-tick, 145 | > .input-box-circle { 146 | display: none; 147 | } 148 | 149 | &:before { 150 | content: ''; 151 | position: absolute; 152 | top: -1px; 153 | left: -1px; 154 | border: 1px solid #939393; 155 | border-radius: 50%; 156 | width: 1em; 157 | height: 1em; 158 | background: #fff; 159 | transition: transform 0.3s ease-out; 160 | } 161 | } 162 | 163 | &:checked + label { 164 | > .input-box { 165 | background: #63b65d; 166 | } 167 | 168 | > .input-box { 169 | &:before { 170 | border-color: #498d47; 171 | transform: translateX(0.6em); 172 | } 173 | } 174 | } 175 | } 176 | } 177 | } 178 | 179 | .example-image { 180 | .checkbox-component, 181 | .radio-component { 182 | > input { 183 | + label > .input-box { 184 | > .input-box-tick, 185 | > .input-box-circle { 186 | display: none; 187 | } 188 | } 189 | 190 | &:checked + label > .input-box { 191 | background: url('../tick.png') no-repeat center center; 192 | background-size: 100% 100%; 193 | } 194 | } 195 | } 196 | } 197 | 198 | .example-character { 199 | .checkbox-component, 200 | .radio-component { 201 | > input { 202 | + label > .input-box { 203 | font-size: 1em; 204 | text-align: center; 205 | line-height: 1; 206 | color: transparent; 207 | 208 | > .input-box-tick, 209 | > .input-box-circle { 210 | display: none; 211 | } 212 | 213 | &:before { 214 | content: '✘'; 215 | } 216 | } 217 | 218 | &:checked + label > .input-box:before { 219 | color: #000; 220 | } 221 | } 222 | } 223 | } 224 | -------------------------------------------------------------------------------- /src/components/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 74 | 75 | 171 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-checkbox-radio demo 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

vue-checkbox-radio demo

18 | 19 |
20 |
21 |
22 | 23 | 🍕 Pizza 24 | 25 | 26 | 🍔 Hamburger 27 | 28 |
29 | 30 |
31 |

32 | Value: {{ checkboxValue }} 33 |

34 |
35 |
36 |
37 | 
<checkbox name="food[]" value="pizza" v-model="checkboxValue" checked>
 38 |     🍕 Pizza
 39 | </checkbox>
 40 | <checkbox name="food[]" value="hamburger" v-model="checkboxValue">
 41 |     🍔 Hamburger
 42 | </checkbox>
43 |
44 |
45 | 46 |
47 |
48 |
49 | 50 | I'm a robot 🤖 51 | 52 | 53 | I'm not a robot 54 | 55 |
56 | 57 |
58 |

59 | Value: {{ radioValue }} 60 |

61 |
62 |
63 |
64 | 
<radio name="robot" value="yes" v-model="radioValue" checked>
 65 |     I'm a robot 🤖
 66 | </radio>
 67 | <radio name="robot" value="no" v-model="radioValue">
 68 |     I'm not a robot
 69 | </radio>
70 |
71 |
72 | 73 |

Style examples

74 | 75 |

Color

76 |
77 |
78 |
79 | 80 | 🍕 Pizza 81 | 82 | 83 | 🍔 Hamburger 84 | 85 |
86 | 87 |
88 | 89 | I'm a robot 🤖 90 | 91 | 92 | I'm not a robot 93 | 94 |
95 |
96 |
97 | 
.checkbox-component > input + label > .input-box,
 98 | .radio-component > input + label > .input-box {
 99 |   border-color: #4d82ff;
100 |   background: #4d82ff;
101 | }
102 | .checkbox-component > input + label > .input-box > .input-box-tick > path {
103 |   stroke: #fff;
104 | }
105 | .radio-component > input + label > .input-box > .input-box-circle {
106 |   background: #fff;
107 | }
108 |
109 |
110 | 111 |

Switcher

112 |
113 |
114 |
115 | 116 | 🍕 Pizza 117 | 118 | 119 | 🍔 Hamburger 120 | 121 |
122 | 123 |
124 | 125 | I'm a robot 🤖 126 | 127 | 128 | I'm not a robot 129 | 130 |
131 |
132 |
133 | 
.checkbox-component > input + label > .input-box,
134 | .radio-component > input + label > .input-box {
135 |   position: relative;
136 |   border: 1px solid #939393;
137 |   border-radius: 1em;
138 |   width: 1.6em;
139 |   background: #fff;
140 |   transition: background 0.2s ease-in;
141 |   vertical-align: -15%;
142 | }
143 | .checkbox-component > input + label > .input-box > .input-box-tick,
144 | .radio-component > input + label > .input-box > .input-box-circle {
145 |   display: none;
146 | }
147 | .checkbox-component > input + label > .input-box:before,
148 | .radio-component > input + label > .input-box:before {
149 |   content: '';
150 |   position: absolute;
151 |   top: -1px;
152 |   left: -1px;
153 |   border: 1px solid #939393;
154 |   border-radius: 50%;
155 |   width: 1em;
156 |   height: 1em;
157 |   background: #fff;
158 |   transition: transform 0.3s ease-out;
159 | }
160 | .checkbox-component > input:checked + label > .input-box,
161 | .radio-component > input:checked + label > .input-box {
162 |   background: #63b65d;
163 | }
164 | .checkbox-component > input:checked + label > .input-box:before,
165 | .radio-component > input:checked + label > .input-box:before {
166 |   border-color: #498d47;
167 |   transform: translateX(0.6em);
168 | }
169 |
170 |
171 | 172 |

Image

173 |
174 |
175 |
176 | 177 | 🍕 Pizza 178 | 179 | 180 | 🍔 Hamburger 181 | 182 |
183 | 184 |
185 | 186 | I'm a robot 🤖 187 | 188 | 189 | I'm not a robot 190 | 191 |
192 |
193 |
194 | 

195 | .checkbox-component > input + label > .input-box > .input-box-tick,
196 | .radio-component > input + label > .input-box > .input-box-circle {
197 |   display: none;
198 | }
199 | .checkbox-component > input:checked + label > .input-box,
200 | .radio-component > input:checked + label > .input-box {
201 |   background: url("tick.png") no-repeat center center;
202 |   background-size: 100% 100%;
203 | }
204 |
205 |
206 |
207 | 208 |

Character

209 |
210 |
211 |
212 | 213 | 🍕 Pizza 214 | 215 | 216 | 🍔 Hamburger 217 | 218 |
219 | 220 |
221 | 222 | I'm a robot 🤖 223 | 224 | 225 | I'm not a robot 226 | 227 |
228 |
229 |
230 | 
.checkbox-component > input + label > .input-box,
231 | .radio-component > input + label > .input-box {
232 |   font-size: 1em;
233 |   text-align: center;
234 |   line-height: 1;
235 |   color: transparent;
236 | }
237 | .checkbox-component > input + label > .input-box > .input-box-tick,
238 | .radio-component > input + label > .input-box > .input-box-circle {
239 |   display: none;
240 | }
241 | .checkbox-component > input + label > .input-box:before,
242 | .radio-component > input + label > .input-box:before {
243 |   content: '✘';
244 | }
245 | .checkbox-component > input:checked + label > .input-box:before,
246 | .radio-component > input:checked + label > .input-box:before {
247 |   color: #000;
248 | }
249 |
250 |
251 | 252 | 255 |
256 | 257 | 258 | 259 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /docs/build/app.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=7)}([function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;on.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],o=0;o=0&&Math.floor(t)===t&&isFinite(e)}function d(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function p(e){var t=parseFloat(e);return isNaN(t)?e:t}function v(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o-1)return e.splice(n,1)}}function m(e,t){return mi.call(e,t)}function g(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}function y(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function b(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function _(e,t){for(var n in t)e[n]=t[n];return e}function w(e){for(var t={},n=0;n0&&(s=be(s,(n||"")+"_"+i),ye(s[0])&&ye(u)&&(l[c]=M(u.text+s[0].text),s.shift()),l.push.apply(l,s)):a(s)?ye(u)?l[c]=M(u.text+s):""!==s&&l.push(M(s)):ye(s)&&ye(u)?l[c]=M(u.text+s.text):(o(t._isVList)&&r(s.tag)&&e(s.key)&&r(n)&&(s.key="__vlist"+n+"_"+i+"__"),l.push(s)));return l}function _e(e,t){return(e.__esModule||Ji&&"Module"===e[Symbol.toStringTag])&&(e=e.default),s(e)?t.extend(e):e}function we(e,t,n,r,o){var i=aa();return i.asyncFactory=e,i.asyncMeta={data:t,context:n,children:r,tag:o},i}function xe(t,n,i){if(o(t.error)&&r(t.errorComp))return t.errorComp;if(r(t.resolved))return t.resolved;if(o(t.loading)&&r(t.loadingComp))return t.loadingComp;if(!r(t.contexts)){var a=t.contexts=[i],c=!0,u=function(){for(var e=0,t=a.length;eDa)){Ki("You may have an infinite update loop "+(e.user?'in watcher with expression "'+e.expression+'"':"in a component render function."),e.vm);break}var n=Fa.slice(),r=Ra.slice();Fe(),He(n),Ve(r),zi&&Oi.devtools&&zi.emit("flush")}function Ve(e){for(var t=e.length;t--;){var n=e[t],r=n.vm;r._watcher===n&&r._isMounted&&Re(r,"updated")}}function Be(e){e._inactive=!1,Fa.push(e)}function He(e){for(var t=0;tqa&&Ra[n].id>e.id;)n--;Ra.splice(n+1,0,e)}else Ra.push(e);Ba||(Ba=!0,le(Ue))}}function ze(e){Ka.clear(),Je(e,Ka)}function Je(e,t){var n,r,o=Array.isArray(e);if((o||s(e))&&Object.isExtensible(e)){if(e.__ob__){var i=e.__ob__.dep.id;if(t.has(i))return;t.add(i)}if(o)for(n=e.length;n--;)Je(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)Je(e[r[n]],t)}}function Ke(e,t,n){Wa.get=function(){return this[t][n]},Wa.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Wa)}function We(e){e._watchers=[];var t=e.$options;t.props&&Ge(e,t.props),t.methods&&tt(e,t.methods),t.data?Ye(e):D(e._data={},!0),t.computed&&Xe(e,t.computed),t.watch&&t.watch!==Fi&&nt(e,t.watch)}function Ge(e,t){var n=e.$options.propsData||{},r=e._props={},o=e.$options._propKeys=[],i=!e.$parent;la.shouldConvert=i;for(var a in t)!function(i){o.push(i);var a=Q(i,t,n,e),s=wi(i);(hi(s)||Oi.isReservedAttr(s))&&Ki('"'+s+'" is a reserved attribute and cannot be used as component prop.',e),R(r,i,a,function(){e.$parent&&!Pa&&Ki("Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: \""+i+'"',e)}),i in e||Ke(e,"_props",i)}(a);la.shouldConvert=!0}function Ye(e){var t=e.$options.data;t=e._data="function"==typeof t?Ze(t,e):t||{},u(t)||(t={},Ki("data functions should return an object:\nhttps://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function",e));for(var n=Object.keys(t),r=e.$options.props,o=e.$options.methods,i=n.length;i--;){var a=n[i];o&&m(o,a)&&Ki('Method "'+a+'" has already been defined as a data property.',e),r&&m(r,a)?Ki('The data property "'+a+'" is already declared as a prop. Use prop default value instead.',e):A(a)||Ke(e,"_data",a)}D(t,!0)}function Ze(e,t){try{return e.call(t,t)}catch(e){return ie(e,t,"data()"),{}}}function Xe(e,t){var n=e._computedWatchers=Object.create(null),r=qi();for(var o in t){var i=t[o],a="function"==typeof i?i:i.get;null==a&&Ki('Getter is missing for computed property "'+o+'".',e),r||(n[o]=new Ja(e,a||x,x,Ga)),o in e?o in e.$data?Ki('The computed property "'+o+'" is already defined in data.',e):e.$options.props&&o in e.$options.props&&Ki('The computed property "'+o+'" is already defined as a prop.',e):Qe(e,o,i)}}function Qe(e,t,n){var r=!qi();"function"==typeof n?(Wa.get=r?et(t):n,Wa.set=x):(Wa.get=n.get?r&&!1!==n.cache?et(t):n.get:x,Wa.set=n.set?n.set:x),Wa.set===x&&(Wa.set=function(){Ki('Computed property "'+t+'" was assigned to but it has no setter.',this)}),Object.defineProperty(e,t,Wa)}function et(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),na.target&&t.depend(),t.value}}function tt(e,t){var n=e.$options.props;for(var r in t)null==t[r]&&Ki('Method "'+r+'" has an undefined value in the component definition. Did you reference the function correctly?',e),n&&m(n,r)&&Ki('Method "'+r+'" has already been defined as a prop.',e),r in e&&A(r)&&Ki('Method "'+r+'" conflicts with an existing Vue instance method. Avoid defining component methods that start with _ or $.'),e[r]=null==t[r]?x:y(t[r],e)}function nt(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var o=0;o=0||n.indexOf(e[o])<0)&&r.push(e[o]);return r}return e}function Nt(e){this instanceof Nt||Ki("Vue is a constructor and should be called with the `new` keyword"),this._init(e)}function Lt(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=b(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}function Pt(e){e.mixin=function(e){return this.options=Z(this.options,e),this}}function Dt(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,o=e._Ctor||(e._Ctor={});if(o[r])return o[r];var i=e.name||n.options.name;/^[a-zA-Z][\w-]*$/.test(i)||Ki('Invalid component name: "'+i+'". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.');var a=function(e){this._init(e)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=t++,a.options=Z(n.options,e),a.super=n,a.options.props&&Rt(a),a.options.computed&&Ft(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,Ci.forEach(function(e){a[e]=n[e]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=_({},a.options),o[r]=a,a}}function Rt(e){var t=e.options.props;for(var n in t)Ke(e.prototype,"_props",n)}function Ft(e){var t=e.options.computed;for(var n in t)Qe(e.prototype,n,t[n])}function Ut(e){Ci.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&Oi.isReservedTag(e)&&Ki("Do not use built-in or reserved HTML elements as component id: "+e),"component"===t&&u(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}function Vt(e){return e&&(e.Ctor.options.name||e.tag)}function Bt(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!l(e)&&e.test(t)}function Ht(e,t){var n=e.cache,r=e.keys,o=e._vnode;for(var i in n){var a=n[i];if(a){var s=Vt(a.componentOptions);s&&!t(s)&&qt(n,i,r,o)}}}function qt(e,t,n,r){var o=e[t];o&&o!==r&&o.componentInstance.$destroy(),e[t]=null,h(n,t)}function zt(e){for(var t=e.data,n=e,o=e;r(o.componentInstance);)o=o.componentInstance._vnode,o.data&&(t=Jt(o.data,t));for(;r(n=n.parent);)n.data&&(t=Jt(t,n.data));return Kt(t.staticClass,t.class)}function Jt(e,t){return{staticClass:Wt(e.staticClass,t.staticClass),class:r(e.class)?[e.class,t.class]:t.class}}function Kt(e,t){return r(e)||r(t)?Wt(e,Gt(t)):""}function Wt(e,t){return e?t?e+" "+t:e:t||""}function Gt(e){return Array.isArray(e)?Yt(e):s(e)?Zt(e):"string"==typeof e?e:""}function Yt(e){for(var t,n="",o=0,i=e.length;o-1?Os[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Os[e]=/HTMLUnknownElement/.test(t.toString())}function en(e){if("string"==typeof e){var t=document.querySelector(e);return t||(Ki("Cannot find element: "+e),document.createElement("div"))}return e}function tn(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function nn(e,t){return document.createElementNS(xs[e],t)}function rn(e){return document.createTextNode(e)}function on(e){return document.createComment(e)}function an(e,t,n){e.insertBefore(t,n)}function sn(e,t){e.removeChild(t)}function cn(e,t){e.appendChild(t)}function un(e){return e.parentNode}function ln(e){return e.nextSibling}function fn(e){return e.tagName}function dn(e,t){e.textContent=t}function pn(e,t,n){e.setAttribute(t,n)}function vn(e,t){var n=e.data.ref;if(n){var r=e.context,o=e.componentInstance||e.elm,i=r.$refs;t?Array.isArray(i[n])?h(i[n],o):i[n]===o&&(i[n]=void 0):e.data.refInFor?Array.isArray(i[n])?i[n].indexOf(o)<0&&i[n].push(o):i[n]=[o]:i[n]=o}}function hn(t,n){return t.key===n.key&&(t.tag===n.tag&&t.isComment===n.isComment&&r(t.data)===r(n.data)&&mn(t,n)||o(t.isAsyncPlaceholder)&&t.asyncFactory===n.asyncFactory&&e(n.asyncFactory.error))}function mn(e,t){if("input"!==e.tag)return!0;var n,o=r(n=e.data)&&r(n=n.attrs)&&n.type,i=r(n=t.data)&&r(n=n.attrs)&&n.type;return o===i||Ts(o)&&Ts(i)}function gn(e,t,n){var o,i,a={};for(o=t;o<=n;++o)i=e[o].key,r(i)&&(a[i]=o);return a}function yn(e,t){(e.data.directives||t.data.directives)&&bn(e,t)}function bn(e,t){var n,r,o,i=e===Es,a=t===Es,s=_n(e.data.directives,e.context),c=_n(t.data.directives,t.context),u=[],l=[];for(n in c)r=s[n],o=c[n],r?(o.oldValue=r.value,xn(o,"update",t,e),o.def&&o.def.componentUpdated&&l.push(o)):(xn(o,"bind",t,e),o.def&&o.def.inserted&&u.push(o));if(u.length){var f=function(){for(var n=0;n=0&&" "===(m=e.charAt(h));h--);m&&Rs.test(m)||(l=!0)}}else void 0===i?(v=o+1,i=e.slice(0,o).trim()):t();if(void 0===i?i=e.slice(0,o).trim():0!==v&&t(),a)for(o=0;o-1?{exp:e.slice(0,ss),key:'"'+e.slice(ss+1)+'"'}:{exp:e,key:null};for(is=e,ss=cs=us=0;!Un();)as=Fn(),Vn(as)?Hn(as):91===as&&Bn(as);return{exp:e.slice(0,cs),key:e.slice(cs+1,us)}}function Fn(){return is.charCodeAt(++ss)}function Un(){return ss>=os}function Vn(e){return 34===e||39===e}function Bn(e){var t=1;for(cs=ss;!Un();)if(e=Fn(),Vn(e))Hn(e);else if(91===e&&t++,93===e&&t--,0===t){us=ss;break}}function Hn(e){for(var t=e;!Un()&&(e=Fn())!==t;);}function qn(e,t,n){ls=n;var r=t.value,o=t.modifiers,i=e.tag,a=e.attrsMap.type;if("input"===i&&"file"===a&&ls("<"+e.tag+' v-model="'+r+'" type="file">:\nFile inputs are read only. Use a v-on:change listener instead.'),e.component)return Pn(e,r,o),!1;if("select"===i)Kn(e,r,o);else if("input"===i&&"checkbox"===a)zn(e,r,o);else if("input"===i&&"radio"===a)Jn(e,r,o);else if("input"===i||"textarea"===i)Wn(e,r,o);else{if(!Oi.isReservedTag(i))return Pn(e,r,o),!1;ls("<"+e.tag+' v-model="'+r+"\">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.")}return!0}function zn(e,t,n){var r=n&&n.number,o=Nn(e,"value")||"null",i=Nn(e,"true-value")||"true",a=Nn(e,"false-value")||"false";jn(e,"checked","Array.isArray("+t+")?_i("+t+","+o+")>-1"+("true"===i?":("+t+")":":_q("+t+","+i+")")),In(e,"change","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+i+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+o+")":o)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+t+"=$$a.concat([$$v]))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+Dn(t,"$$c")+"}",null,!0)}function Jn(e,t,n){var r=n&&n.number,o=Nn(e,"value")||"null";o=r?"_n("+o+")":o,jn(e,"checked","_q("+t+","+o+")"),In(e,"change",Dn(t,o),null,!0)}function Kn(e,t,n){var r=n&&n.number,o='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})",i="var $$selectedVal = "+o+";";i=i+" "+Dn(t,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),In(e,"change",i,null,!0)}function Wn(e,t,n){var r=e.attrsMap.type,o=n||{},i=o.lazy,a=o.number,s=o.trim,c=!i&&"range"!==r,u=i?"change":"range"===r?Fs:"input",l="$event.target.value";s&&(l="$event.target.value.trim()"),a&&(l="_n("+l+")");var f=Dn(t,l);c&&(f="if($event.target.composing)return;"+f),jn(e,"value","("+t+")"),In(e,u,f,null,!0),(s||a)&&In(e,"blur","$forceUpdate()")}function Gn(e){if(r(e[Fs])){var t=Ii?"change":"input";e[t]=[].concat(e[Fs],e[t]||[]),delete e[Fs]}r(e[Us])&&(e.change=[].concat(e[Us],e.change||[]),delete e[Us])}function Yn(e,t,n){var r=fs;return function o(){null!==e.apply(null,arguments)&&Xn(t,o,n,r)}}function Zn(e,t,n,r,o){t=ue(t),n&&(t=Yn(t,e,r)),fs.addEventListener(e,t,Ui?{capture:r,passive:o}:r)}function Xn(e,t,n,r){(r||fs).removeEventListener(e,t._withTask||t,n)}function Qn(t,n){if(!e(t.data.on)||!e(n.data.on)){var r=n.data.on||{},o=t.data.on||{};fs=n.elm,Gn(r),de(r,o,Zn,Xn,n.context),fs=void 0}}function er(t,n){if(!e(t.data.domProps)||!e(n.data.domProps)){var o,i,a=n.elm,s=t.data.domProps||{},c=n.data.domProps||{};r(c.__ob__)&&(c=n.data.domProps=_({},c));for(o in s)e(c[o])&&(a[o]="");for(o in c){if(i=c[o],"textContent"===o||"innerHTML"===o){if(n.children&&(n.children.length=0),i===s[o])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===o){a._value=i;var u=e(i)?"":String(i);tr(a,u)&&(a.value=u)}else a[o]=i}}}function tr(e,t){return!e.composing&&("OPTION"===e.tagName||nr(e,t)||rr(e,t))}function nr(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}function rr(e,t){var n=e.value,o=e._vModifiers;return r(o)&&o.number?p(n)!==p(t):r(o)&&o.trim?n.trim()!==t.trim():n!==t}function or(e){var t=ir(e.style);return e.staticStyle?_(e.staticStyle,t):t}function ir(e){return Array.isArray(e)?w(e):"string"==typeof e?Hs(e):e}function ar(e,t){var n,r={};if(t)for(var o=e;o.componentInstance;)o=o.componentInstance._vnode,o.data&&(n=or(o.data))&&_(r,n);(n=or(e.data))&&_(r,n);for(var i=e;i=i.parent;)i.data&&(n=or(i.data))&&_(r,n);return r}function sr(t,n){var o=n.data,i=t.data;if(!(e(o.staticStyle)&&e(o.style)&&e(i.staticStyle)&&e(i.style))){var a,s,c=n.elm,u=i.staticStyle,l=i.normalizedStyle||i.style||{},f=u||l,d=ir(n.data.style)||{};n.data.normalizedStyle=r(d.__ob__)?_({},d):d;var p=ar(n,!0);for(s in f)e(p[s])&&Js(c,s,"");for(s in p)(a=p[s])!==f[s]&&Js(c,s,null==a?"":a)}}function cr(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function ur(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");n=n.trim(),n?e.setAttribute("class",n):e.removeAttribute("class")}}function lr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&_(t,Ys(e.name||"v")),_(t,e),t}return"string"==typeof e?Ys(e):void 0}}function fr(e){oc(function(){oc(e)})}function dr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),cr(e,t))}function pr(e,t){e._transitionClasses&&h(e._transitionClasses,t),ur(e,t)}function vr(e,t,n){var r=hr(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Xs?tc:rc,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Xs,l=a,f=i.length):t===Qs?u>0&&(n=Qs,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Xs:Qs:null,f=n?n===Xs?i.length:c.length:0),{type:n,timeout:l,propCount:f,hasTransform:n===Xs&&ic.test(r[ec+"Property"])}}function mr(e,t){for(;e.length explicit "+t+" duration is not a valid number - got "+JSON.stringify(e)+".",n.context):isNaN(e)&&Ki(" explicit "+t+" duration is NaN - the duration expression might be incorrect.",n.context)}function wr(e){return"number"==typeof e&&!isNaN(e)}function xr(t){if(e(t))return!1;var n=t.fns;return r(n)?xr(Array.isArray(n)?n[0]:n):(t._length||t.length)>1}function $r(e,t){!0!==t.data.show&&yr(t)}function kr(e,t,n){Cr(e,t,n),(Ii||Li)&&setTimeout(function(){Cr(e,t,n)},0)}function Cr(e,t,n){var r=t.value,o=e.multiple;if(o&&!Array.isArray(r))return void Ki('