diff --git a/.commitlintrc.js b/.commitlintrc.js
index a6c9ca11..d4d0b34a 100644
--- a/.commitlintrc.js
+++ b/.commitlintrc.js
@@ -29,6 +29,7 @@ module.exports = {
                 'range-slider',
                 'select',
                 'table',
+                'tabs',
                 'textarea',
                 'toggle',
                 'pagination',
diff --git a/package-lock.json b/package-lock.json
index 5c7f72e5..327c0eb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
                 "@vitejs/plugin-vue": "^2.0.1",
                 "@vue/compiler-sfc": "^3.2.11",
                 "@vue/eslint-config-typescript": "^10.0.0",
-                "@vue/test-utils": "2.0.0-rc.16",
+                "@vue/test-utils": "2.0.0-rc.18",
                 "@vue/vue3-jest": "^27.0.0-alpha.3",
                 "autoprefixer": "^10.4.0",
                 "babel-jest": "^27.3.1",
@@ -59,6 +59,19 @@
                 "vue": "^3.2.25"
             }
         },
+        "node_modules/@ampproject/remapping": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.0.2.tgz",
+            "integrity": "sha512-sE8Gx+qSDMLoJvb3QarJJlDQK7SSY4rK3hxp4XsiANeFOmjU46ZI7Y9adAQRJrmbz8zbtZkp3mJTT+rGxtF0XA==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/trace-mapping": "^0.2.2",
+                "sourcemap-codec": "1.4.8"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/@babel/code-frame": {
             "version": "7.16.7",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -72,35 +85,35 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
-            "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
+            "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/core": {
-            "version": "7.16.12",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
-            "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
+            "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
             "dev": true,
             "dependencies": {
+                "@ampproject/remapping": "^2.0.0",
                 "@babel/code-frame": "^7.16.7",
-                "@babel/generator": "^7.16.8",
+                "@babel/generator": "^7.17.0",
                 "@babel/helper-compilation-targets": "^7.16.7",
                 "@babel/helper-module-transforms": "^7.16.7",
-                "@babel/helpers": "^7.16.7",
-                "@babel/parser": "^7.16.12",
+                "@babel/helpers": "^7.17.0",
+                "@babel/parser": "^7.17.0",
                 "@babel/template": "^7.16.7",
-                "@babel/traverse": "^7.16.10",
-                "@babel/types": "^7.16.8",
+                "@babel/traverse": "^7.17.0",
+                "@babel/types": "^7.17.0",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
                 "json5": "^2.1.2",
-                "semver": "^6.3.0",
-                "source-map": "^0.5.0"
+                "semver": "^6.3.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -111,12 +124,12 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
-            "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+            "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.16.8",
+                "@babel/types": "^7.17.0",
                 "jsesc": "^2.5.1",
                 "source-map": "^0.5.0"
             },
@@ -275,14 +288,14 @@
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.16.7",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
-            "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
+            "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
             "dev": true,
             "dependencies": {
                 "@babel/template": "^7.16.7",
-                "@babel/traverse": "^7.16.7",
-                "@babel/types": "^7.16.7"
+                "@babel/traverse": "^7.17.0",
+                "@babel/types": "^7.17.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -303,9 +316,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.16.12",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz",
-            "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+            "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
             "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -509,19 +522,19 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.16.10",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
-            "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+            "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.16.7",
-                "@babel/generator": "^7.16.8",
+                "@babel/generator": "^7.17.0",
                 "@babel/helper-environment-visitor": "^7.16.7",
                 "@babel/helper-function-name": "^7.16.7",
                 "@babel/helper-hoist-variables": "^7.16.7",
                 "@babel/helper-split-export-declaration": "^7.16.7",
-                "@babel/parser": "^7.16.10",
-                "@babel/types": "^7.16.8",
+                "@babel/parser": "^7.17.0",
+                "@babel/types": "^7.17.0",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -530,9 +543,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
-            "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+            "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-validator-identifier": "^7.16.7",
@@ -1222,9 +1235,9 @@
             "dev": true
         },
         "node_modules/@eslint/eslintrc/node_modules/globals": {
-            "version": "13.12.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-            "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+            "version": "13.12.1",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+            "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
             "dev": true,
             "dependencies": {
                 "type-fest": "^0.20.2"
@@ -1958,6 +1971,25 @@
                 "node": ">=8"
             }
         },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
+            "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.2.4.tgz",
+            "integrity": "sha512-W/qPHey63KLHPC7zzvXeul8ouaugOu232lUPbyBAuoG9s+bmDSP1ANulLjGCf34Je3sGUPtw/Cg52e7ALY9+3w==",
+            "dev": true,
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.0.3",
+                "sourcemap-codec": "1.4.8"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2207,9 +2239,9 @@
             "dev": true
         },
         "node_modules/@types/node": {
-            "version": "17.0.13",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.13.tgz",
-            "integrity": "sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==",
+            "version": "17.0.14",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.14.tgz",
+            "integrity": "sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==",
             "dev": true
         },
         "node_modules/@types/normalize-package-data": {
@@ -2255,9 +2287,9 @@
             "dev": true
         },
         "node_modules/@types/tailwindcss": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.4.tgz",
-            "integrity": "sha512-ICFSmSeBMqPCpa3/fIGt4jjLbbIxqpV3pZeniosFIZ3dEWxSJH+6j0Gm3GOLnUQ18/bOiIFjuH3Tha+WhogiOA==",
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.5.tgz",
+            "integrity": "sha512-PwkiuWKrwyS8bPVtMMzh+WRUPJ/1Hd+QuQhVbp5XHj0XsQNyDE+jKjpmzz4MgoLVtYTuHJz1BvbOWaAVWKIBqw==",
             "dev": true
         },
         "node_modules/@types/yargs": {
@@ -2276,14 +2308,14 @@
             "dev": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.1.tgz",
-            "integrity": "sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.2.tgz",
+            "integrity": "sha512-4W/9lLuE+v27O/oe7hXJKjNtBLnZE8tQAFpapdxwSVHqtmIoPB1gph3+ahNwVuNL37BX7YQHyGF9Xv6XCnIX2Q==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/type-utils": "5.10.1",
-                "@typescript-eslint/utils": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/type-utils": "5.10.2",
+                "@typescript-eslint/utils": "5.10.2",
                 "debug": "^4.3.2",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.1.8",
@@ -2324,12 +2356,12 @@
             }
         },
         "node_modules/@typescript-eslint/experimental-utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.1.tgz",
