corrected buttons scaling when active; started tests with Vue SFCs

2020-06-22 22:05:19 +02:00 · 2020-06-22 22:05:19 +02:00 · 7912a8d4e2
commit 7912a8d4e2
parent 657f02c7d5
9 changed files with 590 additions and 7 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -109,6 +109,42 @@
 				"@types/node": "*"
 			}
 		},
+		"@vue/component-compiler": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@vue/component-compiler/-/component-compiler-3.6.0.tgz",
+			"integrity": "sha512-NIA0vmOI4zbtJAn69iZls8IJ8VxmguswAuiUdu8TcR+YYTYzntfw290HUCSFjzAdRg+FUWZv8r+wc3TzJ/IjwA==",
+			"dev": true,
+			"requires": {
+				"@vue/component-compiler-utils": "^2.1.0",
+				"clean-css": "^4.1.11",
+				"hash-sum": "^1.0.2",
+				"postcss-modules-sync": "^1.0.0",
+				"source-map": "0.6.*"
+			}
+		},
+		"@vue/component-compiler-utils": {
+			"version": "2.6.0",
+			"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz",
+			"integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==",
+			"dev": true,
+			"requires": {
+				"consolidate": "^0.15.1",
+				"hash-sum": "^1.0.2",
+				"lru-cache": "^4.1.2",
+				"merge-source-map": "^1.1.0",
+				"postcss": "^7.0.14",
+				"postcss-selector-parser": "^5.0.0",
+				"prettier": "1.16.3",
+				"source-map": "~0.6.1",
+				"vue-template-es2015-compiler": "^1.9.0"
+			}
+		},
+		"ansi-regex": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+			"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+			"dev": true
+		},
 		"ansi-styles": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -134,12 +170,24 @@
 			"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
 			"dev": true
 		},
+		"big.js": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+			"integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+			"dev": true
+		},
 		"binary-extensions": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
 			"integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
 			"dev": true
 		},
+		"bluebird": {
+			"version": "3.7.2",
+			"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+			"integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
+			"dev": true
+		},
 		"brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -198,6 +246,15 @@
 				"readdirp": "~3.4.0"
 			}
 		},
+		"clean-css": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+			"integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
+			"dev": true,
+			"requires": {
+				"source-map": "~0.6.0"
+			}
+		},
 		"color-convert": {
 			"version": "1.9.3",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -225,6 +282,15 @@
 			"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
 			"dev": true
 		},
+		"consolidate": {
+			"version": "0.15.1",
+			"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
+			"integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
+			"dev": true,
+			"requires": {
+				"bluebird": "^3.1.1"
+			}
+		},
 		"cross-spawn": {
 			"version": "6.0.5",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@ -238,6 +304,46 @@
 				"which": "^1.2.9"
 			}
 		},
+		"css-selector-tokenizer": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz",
+			"integrity": "sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==",
+			"dev": true,
+			"requires": {
+				"cssesc": "^3.0.0",
+				"fastparse": "^1.1.2",
+				"regexpu-core": "^4.6.0"
+			},
+			"dependencies": {
+				"cssesc": {
+					"version": "3.0.0",
+					"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+					"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+					"dev": true
+				}
+			}
+		},
+		"cssesc": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+			"integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+			"dev": true
+		},
+		"de-indent": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+			"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+			"dev": true
+		},
+		"debug": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+			"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+			"dev": true,
+			"requires": {
+				"ms": "^2.1.1"
+			}
+		},
 		"deep-freeze": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
@ -259,6 +365,12 @@
 				"object-keys": "^1.0.12"
 			}
 		},
+		"emojis-list": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+			"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+			"dev": true
+		},
 		"error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@ -310,6 +422,12 @@
 			"integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
 			"dev": true
 		},
+		"fastparse": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+			"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+			"dev": true
+		},
 		"fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -338,6 +456,15 @@
 			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 			"dev": true
 		},
+		"generic-names": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz",
+			"integrity": "sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=",
+			"dev": true,
+			"requires": {
+				"loader-utils": "^0.2.16"
+			}
+		},
 		"glob": {
 			"version": "7.1.6",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@ -376,6 +503,15 @@
 				"function-bind": "^1.1.1"
 			}
 		},
+		"has-ansi": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+			"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+			"dev": true,
+			"requires": {
+				"ansi-regex": "^2.0.0"
+			}
+		},
 		"has-flag": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -388,12 +524,36 @@
 			"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
 			"dev": true
 		},
+		"hash-sum": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+			"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+			"dev": true
+		},
+		"he": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+			"dev": true
+		},
 		"hosted-git-info": {
 			"version": "2.8.8",
 			"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
 			"integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
 			"dev": true
 		},
