Upgrade vue plugins (#558)

* upgrade plugins

* fix linting

.eslintrc.js

@@ -27,5 +27,8 @@ module.exports = {
     "@typescript-eslint/no-loss-of-precision": "off",
     "@typescript-eslint/explicit-module-boundary-types":"off",
     camelcase: "off",
+    "vue/valid-v-slot": ["error", {
+      allowModifiers: true,
+    }],
   },
 };

package.json

@@ -53,33 +53,32 @@
     "@types/vue-moment": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.4.6",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-plugin-typescript": "~4.5.15",
-    "@vue/cli-plugin-vuex": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "babel-runtime": "^6.26.0",
     "deepmerge": "^4.2.2",
     "dotenv": "^14.3.2",
-    "eslint": "^6.7.2",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
     "google-spreadsheet": "^3.2.0",
     "http-server": "^14.1.0",
     "lodash.set": "^4.3.2",
-    "node-sass": "7.0.1",
     "prettier": "^2.5.1",
     "rimraf": "^3.0.2",
     "sass": "^1.49.0",
     "sass-loader": "^8.0.2",
     "sass-migrator": "^1.5.4",
     "ts-node": "^10.4.0",
-    "typescript": "^4.5.5",
-    "vue-cli-plugin-vuetify": "^2.4.5",
+    "typescript": "~4.5.5",
+    "vue-cli-plugin-vuetify": "~2.5.8",
     "vue-template-compiler": "^2.6.14",
     "vuetify-loader": "^1.7.3"
   }

src/components/admin/portraits/AssignPortrait.vue

@@ -31,7 +31,7 @@ export default class AssignPortrait extends Vue {
 
   assignPortrait(): void {
     if (!this.isAssigned && this.selectable) {
-      this.$parent.$emit("portrait-selected", this.portraitId);
+      this.$parent?.$emit("portrait-selected", this.portraitId);
     }
   }
 }

src/components/common/MmrSelect.vue

@@ -64,13 +64,11 @@ export default class MmrSelect extends Vue {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-  .v-messages {
-    font-size: 15px;
-  }
+::v-deep(.v-messages) {
+  font-size: 15px;
+}
 
-  .theme--dark .v-slider__thumb-label {
-    color: black;
-  }
+::v-deep(.theme--dark .v-slider__thumb-label) {
+  color: black;
 }
 </style>

src/store/admin/index.ts

@@ -97,7 +97,7 @@ const mod = {
       );
 
       const bannedPlayers = state.players.filter(
-        (p) => p.battleTag != bannedPlayer.battleTag
+        (p: BannedPlayer) => p.battleTag != bannedPlayer.battleTag
       );
 
       commit.SET_BANNED_PLAYERS(bannedPlayers);

src/store/admin/tournaments/index.ts

@@ -20,31 +20,31 @@ const mod = {
       const data = await rootGetters.tournamentsService.getUpcomingTournament();
       commit.SET_UPCOMING_TOURNAMENT(data.tournament);
     },
-    async registerPlayer(context: ActionContext<AdminTournamentsState, RootState>, player: ITournamentPlayer) {
+    async registerPlayer(context: ActionContext<AdminTournamentsState, RootState>, player: ITournamentPlayer): Promise<boolean> {
       const { rootGetters, commit, state, rootState } = moduleActionContext(context, mod);
       const token = rootState.oauth.token;
       commit.SET_IS_LOADING(true);
       const registered = await rootGetters.tournamentsService.registerPlayer(state.upcomingTournament.id, player, token);
       commit.SET_IS_LOADING(false);
       return registered;
     },
-    async unregisterPlayer(context: ActionContext<AdminTournamentsState, RootState>, battleTag: string) {
+    async unregisterPlayer(context: ActionContext<AdminTournamentsState, RootState>, battleTag: string): Promise<boolean> {
       const { rootGetters, commit, state, rootState } = moduleActionContext(context, mod);
       const token = rootState.oauth.token;
       commit.SET_IS_LOADING(true);
       const registered = await rootGetters.tournamentsService.unregisterPlayer(state.upcomingTournament.id, battleTag, token);
       commit.SET_IS_LOADING(false);
       return registered;
     },
-    async createTournament(context: ActionContext<AdminTournamentsState, RootState>, tournament: ITournament) {
+    async createTournament(context: ActionContext<AdminTournamentsState, RootState>, tournament: ITournament): Promise<boolean> {
       const { rootGetters, commit, rootState } = moduleActionContext(context, mod);
       const token = rootState.oauth.token;
       commit.SET_IS_LOADING(true);
       const created = await rootGetters.tournamentsService.createTournament(tournament, token);
       commit.SET_IS_LOADING(false);
       return created;
     },
-    async updateTournament(context: ActionContext<AdminTournamentsState, RootState>, tournament: ITournament) {
+    async updateTournament(context: ActionContext<AdminTournamentsState, RootState>, tournament: ITournament): Promise<boolean> {
       const { rootGetters, commit, rootState } = moduleActionContext(context, mod);
       const token = rootState.oauth.token;
       commit.SET_IS_LOADING(true);