upgraded front packages and adapted code

2026-02-18 00:27:41 +01:00 · 2024-05-14 16:56:32 +02:00
parent 1465f74eef
commit 718fd2dad1
8 changed files with 1929 additions and 1733 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,45 +29,44 @@
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
-    "axios": "^1.6.0",
-    "core-js": "^3.8.3",
-    "cronstrue": "^2.31.0",
+    "axios": "^1.6.8",
+    "core-js": "^3.37.1",
+    "cronstrue": "^2.50.0",
    "emulatorjs": "github:emulatorjs/emulatorjs#v4.0.12",
    "file-saver": "^2.0.5",
    "js-cookie": "^3.0.5",
    "jszip": "^3.10.1",
    "lodash": "^4.17.21",
-    "md-editor-v3": "^4.13.5",
+    "md-editor-v3": "^4.14.1",
    "mitt": "^3.0.1",
-    "nanoid": "^5.0.4",
-    "pinia": "^2.1.6",
-    "roboto-fontface": "*",
+    "nanoid": "^5.0.7",
+    "pinia": "^2.1.7",
+    "roboto-fontface": "^0.10.0",
    "socket.io-client": "^4.7.5",
-    "vue": "^3.2.13",
-    "vue-router": "^4.0.0",
-    "vuetify": "^3.3.3",
-    "webfontloader": "^1.0.0"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2",
+    "vuetify": "^3.6.5",
+    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
-    "@types/file-saver": "^2.0.5",
+    "@types/file-saver": "^2.0.7",
    "@types/js-cookie": "^3.0.6",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "^20.10.6",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.12",
    "@types/webfontloader": "^1.6.38",
-    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue": "^3.2.0",
    "@vue/tsconfig": "^0.5.1",
    "esbuild": "^0.20.2",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
    "openapi-typescript-codegen": "^0.25.0",
-    "sass": "^1.55.0",
+    "sass": "^1.77.1",
    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
    "vite": "^3.2.10",
    "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-rewrite-all": "^1.0.1",
    "vite-plugin-static-copy": "0.17.1",