-            "integrity": "sha512-Ryeb8nkJa/1zKl8iujNtJC8tgj6PgaY0sDUnrTqbmC70nrKKkZaHfiRDTcqICmCSCEQyLQcJAoh0AukLaIaGTw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.2.tgz",
+            "integrity": "sha512-stRnIlxDduzxtaVLtEohESoXI1k7J6jvJHGyIkOT2pvXbg5whPM6f9tzJ51bJJxaJTdmvwgVFDNCopFRb2F5Gw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/utils": "5.10.1"
+                "@typescript-eslint/utils": "5.10.2"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2343,14 +2375,14 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz",
-            "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.2.tgz",
+            "integrity": "sha512-JaNYGkaQVhP6HNF+lkdOr2cAs2wdSZBoalE22uYWq8IEv/OVH0RksSGydk+sW8cLoSeYmC+OHvRyv2i4AQ7Czg==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/typescript-estree": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/typescript-estree": "5.10.2",
                 "debug": "^4.3.2"
             },
             "engines": {
@@ -2370,13 +2402,13 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz",
-            "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.2.tgz",
+            "integrity": "sha512-39Tm6f4RoZoVUWBYr3ekS75TYgpr5Y+X0xLZxXqcZNDWZdJdYbKd3q2IR4V9y5NxxiPu/jxJ8XP7EgHiEQtFnw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/visitor-keys": "5.10.1"
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/visitor-keys": "5.10.2"
             },
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2387,12 +2419,12 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.1.tgz",
-            "integrity": "sha512-AfVJkV8uck/UIoDqhu+ptEdBoQATON9GXnhOpPLzkQRJcSChkvD//qsz9JVffl2goxX+ybs5klvacE9vmrQyCw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.2.tgz",
+            "integrity": "sha512-uRKSvw/Ccs5FYEoXW04Z5VfzF2iiZcx8Fu7DGIB7RHozuP0VbKNzP1KfZkHBTM75pCpsWxIthEH1B33dmGBKHw==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/utils": "5.10.1",
+                "@typescript-eslint/utils": "5.10.2",
                 "debug": "^4.3.2",
                 "tsutils": "^3.21.0"
             },
@@ -2413,9 +2445,9 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz",
-            "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.2.tgz",
+            "integrity": "sha512-Qfp0qk/5j2Rz3p3/WhWgu4S1JtMcPgFLnmAKAW061uXxKSa7VWKZsDXVaMXh2N60CX9h6YLaBoy9PJAfCOjk3w==",
             "dev": true,
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2426,13 +2458,13 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz",
-            "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.2.tgz",
+            "integrity": "sha512-WHHw6a9vvZls6JkTgGljwCsMkv8wu8XU8WaYKeYhxhWXH/atZeiMW6uDFPLZOvzNOGmuSMvHtZKd6AuC8PrwKQ==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/visitor-keys": "5.10.1",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/visitor-keys": "5.10.2",
                 "debug": "^4.3.2",
                 "globby": "^11.0.4",
                 "is-glob": "^4.0.3",
@@ -2468,15 +2500,15 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.1.tgz",
-            "integrity": "sha512-RRmlITiUbLuTRtn/gcPRi4202niF+q7ylFLCKu4c+O/PcpRvZ/nAUwQ2G00bZgpWkhrNLNnvhZLbDn8Ml0qsQw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.2.tgz",
+            "integrity": "sha512-vuJaBeig1NnBRkf7q9tgMLREiYD7zsMrsN1DA3wcoMDvr3BTFiIpKjGiYZoKPllfEwN7spUjv7ZqD+JhbVjEPg==",
             "dev": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/typescript-estree": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/typescript-estree": "5.10.2",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             },