+		"icss-replace-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+			"integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+			"dev": true
+		},
+		"indexes-of": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+			"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+			"dev": true
+		},
 		"inflight": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@ -537,18 +697,36 @@
 			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
 			"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
 		},
+		"js-base64": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.1.tgz",
+			"integrity": "sha512-G5x2saUTupU9D/xBY9snJs3TxvwX8EkpLFiYlPpDt/VmMHOXprnSU1nxiTmFbijCX4BLF/cMRIfAcC5BiMYgFQ==",
+			"dev": true
+		},
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
 			"dev": true
 		},
+		"jsesc": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+			"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+			"dev": true
+		},
 		"json-parse-better-errors": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
 			"integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
 			"dev": true
 		},
+		"json5": {
+			"version": "0.5.1",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+			"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+			"dev": true
+		},
 		"load-json-file": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@ -561,11 +739,33 @@
 				"strip-bom": "^3.0.0"
 			}
 		},
+		"loader-utils": {
+			"version": "0.2.17",
+			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+			"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+			"dev": true,
+			"requires": {
+				"big.js": "^3.1.3",
+				"emojis-list": "^2.0.0",
+				"json5": "^0.5.0",
+				"object-assign": "^4.0.1"
+			}
+		},
 		"lodash-es": {
 			"version": "4.17.15",
 			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
 			"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
 		},
+		"lru-cache": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+			"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+			"dev": true,
+			"requires": {
+				"pseudomap": "^1.0.2",
+				"yallist": "^2.1.2"
+			}
+		},
 		"magic-string": {
 			"version": "0.25.7",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@ -581,6 +781,15 @@
 			"integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=",
 			"dev": true
 		},
+		"merge-source-map": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
+			"integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
+			"dev": true,
+			"requires": {
+				"source-map": "^0.6.1"
+			}
+		},
 		"merge-stream": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -596,6 +805,12 @@
 				"brace-expansion": "^1.1.7"
 			}
 		},
+		"ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+			"dev": true
+		},
 		"nice-try": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -637,6 +852,12 @@
 				"string.prototype.padend": "^3.0.0"
 			}
 		},
+		"object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+			"dev": true
+		},
 		"object-inspect": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
@ -725,6 +946,179 @@
 			"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
 			"dev": true
 		},
+		"postcss": {
+			"version": "7.0.32",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+			"integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+			"dev": true,
+			"requires": {
+				"chalk": "^2.4.2",
+				"source-map": "^0.6.1",
+				"supports-color": "^6.1.0"
+			},
+			"dependencies": {
+				"supports-color": {
+					"version": "6.1.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+					"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+					"dev": true,
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
+		"postcss-modules-local-by-default": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+			"integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+			"dev": true,
+			"requires": {
+				"css-selector-tokenizer": "^0.7.0",
+				"postcss": "^6.0.1"
+			},
+			"dependencies": {
+				"postcss": {
+					"version": "6.0.23",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+					"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+					"dev": true,
+					"requires": {
+						"chalk": "^2.4.1",
+						"source-map": "^0.6.1",
+						"supports-color": "^5.4.0"
+					}
+				}
+			}
+		},
+		"postcss-modules-scope": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+			"integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+			"dev": true,
+			"requires": {
+				"css-selector-tokenizer": "^0.7.0",
+				"postcss": "^6.0.1"
+			},
+			"dependencies": {
+				"postcss": {
+					"version": "6.0.23",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+					"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+					"dev": true,
+					"requires": {
+						"chalk": "^2.4.1",
+						"source-map": "^0.6.1",
+						"supports-color": "^5.4.0"
+					}
+				}
+			}
+		},
+		"postcss-modules-sync": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-modules-sync/-/postcss-modules-sync-1.0.0.tgz",
+			"integrity": "sha1-YZpxnPeN0WpINBNRQLMkz3czS+E=",
+			"dev": true,
+			"requires": {
+				"generic-names": "^1.0.2",
+				"icss-replace-symbols": "^1.0.2",
+				"postcss": "^5.2.5",
+				"postcss-modules-local-by-default": "^1.1.1",
+				"postcss-modules-scope": "^1.0.2",
+				"string-hash": "^1.1.0"
+			},
+			"dependencies": {
+				"ansi-styles": {
+					"version": "2.2.1",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+					"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+					"dev": true
+				},
+				"chalk": {
+					"version": "1.1.3",
+					"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+					"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+					"dev": true,
+					"requires": {
+						"ansi-styles": "^2.2.1",
+						"escape-string-regexp": "^1.0.2",
+						"has-ansi": "^2.0.0",
+						"strip-ansi": "^3.0.0",
+						"supports-color": "^2.0.0"
+					},
+					"dependencies": {
+						"supports-color": {
+							"version": "2.0.0",
+							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+							"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+							"dev": true
+						}
+					}
+				},
+				"has-flag": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+					"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+					"dev": true
+				},
+				"postcss": {
+					"version": "5.2.18",
+					"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
+					"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+					"dev": true,
+					"requires": {
+						"chalk": "^1.1.3",
+						"js-base64": "^2.1.9",
+						"source-map": "^0.5.6",
+						"supports-color": "^3.2.3"
+					}
+				},
+				"source-map": {
+					"version": "0.5.7",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+					"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+					"dev": true
+				},
+				"supports-color": {
+					"version": "3.2.3",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+					"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+					"dev": true,
+					"requires": {
+						"has-flag": "^1.0.0"
+					}
+				}
+			}
+		},
+		"postcss-selector-parser": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+			"integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+			"dev": true,
+			"requires": {
+				"cssesc": "^2.0.0",
+				"indexes-of": "^1.0.1",
+				"uniq": "^1.0.1"
+			}
+		},
+		"prettier": {
+			"version": "1.16.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
+			"integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
+			"dev": true
+		},
+		"pseudomap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+			"integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+			"dev": true
+		},
+		"querystring": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+			"integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
+			"dev": true
+		},
 		"randombytes": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -754,6 +1148,50 @@
 				"picomatch": "^2.2.1"
 			}
 		},
