chore(lint): Eslint 9 update

eslint.config.js

@@ -0,0 +1,21 @@
+
+import js from "@eslint/js";
+import pluginVue from 'eslint-plugin-vue'
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default [
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  eslintConfigPrettier,
+  {
+    files: ['**/*.{vue,js,jsx,mjs,cjs}'],
+    rules: {
+      "vue/multi-word-component-names": "off",
+      "vue/require-default-prop": "off",
+      "vue/no-v-html": "off",
+    },
+  }, 
+  {
+    ignores: ["**/dist/"],
+  }
+];

package.json

@@ -7,7 +7,7 @@
     "mock": "http-server dummy-data/ --cors",
     "build": "vite build",
     "preview": "vite preview --port 5050",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+    "lint": "eslint . --fix"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
@@ -17,10 +17,9 @@
     "yaml": "^2.6.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.10.2",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^10.0.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.12.0",
     "eslint-plugin-vue": "^9.29.0",
     "http-server": "^14.1.1",
     "prettier": "^3.3.3",

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    id="app"
     v-if="config"
+    id="app"
     :class="[
       `theme-${config.theme}`,
       `page-${currentPage}`,
@@ -32,16 +32,16 @@
         @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode
+          :default-value="config.defaults.colorTheme"
           @updated="isDark = $event"
-          :defaultValue="this.config.defaults.colorTheme"
         />
 
         <SettingToggle
-          @updated="vlayout = $event"
           name="vlayout"
           icon="fa-list"
-          iconAlt="fa-columns"
-          :defaultValue="this.config.defaults.layout == 'columns'"
+          icon-alt="fa-columns"
+          :default-value="config.defaults.layout == 'columns'"
+          @updated="vlayout = $event"
         />
 
         <SearchInput
@@ -73,9 +73,9 @@
             <template v-for="(group, groupIndex) in services">
               <h2
                 v-if="group.name"
+                :key="`header-${groupIndex}`"
                 class="column is-full group-title"
                 :class="group.class"
-                :key="`header-${groupIndex}`"
               >
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
                 <div v-else-if="group.logo" class="group-logo media-left">
@@ -105,9 +105,9 @@
             class="columns is-multiline layout-vertical"
           >
             <div
-              :class="['column', `is-${12 / config.columns}`]"
               v-for="(group, groupIndex) in services"
               :key="groupIndex"
+              :class="['column', `is-${12 / config.columns}`]"
             >
               <h2 v-if="group.name" class="group-title" :class="group.class">
                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
@@ -134,8 +134,8 @@
     <footer class="footer">
       <div class="container">
         <div
-          class="content has-text-centered"
           v-if="config.footer"
+          class="content has-text-centered"
           v-html="config.footer"
         ></div>
       </div>
@@ -275,7 +275,7 @@ export default {
       try {
         const service = this.services[0].items[0];
         window.open(service.url, target || service.target || "_self");
-      } catch (error) {
+      } catch {
         console.warn("fail to open service");
       }
     },

src/components/DarkMode.vue

@@ -1,8 +1,8 @@
 <template>
   <a
-    @click="toggleTheme()"
     aria-label="Toggle dark mode"
     class="navbar-item is-inline-block-mobile"
+    @click="toggleTheme()"
   >
     <i
       :class="`${faClasses[mode]}`"
