Merge pull request #847 from rommapp/refactor/upgrade_vue_vuetify

Upgraded front packages and adapted code
rommapp · May 14, 2024 · 201ea71 · 201ea71
2 parents 1465f74 + 718fd2d
commit 201ea71
Show file tree

Hide file tree

Showing 8 changed files with 1,912 additions and 1,716 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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": {

diff --git 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>
diff --git 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>

diff --git 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,61 +96,61 @@ 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"
         />
       </v-avatar>
     </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>
     <template v-slot:item.actions="{ item }">
       <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"
       >
         <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>

diff --git 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>
diff --git 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>

diff --git 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)),