-    "vite-plugin-vuetify": "^1.0.0-alpha.12",
+    "vite-plugin-vuetify": "^1.0.2",
    "vue-tsc": "^1.8.27"
  },
  "engines": {
--- a/frontend/src/components/Details/Notes.vue
+++ b/frontend/src/components/Details/Notes.vue
@@ -99,15 +99,13 @@ function onEditNote() {
    <v-card-text>
      <v-list>
        <v-list-item v-for="note in publicNotes" :key="note.id">
-          <v-list-item-content>
-            <v-list-item-title>{{ note.user__username }}</v-list-item-title>
-            <MdPreview
-              :modelValue="note.raw_markdown"
-              :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
-              previewTheme="vuepress"
-              codeTheme="github"
-            />
-          </v-list-item-content>
+          <v-list-item-title>{{ note.user__username }}</v-list-item-title>
+          <MdPreview
+            :modelValue="note.raw_markdown"
+            :theme="theme.name.value == 'dark' ? 'dark' : 'light'"
+            previewTheme="vuepress"
+            codeTheme="github"
+          />
        </v-list-item>
      </v-list>
    </v-card-text>
@@ -124,6 +122,6 @@ function onEditNote() {
  line-height: 1.25 !important;
 }
 .vuepress-theme pre code {
-  background-color: #0D1117;
+  background-color: #0d1117;
 }
 </style>
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -47,7 +47,7 @@ const { smAndDown } = useDisplay();
        :to="{ name: 'platform', params: { platform: platform.id } }"
      >
        {{ platform.name }}
-        <v-avatar :rounded="0" size="40" class="ml-1 py-1">
+        <v-avatar :rounded="0" size="30" class="ml-2">
          <platform-icon :key="platform.slug" :slug="platform.slug" />
        </v-avatar>
      </v-chip>
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import { VDataTable } from "vuetify/labs/VDataTable";

 import AdminMenu from "@/components/Game/AdminMenu/Base.vue";
 import romApi from "@/services/api/rom";
@@ -76,7 +75,7 @@ const romsPerPage = ref(-1);

 // Functions
 function rowClick(_: Event, row: any) {
-  router.push({ name: "rom", params: { rom: row.item.raw.id } });
+  router.push({ name: "rom", params: { rom: row.item.id } });
 }
 </script>

@@ -97,24 +96,24 @@ function rowClick(_: Event, row: any) {
      <v-avatar :rounded="0">
        <v-progress-linear
          color="romm-accent-1"
-          :active="downloadStore.value.includes(item.raw.id)"
+          :active="downloadStore.value.includes(item.id)"
          :indeterminate="true"
          absolute
        />
        <v-img
          :src="
-            !item.raw.igdb_id && !item.raw.has_cover
+            !item.igdb_id && !item.has_cover
              ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-              : !item.raw.has_cover
+              : !item.has_cover
              ? `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-              : `/assets/romm/resources/${item.raw.path_cover_s}`
+              : `/assets/romm/resources/${item.path_cover_s}`
          "
          :lazy-src="
-            !item.raw.igdb_id && !item.raw.has_cover
+            !item.igdb_id && !item.has_cover
              ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-              : !item.raw.has_cover
+              : !item.has_cover
              ? `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-              : `/assets/romm/resources/${item.raw.path_cover_s}`
+              : `/assets/romm/resources/${item.path_cover_s}`
          "
          min-height="150"
        />
@@ -122,16 +121,16 @@ function rowClick(_: Event, row: any) {
    </template>
    <template v-slot:item.file_size_bytes="{ item }">
      <span>
-        {{ formatBytes(item.raw.file_size_bytes) }}
+        {{ formatBytes(item.file_size_bytes) }}
      </span>
    </template>
    <template v-slot:item.regions="{ item }">
-      <span class="px-1" v-for="region in item.raw.regions">
+      <span class="px-1" v-for="region in item.regions">
        {{ regionToEmoji(region) }}
      </span>
    </template>
    <template v-slot:item.languages="{ item }">
-      <span class="px-1" v-for="language in item.raw.languages">
+      <span class="px-1" v-for="language in item.languages">
        {{ languageToEmoji(language) }}
      </span>
    </template>
@@ -139,8 +138,8 @@ function rowClick(_: Event, row: any) {
      <v-btn
        class="ma-1 bg-terciary"
        rounded="0"
-        @click.stop="romApi.downloadRom({ rom: item.raw })"
-        :disabled="downloadStore.value.includes(item.raw.id)"
+        @click.stop="romApi.downloadRom({ rom: item })"
+        :disabled="downloadStore.value.includes(item.id)"
        download
        size="small"
        variant="text"
@@ -148,10 +147,10 @@ function rowClick(_: Event, row: any) {
        <v-icon>mdi-download</v-icon>
      </v-btn>
      <v-btn
-        v-if="item.raw.platform_slug.toLowerCase() in platformSlugEJSCoreMap"
+        v-if="item.platform_slug.toLowerCase() in platformSlugEJSCoreMap"
        size="small"
        variant="text"
-        :href="`/play/${item.raw.id}`"
+        :href="`/play/${item.id}`"
        class="my-1 bg-terciary"
        rounded="0"
      >
@@ -169,7 +168,7 @@ function rowClick(_: Event, row: any) {
            ><v-icon>mdi-dots-vertical</v-icon></v-btn
          >
        </template>
-        <admin-menu :rom="item.raw" />
+        <admin-menu :rom="item" />
      </v-menu>
    </template>
  </v-data-table>
--- a/frontend/src/views/Settings/ControlPanel/Base.vue
+++ b/frontend/src/views/Settings/ControlPanel/Base.vue
@@ -50,23 +50,37 @@ const tab = ref("general");
      <span class="text-romm-accent-1">RomM</span>
      <span class="ml-1">{{ heartbeatStore.value.VERSION }}</span>
      <v-icon>mdi-circle-small</v-icon><v-icon>mdi-github</v-icon>
-      <span class="ml-1"
-        ><a
-          style="text-decoration: none; color: inherit"
-          href="https://github.com/rommapp/romm"
-          target="_blank"
-          >Github</a
-        ></span
-      >
+      <v-hover v-slot="{ isHovering, props }">
+        <span class="ml-1"
+          ><a
+            :class="{
+              'text-romm-accent-1': isHovering,
+              'text-white': !isHovering,
+            }"
+            v-bind="props"
+            style="text-decoration: none"
+            href="https://github.com/rommapp/romm"
+            target="_blank"
+            >Github</a
+          ></span
+        >
+      </v-hover>
      <v-icon>mdi-circle-small</v-icon>
-      <span class="ml-1"
-        ><a
-          style="text-decoration: none; color: inherit"
-          href="https://discord.com/invite/P5HtHnhUDH"
-          target="_blank"
-          >Join to our Discord</a
-        ></span
-      >
+      <v-hover v-slot="{ isHovering, props }">
+        <span class="ml-1"
+          ><a
+            :class="{
+              'text-romm-accent-1': isHovering,
+              'text-white': !isHovering,
+            }"
+            v-bind="props"
+            style="text-decoration: none"
+            href="https://discord.com/invite/P5HtHnhUDH"
+            target="_blank"
+            >Join to our Discord</a
+          ></span
+        >
+      </v-hover>
    </v-row>
  </v-bottom-navigation>
 </template>
--- a/frontend/src/views/Settings/ControlPanel/Users/Base.vue
+++ b/frontend/src/views/Settings/ControlPanel/Users/Base.vue
@@ -6,7 +6,6 @@ import type { Events, UserItem } from "@/types/emitter";
 import { defaultAvatarPath, formatTimestamp } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, onMounted, ref } from "vue";
-import { VDataTable } from "vuetify/labs/VDataTable";

 const HEADERS = [
  {
@@ -123,22 +122,22 @@ onMounted(() => {
          <v-avatar>
            <v-img
              :src="
-                item.raw.avatar_path
-                  ? `/assets/romm/assets/${item.raw.avatar_path}`
+                item.avatar_path
+                  ? `/assets/romm/assets/${item.avatar_path}`
                  : defaultAvatarPath
              "
            />
          </v-avatar>
        </template>
        <template v-slot:item.last_active="{ item }">
-          {{ formatTimestamp(item.raw.last_active) }}
+          {{ formatTimestamp(item.last_active) }}
        </template>
        <template v-slot:item.enabled="{ item }">
          <v-switch
            color="romm-accent-1"
-            :disabled="item.raw.id == auth.user?.id"
-            v-model="item.raw.enabled"
-            @change="disableUser(item.raw)"
+            :disabled="item.id == auth.user?.id"
+            v-model="item.enabled"
+            @change="disableUser(item)"
            hide-details
          />
        </template>
@@ -148,7 +147,7 @@ onMounted(() => {
            class="ma-1 bg-terciary"
            size="small"
            rounded="0"
-            @click="emitter?.emit('showEditUserDialog', item.raw)"
+            @click="emitter?.emit('showEditUserDialog', item)"
          >
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
@@ -157,7 +156,7 @@ onMounted(() => {
            class="ma-1 bg-terciary text-romm-red"
            size="small"
            rounded="0"
-            @click="emitter?.emit('showDeleteUserDialog', item.raw)"
+            @click="emitter?.emit('showDeleteUserDialog', item)"
            ><v-icon>mdi-delete</v-icon></v-btn
          >
        </template>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,13 +1,12 @@
 // Plugins
 import vue from "@vitejs/plugin-vue";
-import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
 import { VitePWA } from "vite-plugin-pwa";
-import pluginRewriteAll from "vite-plugin-rewrite-all";
-import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

 // Utilities
+import { URL, fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
-import { fileURLToPath, URL } from "node:url";

 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -20,7 +19,6 @@ export default defineConfig(({ mode }) => {
      target: "esnext",
    },
    plugins: [
-      pluginRewriteAll(),
      vue({
        template: { transformAssetUrls },
      }),
@@ -50,13 +48,16 @@ export default defineConfig(({ mode }) => {
      viteStaticCopy({
        targets: [
          {
-            src: 'node_modules/emulatorjs/data/*',
-            dest: 'assets/emulatorjs/'
-          }
-        ]
-      })
+            src: "node_modules/emulatorjs/data/*",
+            dest: "assets/emulatorjs/",
+          },
+        ],
+      }),
    ],
-    define: { "process.env": {} },
+    define: {
+      "process.env": {},
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),