From 87da4f3449dbbf5c3fb830a5a8ea32f34cd736ec Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 14 Jun 2023 02:03:44 +0000
Subject: [PATCH 1/4] Bump vue from 2.7.14 to 3.3.4

Bumps [vue](https://github.com/vuejs/core) from 2.7.14 to 3.3.4.
- [Release notes](https://github.com/vuejs/core/releases)
- [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vuejs/core/commits/v3.3.4)

---
updated-dependencies:
- dependency-name: vue
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |   2 +-
 yarn.lock    | 155 ++++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 136 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 63dd7da3..f4003ace 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "buefy": "^0.9.23",
     "core-js": "^3.31.0",
     "crypto-js": "^4.1.1",
-    "vue": "^2.7.14",
+    "vue": "^3.3.4",
     "vue-class-component": "^7.2.6",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
diff --git a/yarn.lock b/yarn.lock
index 9f3757ec..79a7461a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -370,7 +370,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.4", "@babel/parser@^7.22.5":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.15", "@babel/parser@^7.21.3", "@babel/parser@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
   integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
@@ -1612,6 +1612,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/sourcemap-codec@^1.4.13":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15":
   version "0.3.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
@@ -2433,14 +2438,47 @@
     semver "^7.3.4"
     strip-ansi "^6.0.0"
 
-"@vue/compiler-sfc@2.7.14":
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
-  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
   dependencies:
-    "@babel/parser" "^7.18.4"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+  dependencies:
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/compiler-sfc@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+    postcss "^8.1.10"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
 
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
   version "3.3.0"
@@ -2481,6 +2519,54 @@
     "@typescript-eslint/parser" "^5.59.1"
     vue-eslint-parser "^9.1.1"
 
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+  dependencies:
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+  dependencies:
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+  dependencies:
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    csstype "^3.1.1"
+
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/shared@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+
 "@vue/test-utils@1.3.6":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.6.tgz#6656bd8fa44dd088b4ad80ff1ee28abe7e5ddf87"
@@ -4000,10 +4086,10 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
-  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+csstype@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 cypress@^12.14.0:
   version "12.14.0"
@@ -4938,6 +5024,11 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -7485,6 +7576,13 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
+  integrity sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -7709,6 +7807,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
@@ -8474,7 +8577,16 @@ postcss@^7.0.36:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.5:
+postcss@^8.1.10:
+  version "8.4.24"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
+  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.2.6, postcss@^8.3.5, postcss@^8.4.5:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
   integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
@@ -10122,13 +10234,16 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.7.14:
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
-  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
-  dependencies:
-    "@vue/compiler-sfc" "2.7.14"
-    csstype "^3.1.0"
+vue@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"
 
 vuex@^3.6.2:
   version "3.6.2"

From 0702df3b5a47af568fe9df6a60ba6a449de440ac Mon Sep 17 00:00:00 2001
From: Bervianto Leo Pratama <bervianto.leo@gmail.com>
Date: Mon, 26 Jun 2023 11:07:29 +0700
Subject: [PATCH 2/4] feat: update to vue 3

---
 package.json                             |  17 ++-
 public/index.html                        |   2 +-
 src/App.ts                               |   4 +-
 src/components/BaseFooter.ts             |   4 +-
 src/components/BaseHeader.ts             |  15 ++-
 src/components/BaseHeader.vue            |  61 +++++----
 src/main.ts                              |  20 +--
 src/router.ts                            |  10 +-
 src/shims-tsx.d.ts                       |  13 --
 src/shims-vue.d.ts                       |   7 +-
 src/store.ts                             |   7 +-
 src/views/Decryption.ts                  |  23 ++--
 src/views/DecryptionPage.vue             |  22 ++--
 src/views/Encryption.ts                  |  26 ++--
 src/views/EncryptionPage.vue             |  28 ++---
 src/views/Home.ts                        |   4 +-
 src/views/HomePage.vue                   |  22 ++--
 tests/unit/app.spec.ts                   |  14 +--
 tests/unit/components/baseFooter.spec.ts |  13 +-
 tests/unit/components/baseHeader.spec.ts |  19 ++-
 tests/unit/router.spec.ts                |   3 +-
 tests/unit/views/decryption.spec.ts      |  19 ++-
 tests/unit/views/encryption.spec.ts      |  23 ++--
 tests/unit/views/home.spec.ts            |  22 ++--
 vue.config.js                            |   7 --
 yarn.lock                                | 150 ++++++++++++++---------
 26 files changed, 289 insertions(+), 266 deletions(-)
 delete mode 100644 src/shims-tsx.d.ts

diff --git a/package.json b/package.json
index f4003ace..d8516ffe 100644
--- a/package.json
+++ b/package.json
@@ -15,14 +15,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "buefy": "^0.9.23",
+    "@oruga-ui/oruga-next": "0.6.0",
+    "@oruga-ui/theme-bulma": "^0.2.11",
     "core-js": "^3.31.0",
     "crypto-js": "^4.1.1",
     "vue": "^3.3.4",
-    "vue-class-component": "^7.2.6",
-    "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.6.5",
-    "vuex": "^3.6.2"
+    "vue-router": "^4.2.2",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -37,10 +36,11 @@
     "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "1.3.6",
-    "@vue/vue2-jest": "^29.2.4",
+    "@vue/test-utils": "2.4.0",
+    "@vue/vue3-jest": "^29.2.4",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "cypress": "^12.14.0",
@@ -53,8 +53,7 @@
     "sass": "^1.63.4",
     "sass-loader": "^13.3.2",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.1.3",
-    "vue-template-compiler": "^2.7.14"
+    "typescript": "^5.1.3"
   },
   "categories": [
     "Other"
diff --git a/public/index.html b/public/index.html
index 179b13e8..a334c66a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
 
 <head>
   <meta charset="utf-8">
diff --git a/src/App.ts b/src/App.ts
index 573180e1..929b31a7 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -1,8 +1,8 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import BaseFooter from '@/components/BaseFooter.vue';
 import BaseHeader from '@/components/BaseHeader.vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'app',
   components: {
     BaseFooter,
diff --git a/src/components/BaseFooter.ts b/src/components/BaseFooter.ts
index caa4edb4..7f2bc1a2 100644
--- a/src/components/BaseFooter.ts
+++ b/src/components/BaseFooter.ts
@@ -1,5 +1,5 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'base-footer',
 });
diff --git a/src/components/BaseHeader.ts b/src/components/BaseHeader.ts
index 8d1d8061..380dcca6 100644
--- a/src/components/BaseHeader.ts
+++ b/src/components/BaseHeader.ts
@@ -1,5 +1,16 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   name: 'base-header',
+  data() {
+    return {
+      activator: false,
+    };
+  },
+  methods: {
+    makeBurger() {
+      this.activator = !this.activator;
+      return this.activator;
+    },
+  },
 });
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index f152fa64..768c293f 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,31 +1,42 @@
 <template>