+		"regenerate": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
+			"integrity": "sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==",
+			"dev": true
+		},
+		"regenerate-unicode-properties": {
+			"version": "8.2.0",
+			"resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+			"integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+			"dev": true,
+			"requires": {
+				"regenerate": "^1.4.0"
+			}
+		},
+		"regexpu-core": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
+			"integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
+			"dev": true,
+			"requires": {
+				"regenerate": "^1.4.0",
+				"regenerate-unicode-properties": "^8.2.0",
+				"regjsgen": "^0.5.1",
+				"regjsparser": "^0.6.4",
+				"unicode-match-property-ecmascript": "^1.0.4",
+				"unicode-match-property-value-ecmascript": "^1.2.0"
+			}
+		},
+		"regjsgen": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+			"integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
+			"dev": true
+		},
+		"regjsparser": {
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+			"integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
+			"dev": true,
+			"requires": {
+				"jsesc": "~0.5.0"
+			}
+		},
 		"resolve": {
 			"version": "1.17.0",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@ -799,6 +1237,48 @@
 				"terser": "^4.7.0"
 			}
 		},
+		"rollup-plugin-vue": {
+			"version": "4.7.1",
+			"resolved": "https://registry.npmjs.org/rollup-plugin-vue/-/rollup-plugin-vue-4.7.1.tgz",
+			"integrity": "sha512-zegQMEgt5Mb3/lG7Nu5g+OXGKGW9KNltj3XjW4jVAiaVIyIlYTYsHK+k42S9//xhUoqvd7b4Fki5dGQJB+fdsg==",
+			"dev": true,
+			"requires": {
+				"@vue/component-compiler": "^3.6",
+				"@vue/component-compiler-utils": "^2.1.0",
+				"debug": "^4.1.1",
+				"hash-sum": "^1.0.2",
+				"magic-string": "^0.25.2",
+				"querystring": "^0.2.0",
+				"rollup-pluginutils": "^2.0.1",
+				"source-map": "0.7.3",
+				"vue-runtime-helpers": "1.0.0"
+			},
+			"dependencies": {
+				"source-map": {
+					"version": "0.7.3",
+					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+					"integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+					"dev": true
+				}
+			}
+		},
+		"rollup-pluginutils": {
+			"version": "2.8.2",
+			"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+			"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+			"dev": true,
+			"requires": {
+				"estree-walker": "^0.6.1"
+			},
+			"dependencies": {
+				"estree-walker": {
+					"version": "0.6.1",
+					"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+					"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+					"dev": true
+				}
+			}
+		},
 		"safe-buffer": {
 			"version": "5.2.1",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -910,6 +1390,12 @@
 			"integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
 			"dev": true
 		},
+		"string-hash": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+			"integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
+			"dev": true
+		},
 		"string.prototype.padend": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz",
@ -962,6 +1448,15 @@
 				"es-abstract": "^1.17.5"
 			}
 		},
+		"strip-ansi": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+			"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+			"dev": true,
+			"requires": {
+				"ansi-regex": "^2.0.0"
+			}
+		},
 		"strip-bom": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@ -1002,6 +1497,40 @@
 			"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.8.0.tgz",
 			"integrity": "sha512-0Zf1sQ6Cs5RrRRDox00+6XdgS2tOtn01P9zhxDcJIpDS0KbXg/dFE1F0Mo6b/o63oJsxIhleeZv9LeZb31yKSg=="
 		},
