├── .gitignore ├── README.md ├── dist ├── images │ └── share.jpg └── styles.css ├── index.html └── src └── scripts ├── main.js └── vendor └── vue.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Custom Scrollbars 2 | 3 | This tool is intended to help you customize the scrollbars of your next project. 4 | 5 | Demonstration here 👉 https://alessandrodias.github.io/custom-scrollbars 6 | 7 | ## About the project 8 | 9 | This project is using [Vue.js](https://vuejs.org/) for dynamically previewing changes and generating the final code. 10 | 11 | ### Credits 12 | 13 | Made with ❤️ by [Alessandro Dias](https://github.com/alessandrodias/) 14 | -------------------------------------------------------------------------------- /dist/images/share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alessandrodias/custom-scrollbars/49e467c0b42433089a2da399a9edce0a4e1a1b89/dist/images/share.jpg -------------------------------------------------------------------------------- /dist/styles.css: -------------------------------------------------------------------------------- 1 | /****************************** 2 | * Defaults & Root 3 | ******************************/ 4 | [v-cloak] { 5 | display: none; 6 | } 7 | 8 | :root { 9 | --scrollbar-width: 10px; 10 | --scrollbar-height: 10px; 11 | --thumb-border-radius: 0; 12 | --track-bg: #766e63; 13 | --thumb-bg: #ffc31f; 14 | --corner-bg: #f00; 15 | --corner-visibility: "visible"; 16 | } 17 | 18 | * { 19 | margin: 0; 20 | padding: 0; 21 | box-sizing: border-box; 22 | } 23 | 24 | body { 25 | font-family: Helvetica, Arial, sans-serif; 26 | width: 100vw; 27 | height: 100vh; 28 | min-height: 600px; 29 | background-color: #eeeeee; 30 | } 31 | 32 | .github-corner { 33 | position: absolute; 34 | top: 0; 35 | right: 0; 36 | border: 0; 37 | } 38 | 39 | .app-holder { 40 | position: fixed; 41 | top: 50%; 42 | left: 50%; 43 | transform: translate(-50%, -50%); 44 | width: 75%; 45 | max-width: 960px; 46 | height: 75%; 47 | max-height: 500px; 48 | padding: 20px; 49 | background: #1e2233; 50 | border-radius: 4px; 51 | box-shadow: 0 0 10px 4px #a9a9a9; 52 | z-index: 1; 53 | font-size: 0; 54 | } 55 | 56 | .app-title { 57 | display: block; 58 | margin: 0 auto 20px; 59 | max-width: 350px; 60 | padding: 10px; 61 | font-size: 36px; 62 | text-align: center; 63 | color: #eabf4e; 64 | border-bottom: 1px solid #eabf4e; 65 | } 66 | 67 | /****************************** 68 | * Configurations 69 | ******************************/ 70 | .configurations { 71 | display: inline-block; 72 | vertical-align: top; 73 | width: 50%; 74 | text-align: left; 75 | } 76 | 77 | .panel { 78 | padding: 20px; 79 | border: 1px solid #eabf4e; 80 | } 81 | 82 | .field { 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: center; 86 | margin: 0 0 10px; 87 | padding: 5px 10px; 88 | border: 1px solid #3d3d3d; 89 | } 90 | 91 | .field.-inactive { 92 | opacity: 0.4; 93 | pointer-events: none; 94 | font-style: italic; 95 | text-decoration: line-through; 96 | } 97 | 98 | .field:last-child { 99 | margin-bottom: 0; 100 | } 101 | 102 | .field-label { 103 | flex: 3; 104 | font-size: 16px; 105 | color: #f1f1f1; 106 | } 107 | 108 | .field-input { 109 | flex: 4; 110 | margin: 0 10px; 111 | } 112 | 113 | .field-value { 114 | flex: 1; 115 | font-size: 14px; 116 | color: #f1f1f1; 117 | text-align: center; 118 | } 119 | 120 | .-color-preview { 121 | height: 15px; 122 | border: 1px solid #fff; 123 | } 124 | 125 | /****************************** 126 | * Preview 127 | ******************************/ 128 | .preview { 129 | display: inline-block; 130 | vertical-align: top; 131 | width: calc(50% - 20px); 132 | max-height: 380px; 133 | margin-left: 20px; 134 | background: #2b3a42; 135 | overflow: auto; 136 | } 137 | 138 | .preview-content { 139 | display: block; 140 | padding: 20px; 141 | width: 600px; 142 | color: #f1f1f1; 143 | } 144 | 145 | .preview-title { 146 | display: block; 147 | font-size: 24px; 148 | color: inherit; 149 | margin: 0 0 30px; 150 | } 151 | 152 | .preview-text { 153 | display: block; 154 | font-size: 16px; 155 | color: inherit; 156 | margin: 0 0 30px; 157 | } 158 | 159 | .preview::-webkit-scrollbar { 160 | width: var(--scrollbar-width); 161 | height: var(--scrollbar-height); 162 | } 163 | 164 | .preview::-webkit-scrollbar-track { 165 | background-color: var(--track-bg); 166 | border-radius: var(--thumb-border-radius); 167 | } 168 | 169 | .preview::-webkit-scrollbar-thumb { 170 | background-color: var(--thumb-bg); 171 | border-radius: var(--thumb-border-radius); 172 | } 173 | 174 | .preview::-webkit-scrollbar-corner { 175 | visibility: var(--corner-visibility); 176 | background-color: var(--corner-bg); 177 | } 178 | 179 | /****************************** 180 | * Button to generate 181 | ******************************/ 182 | .btn-generate { 183 | display: block; 184 | margin: 20px auto 0; 185 | padding: 10px; 186 | background-color: #fbc31f; 187 | border: 1px solid #fbc31f; 188 | border-radius: 50px; 189 | width: 170px; 190 | font-size: 14px; 191 | font-weight: bold; 192 | color: #1e2233; 193 | outline: 0; 194 | cursor: pointer; 195 | text-transform: uppercase; 196 | transition: 300ms all ease; 197 | } 198 | 199 | /****************************** 200 | * Modal 201 | ******************************/ 202 | .modal { 203 | width: 100vw; 204 | height: 100vh; 205 | position: fixed; 206 | top: 50%; 207 | left: 50%; 208 | transform: translate(-50%, -50%); 209 | } 210 | 211 | .modal-overlay { 212 | position: fixed; 213 | top: 0; 214 | left: 0; 215 | width: 100%; 216 | height: 100%; 217 | background: #efeae1; 218 | z-index: 1; 219 | } 220 | 221 | .modal-body { 222 | position: absolute; 223 | top: 50%; 224 | left: 50%; 225 | transform: translate(-50%, -50%); 226 | width: 600px; 227 | margin: 0 auto; 228 | z-index: 2; 229 | } 230 | 231 | .modal-title { 232 | position: relative; 233 | display: block; 234 | margin: 4vw auto 30px; 235 | color: #1e2233; 236 | font-size: 40px; 237 | line-height: 1.5; 238 | text-align: center; 239 | z-index: 2; 240 | } 241 | 242 | .modal-title span { 243 | font-style: italic; 244 | color: #f07178; 245 | margin-right: 5px; 246 | } 247 | 248 | .modal-close { 249 | position: absolute; 250 | top: 5px; 251 | right: 5px; 252 | width: 20px; 253 | height: 20px; 254 | background: #f9f9f9; 255 | z-index: 10; 256 | font-size: 14px; 257 | line-height: 20px; 258 | color: #000; 259 | cursor: pointer; 260 | text-align: center; 261 | user-select: none; 262 | } 263 | 264 | .modal .code { 265 | position: relative; 266 | display: block; 267 | padding: 20px; 268 | background: #272822; 269 | font-size: 18px; 270 | line-height: 1.5; 271 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; 272 | color: #b2ccd6; 273 | box-shadow: 0 0 10px 1px #272822; 274 | user-select: all; 275 | } 276 | 277 | .modal-body .code .code-block { 278 | display: block; 279 | margin-bottom: 15px; 280 | } 281 | 282 | .modal-body .code .code-line { 283 | display: block; 284 | } 285 | 286 | .modal-body .code .class { 287 | color: #f07178; 288 | } 289 | 290 | .modal-body .code .property { 291 | color: #b2ccd6; 292 | padding-left: 5px; 293 | white-space: pre; 294 | } 295 | 296 | .modal-body .code .value { 297 | color: #f78c6c; 298 | } 299 | 300 | .fade-enter-active, .fade-leave-active { 301 | transition: opacity .5s; 302 | } 303 | 304 | .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 305 | opacity: 0; 306 | } 307 | 308 | @media screen and ( max-width: 900px ) { 309 | body { 310 | height: auto; 311 | } 312 | 313 | .app-holder { 314 | position: static; 315 | width: 100vw; 316 | height: auto; 317 | max-height: none; 318 | transform: none; 319 | padding: 20px 10px 10px; 320 | border-radius: 0; 321 | } 322 | 323 | .app-title { 324 | font-size: 28px; 325 | padding-top: 0; 326 | } 327 | 328 | .panel { 329 | padding: 10px; 330 | } 331 | 332 | .configurations, 333 | .preview { 334 | display: block; 335 | width: 100%; 336 | margin: 0 auto 20px; 337 | } 338 | 339 | .modal-body { 340 | width: 90%; 341 | top: 20px; 342 | transform: translateX(-50%); 343 | } 344 | 345 | .modal-title { 346 | font-size: 25px; 347 | } 348 | } 349 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Scrollbars 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Custom Scrollbars

