feat(components): Register Generic component globally

.jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+      "paths": {
+        "@/*": ["./src/*"]
+      }
+    },
+    "exclude": ["node_modules", "dist"]
+  }

eslint.config.js

@@ -18,6 +18,6 @@ export default [
     },
   },
   {
-    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**"],
   },
 ];

src/components/SearchInput.vue

@@ -64,7 +64,7 @@ export default {
       });
     },
     hasFocus: function () {
-      return document.activeElement == this.$refs.search
+      return document.activeElement == this.$refs.search;
     },
     setSearchURL: function (value) {
       const url = new URL(window.location);

src/components/Service.vue

@@ -1,10 +1,12 @@
 <template>
-  <component :is="component" :item="item" :proxy="proxy"></component>
+  <Generic v-if="isGeneric" :item="item"></Generic>
+  <component :is="component" v-else :item="item" :proxy="proxy"></component>
 </template>
 
 <script>
 import { defineAsyncComponent } from "vue";
-import Generic from "./services/Generic.vue";
+
+const defaultService = "Generic";
 
 export default {
   name: "Service",
@@ -13,12 +15,13 @@ export default {
     proxy: Object,
   },
   computed: {
+    isGeneric() {
+      return defaultService === (this.item.type || defaultService);
+    },
     component() {
-      const type = this.item.type || "Generic";
+      return defineAsyncComponent(
-      if (type === "Generic") {
+        () => import(`./services/${this.item.type}.vue`),
-        return Generic;
+      );
-      }
-      return defineAsyncComponent(() => import(`./services/${type}.vue`));
     },
   },
 };

src/components/services/AdGuardHome.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "AdGuardHome",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/CopyToClipboard.vue

@@ -15,13 +15,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "CopyToClipboard",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Docuseal.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Docuseal",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Emby.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Emby",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/FreshRSS.vue

@@ -25,13 +25,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "FreshRSS",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Gitea.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Gitea",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Glances.vue

@@ -17,13 +17,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Glances",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Gotify.vue

@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Gotify",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Healthchecks.vue

@@ -18,13 +18,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Healthchecks",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/HomeAssistant.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "HomeAssistant",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Immich.vue

@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Immich",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Jellystat.vue

@@ -20,13 +20,9 @@
 </template>
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Jellyfin",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Lidarr.vue

@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Lidarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Mealie.vue

@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Mealie",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Medusa.vue

@@ -33,13 +33,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Medusa",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Mylar.vue

@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Mylar",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Nextcloud.vue

@@ -16,13 +16,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Nextcloud",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/OctoPrint.vue

@@ -51,13 +51,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "OctoPrint",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Olivetin.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Olivetin",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/OpenHAB.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "OpenHAB",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/PaperlessNG.vue

@@ -16,13 +16,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Paperless",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/PeaNUT.vue

@@ -19,13 +19,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PeaNUT",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/PiAlert.vue

@@ -27,13 +27,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PiAlert",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/PiHole.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "PiHole",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Ping.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Ping",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Portainer.vue

@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Portainer",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Prometheus.vue

@@ -19,7 +19,6 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const AlertsStatus = Object.freeze({
   firing: "firing",
@@ -29,9 +28,6 @@ const AlertsStatus = Object.freeze({
 
 export default {
   name: "Prometheus",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Prowlarr.vue

@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Prowlarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Proxmox.vue

@@ -76,13 +76,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Proxmox",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Radarr.vue

@@ -27,16 +27,12 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const V3_API = "/api/v3";
 const LEGACY_API = "/api";
 
 export default {
   name: "Radarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Readarr.vue

@@ -27,15 +27,11 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const API = "/api/v1";
 
 export default {
   name: "Readarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Rtorrent.vue

@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import Generic from "./Generic.vue";
-
 // Units to add to download and upload rates.
 const units = ["B", "kiB", "MiB", "GiB"];
 
@@ -48,7 +46,6 @@ const displayRate = (rate) => {
 
 export default {
   name: "RTorrent",
-  components: { Generic },
   props: { item: Object },
   // Properties for download, upload, torrent count and errors.
   data: () => ({ dl: null, ul: null, count: null, error: null }),

src/components/services/SABnzbd.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "SABnzbd",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Scrutiny.vue

@@ -24,13 +24,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Scrutiny",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Sonarr.vue

@@ -28,16 +28,12 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 const V3_API = "/api/v3";
 const LEGACY_API = "/api";
 
 export default {
   name: "Sonarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/SpeedtestTracker.vue

@@ -15,13 +15,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "SpeedtestTracker",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Tautulli.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Tautulli",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Tdarr.vue

@@ -28,13 +28,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Tdarr",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/ThemeChooser.vue

@@ -20,16 +20,11 @@
 </template>
 
 <script>
-import Generic from "./Generic.vue";
-
 let currentTheme;
 const app = document.getElementById("app");
 
 export default {
   name: "ThemeChooser",
-  components: {
-    Generic,
-  },
   props: {
     item: Object,
   },

src/components/services/Traefik.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Traefik",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/UptimeKuma.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "UptimeKuma",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/WUD.vue

@@ -22,13 +22,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "WUD",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/Wallabag.vue

@@ -21,13 +21,9 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 
 export default {
   name: "Wallabag",
-  components: {
-    Generic,
-  },
   mixins: [service],
   props: {
     item: Object,

src/components/services/qBittorrent.vue

@@ -28,7 +28,6 @@
 
 <script>
 import service from "@/mixins/service.js";
-import Generic from "./Generic.vue";
 const units = ["B", "KB", "MB", "GB"];
 
 // Take the rate in bytes and keep dividing it by 1k until the lowest
@@ -50,7 +49,6 @@ const displayRate = (rate) => {
 
 export default {
   name: "QBittorrent",
-  components: { Generic },
   mixins: [service],
   props: { item: Object },
   data: () => ({ dl: null, ul: null, count: null, error: null }),

src/main.js

@@ -3,9 +3,12 @@ import { createApp, h } from "vue";
 import App from "./App.vue";
 
 const app = createApp(App);
+import Generic from "./components/services/Generic.vue";
 
-app.component("DynamicStyle", (_props, context) => {
+app
-  return h("style", {}, context.slots);
+  .component("Generic", Generic)
-});
+  .component("DynamicStyle", (_props, context) => {
+    return h("style", {}, context.slots);
+  });
 
 app.mount("#app-mount");