+		"unicode-canonical-property-names-ecmascript": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+			"integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+			"dev": true
+		},
+		"unicode-match-property-ecmascript": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+			"integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+			"dev": true,
+			"requires": {
+				"unicode-canonical-property-names-ecmascript": "^1.0.4",
+				"unicode-property-aliases-ecmascript": "^1.0.4"
+			}
+		},
+		"unicode-match-property-value-ecmascript": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+			"integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+			"dev": true
+		},
+		"unicode-property-aliases-ecmascript": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+			"integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+			"dev": true
+		},
+		"uniq": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+			"integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+			"dev": true
+		},
 		"validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@ -1017,6 +1546,28 @@
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
 			"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
 		},
+		"vue-runtime-helpers": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/vue-runtime-helpers/-/vue-runtime-helpers-1.0.0.tgz",
+			"integrity": "sha512-DgwCNgIXkq1GJsWwtFOjA/K2nxpjyon/QqAut0EiwrMHBatAPbfdqksDdRoK15b5YrSJRa59rx3pc0L6V4udUA==",
+			"dev": true
+		},
+		"vue-template-compiler": {
+			"version": "2.6.11",
+			"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
+			"integrity": "sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==",
+			"dev": true,
+			"requires": {
+				"de-indent": "^1.0.2",
+				"he": "^1.1.0"
+			}
+		},
+		"vue-template-es2015-compiler": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
+			"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
+			"dev": true
+		},
 		"which": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@ -1031,6 +1582,12 @@
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
 			"dev": true
+		},
+		"yallist": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+			"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+			"dev": true
 		}
 	}
 }
--- a/package.json
+++ b/package.json
@ -32,6 +32,8 @@
 		"rollup": "^2.14.0",
 		"rollup-plugin-analyzer": "^3.2.3",
 		"rollup-plugin-terser": "^6.1.0",
-		"sass": "^1.26.8"
+		"rollup-plugin-vue": "^4.7.1",
+		"sass": "^1.26.8",
+		"vue-template-compiler": "^2.6.11"
 	}
 }
--- a/public/css/style.css
+++ b/public/css/style.css
--- a/public/js/bundle.js
+++ b/public/js/bundle.js
--- a/rollup.config.js
+++ b/rollup.config.js
@ -4,6 +4,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
 import alias from '@rollup/plugin-alias'
 import analyze from 'rollup-plugin-analyzer'
+import vue from 'rollup-plugin-vue'

 // 'rollup -c' -> 'production' is false
 // 'rollup -c -w' -> 'production' is true
@ -33,6 +34,7 @@ export default {
 		}),
 		resolve(), // Tells Rollup how to find imported modules in node_modules
 		commonjs(), // Converts imported modules to ES modules, if necessary
+		vue(),
 		production && terser(), // Minify, but only in production
 		production && analyze({ showExports: true, limit: 15 }) // Show useful information about bundles, only in production
 	]
--- a/src/js/modules/components/TestComponent.vue
+++ b/src/js/modules/components/TestComponent.vue
@ -0,0 +1,17 @@
+<template>
+	<div>Test</div>
+</template>
+
+<script>
+export default {
+	data: () => ({
+		test: 'super test'
+	}),
+	mounted() {
+		console.log('abcdefghi')
+	}
+}
+</script>
+
+<style>
+</style>
--- a/src/js/modules/components/settings-tab.js
+++ b/src/js/modules/components/settings-tab.js
@ -1,8 +1,12 @@
 import Vue from 'vue'
 import { toast } from '../toasts.js'
 import { socket } from '../socket.js'
+import TestComponent from './TestComponent.vue'

 const SettingsTab = new Vue({
+	components: {
+		TestComponent
+	},
 	data: () => ({
 		settings: { tags: {} },
 		lastSettings: {},
--- a/src/js/modules/tabs.js
+++ b/src/js/modules/tabs.js
@ -209,6 +209,7 @@ function changeTab(sidebarEl, section, tabName) {
 	for (i = 0; i < tablinks.length; i++) {
 		tablinks[i].classList.remove('active')
 	}
+
 	if (tabName == 'settings_tab' && main_selected != 'settings_tab') {
 		SettingsTab.settings = { ...SettingsTab.lastSettings }
 		SettingsTab.spotifyCredentials = { ...SettingsTab.lastCredentials }
--- a/src/styles/scss/globals/_globals.scss
+++ b/src/styles/scss/globals/_globals.scss
@ -112,7 +112,7 @@ button {

 	&:active {
 		background-color: var(--accent-color);
-		transform: scale(0.95);
+		transform: scale(0.98);
 	}

 	&:hover {