@@ -2492,12 +2524,12 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz",
-            "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.2.tgz",
+            "integrity": "sha512-zHIhYGGGrFJvvyfwHk5M08C5B5K4bewkm+rrvNTKk1/S15YHR+SA/QUF8ZWscXSfEaB8Nn2puZj+iHcoxVOD/Q==",
             "dev": true,
             "dependencies": {
-                "@typescript-eslint/types": "5.10.1",
+                "@typescript-eslint/types": "5.10.2",
                 "eslint-visitor-keys": "^3.0.0"
             },
             "engines": {
@@ -2676,9 +2708,9 @@
             "dev": true
         },
         "node_modules/@vue/test-utils": {
-            "version": "2.0.0-rc.16",
-            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.16.tgz",
-            "integrity": "sha512-TubikDVkI2LuRKRPSLv3lYpbpvvucT2DIcGqfBVpvYs4W19u0EBTJEdmfwmSuLY7H1TyAr9Stur3PI1sWWvTGQ==",
+            "version": "2.0.0-rc.18",
+            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz",
+            "integrity": "sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==",
             "dev": true,
             "peerDependencies": {
                 "vue": "^3.0.1"
@@ -3609,9 +3641,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001304",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001304.tgz",
-            "integrity": "sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==",
+            "version": "1.0.30001306",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001306.tgz",
+            "integrity": "sha512-Wd1OuggRzg1rbnM5hv1wXs2VkxJH/AA+LuudlIqvZiCvivF+wJJe2mgBZC8gPMgI7D76PP5CTx8Luvaqc1V6OQ==",
             "dev": true,
             "funding": {
                 "type": "opencollective",
@@ -4472,9 +4504,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.57",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.57.tgz",
-            "integrity": "sha512-FNC+P5K1n6pF+M0zIK+gFCoXcJhhzDViL3DRIGy2Fv5PohuSES1JHR7T+GlwxSxlzx4yYbsuzCZvHxcBSRCIOw==",
+            "version": "1.4.63",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.63.tgz",
+            "integrity": "sha512-e0PX/LRJPFRU4kzJKLvTobxyFdnANCvcoDCe8XcyTqP58nTWIwdsHvXLIl1RkB39X5yaosLaroMASWB0oIsgCA==",
             "dev": true
         },
         "node_modules/emittery": {
@@ -5355,9 +5387,9 @@
             }
         },
         "node_modules/eslint/node_modules/globals": {
-            "version": "13.12.0",
-            "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-            "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+            "version": "13.12.1",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+            "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
             "dev": true,
             "dependencies": {
                 "type-fest": "^0.20.2"
@@ -8799,9 +8831,9 @@
             "dev": true
         },
         "node_modules/lint-staged": {
-            "version": "12.3.2",
-            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-12.3.2.tgz",
-            "integrity": "sha512-gtw4Cbj01SuVSfAOXC6ivd/7VKHTj51yj5xV8TgktFmYNMsZzXuSd5/brqJEA93v63wL7R6iDlunMANOechC0A==",
+            "version": "12.3.3",
+            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-12.3.3.tgz",
+            "integrity": "sha512-OqcLsqcPOqzvsfkxjeBpZylgJ3SRG1RYqc9LxC6tkt6tNsq1bNVkAixBwX09f6CobcHswzqVOCBpFR1Fck0+ag==",
             "dev": true,
             "dependencies": {
                 "cli-truncate": "^3.1.0",
@@ -8841,9 +8873,9 @@
             }
         },
         "node_modules/listr2": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.1.tgz",
-            "integrity": "sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.2.tgz",
+            "integrity": "sha512-YcgwfCWpvPbj9FLUGqvdFvd3hrFWKpOeuXznRgfWEJ7RNr8b/IKKIKZABHx3aU+4CWN/iSAFFSReziQG6vTeIA==",
             "dev": true,
             "dependencies": {
                 "cli-truncate": "^2.1.0",
@@ -9828,14 +9860,14 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.5",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
-            "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+            "version": "8.4.6",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
+            "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
             "dev": true,
             "dependencies": {
-                "nanoid": "^3.1.30",
+                "nanoid": "^3.2.0",
                 "picocolors": "^1.0.0",
-                "source-map-js": "^1.0.1"
+                "source-map-js": "^1.0.2"
             },
             "engines": {
                 "node": "^10 || ^12 || >=14"
@@ -10503,9 +10535,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "2.66.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
-            "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
+            "version": "2.67.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.0.tgz",
+            "integrity": "sha512-W83AaERwvDiHwHEF/dfAfS3z1Be5wf7n+pO3ZAO5IQadCT2lBTr7WQ2MwZZe+nodbD+n3HtC4OCOAdsOPPcKZQ==",
             "dev": true,
             "bin": {
                 "rollup": "dist/bin/rollup"
@@ -10574,9 +10606,9 @@
             "dev": true
         },
         "node_modules/sass": {
-            "version": "1.49.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.0.tgz",
-            "integrity": "sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==",
+            "version": "1.49.7",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
+            "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
             "dev": true,
             "dependencies": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -10587,7 +10619,7 @@
                 "sass": "sass.js"
             },
             "engines": {
-                "node": ">=8.9.0"
+                "node": ">=12.0.0"
             }
         },
         "node_modules/saxes": {
@@ -11300,13 +11332,13 @@
             }
         },
         "node_modules/terser-webpack-plugin": {
-            "version": "5.3.0",
-            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.0.tgz",
-            "integrity": "sha512-LPIisi3Ol4chwAaPP8toUJ3L4qCM1G0wao7L3qNv57Drezxj6+VEyySpPw4B1HSO2Eg/hDY/MNF5XihCAoqnsQ==",
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz",
+            "integrity": "sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==",
             "dev": true,
             "peer": true,
             "dependencies": {
-                "jest-worker": "^27.4.1",
+                "jest-worker": "^27.4.5",
                 "schema-utils": "^3.1.1",
                 "serialize-javascript": "^6.0.0",
                 "source-map": "^0.6.1",
@@ -12217,9 +12249,9 @@
             }
         },
         "node_modules/webpack": {
-            "version": "5.67.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.67.0.tgz",
-            "integrity": "sha512-LjFbfMh89xBDpUMgA1W9Ur6Rn/gnr2Cq1jjHFPo4v6a79/ypznSYbAyPgGhwsxBtMIaEmDD1oJoA7BEYw/Fbrw==",
+            "version": "5.68.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.68.0.tgz",
+            "integrity": "sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==",
             "dev": true,
             "peer": true,
             "dependencies": {
@@ -12634,6 +12666,16 @@
         }
     },
     "dependencies": {
+        "@ampproject/remapping": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.0.2.tgz",
+            "integrity": "sha512-sE8Gx+qSDMLoJvb3QarJJlDQK7SSY4rK3hxp4XsiANeFOmjU46ZI7Y9adAQRJrmbz8zbtZkp3mJTT+rGxtF0XA==",
+            "dev": true,
+            "requires": {
+                "@jridgewell/trace-mapping": "^0.2.2",
+                "sourcemap-codec": "1.4.8"
+            }
+        },
         "@babel/code-frame": {
             "version": "7.16.7",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -12644,41 +12686,41 @@
             }
         },
         "@babel/compat-data": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.8.tgz",
-            "integrity": "sha512-m7OkX0IdKLKPpBlJtF561YJal5y/jyI5fNfWbPxh2D/nbzzGI4qRyrD8xO2jB24u7l+5I2a43scCG2IrfjC50Q==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
+            "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==",
             "dev": true
         },
         "@babel/core": {
-            "version": "7.16.12",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
-            "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
+            "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
             "dev": true,
             "requires": {
+                "@ampproject/remapping": "^2.0.0",
                 "@babel/code-frame": "^7.16.7",
-                "@babel/generator": "^7.16.8",
+                "@babel/generator": "^7.17.0",
                 "@babel/helper-compilation-targets": "^7.16.7",
                 "@babel/helper-module-transforms": "^7.16.7",
-                "@babel/helpers": "^7.16.7",
-                "@babel/parser": "^7.16.12",
+                "@babel/helpers": "^7.17.0",
+                "@babel/parser": "^7.17.0",
                 "@babel/template": "^7.16.7",
-                "@babel/traverse": "^7.16.10",
-                "@babel/types": "^7.16.8",
+                "@babel/traverse": "^7.17.0",
+                "@babel/types": "^7.17.0",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
                 "json5": "^2.1.2",
-                "semver": "^6.3.0",
-                "source-map": "^0.5.0"
+                "semver": "^6.3.0"
             }
         },
         "@babel/generator": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