24 | 25 |
26 |
27 |
28 | 29 | 30 | {{ width }}px 31 |
32 | 33 |
34 | 35 | 36 | {{ height }}px 37 |
38 | 39 |
40 | 41 | 42 | {{ borderRadius }}px 43 |
44 | 45 |
46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 |
56 | 57 |
58 | 59 | 60 | {{ cornerVisibility }} 61 |
62 | 63 | 64 |
65 | 66 | 67 | 68 |
69 | 70 |
71 | 72 | 73 |
74 | 75 |
76 |
77 |

This is the preview area

78 |

This is just a lorem ipsum text

79 | 80 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam, voluptatibus corporis repudiandae id ea quam eligendi minus, nobis cupiditate omnis nihil necessitatibus aliquid dolorum asperiores enim voluptatum dolorem architecto?

81 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam, voluptatibus corporis repudiandae id ea quam eligendi minus, nobis cupiditate omnis nihil necessitatibus aliquid dolorum asperiores enim voluptatum dolorem architecto?

82 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta nam, voluptatibus corporis repudiandae id ea quam eligendi minus, nobis cupiditate omnis nihil necessitatibus aliquid dolorum asperiores enim voluptatum dolorem architecto?

83 |
84 |
85 | 86 |
87 |
88 |
89 |