-  <b-navbar type="is-light" fixed-top wrapper-class="container">
-    <template slot="brand">
-      <b-navbar-item tag="router-link" to="/">
+  <nav class="navbar is-fixed-top">
+    <div class="navbar-brand">
+      <router-link class="navbar-item" to="/">
         <img src="@/assets/logo.png" alt="logo" />
-      </b-navbar-item>
-    </template>
-    <template slot="start">
-      <b-navbar-item tag="router-link" to="/">Home</b-navbar-item>
-      <b-navbar-dropdown label="Menu" hoverable>
-        <b-navbar-item tag="router-link" to="/encrypt">Encrypt</b-navbar-item>
-        <b-navbar-item tag="router-link" to="/decrypt">Decrypt</b-navbar-item>
-      </b-navbar-dropdown>
-      <b-navbar-item tag="router-link" to="/about">About</b-navbar-item>
-    </template>
-    <template slot="end">
-      <b-navbar-item tag="div">
-        <div class="buttons">
-          <b-button
-            icon-pack="mdi"
-            icon-left="github"
-            type="is-dark"
-          >Github</b-button
-          >
+      </router-link>
+
+      <button @click="makeBurger" type="button" class="button navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" v-bind:class="{ 'is-active': activator }">
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+        <span aria-hidden="true" />
+      </button>
+    </div>
+
+    <div id="navbarBasicExample" class="navbar-menu" v-bind:class="{ 'is-active': activator }">
+      <div class="navbar-start">
+        <router-link class="navbar-item" to="/">
+          Home
+        </router-link>
+
+        <router-link class="navbar-item" to="/encrypt">
+          Encrypt
+        </router-link>
+
+        <router-link class="navbar-item" to="/decrypt">
+          Decrypt
+        </router-link>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <o-button icon-pack="mdi" icon-left="github" variant="dark">Github</o-button>
+          </div>
         </div>