-            "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+            "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.16.8",
+                "@babel/types": "^7.17.0",
                 "jsesc": "^2.5.1",
                 "source-map": "^0.5.0"
             }
@@ -12795,14 +12837,14 @@
             "dev": true
         },
         "@babel/helpers": {
-            "version": "7.16.7",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz",
-            "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
+            "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
             "dev": true,
             "requires": {
                 "@babel/template": "^7.16.7",
-                "@babel/traverse": "^7.16.7",
-                "@babel/types": "^7.16.7"
+                "@babel/traverse": "^7.17.0",
+                "@babel/types": "^7.17.0"
             }
         },
         "@babel/highlight": {
@@ -12817,9 +12859,9 @@
             }
         },
         "@babel/parser": {
-            "version": "7.16.12",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz",
-            "integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+            "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
             "dev": true
         },
         "@babel/plugin-syntax-async-generators": {
@@ -12963,27 +13005,27 @@
             }
         },
         "@babel/traverse": {
-            "version": "7.16.10",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.10.tgz",
-            "integrity": "sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+            "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
             "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.16.7",
-                "@babel/generator": "^7.16.8",
+                "@babel/generator": "^7.17.0",
                 "@babel/helper-environment-visitor": "^7.16.7",
                 "@babel/helper-function-name": "^7.16.7",
                 "@babel/helper-hoist-variables": "^7.16.7",
                 "@babel/helper-split-export-declaration": "^7.16.7",
-                "@babel/parser": "^7.16.10",
-                "@babel/types": "^7.16.8",
+                "@babel/parser": "^7.17.0",
+                "@babel/types": "^7.17.0",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             }
         },
         "@babel/types": {
-            "version": "7.16.8",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz",
-            "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==",
+            "version": "7.17.0",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
+            "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
             "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.16.7",
@@ -13496,9 +13538,9 @@
                     "dev": true
                 },
                 "globals": {
-                    "version": "13.12.0",
-                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-                    "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+                    "version": "13.12.1",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+                    "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
                     "dev": true,
                     "requires": {
                         "type-fest": "^0.20.2"
@@ -14044,6 +14086,22 @@
                 }
             }
         },
+        "@jridgewell/resolve-uri": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
+            "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==",
+            "dev": true
+        },
+        "@jridgewell/trace-mapping": {
+            "version": "0.2.4",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.2.4.tgz",
+            "integrity": "sha512-W/qPHey63KLHPC7zzvXeul8ouaugOu232lUPbyBAuoG9s+bmDSP1ANulLjGCf34Je3sGUPtw/Cg52e7ALY9+3w==",
+            "dev": true,
+            "requires": {
+                "@jridgewell/resolve-uri": "^3.0.3",
+                "sourcemap-codec": "1.4.8"
+            }
+        },
         "@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14281,9 +14339,9 @@
             "dev": true
         },
         "@types/node": {
-            "version": "17.0.13",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.13.tgz",
-            "integrity": "sha512-Y86MAxASe25hNzlDbsviXl8jQHb0RDvKt4c40ZJQ1Don0AAL0STLZSs4N+6gLEO55pedy7r2cLwS+ZDxPm/2Bw==",
+            "version": "17.0.14",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.14.tgz",
+            "integrity": "sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==",
             "dev": true
         },
         "@types/normalize-package-data": {
@@ -14329,9 +14387,9 @@
             "dev": true
         },
         "@types/tailwindcss": {
-            "version": "3.0.4",
-            "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.4.tgz",
-            "integrity": "sha512-ICFSmSeBMqPCpa3/fIGt4jjLbbIxqpV3pZeniosFIZ3dEWxSJH+6j0Gm3GOLnUQ18/bOiIFjuH3Tha+WhogiOA==",
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.5.tgz",
+            "integrity": "sha512-PwkiuWKrwyS8bPVtMMzh+WRUPJ/1Hd+QuQhVbp5XHj0XsQNyDE+jKjpmzz4MgoLVtYTuHJz1BvbOWaAVWKIBqw==",
             "dev": true
         },
         "@types/yargs": {
@@ -14350,14 +14408,14 @@
             "dev": true
         },
         "@typescript-eslint/eslint-plugin": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.1.tgz",
-            "integrity": "sha512-xN3CYqFlyE/qOcy978/L0xLR2HlcAGIyIK5sMOasxaaAPfQRj/MmMV6OC3I7NZO84oEUdWCOju34Z9W8E0pFDQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.2.tgz",
+            "integrity": "sha512-4W/9lLuE+v27O/oe7hXJKjNtBLnZE8tQAFpapdxwSVHqtmIoPB1gph3+ahNwVuNL37BX7YQHyGF9Xv6XCnIX2Q==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/type-utils": "5.10.1",
-                "@typescript-eslint/utils": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/type-utils": "5.10.2",
+                "@typescript-eslint/utils": "5.10.2",
                 "debug": "^4.3.2",
                 "functional-red-black-tree": "^1.0.1",
                 "ignore": "^5.1.8",
@@ -14378,61 +14436,61 @@
             }
         },
         "@typescript-eslint/experimental-utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.1.tgz",
-            "integrity": "sha512-Ryeb8nkJa/1zKl8iujNtJC8tgj6PgaY0sDUnrTqbmC70nrKKkZaHfiRDTcqICmCSCEQyLQcJAoh0AukLaIaGTw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.10.2.tgz",
+            "integrity": "sha512-stRnIlxDduzxtaVLtEohESoXI1k7J6jvJHGyIkOT2pvXbg5whPM6f9tzJ51bJJxaJTdmvwgVFDNCopFRb2F5Gw==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/utils": "5.10.1"
+                "@typescript-eslint/utils": "5.10.2"
             }
         },
         "@typescript-eslint/parser": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.1.tgz",