Click bellow to select the code, and replace the .element class

90 | 91 |
92 | x 93 | 94 | 95 |
96 |
97 | .element::-webkit-scrollbar { 98 |
99 |
100 | width: {{ width }}px; 101 |
102 |
103 | height: {{ height }}px; 104 |
105 |
106 | } 107 |
108 |
109 | 110 | 111 |
112 |
113 | .element::-webkit-scrollbar-track { 114 |
115 |
116 | background-color: {{ trackBg }}; 117 |
118 |
119 | border-radius: {{ borderRadius }}px; 120 |
121 |
122 | } 123 |
124 |
125 | 126 | 127 |
128 |
129 | .element::-webkit-scrollbar-thumb { 130 |
131 |
132 | background-color: {{ thumbBg }}; 133 |
134 |
135 | border-radius: {{ borderRadius }}px; 136 |
137 |
138 | } 139 |
140 |
141 | 142 | 143 |
144 |
145 | .element::-webkit-scrollbar-corner { 146 |
147 |
148 | background-color: {{ cornerBg }}; 149 |
150 |
151 | visibility: {{ cornerVisibility }}; 152 |
153 |
154 | } 155 |
156 |
157 | 158 |
159 | 160 |
161 |
162 |
163 | 164 | 165 | 166 | 167 | 168 | 169 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /src/scripts/main.js: -------------------------------------------------------------------------------- 1 | var app = new Vue({ 2 | el: '#app', 3 | data: { 4 | width: 10, 5 | height: 10, 6 | borderRadius: 0, 7 | trackBg: '#766e63', 8 | thumbBg: '#ffc31f', 9 | showCorner: true, 10 | cornerBg: '#ff0000', 11 | modalVisible: false, 12 | }, 13 | watch: { 14 | width() { 15 | document.documentElement.style.setProperty('--scrollbar-width', `${this.width}px`); 16 | }, 17 | height() { 18 | document.documentElement.style.setProperty('--scrollbar-height', `${this.height}px`); 19 | }, 20 | borderRadius() { 21 | document.documentElement.style.setProperty('--thumb-border-radius', `${this.borderRadius}px`); 22 | }, 23 | showCorner() { 24 | document.documentElement.style.setProperty('--corner-visibility', this.cornerVisibility); 25 | }, 26 | trackBg() { 27 | document.documentElement.style.setProperty('--track-bg', this.trackBg); 28 | }, 29 | thumbBg() { 30 | document.documentElement.style.setProperty('--thumb-bg', this.thumbBg); 31 | }, 32 | cornerBg() { 33 | document.documentElement.style.setProperty('--corner-bg', this.cornerBg); 34 | } 35 | }, 36 | computed: { 37 | cornerVisibility() { 38 | return this.showCorner ? 'visible' : 'hidden' 39 | } 40 | }, 41 | methods: { 42 | onChangeColor(element, event) { 43 | document.documentElement.style.setProperty(`--${element}-bg`, event.currentTarget.value); 44 | }, 45 | toggleModal() { 46 | this.modalVisible = !this.modalVisible; 47 | } 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /src/scripts/vendor/vue.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Vue.js v2.5.17 3 | * (c) 2014-2018 Evan You 4 | * Released under the MIT License. 5 | */ 6 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Vue=t()}(this,function(){"use strict";var y=Object.freeze({});function M(e){return null==e}function D(e){return null!=e}function S(e){return!0===e}function T(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function P(e){return null!==e&&"object"==typeof e}var r=Object.prototype.toString;function l(e){return"[object Object]"===r.call(e)}function i(e){var t=parseFloat(String(e));return 0<=t&&Math.floor(t)===t&&isFinite(e)}function t(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function F(e){var t=parseFloat(e);return isNaN(t)?e:t}function s(e,t){for(var n=Object.create(null),r=e.split(","),i=0;ie.id;)n--;bt.splice(n+1,0,e)}else bt.push(e);Ct||(Ct=!0,Ze(At))}}(this)},St.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||P(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Fe(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},St.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},St.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},St.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||f(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var Tt={enumerable:!0,configurable:!0,get:$,set:$};function Et(e,t,n){Tt.get=function(){return this[t][n]},Tt.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Tt)}function jt(e){e._watchers=[];var t=e.$options;t.props&&function(n,r){var i=n.$options.propsData||{},o=n._props={},a=n.$options._propKeys=[];n.$parent&&ge(!1);var e=function(e){a.push(e);var t=Ie(e,r,i,n);Ce(o,e,t),e in n||Et(n,"_props",e)};for(var t in r)e(t);ge(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?$:v(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;l(t=e._data="function"==typeof t?function(e,t){se();try{return e.call(t,t)}catch(e){return Fe(e,t,"data()"),{}}finally{ce()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var o=n[i];r&&p(r,o)||(void 0,36!==(a=(o+"").charCodeAt(0))&&95!==a&&Et(e,"_data",o))}var a;we(t,!0)}(e):we(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=Y();for(var i in t){var o=t[i],a="function"==typeof o?o:o.get;r||(n[i]=new St(e,a||$,$,Nt)),i in e||Lt(e,i,o)}}(e,t.computed),t.watch&&t.watch!==G&&function(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;iparseInt(this.max)&&bn(a,s[0],s,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};$n=hn,Cn={get:function(){return j}},Object.defineProperty($n,"config",Cn),$n.util={warn:re,extend:m,mergeOptions:Ne,defineReactive:Ce},$n.set=xe,$n.delete=ke,$n.nextTick=Ze,$n.options=Object.create(null),k.forEach(function(e){$n.options[e+"s"]=Object.create(null)}),m(($n.options._base=$n).options.components,kn),$n.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(-1=a&&l()};setTimeout(function(){c\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,oo="[a-zA-Z_][\\w\\-\\.]*",ao="((?:"+oo+"\\:)?"+oo+")",so=new RegExp("^<"+ao),co=/^\s*(\/?)>/,lo=new RegExp("^<\\/"+ao+"[^>]*>"),uo=/^]+>/i,fo=/^",""":'"',"&":"&"," ":"\n"," ":"\t"},go=/&(?:lt|gt|quot|amp);/g,_o=/&(?:lt|gt|quot|amp|#10|#9);/g,bo=s("pre,textarea",!0),$o=function(e,t){return e&&bo(e)&&"\n"===t[0]};var wo,Co,xo,ko,Ao,Oo,So,To,Eo=/^@|^v-on:/,jo=/^v-|^@|^:/,No=/([^]*?)\s+(?:in|of)\s+([^]*)/,Lo=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Io=/^\(|\)$/g,Mo=/:(.*)$/,Do=/^:|^v-bind:/,Po=/\.[^.]+/g,Fo=e(eo);function Ro(e,t,n){return{type:1,tag:e,attrsList:t,attrsMap:function(e){for(var t={},n=0,r=e.length;n]*>)","i")),n=i.replace(t,function(e,t,n){return r=n.length,ho(o)||"noscript"===o||(t=t.replace(//g,"$1").replace(//g,"$1")),$o(o,t)&&(t=t.slice(1)),d.chars&&d.chars(t),""});a+=i.length-n.length,i=n,A(o,a-r,a)}else{var s=i.indexOf("<");if(0===s){if(fo.test(i)){var c=i.indexOf("--\x3e");if(0<=c){d.shouldKeepComment&&d.comment(i.substring(4,c)),C(c+3);continue}}if(po.test(i)){var l=i.indexOf("]>");if(0<=l){C(l+2);continue}}var u=i.match(uo);if(u){C(u[0].length);continue}var f=i.match(lo);if(f){var p=a;C(f[0].length),A(f[1],p,a);continue}var _=x();if(_){k(_),$o(v,i)&&C(1);continue}}var b=void 0,$=void 0,w=void 0;if(0<=s){for($=i.slice(s);!(lo.test($)||so.test($)||fo.test($)||po.test($)||(w=$.indexOf("<",1))<0);)s+=w,$=i.slice(s);b=i.substring(0,s),C(s)}s<0&&(b=i,i=""),d.chars&&b&&d.chars(b)}if(i===e){d.chars&&d.chars(i);break}}function C(e){a+=e,i=i.substring(e)}function x(){var e=i.match(so);if(e){var t,n,r={tagName:e[1],attrs:[],start:a};for(C(e[0].length);!(t=i.match(co))&&(n=i.match(io));)C(n[0].length),r.attrs.push(n);if(t)return r.unarySlash=t[1],C(t[0].length),r.end=a,r}}function k(e){var t=e.tagName,n=e.unarySlash;m&&("p"===v&&ro(t)&&A(v),g(t)&&v===t&&A(t));for(var r,i,o,a=y(t)||!!n,s=e.attrs.length,c=new Array(s),l=0;l-1"+("true"===d?":("+l+")":":_q("+l+","+d+")")),Ar(c,"change","var $$a="+l+",$$el=$event.target,$$c=$$el.checked?("+d+"):("+v+");if(Array.isArray($$a)){var $$v="+(f?"_n("+p+")":p)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Er(l,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Er(l,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Er(l,"$$c")+"}",null,!0);else if("input"===$&&"radio"===w)r=e,i=_,a=(o=b)&&o.number,s=Or(r,"value")||"null",Cr(r,"checked","_q("+i+","+(s=a?"_n("+s+")":s)+")"),Ar(r,"change",Er(i,s),null,!0);else if("input"===$||"textarea"===$)!function(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,l=o?"change":"range"===r?Pr:"input",u="$event.target.value";s&&(u="$event.target.value.trim()"),a&&(u="_n("+u+")");var f=Er(t,u);c&&(f="if($event.target.composing)return;"+f),Cr(e,"value","("+t+")"),Ar(e,l,f,null,!0),(s||a)&&Ar(e,"blur","$forceUpdate()")}(e,_,b);else if(!j.isReservedTag($))return Tr(e,_,b),!1;return!0},text:function(e,t){t.value&&Cr(e,"textContent","_s("+t.value+")")},html:function(e,t){t.value&&Cr(e,"innerHTML","_s("+t.value+")")}},isPreTag:function(e){return"pre"===e},isUnaryTag:to,mustUseProp:Sn,canBeLeftOpenTag:no,isReservedTag:Un,getTagNamespace:Vn,staticKeys:(Go=Wo,Go.reduce(function(e,t){return e.concat(t.staticKeys||[])},[]).join(","))},Qo=e(function(e){return s("type,tag,attrsList,attrsMap,plain,parent,children,attrs"+(e?","+e:""))});function ea(e,t){e&&(Zo=Qo(t.staticKeys||""),Xo=t.isReservedTag||O,function e(t){t.static=function(e){if(2===e.type)return!1;if(3===e.type)return!0;return!(!e.pre&&(e.hasBindings||e.if||e.for||c(e.tag)||!Xo(e.tag)||function(e){for(;e.parent;){if("template"!==(e=e.parent).tag)return!1;if(e.for)return!0}return!1}(e)||!Object.keys(e).every(Zo)))}(t);if(1===t.type){if(!Xo(t.tag)&&"slot"!==t.tag&&null==t.attrsMap["inline-template"])return;for(var n=0,r=t.children.length;n|^function\s*\(/,na=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,ra={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},ia={esc:"Escape",tab:"Tab",enter:"Enter",space:" ",up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete"]},oa=function(e){return"if("+e+")return null;"},aa={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:oa("$event.target !== $event.currentTarget"),ctrl:oa("!$event.ctrlKey"),shift:oa("!$event.shiftKey"),alt:oa("!$event.altKey"),meta:oa("!$event.metaKey"),left:oa("'button' in $event && $event.button !== 0"),middle:oa("'button' in $event && $event.button !== 1"),right:oa("'button' in $event && $event.button !== 2")};function sa(e,t,n){var r=t?"nativeOn:{":"on:{";for(var i in e)r+='"'+i+'":'+ca(i,e[i])+",";return r.slice(0,-1)+"}"}function ca(t,e){if(!e)return"function(){}";if(Array.isArray(e))return"["+e.map(function(e){return ca(t,e)}).join(",")+"]";var n=na.test(e.value),r=ta.test(e.value);if(e.modifiers){var i="",o="",a=[];for(var s in e.modifiers)if(aa[s])o+=aa[s],ra[s]&&a.push(s);else if("exact"===s){var c=e.modifiers;o+=oa(["ctrl","shift","alt","meta"].filter(function(e){return!c[e]}).map(function(e){return"$event."+e+"Key"}).join("||"))}else a.push(s);return a.length&&(i+="if(!('button' in $event)&&"+a.map(la).join("&&")+")return null;"),o&&(i+=o),"function($event){"+i+(n?"return "+e.value+"($event)":r?"return ("+e.value+")($event)":e.value)+"}"}return n||r?e.value:"function($event){"+e.value+"}"}function la(e){var t=parseInt(e,10);if(t)return"$event.keyCode!=="+t;var n=ra[e],r=ia[e];return"_k($event.keyCode,"+JSON.stringify(e)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(r)+")"}var ua={on:function(e,t){e.wrapListeners=function(e){return"_g("+e+","+t.value+")"}},bind:function(t,n){t.wrapData=function(e){return"_b("+e+",'"+t.tag+"',"+n.value+","+(n.modifiers&&n.modifiers.prop?"true":"false")+(n.modifiers&&n.modifiers.sync?",true":"")+")"}},cloak:$},fa=function(e){this.options=e,this.warn=e.warn||$r,this.transforms=wr(e.modules,"transformCode"),this.dataGenFns=wr(e.modules,"genData"),this.directives=m(m({},ua),e.directives);var t=e.isReservedTag||O;this.maybeComponent=function(e){return!t(e.tag)},this.onceId=0,this.staticRenderFns=[]};function pa(e,t){var n=new fa(t);return{render:"with(this){return "+(e?da(e,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function da(e,t){if(e.staticRoot&&!e.staticProcessed)return va(e,t);if(e.once&&!e.onceProcessed)return ha(e,t);if(e.for&&!e.forProcessed)return f=t,v=(u=e).for,h=u.alias,m=u.iterator1?","+u.iterator1:"",y=u.iterator2?","+u.iterator2:"",u.forProcessed=!0,(d||"_l")+"(("+v+"),function("+h+m+y+"){return "+(p||da)(u,f)+"})";if(e.if&&!e.ifProcessed)return ma(e,t);if("template"!==e.tag||e.slotTarget){if("slot"===e.tag)return function(e,t){var n=e.slotName||'"default"',r=_a(e,t),i="_t("+n+(r?","+r:""),o=e.attrs&&"{"+e.attrs.map(function(e){return g(e.name)+":"+e.value}).join(",")+"}",a=e.attrsMap["v-bind"];!o&&!a||r||(i+=",null");o&&(i+=","+o);a&&(i+=(o?"":",null")+","+a);return i+")"}(e,t);var n;if(e.component)a=e.component,c=t,l=(s=e).inlineTemplate?null:_a(s,c,!0),n="_c("+a+","+ya(s,c)+(l?","+l:"")+")";else{var r=e.plain?void 0:ya(e,t),i=e.inlineTemplate?null:_a(e,t,!0);n="_c('"+e.tag+"'"+(r?","+r:"")+(i?","+i:"")+")"}for(var o=0;o':'
',0