@@ -18,6 +18,7 @@ export default {
   props: {
     defaultValue: String,
   },
+  emits: ['updated'],
   data: function () {
     return {
       isDark: null,

src/components/Message.vue

@@ -25,11 +25,6 @@ export default {
       message: {},
     };
   },
-  created: async function () {
-    // Look for a new message if an endpoint is provided.
-    this.message = Object.assign({}, this.item);
-    await this.getMessage();
-  },
   computed: {
     show: function () {
       return this.message.title || this.message.content;
@@ -40,6 +35,11 @@ export default {
       this.message = Object.assign({}, item);
     },
   },
+  created: async function () {
+    // Look for a new message if an endpoint is provided.
+    this.message = Object.assign({}, this.item);
+    await this.getMessage();
+  },
   methods: {
     getMessage: async function () {
       if (!this.item) {

src/components/Navbar.vue

@@ -9,7 +9,7 @@
             aria-expanded="false"
             class="navbar-burger"
             :class="{ 'is-active': showMenu }"
-            v-on:click="$emit('navbar-toggle')"
+            @click="$emit('navbar-toggle')"
           >
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
@@ -19,10 +19,10 @@
         <div class="navbar-menu" :class="{ 'is-active': showMenu }">
           <div class="navbar-start">
             <a
-              class="navbar-item"
-              rel="noreferrer"
               v-for="(link, key) in links"
               :key="key"
+              class="navbar-item"
+              rel="noreferrer"
               :href="link.url"
               :target="link.target"
             >
@@ -52,6 +52,7 @@ export default {
     },
     links: Array,
   },
+  emits: ['navbar-toggle'],
   computed: {
     showMenu: function () {
       return this.open && this.isSmallScreen();

src/components/SearchInput.vue

@@ -4,9 +4,9 @@
       <label for="search" class="search-label"></label>
       <input
         id="search"
+        ref="search"
         name="search"
         type="search"
-        ref="search"
         :value="value"
         @input.stop="search($event.target.value)"
         @keydown.enter.exact.prevent="open()"
@@ -26,6 +26,7 @@ export default {
       default: "/",
     },
   },
+  emits: ["search-open", "search-focus", "search-cancel", "input"],
   mounted() {
     this._keyListener = function (event) {
       if (event.key === this.hotkey) {
@@ -46,6 +47,9 @@ export default {
       this.focus();
     }
   },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this._keyListener);
+  },
   methods: {
     open: function (target = null) {
       if (!this.$refs.search.value) {
@@ -79,9 +83,6 @@ export default {
       this.$emit("input", value.toLowerCase());
     },
   },
-  beforeUnmount() {
-    document.removeEventListener("keydown", this._keyListener);
-  },
 };
 </script>
 

src/components/SettingToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <a
-    @click.prevent="toggleSetting()"
     class="navbar-item is-inline-block-mobile"
+    @click.prevent="toggleSetting()"
   >
     <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
     <slot></slot>
@@ -17,6 +17,7 @@ export default {
     iconAlt: String,
     defaultValue: Boolean,
   },
+  emits: ["updated"],
   data: function () {
     return {
       secondaryIcon: null,

src/components/services/AdGuardHome.vue

@@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
 
 export default {
   name: "AdGuardHome",
+  components: {
+    Generic,
+  },
   mixins: [service],
   props: {
     item: Object,
   },
-  components: {
-    Generic,
-  },
   data: () => {
     return {
       status: null,

src/components/services/CopyToClipboard.vue

@@ -19,13 +19,13 @@ import Generic from "./Generic.vue";
 
 export default {
   name: "CopyToClipboard",
+  components: {
+    Generic,
+  },
   mixins: [service],
   props: {
     item: Object,
   },
-  components: {
-    Generic,
-  },
   data: () => ({
     animate: false,
   }),

src/components/services/Emby.vue

@@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
 
 export default {
   name: "Emby",
+  components: {
+    Generic,
+  },
   mixins: [service],
   props: {
     item: Object,
   },
-  components: {
-    Generic,
-  },
   data: () => ({
     status: "",
     albumCount: 0,

src/components/services/Generic.vue

@@ -19,14 +19,14 @@
             <div class="media-content">
               <slot name="content">
                 <p class="title">{{ item.name }}</p>
-                <p class="subtitle" v-if="item.subtitle">
+                <p v-if="item.subtitle" class="subtitle">
                   {{ item.subtitle }}
                 </p>
               </slot>
             </div>
             <slot name="indicator" class="indicator"></slot>
           </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+          <div v-if="item.tag" class="tag" :class="item.tagstyle">
             <strong class="tag-text">#{{ item.tag }}</strong>
           </div>
         </div>

src/components/services/Healthchecks.vue

@@ -22,13 +22,13 @@ import Generic from "./Generic.vue";
 
 export default {
   name: "Healthchecks",
+  components: {
+    Generic,
+  },
   mixins: [service],
   props: {
     item: Object,
   },
-  components: {
-    Generic,
-  },
   data: () => ({
     api: null,
   }),

src/components/services/HomeAssistant.vue

@@ -25,13 +25,13 @@ import Generic from "./Generic.vue";
 
 export default {
   name: "HomeAssistant",
+  components: {
+    Generic,
+  },
   mixins: [service],
   props: {
     item: Object,
   },
-  components: {
-    Generic,
-  },
   data: () => ({
     status: "",
     version: "",