build(webui): update eslint plugin

komga-webui/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'comma-dangle': ['error', 'always-multiline'],
     'semi': ['error', 'never'],
     'quotes': ['error', 'single'],
+    'vue/valid-v-slot': 'off',
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',

komga-webui/package.json

@@ -40,8 +40,8 @@
     "@types/lodash": "^4.14.172",
     "@types/vuelidate": "^0.7.15",
     "@types/webpack": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.4.6",
     "@vue/cli-plugin-router": "^4.4.6",
@@ -49,14 +49,14 @@
     "@vue/cli-plugin-unit-jest": "^4.5.15",
     "@vue/cli-plugin-vuex": "^4.4.6",
     "@vue/cli-service": "^4.4.6",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^8.0.0",
     "@vue/test-utils": "1.2.2",
     "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-vue": "^7.20.0",
     "html-webpack-inject-attributes-plugin": "^1.0.6",
     "jest-canvas-mock": "^2.3.1",
     "sass": "^1.32.13",

komga-webui/src/components/PagesTable.vue

@@ -45,11 +45,11 @@ export default Vue.extend({
   props: {
     leftPages: {
       type: Array as PropType<PageDto[]>,
-      default: [],
+      default: () => [],
     },
     rightPages: {
       type: Array as PropType<PageDto[]>,
-      default: [],
+      default: () => [],
     },
   },
   computed: {

komga-webui/src/components/ReusableDialogs.vue

@@ -110,7 +110,7 @@ import {LibraryDto} from '@/types/komga-libraries'
 import BulkEditBooksDialog from '@/components/dialogs/BulkEditBooksDialog.vue'
 
 export default Vue.extend({
-  name: 'Dialogs',
+  name: 'ReusableDialogs',
   components: {
     BulkEditBooksDialog,
     ConfirmationDialog,

komga-webui/src/components/ToasterNotification.vue

@@ -37,7 +37,7 @@ import {convertErrorCodes} from '@/functions/error-codes'
 import {BookImportSseDto} from '@/types/komga-sse'
 
 export default Vue.extend({
-  name: 'Toaster',
+  name: 'ToasterNotification',
   data: function () {
     return {
       queue: [] as any[],

komga-webui/src/components/dialogs/TransientBookViewerDialog.vue

@@ -61,7 +61,9 @@
                 <v-btn icon :disabled="!canPrevRight" @click="previousPageRight">
                   <rtl-icon icon="mdi-chevron-left" rtl="mdi-chevron-right"/>
                 </v-btn>
-                {{ $t('dialog.transient_book_viewer.page_of_pages', {page: rightPageNumber, pages: rightPages.length}) }}
+                {{
+                  $t('dialog.transient_book_viewer.page_of_pages', {page: rightPageNumber, pages: rightPages.length})
+                }}
                 <v-btn icon :disabled="!canNextRight" @click="nextPageRight">
                   <rtl-icon icon="mdi-chevron-right" rtl="mdi-chevron-left"/>
                 </v-btn>
@@ -130,11 +132,11 @@ export default Vue.extend({
     value: Boolean,
     leftPages: {
       type: Array as PropType<PageDtoWithUrl[]>,
-      default: [],
+      default: () => [],
     },
     rightPages: {
       type: Array as PropType<PageDtoWithUrl[]>,
-      default: [],
+      default: () => [],
     },
   },
   watch: {

komga-webui/src/router.ts

@@ -50,24 +50,24 @@ const router = new Router({
       path: '/',
       name: 'home',
       redirect: {name: 'dashboard'},
-      component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'),
+      component: () => import(/* webpackChunkName: "home" */ './views/HomeView.vue'),
       children: [
         {
           path: '/welcome',
           name: 'welcome',
-          component: () => import(/* webpackChunkName: "welcome" */ './views/Welcome.vue'),
+          component: () => import(/* webpackChunkName: "welcome" */ './views/WelcomeView.vue'),
         },
         {
           path: '/dashboard',
           name: 'dashboard',
           beforeEnter: noLibraryGuard,
-          component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
+          component: () => import(/* webpackChunkName: "dashboard" */ './views/DashboardView.vue'),
         },
         {
           path: '/settings',
           name: 'settings',
           redirect: {name: 'settings-analysis'},
-          component: () => import(/* webpackChunkName: "settings" */ './views/Settings.vue'),
+          component: () => import(/* webpackChunkName: "settings" */ './views/SettingsHolder.vue'),
           children: [
             {
               path: '/settings/users',
@@ -119,7 +119,7 @@ const router = new Router({
           path: '/libraries/:libraryId/recommended',
           name: 'recommended-libraries',
           beforeEnter: noLibraryGuard,
-          component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
+          component: () => import(/* webpackChunkName: "dashboard" */ './views/DashboardView.vue'),
           props: (route) => ({libraryId: route.params.libraryId}),
         },
         {
@@ -170,7 +170,7 @@ const router = new Router({
         {
           path: '/search',
           name: 'search',
-          component: () => import(/* webpackChunkName: "search" */ './views/Search.vue'),
+          component: () => import(/* webpackChunkName: "search" */ './views/SearchView.vue'),
         },
         {
           path: '/import',
@@ -183,12 +183,12 @@ const router = new Router({
     {
       path: '/startup',
       name: 'startup',
-      component: () => import(/* webpackChunkName: "startup" */ './views/Startup.vue'),
+      component: () => import(/* webpackChunkName: "startup" */ './views/StartupView.vue'),
     },
     {
       path: '/login',
       name: 'login',
-      component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
+      component: () => import(/* webpackChunkName: "login" */ './views/LoginView.vue'),
     },
     {
       path: '/book/:bookId/read',

komga-webui/src/views/DashboardView.vue

@@ -224,7 +224,7 @@ import {LibraryDto} from '@/types/komga-libraries'
 import {PageLoader} from '@/types/pageLoader'
 
 export default Vue.extend({
-  name: 'Dashboard',
+  name: 'DashboardView',
   components: {
     HorizontalScroller,
     EmptyState,

komga-webui/src/views/HomeView.vue

@@ -186,27 +186,27 @@
     </v-navigation-drawer>
 
     <v-main class="fill-height">
-      <dialogs/>
-      <toaster/>
+      <reusable-dialogs/>
+      <toaster-notification/>
       <router-view/>
     </v-main>
   </div>
 </template>
 
 <script lang="ts">
-import Dialogs from '@/components/Dialogs.vue'
+import ReusableDialogs from '@/components/ReusableDialogs.vue'
 import LibraryActionsMenu from '@/components/menus/LibraryActionsMenu.vue'
 import SearchBox from '@/components/SearchBox.vue'
 import {Theme} from '@/types/themes'
 import Vue from 'vue'
 import {LIBRARIES_ALL} from '@/types/library'
-import Toaster from '@/components/Toaster.vue'
+import ToasterNotification from '@/components/ToasterNotification.vue'
 import {MediaStatus} from '@/types/enum-books'
 import {LibraryDto} from '@/types/komga-libraries'
 
 export default Vue.extend({
-  name: 'home',
-  components: {Toaster, LibraryActionsMenu, SearchBox, Dialogs},
+  name: 'HomeView',
+  components: {ToasterNotification, LibraryActionsMenu, SearchBox, ReusableDialogs},
   data: function () {
     return {
       LIBRARIES_ALL,

komga-webui/src/views/LoginView.vue

@@ -132,7 +132,7 @@ import {socialButtons} from '@/types/social'
 import {convertErrorCodes} from '@/functions/error-codes'
 
 export default Vue.extend({
-  name: 'Login',
+  name: 'LoginView',
   data: function () {
     return {
       urls,

komga-webui/src/views/SearchView.vue

@@ -175,7 +175,7 @@ import {throttle} from 'lodash'
 import {PageLoader} from '@/types/pageLoader'
 
 export default Vue.extend({
-  name: 'Search',
+  name: 'SearchView',
   components: {
     EmptyState,
     ToolbarSticky,

komga-webui/src/views/SettingsHolder.vue

@@ -22,7 +22,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'Settings',
+  name: 'SettingsHolder',
   computed: {
     booksToCheck(): number {
       return this.$store.state.booksToCheck

komga-webui/src/views/StartupView.vue

@@ -12,7 +12,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'Startup',
+  name: 'StartupView',
   async mounted() {
     try {
       if (this.$route.query.xAuthToken) {

komga-webui/src/views/WelcomeView.vue

@@ -19,7 +19,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'Welcome',
+  name: 'WelcomeView',
   computed: {
     isAdmin (): boolean {
       return this.$store.getters.meAdmin