-            "integrity": "sha512-GReo3tjNBwR5RnRO0K2wDIDN31cM3MmDtgyQ85oAxAmC5K3j/g85IjP+cDfcqDsDDBf1HNKQAD0WqOYL8jXqUA==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.2.tgz",
+            "integrity": "sha512-JaNYGkaQVhP6HNF+lkdOr2cAs2wdSZBoalE22uYWq8IEv/OVH0RksSGydk+sW8cLoSeYmC+OHvRyv2i4AQ7Czg==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/typescript-estree": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/typescript-estree": "5.10.2",
                 "debug": "^4.3.2"
             }
         },
         "@typescript-eslint/scope-manager": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.1.tgz",
-            "integrity": "sha512-Lyvi559Gvpn94k7+ElXNMEnXu/iundV5uFmCUNnftbFrUbAJ1WBoaGgkbOBm07jVZa682oaBU37ao/NGGX4ZDg==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.2.tgz",
+            "integrity": "sha512-39Tm6f4RoZoVUWBYr3ekS75TYgpr5Y+X0xLZxXqcZNDWZdJdYbKd3q2IR4V9y5NxxiPu/jxJ8XP7EgHiEQtFnw==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/visitor-keys": "5.10.1"
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/visitor-keys": "5.10.2"
             }
         },
         "@typescript-eslint/type-utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.1.tgz",
-            "integrity": "sha512-AfVJkV8uck/UIoDqhu+ptEdBoQATON9GXnhOpPLzkQRJcSChkvD//qsz9JVffl2goxX+ybs5klvacE9vmrQyCw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.2.tgz",
+            "integrity": "sha512-uRKSvw/Ccs5FYEoXW04Z5VfzF2iiZcx8Fu7DGIB7RHozuP0VbKNzP1KfZkHBTM75pCpsWxIthEH1B33dmGBKHw==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/utils": "5.10.1",
+                "@typescript-eslint/utils": "5.10.2",
                 "debug": "^4.3.2",
                 "tsutils": "^3.21.0"
             }
         },
         "@typescript-eslint/types": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.1.tgz",
-            "integrity": "sha512-ZvxQ2QMy49bIIBpTqFiOenucqUyjTQ0WNLhBM6X1fh1NNlYAC6Kxsx8bRTY3jdYsYg44a0Z/uEgQkohbR0H87Q==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.2.tgz",
+            "integrity": "sha512-Qfp0qk/5j2Rz3p3/WhWgu4S1JtMcPgFLnmAKAW061uXxKSa7VWKZsDXVaMXh2N60CX9h6YLaBoy9PJAfCOjk3w==",
             "dev": true
         },
         "@typescript-eslint/typescript-estree": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.1.tgz",
-            "integrity": "sha512-PwIGnH7jIueXv4opcwEbVGDATjGPO1dx9RkUl5LlHDSe+FXxPwFL5W/qYd5/NHr7f6lo/vvTrAzd0KlQtRusJQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.2.tgz",
+            "integrity": "sha512-WHHw6a9vvZls6JkTgGljwCsMkv8wu8XU8WaYKeYhxhWXH/atZeiMW6uDFPLZOvzNOGmuSMvHtZKd6AuC8PrwKQ==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/visitor-keys": "5.10.1",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/visitor-keys": "5.10.2",
                 "debug": "^4.3.2",
                 "globby": "^11.0.4",
                 "is-glob": "^4.0.3",
@@ -14452,26 +14510,26 @@
             }
         },
         "@typescript-eslint/utils": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.1.tgz",
-            "integrity": "sha512-RRmlITiUbLuTRtn/gcPRi4202niF+q7ylFLCKu4c+O/PcpRvZ/nAUwQ2G00bZgpWkhrNLNnvhZLbDn8Ml0qsQw==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.2.tgz",
+            "integrity": "sha512-vuJaBeig1NnBRkf7q9tgMLREiYD7zsMrsN1DA3wcoMDvr3BTFiIpKjGiYZoKPllfEwN7spUjv7ZqD+JhbVjEPg==",
             "dev": true,
             "requires": {
                 "@types/json-schema": "^7.0.9",
-                "@typescript-eslint/scope-manager": "5.10.1",
-                "@typescript-eslint/types": "5.10.1",
-                "@typescript-eslint/typescript-estree": "5.10.1",
+                "@typescript-eslint/scope-manager": "5.10.2",
+                "@typescript-eslint/types": "5.10.2",
+                "@typescript-eslint/typescript-estree": "5.10.2",
                 "eslint-scope": "^5.1.1",
                 "eslint-utils": "^3.0.0"
             }
         },
         "@typescript-eslint/visitor-keys": {
-            "version": "5.10.1",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.1.tgz",
-            "integrity": "sha512-NjQ0Xinhy9IL979tpoTRuLKxMc0zJC7QVSdeerXs2/QvOy2yRkzX5dRb10X5woNUdJgU8G3nYRDlI33sq1K4YQ==",
+            "version": "5.10.2",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.2.tgz",
+            "integrity": "sha512-zHIhYGGGrFJvvyfwHk5M08C5B5K4bewkm+rrvNTKk1/S15YHR+SA/QUF8ZWscXSfEaB8Nn2puZj+iHcoxVOD/Q==",
             "dev": true,
             "requires": {
-                "@typescript-eslint/types": "5.10.1",
+                "@typescript-eslint/types": "5.10.2",
                 "eslint-visitor-keys": "^3.0.0"
             }
         },
@@ -14625,9 +14683,9 @@
             "dev": true
         },
         "@vue/test-utils": {
-            "version": "2.0.0-rc.16",
-            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.16.tgz",
-            "integrity": "sha512-TubikDVkI2LuRKRPSLv3lYpbpvvucT2DIcGqfBVpvYs4W19u0EBTJEdmfwmSuLY7H1TyAr9Stur3PI1sWWvTGQ==",
+            "version": "2.0.0-rc.18",
+            "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz",
+            "integrity": "sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==",
             "dev": true,
             "requires": {}
         },