-      </b-navbar-item>
-    </template>
-  </b-navbar>
+      </div>
+    </div>
+
+  </nav>
 </template>
 
 <script lang="ts" src="./BaseHeader.ts">
diff --git a/src/main.ts b/src/main.ts
index 12b14c1a..78a431b9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,15 +1,15 @@
-import Vue from 'vue';
-import Buefy from 'buefy';
+import { createApp } from 'vue';
+import Oruga from '@oruga-ui/oruga-next';
+import { bulmaConfig } from '@oruga-ui/theme-bulma';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import 'buefy/dist/buefy.css';
+import '@oruga-ui/theme-bulma/dist/bulma.css';
 
-Vue.config.productionTip = false;
-Vue.use(Buefy);
+const app = createApp(App);
 
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount('#app');
+app.use(router);
+app.use(store);
+app.use(Oruga, bulmaConfig);
+
+app.mount('#app');
diff --git a/src/router.ts b/src/router.ts
index 9fe427e2..2d13fc96 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,11 +1,9 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from './views/HomePage.vue';
 import About from './views/AboutPage.vue';
 
-Vue.use(Router);
-
-export default new Router({
+const router = createRouter({
+  history: createWebHashHistory(),
   routes: [
     {
       path: '/',
@@ -35,3 +33,5 @@ export default new Router({
     },
   ],
 });
+
+export default router;
diff --git a/src/shims-tsx.d.ts b/src/shims-tsx.d.ts
deleted file mode 100644
index 3b88b582..00000000
--- a/src/shims-tsx.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue, { VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 54244845..94cc8d46 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,5 +1,6 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-
-  export default Vue;
+  import type { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<object, object, any>;
+  export default component;
 }
diff --git a/src/store.ts b/src/store.ts
index 2b3d4939..caa2a591 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,9 +1,6 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   state: {
 
   },
diff --git a/src/views/Decryption.ts b/src/views/Decryption.ts
index 4eb988df..c41153c0 100644
--- a/src/views/Decryption.ts
+++ b/src/views/Decryption.ts
@@ -1,8 +1,21 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { useProgrammatic } from '@oruga-ui/oruga-next';
 import AES from 'crypto-js/aes';
 import Utf8 from 'crypto-js/enc-utf8';
 
-export default Vue.extend({
+export default defineComponent({
+  setup() {
+    const { oruga } = useProgrammatic();
+    function danger() {
+      oruga.notification.open({
+        message: 'Please fill all form',
+        position: 'bottom-right',
+        variant: 'danger',
+        closable: true,
+      });
+    }
+    return { danger };
+  },
   data() {
     return {
       content: '',
@@ -17,11 +30,7 @@ export default Vue.extend({
         const plain = resultChiper.toString(Utf8);
         this.result = plain;
       } else {
-        this.$buefy.toast.open({
-          message: 'Please fill all form',
-          type: 'is-danger',
-          position: 'is-bottom',
-        });
+        this.danger();
       }
     },
   },
diff --git a/src/views/DecryptionPage.vue b/src/views/DecryptionPage.vue
index 14592209..9fbd4fdc 100644
--- a/src/views/DecryptionPage.vue
+++ b/src/views/DecryptionPage.vue
@@ -4,23 +4,23 @@
       <div class="card">
         <div class="card-content">
           <h1 class="title has-text-centered">Decryption</h1>
-          <b-field label="Content">
-            <b-input type="textarea" v-model="content" required />
-          </b-field>
-          <b-field label="Key">
-            <b-input type="password" v-model="key" min="5" required password-reveal />
-          </b-field>
+          <o-field label="Content">
+            <o-input type="textarea" v-model="content" required />
+          </o-field>
+          <o-field label="Key">
+            <o-input type="password" v-model="key" min="5" required password-reveal />
+          </o-field>
           <div class="has-text-centered">
-            <b-button type="is-success" size="is-large" @click="decryptNow">Decrypt</b-button>
+            <o-button variant="success" size="large" @click="decryptNow">Decrypt</o-button>
           </div>
-          <b-field label="Result">
+          <o-field label="Result">
             <div class="card">
               <div class="card-content">{{result}}</div>
             </div>
-          </b-field>
+          </o-field>
           <div class="buttons has-addons is-centered">
-            <b-button tag="router-link" type="is-outlined is-danger" to="/">Home</b-button>
-            <b-button tag="router-link" type="is-outlined is-link" to="/encrypt">Encrypt</b-button>
+            <o-button tag="router-link" variant="danger" outlined to="/">Home</o-button>
+            <o-button tag="router-link" variant="link" outlined to="/encrypt">Encrypt</o-button>
           </div>
         </div>
       </div>
diff --git a/src/views/Encryption.ts b/src/views/Encryption.ts
index ee1a76ac..d9adc92a 100644
--- a/src/views/Encryption.ts
+++ b/src/views/Encryption.ts
@@ -1,25 +1,35 @@
-import Vue from 'vue';
+import { defineComponent, ref } from 'vue';
+import { useProgrammatic } from '@oruga-ui/oruga-next';
 import AES from 'crypto-js/aes';
 
-export default Vue.extend({
+export default defineComponent({
+  setup() {
+    const { oruga } = useProgrammatic();
+    const result = ref('');
+    function danger() {
+      oruga.notification.open({
+        message: 'Please fill all form',
+        position: 'bottom-right',
+        variant: 'danger',
+        closable: true,
+      });
+    }
+    return { danger, result };
+  },
   data() {
     return {
       content: '',
       key: '',
-      result: '',
     };
   },
   methods: {
     encryptNow() {
+      console.log(this.content, this.key);
       if (this.content && this.key) {
         const resultChiper = AES.encrypt(this.content, this.key);
         this.result = resultChiper.toString();
       } else {
-        this.$buefy.toast.open({
-          message: 'Please fill all form',
-          type: 'is-danger',
-          position: 'is-bottom',
-        });
+        this.danger();
       }
     },
   },
diff --git a/src/views/EncryptionPage.vue b/src/views/EncryptionPage.vue
index f2b4e283..203646b7 100644
--- a/src/views/EncryptionPage.vue
+++ b/src/views/EncryptionPage.vue
@@ -4,27 +4,27 @@
       <div class="card">
         <div class="card-content">
           <h1 class="title has-text-centered">Encryption</h1>
-          <b-field label="Content">
-            <b-input type="textarea" v-model="content" required />
-          </b-field>
-          <b-field label="Key">
-            <b-input type="password" v-model="key" min="5" required password-reveal />
-          </b-field>
+          <o-field label="Content">
+            <o-input type="textarea" v-model="content" required />
+          </o-field>
+          <o-field label="Key">
+            <o-input type="password" v-model="key" min="5" required password-reveal />
+          </o-field>
           <div class="has-text-centered">
-            <b-button
+            <o-button
               id="encrypt-button"
-              type="is-success"
-              size="is-large"
-              @click="encryptNow">Encrypt</b-button>
+              variant="success"
+              size="large"
+              @click="encryptNow">Encrypt</o-button>
           </div>
-          <b-field label="Result">
+          <o-field label="Result">
             <div class="card">
               <div class="card-content">{{result}}</div>
             </div>
-          </b-field>
+          </o-field>
           <div class="buttons has-addons is-centered">
-            <b-button tag="router-link" type="is-outlined is-danger" to="/">Home</b-button>
-            <b-button tag="router-link" type="is-outlined is-link" to="/decrypt">Decrypt</b-button>
+            <o-button tag="router-link" variant="danger" outlined to="/">Home</o-button>
+            <o-button tag="router-link" variant="link" outlined to="/decrypt">Decrypt</o-button>
           </div>
         </div>
       </div>
diff --git a/src/views/Home.ts b/src/views/Home.ts
index 817884c2..ebbe7dea 100644
--- a/src/views/Home.ts
+++ b/src/views/Home.ts
@@ -1,6 +1,6 @@
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       carousels: [
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 678e5467..4e3d1b2c 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -4,8 +4,8 @@
       <div class="card-content">
         <div class="content has-text-centered">
           <h2 class="title">Welcome to Simple Encryption & Decryption Text</h2>
-          <b-carousel>
-            <b-carousel-item v-for="(carousel, i) in carousels" :key="i">
+          <o-carousel>
+            <o-carousel-item v-for="(carousel, i) in carousels" :key="i">
               <span class="image">
                 <div class="columns is-flex is-overlay is-vcentered is-centered">
                   <div class="column">
@@ -14,19 +14,21 @@
                 </div>
                 <img :src="carousel.image" alt="Carousel Image" />
               </span>
-            </b-carousel-item>
-          </b-carousel>
+            </o-carousel-item>
+          </o-carousel>
           <div class="section">
             <div class="content"><h3 class="subtitle">Please select</h3></div>
             <div class="buttons has-addons is-centered">
-              <b-button
+              <o-button
                 tag="router-link"
-                type="is-outlined is-success"
-                to="/encrypt">Encrypt</b-button>
-              <b-button
+                variant="success"
+                outlined
+                to="/encrypt">Encrypt</o-button>
+              <o-button
                 tag="router-link"
-                type="is-outlined is-danger"
-                to="/decrypt">Decrypt</b-button>
+                variant="danger"
+                outlined
+                to="/decrypt">Decrypt</o-button>
             </div>
           </div>
         </div>
diff --git a/tests/unit/app.spec.ts b/tests/unit/app.spec.ts
index 1fe46f86..8ad1d3e7 100644
--- a/tests/unit/app.spec.ts
+++ b/tests/unit/app.spec.ts
@@ -1,18 +1,12 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
-
+import { shallowMount } from '@vue/test-utils';
 import App from '@/App.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('App.vue', () => {
   it('Render correctly', () => {
     const wrapper = shallowMount(App, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+      global: {
+        stubs: ['router-link', 'router-view'],
+      },
     });
 
     const baseHeader = wrapper.find('base-header-stub');
diff --git a/tests/unit/components/baseFooter.spec.ts b/tests/unit/components/baseFooter.spec.ts
index fc5cb070..8a94bf6c 100644
--- a/tests/unit/components/baseFooter.spec.ts
+++ b/tests/unit/components/baseFooter.spec.ts
@@ -1,18 +1,13 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
+import { shallowMount } from '@vue/test-utils';
 
 import BaseFooter from '@/components/BaseFooter.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('BaseFooter.vue', () => {
   it('Render correctly', () => {
     const wrapper = shallowMount(BaseFooter, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+      global: {
+        stubs: ['router-link', 'router-view'],
+      },
     });
 
     expect(wrapper.text()).toContain('Simple Encryption Decryption');
diff --git a/tests/unit/components/baseHeader.spec.ts b/tests/unit/components/baseHeader.spec.ts
index 7496b9a8..28762cae 100644
--- a/tests/unit/components/baseHeader.spec.ts
+++ b/tests/unit/components/baseHeader.spec.ts
@@ -1,22 +1,17 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
+import { shallowMount } from '@vue/test-utils';
 
 import BaseHeader from '@/components/BaseHeader.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('BaseHeader.vue', () => {
   it('Render correctly', () => {
     const wrapper = shallowMount(BaseHeader, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+      global: {
+        stubs: ['router-link', 'router-view', 'o-button'],
+      },
     });
 
-    const navbarItems = wrapper.findAll('b-navbar-item-stub');
-    const items = navbarItems.wrappers.map((wrap) => wrap.text());
-    expect(items).toStrictEqual(['', 'Home', 'Encrypt', 'Decrypt', 'About', 'Github']);
+    const navbarItems = wrapper.findAll('router-link-stub');
+    const items = navbarItems.map((wrap) => wrap.attributes().to);
+    expect(items).toStrictEqual(['/', '/', '/encrypt', '/decrypt']);
   });
 });
diff --git a/tests/unit/router.spec.ts b/tests/unit/router.spec.ts
index 85270994..cd3fc2cb 100644
--- a/tests/unit/router.spec.ts
+++ b/tests/unit/router.spec.ts
@@ -2,8 +2,7 @@ import router from '@/router';
 
 describe('router.ts', () => {
   it('Check attributes', () => {
-    expect(router.mode).toEqual('hash');
     const path = router.getRoutes().map((route) => route.path);
-    expect(path).toStrictEqual(['', '/about', '/encrypt', '/decrypt']);
+    expect(path).toStrictEqual(['/', '/about', '/encrypt', '/decrypt']);
   });
 });
diff --git a/tests/unit/views/decryption.spec.ts b/tests/unit/views/decryption.spec.ts
index 48f8ba4b..9a0817de 100644
--- a/tests/unit/views/decryption.spec.ts
+++ b/tests/unit/views/decryption.spec.ts
@@ -1,27 +1,22 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
+import { shallowMount } from '@vue/test-utils';
 
 import Decryption from '@/views/DecryptionPage.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('Decryption.vue', () => {
   it('Render correctly', () => {
     const wrapper = shallowMount(Decryption, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+      global: {
+        stubs: ['router-link', 'router-view', 'o-button', 'o-field', 'o-input'],
+      },
     });
 
     expect(wrapper.text()).toContain('Decryption');
 
     expect(wrapper.classes()).toStrictEqual(['section']);
 
-    const bButtons = wrapper.findAll('b-button-stub');
+    const oButtons = wrapper.findAll('o-button-stub');
 
-    const buttons = bButtons.wrappers.map((bButton) => bButton.text());
-    expect(buttons).toStrictEqual(['Decrypt', 'Home', 'Encrypt']);
+    const buttonsLink = oButtons.map((button) => button.attributes()).map((attr) => attr.to);
+    expect(buttonsLink).toStrictEqual([undefined, '/', '/encrypt']);
   });
 });
diff --git a/tests/unit/views/encryption.spec.ts b/tests/unit/views/encryption.spec.ts
index f2959382..3394e2cb 100644
--- a/tests/unit/views/encryption.spec.ts
+++ b/tests/unit/views/encryption.spec.ts
@@ -1,27 +1,24 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
+import { mount } from '@vue/test-utils';
 
 import Encryption from '@/views/EncryptionPage.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('Encryption.vue', () => {
   it('Render correctly', () => {
-    const wrapper = shallowMount(Encryption, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+    const wrapper = mount(Encryption, {
+      shallow: true,
+      global: {
+        stubs: ['router-link', 'router-view', 'o-button', 'o-field', 'o-input'],
+      },
     });
 
     expect(wrapper.text()).toContain('Encryption');
 
     expect(wrapper.classes()).toStrictEqual(['section']);
 
-    const bButtons = wrapper.findAll('b-button-stub');
+    const oButtons = wrapper.findAll('o-button-stub');
 
-    const buttons = bButtons.wrappers.map((bButton) => bButton.text());
-    expect(buttons).toStrictEqual(['Encrypt', 'Home', 'Decrypt']);
+    const buttonsLink = oButtons.map((button) => button.attributes()).map((attr) => attr.to);
+    // unreliable
+    expect(buttonsLink).toStrictEqual([undefined, '/', '/decrypt']);
   });
 });
diff --git a/tests/unit/views/home.spec.ts b/tests/unit/views/home.spec.ts
index 75118827..f04dbf6d 100644
--- a/tests/unit/views/home.spec.ts
+++ b/tests/unit/views/home.spec.ts
@@ -1,27 +1,23 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Buefy from 'buefy';
+import { mount } from '@vue/test-utils';
 
 import Home from '@/views/HomePage.vue';
 
-// create an extended `Vue` constructor
-const localVue = createLocalVue();
-// install plugins as normal
-localVue.use(Buefy);
-
 describe('Home.vue', () => {
   it('Render correctly', () => {
-    const wrapper = shallowMount(Home, {
-      localVue,
-      stubs: ['router-link', 'router-view'],
+    const wrapper = mount(Home, {
+      shallow: true,
+      global: {
+        stubs: ['router-link', 'router-view', 'o-button', 'o-carousel', 'o-carousel-item'],
+      },
     });
 
     expect(wrapper.text()).toContain('Welcome to Simple Encryption & Decryption Text');
 
     expect(wrapper.classes()).toStrictEqual(['section']);
 
-    const bButtons = wrapper.findAll('b-button-stub');
+    const oButtons = wrapper.findAll('o-button-stub');
 
-    const buttons = bButtons.wrappers.map((bButton) => bButton.text());
-    expect(buttons).toStrictEqual(['Encrypt', 'Decrypt']);
+    const buttonsLink = oButtons.map((button) => button.attributes()).map((attr) => attr.to);
+    expect(buttonsLink).toStrictEqual(['/encrypt', '/decrypt']);
   });
 });
diff --git a/vue.config.js b/vue.config.js
index c7ff966f..e7be9eeb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,11 +2,4 @@ module.exports = {
   publicPath: process.env.NODE_ENV === 'production'
     ? '/SimpleEncryptDecryptPage/'
     : '/',
-  configureWebpack: {
-    resolve: {
-      alias: {
-        vue$: 'vue/dist/vue.esm.js',
-      },
-    },
-  },
 };
diff --git a/yarn.lock b/yarn.lock
index 79a7461a..15c51013 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1669,6 +1669,18 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@oruga-ui/oruga-next@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.6.0.tgz#096f4bef223bdf79e2223965894542a13352a9df"
+  integrity sha512-M1Y5PgCWBUDmQGH74cgzrp3vKaRFdHVtGNr0DwejeJGScB7Q6jodW4xgCz6K4hajLgHW6zxz/3ukpC4ZczlfaQ==
+
+"@oruga-ui/theme-bulma@^0.2.11":
+  version "0.2.11"
+  resolved "https://registry.npmjs.org/@oruga-ui/theme-bulma/-/theme-bulma-0.2.11.tgz#b1e6915b9fa4dfcaf412d84a1a8e1c7f8728ee63"
+  integrity sha512-yMYNTWDNZQ0qyzAlWVyvEO/ZDRjRIyPDTf58IL+OVJuVCsq1Nn/4nFltemuQA1foL6KpsqXMFT9pBTf4wQHMPw==
+  dependencies:
+    bulma "0.9.4"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
@@ -2456,7 +2468,7 @@
     "@vue/compiler-core" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/compiler-sfc@3.3.4":
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
   integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
@@ -2496,6 +2508,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/eslint-config-airbnb@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-airbnb/-/eslint-config-airbnb-7.0.0.tgz#eb61c44f96ce17b57dd866a4086bdf757c869e40"
@@ -2567,14 +2584,13 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
-"@vue/test-utils@1.3.6":
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.6.tgz#6656bd8fa44dd088b4ad80ff1ee28abe7e5ddf87"
-  integrity sha512-udMmmF1ts3zwxUJEIAj5ziioR900reDrt6C9H3XpWPsLBx2lpHKoA4BTdd9HNIYbkGltWw+JjWJ+5O6QBwiyEw==
+"@vue/test-utils@2.4.0":
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.0.tgz#7bc7fb2d0af1ad88e4e9ebd04b09545ce0eaceec"
+  integrity sha512-BKB9aj1yky63/I3IwSr1FjUeHYsKXI7D6S9F378AHt7a5vC0dLkOBtSsFXoRGC/7BfHmiB9HRhT+i9xrUHoAKw==
   dependencies:
-    dom-event-types "^1.0.0"
-    lodash "^4.17.15"
-    pretty "^2.0.0"
+    js-beautify "1.14.6"
+    vue-component-type-helpers "1.6.5"
 
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.9.8"
@@ -2587,14 +2603,14 @@
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-"@vue/vue2-jest@^29.2.4":
+"@vue/vue3-jest@^29.2.4":
   version "29.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/vue2-jest/-/vue2-jest-29.2.4.tgz#f17b61bbde629a2809db5ed85f88bee972ebe97b"
-  integrity sha512-oU/Ai4sufLlrhsj8GqRqfhMr6Ud4rehmwYP358/SjKcvUqOCoKa2lOBndDzG4uZVMNnQqQbKWIg7wqL3aRYPBA==
+  resolved "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-29.2.4.tgz#6f25d7e03f4ee0c41a6d2b3a2a5995a8be645fde"
+  integrity sha512-mS3sJR4p/qTZKsNdws9DBDJHm7NQDco0tWal89WhA41oosO2VvnrJvDJ1gZaEz5A/OXDj1ouDpEczkSQP4o8eQ==
   dependencies:
     "@babel/plugin-transform-modules-commonjs" "^7.2.0"
-    "@vue/component-compiler-utils" "^3.1.0"
     chalk "^2.1.0"
+    convert-source-map "^1.6.0"
     css-tree "^2.0.1"
     source-map "0.5.6"
     tsconfig "^7.0.0"
@@ -2740,7 +2756,7 @@ abab@^2.0.3, abab@^2.0.5:
   resolved "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
-abbrev@1:
+abbrev@1, abbrev@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
@@ -3323,6 +3339,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -3370,13 +3393,6 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buefy@^0.9.23:
-  version "0.9.23"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.23.tgz#47819ed44781adcfb805e370f84988f37291d5fe"
-  integrity sha512-zkmTOUDlh7xx0ID8cSw3Wtm97nkTGU992TcIBBTC41rjKHjJTyQn9fYr8oqvVaCTLNVJmdPnnjDCuYZtHoDEog==
-  dependencies:
-    bulma "0.9.4"
-
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -3402,7 +3418,7 @@ buffer@^5.5.0, buffer@^5.6.0:
 
 bulma@0.9.4:
   version "0.9.4"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
+  resolved "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
   integrity sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==
 
 bytes@3.0.0:
@@ -3788,7 +3804,7 @@ condense-newlines@^0.2.1:
     is-whitespace "^0.3.0"
     kind-of "^3.0.2"
 
-config-chain@^1.1.12:
+config-chain@^1.1.12, config-chain@^1.1.13:
   version "1.1.13"
   resolved "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
   integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
@@ -4165,11 +4181,6 @@ dayjs@^1.10.4:
   resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
   integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4385,11 +4396,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-event-types@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
-  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
-
 dom-serializer@^1.0.1:
   version "1.3.2"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
@@ -5575,6 +5581,17 @@ glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^8.0.3:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
+  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^5.0.1"
+    once "^1.3.0"
+
 global-dirs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
@@ -7175,6 +7192,16 @@ joi@^17.4.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+js-beautify@1.14.6:
+  version "1.14.6"
+  resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz#b23ca5d74a462c282c7711bb51150bcc97f2b507"
+  integrity sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==
+  dependencies:
+    config-chain "^1.1.13"
+    editorconfig "^0.15.3"
+    glob "^8.0.3"
+    nopt "^6.0.0"
+
 js-beautify@^1.6.12:
   version "1.14.0"
   resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.0.tgz#2ce790c555d53ce1e3d7363227acf5dc69024c2d"
@@ -7508,7 +7535,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.14, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7736,6 +7763,13 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.6"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -7879,6 +7913,13 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
+nopt@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
+  integrity sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==
+  dependencies:
+    abbrev "^1.0.0"
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -8641,7 +8682,7 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty@2.0.0, pretty@^2.0.0:
+pretty@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
   integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
@@ -10171,10 +10212,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vue-class-component@^7.2.6:
-  version "7.2.6"
-  resolved "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
-  integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
+vue-component-type-helpers@1.6.5:
+  version "1.6.5"
+  resolved "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.6.5.tgz#ff6b75529063744b0966655725f3e02f30d97cd7"
+  integrity sha512-iGdlqtajmiqed8ptURKPJ/Olz0/mwripVZszg6tygfZSIL9kYFPJTNY6+Q6OjWGznl2L06vxG5HvNvAnWrnzbg==
 
 vue-eslint-parser@^9.0.1, vue-eslint-parser@^9.0.3, vue-eslint-parser@^9.1.1, vue-eslint-parser@^9.3.0:
   version "9.3.0"
@@ -10203,15 +10244,12 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
-vue-property-decorator@^9.1.2:
-  version "9.1.2"
-  resolved "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
-  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
-
-vue-router@^3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
+vue-router@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81"
+  integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
@@ -10221,14 +10259,6 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.7.14:
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
-  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
@@ -10245,10 +10275,12 @@ vue@^3.3.4:
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
-vuex@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+vuex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"

From 3207befde907de4c625d5381be00d1155ae2075c Mon Sep 17 00:00:00 2001
From: Bervianto Leo Pratama <bervianto.leo@gmail.com>
Date: Mon, 26 Jun 2023 11:09:49 +0700
Subject: [PATCH 3/4] fix: add version 20.x

---
 .github/workflows/node.js.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index f0d22df6..df7d3b67 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [18.x, 20.x]
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}

From 271c47be35e990479c7805d421fe82a71cd370a5 Mon Sep 17 00:00:00 2001
From: Bervianto Leo Pratama <bervianto.leo@gmail.com>
Date: Mon, 26 Jun 2023 12:50:38 +0700
Subject: [PATCH 4/4] fix: remove 20.x

---
 .github/workflows/node.js.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index df7d3b67..f0d22df6 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x]
     steps:
     - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}