@@ -15363,9 +15421,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001304",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001304.tgz",
-            "integrity": "sha512-bdsfZd6K6ap87AGqSHJP/s1V+U6Z5lyrcbBu3ovbCCf8cSYpwTtGrCBObMpJqwxfTbLW6YTIdbb1jEeTelcpYQ==",
+            "version": "1.0.30001306",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001306.tgz",
+            "integrity": "sha512-Wd1OuggRzg1rbnM5hv1wXs2VkxJH/AA+LuudlIqvZiCvivF+wJJe2mgBZC8gPMgI7D76PP5CTx8Luvaqc1V6OQ==",
             "dev": true
         },
         "chalk": {
@@ -16049,9 +16107,9 @@
             }
         },
         "electron-to-chromium": {
-            "version": "1.4.57",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.57.tgz",
-            "integrity": "sha512-FNC+P5K1n6pF+M0zIK+gFCoXcJhhzDViL3DRIGy2Fv5PohuSES1JHR7T+GlwxSxlzx4yYbsuzCZvHxcBSRCIOw==",
+            "version": "1.4.63",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.63.tgz",
+            "integrity": "sha512-e0PX/LRJPFRU4kzJKLvTobxyFdnANCvcoDCe8XcyTqP58nTWIwdsHvXLIl1RkB39X5yaosLaroMASWB0oIsgCA==",
             "dev": true
         },
         "emittery": {
@@ -16467,9 +16525,9 @@
                     "dev": true
                 },
                 "globals": {
-                    "version": "13.12.0",
-                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz",
-                    "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==",
+                    "version": "13.12.1",
+                    "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.1.tgz",
+                    "integrity": "sha512-317dFlgY2pdJZ9rspXDks7073GpDmXdfbM3vYYp0HAMKGDh1FfWPleI2ljVNLQX5M5lXcAslTcPTrOrMEFOjyw==",
                     "dev": true,
                     "requires": {
                         "type-fest": "^0.20.2"
@@ -19221,9 +19279,9 @@
             "dev": true
         },
         "lint-staged": {
-            "version": "12.3.2",
-            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-12.3.2.tgz",
-            "integrity": "sha512-gtw4Cbj01SuVSfAOXC6ivd/7VKHTj51yj5xV8TgktFmYNMsZzXuSd5/brqJEA93v63wL7R6iDlunMANOechC0A==",
+            "version": "12.3.3",
+            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-12.3.3.tgz",
+            "integrity": "sha512-OqcLsqcPOqzvsfkxjeBpZylgJ3SRG1RYqc9LxC6tkt6tNsq1bNVkAixBwX09f6CobcHswzqVOCBpFR1Fck0+ag==",
             "dev": true,
             "requires": {
                 "cli-truncate": "^3.1.0",
@@ -19250,9 +19308,9 @@
             }
         },
         "listr2": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.1.tgz",
-            "integrity": "sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/listr2/-/listr2-4.0.2.tgz",
+            "integrity": "sha512-YcgwfCWpvPbj9FLUGqvdFvd3hrFWKpOeuXznRgfWEJ7RNr8b/IKKIKZABHx3aU+4CWN/iSAFFSReziQG6vTeIA==",
             "dev": true,
             "requires": {
                 "cli-truncate": "^2.1.0",
@@ -19982,14 +20040,14 @@
             }
         },
         "postcss": {
-            "version": "8.4.5",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
-            "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+            "version": "8.4.6",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz",
+            "integrity": "sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==",
             "dev": true,
             "requires": {
-                "nanoid": "^3.1.30",
+                "nanoid": "^3.2.0",
                 "picocolors": "^1.0.0",
-                "source-map-js": "^1.0.1"
+                "source-map-js": "^1.0.2"
             }
         },
         "postcss-js": {
@@ -20500,9 +20558,9 @@
             }
         },
         "rollup": {
-            "version": "2.66.1",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.66.1.tgz",
-            "integrity": "sha512-crSgLhSkLMnKr4s9iZ/1qJCplgAgrRY+igWv8KhG/AjKOJ0YX/WpmANyn8oxrw+zenF3BXWDLa7Xl/QZISH+7w==",
+            "version": "2.67.0",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.0.tgz",
+            "integrity": "sha512-W83AaERwvDiHwHEF/dfAfS3z1Be5wf7n+pO3ZAO5IQadCT2lBTr7WQ2MwZZe+nodbD+n3HtC4OCOAdsOPPcKZQ==",
             "dev": true,
             "requires": {
                 "fsevents": "~2.3.2"
@@ -20545,9 +20603,9 @@
             "dev": true
         },
         "sass": {
-            "version": "1.49.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.0.tgz",
-            "integrity": "sha512-TVwVdNDj6p6b4QymJtNtRS2YtLJ/CqZriGg0eIAbAKMlN8Xy6kbv33FsEZSF7FufFFM705SQviHjjThfaQ4VNw==",
+            "version": "1.49.7",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
+            "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
             "dev": true,
             "requires": {
                 "chokidar": ">=3.0.0 <4.0.0",
@@ -21096,13 +21154,13 @@
             }
         },
         "terser-webpack-plugin": {
-            "version": "5.3.0",
-            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.0.tgz",
-            "integrity": "sha512-LPIisi3Ol4chwAaPP8toUJ3L4qCM1G0wao7L3qNv57Drezxj6+VEyySpPw4B1HSO2Eg/hDY/MNF5XihCAoqnsQ==",
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz",
+            "integrity": "sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==",
             "dev": true,
             "peer": true,
             "requires": {
-                "jest-worker": "^27.4.1",
+                "jest-worker": "^27.4.5",
                 "schema-utils": "^3.1.1",
                 "serialize-javascript": "^6.0.0",
                 "source-map": "^0.6.1",
@@ -21760,9 +21818,9 @@
             "dev": true
         },
         "webpack": {
-            "version": "5.67.0",
-            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.67.0.tgz",
-            "integrity": "sha512-LjFbfMh89xBDpUMgA1W9Ur6Rn/gnr2Cq1jjHFPo4v6a79/ypznSYbAyPgGhwsxBtMIaEmDD1oJoA7BEYw/Fbrw==",
+            "version": "5.68.0",
+            "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.68.0.tgz",
+            "integrity": "sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==",
             "dev": true,
             "peer": true,
             "requires": {
diff --git a/package.json b/package.json
index 6adf91d3..2ef21676 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
         "@vitejs/plugin-vue": "^2.0.1",
         "@vue/compiler-sfc": "^3.2.11",
         "@vue/eslint-config-typescript": "^10.0.0",
-        "@vue/test-utils": "2.0.0-rc.16",
+        "@vue/test-utils": "2.0.0-rc.18",
         "@vue/vue3-jest": "^27.0.0-alpha.3",
         "autoprefixer": "^10.4.0",
         "babel-jest": "^27.3.1",
diff --git a/src/components/tabs/Demo.vue b/src/components/tabs/Demo.vue
new file mode 100644
index 00000000..ca25f6c1
--- /dev/null
+++ b/src/components/tabs/Demo.vue
@@ -0,0 +1,35 @@
+<template>
+    <UITabs class="mb-4">
+        <UITab title="title 1">
+            tab 1
+        </UITab>
+        <UITab tab-key="fsss">
+            <template #title>
+                title 2
+            </template>
+            tab 2
+        </UITab>
+    </UITabs>
+
+    <UITabs vertical>
+        <UITab title="vertical" tab-key="no">
+            tab 1
+        </UITab>
+        <UITab title="tabs" tab-key="hi">
+            <UISubComponent />
+        </UITab>
+    </UITabs>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import UITabs from './UITabs.vue';
+import UITab from './UITab.vue';
+import UISubComponent from 'components/tabs/UISubComponent.vue';
+
+export default defineComponent({
+    name: 'TabsDemo',
+
+    components: { UISubComponent, UITabs, UITab }
+});
+</script>
diff --git a/src/components/tabs/UISubComponent.vue b/src/components/tabs/UISubComponent.vue
new file mode 100644
index 00000000..a0477633
--- /dev/null
+++ b/src/components/tabs/UISubComponent.vue
@@ -0,0 +1,24 @@
+<template>
+    <button class="rounded border bg-blue-600 text-white px-4 py-2" @click="increment">
+        inc
+    </button>
+    <p>my-number:{{ number }}</p>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+
+export default defineComponent({
+    name: 'UISubComponent',
+
+    setup: () => {
+        const number = ref(0);
+        const increment = () => number.value++;
+
+        // eslint-disable-next-line no-console
+        onMounted(() => console.log('sub comp mounted'));
+        return { number, increment };
+    }
+});
+</script>
+
diff --git a/src/components/tabs/UITab.vue b/src/components/tabs/UITab.vue
new file mode 100644
index 00000000..1c41e992
--- /dev/null
+++ b/src/components/tabs/UITab.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="m-4">
+        <template v-if="false">
+            <slot name="title" />
+        </template>
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUpdated } from 'vue';
+
+export default defineComponent({
+    name: 'UITab',
+
+    props: {
+        title: {
+            type: String
+        },
+
+        /**
+         * The key to emit when the tab is navigated to.
+         */
+        tabKey: {
+            type: String
+        },
+
+        /**
+         * Flag indicating that this tab is visible by default.
+         * If multiple UITabs marked with default, the first will be selected.
+         */
+        default: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    setup(props, ctx) {
+        const validateTitle = () => {
+            if (!props.title && !ctx.slots['title']) {
+                throw new Error('The title prop or slot is required when using UITab.');
+            }
+        };
+
+        validateTitle();
+
+        onUpdated(validateTitle);
+    }
+});
+</script>
diff --git a/src/components/tabs/UITabs.test.ts b/src/components/tabs/UITabs.test.ts
new file mode 100644
index 00000000..75244ad6
--- /dev/null
+++ b/src/components/tabs/UITabs.test.ts
@@ -0,0 +1,146 @@
+import { mount } from '@vue/test-utils';
+import UITab from './UITab.vue';
+import UITabs from './UITabs.vue';
+import { defineComponent, nextTick, ref } from 'vue';
+import { disableConsoleWarn, enableConsoleWarn } from 'helpers/test';
+
+describe('UITab', () => {
+    it('should throw an error if no title is given', () => {
+        disableConsoleWarn();
+        let failingFunc = () => mount(UITab);
+        expect(failingFunc).toThrow(new Error('The title prop or slot is required when using UITab.'));
+
+
+        failingFunc = () => mount(UITab, {
+            props: {
+                title: 'title'
+            }
+        });
+        expect(failingFunc).not.toThrow(new Error('The title prop or slot is required when using UITab.'));
+
+        failingFunc = () => mount(UITab, {
+            slots: {
+                title: 'title'
+            }
+        });
+        expect(failingFunc).not.toThrow(new Error('The title prop or slot is required when using UITab.'));
+        enableConsoleWarn();
+    });
+});
+
+describe('UITabs', () => {
+    it('should throw an error if less then 2 child given in the default slot', () => {
+        const failingFunc = () => mount({
+            template: '<UITabs><UITab><template #title>title</template></UITab></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(failingFunc).toThrow(new Error('UITabs expect at least 2 UITabs in the default slot.'));
+    });
+
+    it('should throw an error if no title have been given to any of the UITabs', () => {
+        const failingFunc = () => mount({
+            template: '<UITabs><UITab title="title" /><UITab /></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(failingFunc).toThrow(new Error('UITab expect to have the title prop or title slot set.'));
+    });
+
+    it('should display the titles from the slotted content', () => {
+        const wrapper = mount({
+            template: '<UITabs><UITab title="tab1" /><UITab title="tab2" /></UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(wrapper.html()).toContain('tab1');
+        expect(wrapper.html()).toContain('tab2');
+    });
+
+    it('should switch tabs when clicking on the title', async () => {
+        const wrapper = mount({
+            template: '<UITabs>' +
+                        '<UITab title="tab1"><p id="tab-1">tab-1-content</p></UITab>' +
+                        '<UITab title="tab2"><p id="tab-2">tab-2-content</p></UITab>' +
+                      '</UITabs>',
+            components: { UITabs, UITab }
+        });
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(true);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(false);
+
+        await wrapper.find('div.cursor-pointer:not(.active-tab)').trigger('click');
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(false);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(true);
+    });
+
+    it('should accept both text and components in the UITab\'s default slot', async () => {
+        // eslint-disable-next-line vue/one-component-per-file
+        const Foo = defineComponent({ name: 'FooBar', template: '<p id="tab-2">foo-content</p>' });
+
+        const wrapper = mount({
+            template: '<UITabs>' +
+                        '<UITab title="tab1"><p id="tab-1"></p>tab-1-content</UITab>' +
+                        '<UITab title="tab2"><Foo /></UITab>' +
+                      '</UITabs>',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            components: { UITabs, UITab, Foo }
+        });
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(true);
+        expect(wrapper.findComponent(Foo).isVisible()).toBe(false);
+
+        await wrapper.find('div.cursor-pointer:not(.active-tab)').trigger('click');
+
+        expect(wrapper.get('#tab-1').isVisible()).toBe(false);
+        expect(wrapper.get('#tab-2').isVisible()).toBe(true);
+    });
+
+    it('should keep the subcomponents alive', async () => {
+        // eslint-disable-next-line vue/one-component-per-file
+        const UISubComponent = defineComponent({
+            name: 'UISubComponent',
+
+            setup: () => {
+                const number = ref(0);
+                const increment = () => number.value++;
+
+                return {
+                    number,
+                    increment
+                };
+            },
+
+            template: 'my-number:{{ number }}'
+        });
+
+        const wrapper = mount({
+            template: '<UITabs>' +
+                '<UITab><template #title><p id="tab-1">title1</p></template></UITab>' +
+                '<UITab><template #title><p id="tab-2">title2</p></template><UISubComponent ref="subComponent" />' +
+                '</UITab></UITabs>',
+            components: { UITabs, UITab, UISubComponent },
+            setup: () => ({ subComponent: ref() })
+        });
+
+        await wrapper.find('#tab-2').trigger('click');
+        expect(wrapper.html()).toContain('my-number:0');
+        (wrapper.vm.$refs.subComponent as InstanceType<typeof UISubComponent>).increment();
+        await nextTick();
+        expect(wrapper.html()).toContain('my-number:1');
+        await wrapper.find('#tab-1').trigger('click');
+        await wrapper.find('#tab-2').trigger('click');
+        expect(wrapper.html()).toContain('my-number:1');
+    });
+
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // it('should have the tab open by default which is given as the initialTab', () => {
+    //
+    // });
+    //
+    // eslint-disable-next-line jest/no-commented-out-tests
+    // it('should have the tab open by ', () => {
+    //
+    // });
+});
diff --git a/src/components/tabs/UITabs.vue b/src/components/tabs/UITabs.vue
new file mode 100644
index 00000000..f9d288e9
--- /dev/null
+++ b/src/components/tabs/UITabs.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="flex rounded border border-gray-300 bg-white" :class="{ 'flex-col': !vertical }">
+        <div class="flex justify-around divide-gray-300"
+             :class="{ 'flex-col divide-y-2': vertical, 'divide-x-2': !vertical }">
+            <div v-for="(title, index) in titles"
+                 :key="index"
+                 :class="{ 'active-tab': index === activeTab, 'flex flex-col justify-center': vertical }"
+                 class="cursor-pointer bg-red-100 w-full text-center p-2 h-full"
+                 @click="activeTab = index">
+                <template v-if="typeof title === 'string'">
+                    {{ title }}
+                </template>
+                <component :is="title" v-else />
+            </div>
+        </div>
+        <template v-for="(tab, index) in defaultSlot" :key="index">
+            <component :is="tab" v-show="index === activeTab" />
+        </template>
+        <template v-if="false">
+            <slot />
+        </template>
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import type { VNode } from 'vue';
+
+export default defineComponent({
+    name: 'UITabs',
+
+    props: {
+        /**
+         * Flag indicating to align the tabs vertically.
+         */
+        vertical: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * The tab to display initially when rendering.
+         * Must match a tab-key given to the UITab components.
+         * This takes priority over the 'default' property on UITab component.
+         */
+        initialTab: {
+            type: String
+        }
+    },
+
+    emits: ['change'],
+
+    setup(props, ctx) {
+        let defaultSlot = ref<VNode[]>([]);
+        const activeTab = ref(0);
+        const tabVisible = ref(true);
+
+        const titles = computed<string[]>(() => {
+            return defaultSlot.value.map((tab) => {
+                if (tab.props?.title) {
+                    return tab.props.title;
+                }
+
+                // @ts-expect-error TS2339: Property 'title' does not exist
+                if (tab.children?.title) {
+                    // @ts-expect-error TS2339: Property 'title' does not exist
+                    return tab.children.title;
+                }
+
+                throw new Error('UITab expect to have the title prop or title slot set.');
+            });
+        });
+        const tab = computed(() => {
+            return defaultSlot.value[activeTab.value];
+        });
+
+        const setDefaultSlot = () => {
+            defaultSlot.value = ctx.slots?.default instanceof Function ? ctx.slots.default() : [];
+
+            if (defaultSlot.value.length < 2) {
+                throw new Error('UITabs expect at least 2 UITabs in the default slot.');
+            }
+        };
+        const setActiveTab = () => {
+            if (!props.initialTab) {
+                const tabIndex = defaultSlot.value.findIndex(vNode => vNode.props?.default);
+
+                activeTab.value = tabIndex === -1 ? 0 : tabIndex;
+                // tab.value = defaultSlot.value[activeTab];
+                return;
+            }
+
+            const tabIndex = defaultSlot.value.findIndex(vNode =>
+                vNode.props
+                && 'tab-key' in vNode.props
+                && vNode.props['tab-key'] === props.initialTab
+            );
+
+            activeTab.value = tabIndex === -1 ? 0 : tabIndex;
+        };
+
+        setDefaultSlot();
+        setActiveTab();
+
+        // hack as getCurrentInstance() seems to be null hence can't call .update()
+        watch(() => tab.value, async (value) => {
+            tabVisible.value = false;
+            await nextTick();
+            tabVisible.value = true;
+
+            if (value.props && 'tab-key' in value.props) {
+                ctx.emit('change', value.props['tab-key']);
+            }
+        });
+
+        return {
+            titles,
+            tabVisible,
+            activeTab,
+            defaultSlot
+        };
+    },
+
+    methods: {
+        forceUpdate() {
+            this.$forceUpdate();
+        }
+    }
+});
+</script>
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 7161ba22..4c696cf2 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -31,8 +31,7 @@ const lastEventPlugin = (wrapper: VueWrapper<ComponentPublicInstance>) => {
 config.plugins.VueWrapper.install(lastEventPlugin);
 
 declare module '@vue/test-utils' {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface VueWrapper<T extends ComponentPublicInstance> {
+    interface VueWrapper {
         /**
          * Return the last event value if any that has occurred.
          *