Upgrade to Vue3 and Element Plus (#1374)

* Update Vue devtools

* upgrade vue pinia element-plus vue-i18n, add vite

* fix: i18n

* global components

* change v-deep

* upgrade vue-lazyload

* data table

* update enlint and safe-dialog

* package.json and vite.config.js

* el-icon

* el-message

* vue 2 -> vue3 migration changes

* $pinia

* dialog

* el-popover slot

* lint

* chore

* slot

* scss

* remote state access

* misc

* jsconfig

* el-button size mini -> small

* :model-value

* ElMessageBox

* datatable

* remove v-lazyload

* template #dropdown

* mini -> small

* css

* byebye hideTooltips

* use sass-embedded

* Update SQLite, remove unneeded libraries

* Fix shift remove local avatar favorites

* Electron arm64

* arm64 support

* bye pug

* f-word vite hah

* misc

* remove safe dialog component

* Add self invite to launch dialog

* Fix errors

* Icons 1

* improve localfavorite loading performance

* improve favorites world item performance

* dialog visibility changes for Element Plus

* clear element plus error

* import performance

* revert App.vue hah

* hah

* Revert "Add self invite to launch dialog"

This reverts commit 4801cfad58.

* Toggle self invite/open in-game

* Self invite on launch dialog

* el-button icon

* el-icon

* fix user dialog tab switching logic

* fix PlayerList

* Formatting changes

* More icons

* Fix friend log table

* loading margin

* fix markdown

* fix world dialog tab switching issue

* Fixes and formatting

* fix: global i18n.t export

* fix favorites world tab not working

* Create instance, displayName

* Remove group members sort by userId

* Fix loading dialog tabs on swtich

* Star

* charts console.warn

* wip: fix charts

* wip: fix charts

* wip: charts composables

* fix favorite item tooltip warning

* Fixes and formatting

* Clean up image dialogs

* Remove unused method

* Fix platform/size border

* Fix platform/size border

* $vr

* fix friendExportDialogVisible binding

* ElMessageBox and Settings

* Login formatting

* Rename VR overlay query

* Fix image popover and userdialog badges

* Formatting

* Big buttons

* Fixes, update Cef

* Fix gameLog table nav buttons jumping around while using nav buttons

* Fix z-index

* vr overlay

* vite input add theme

* defineAsyncComponent

* ISO 639-1

* fix i18n

* clean t

* Formatting, fix calendar, rotate arrows

* Show user status when user is offline

* Fix VR overlay

* fix theme and clean up

* split InstanceActivity

* tweak

* Fix VR overlay formatting

* fix scss var

* AppDebug hahahaha

* Years

* remove reactive

* improve perf

* state hah…

* fix user rendering poblems when user object is not yet loaded

* improve perf

* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)

* improve perf 1

* Suppress stray errors

* fix traveling location display issue

* Fix empty instance creator

* improve friend list refresh performance

* fix main charts

* fix chart

* Fix darkmode

* Fix avatar dialog tags

---------

Co-authored-by: pa <maplenagisa@gmail.com>

src/views/Tools/dialogs/GroupCalendarDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible="visible"
+        :model-value="visible"
         :title="t('dialog.group_calendar.header')"
         :show-close="false"
         width="90vw"
@@ -10,9 +10,9 @@
         <template #title>
             <div class="dialog-title-container">
                 <span>{{ t('dialog.group_calendar.header') }}</span>
-                <!-- <el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn">
+                <el-button @click="toggleViewMode" type="primary" size="small" class="view-toggle-btn">
                     {{ viewMode === 'timeline' ? 'List View' : 'Calendar View' }}
-                </el-button> -->
+                </el-button>
             </div>
         </template>
         <div class="top-content">
@@ -41,23 +41,23 @@
 
                     <div class="calendar-container">
                         <el-calendar v-model="selectedDay" v-loading="isLoading">
-                            <template #dateCell="{ date }">
+                            <template #date-cell="{ data }">
                                 <div class="date">
                                     <div
                                         class="calendar-date-content"
                                         :class="{
-                                            'has-events': filteredCalendar[formatDateKey(date)]?.length
+                                            'has-events': filteredCalendar[formatDateKey(data.date)]?.length
                                         }">
-                                        {{ dayjs(date).utc().format('D') }}
+                                        {{ dayjs(data.date).format('D') }}
                                         <div
-                                            v-if="filteredCalendar[formatDateKey(date)]?.length"
+                                            v-if="filteredCalendar[formatDateKey(data.date)]?.length"
                                             class="calendar-event-badge"
                                             :class="
-                                                followingCalendarDate[formatDateKey(date)]
+                                                followingCalendarDate[formatDateKey(data.date)]
                                                     ? 'has-following'
                                                     : 'no-following'
                                             ">
-                                            {{ filteredCalendar[formatDateKey(date)]?.length }}
+                                            {{ filteredCalendar[formatDateKey(data.date)]?.length }}
                                         </div>
                                     </div>
                                 </div>
@@ -72,7 +72,7 @@
                             placeholder="Search groups or events..."
                             clearable
                             size="small"
-                            prefix-icon="el-icon-search"
+                            prefix-:icon="Search"
                             class="search-input" />
                     </div>
 
@@ -80,9 +80,11 @@
                         <div v-if="filteredGroupEvents.length" class="groups-container">
                             <div v-for="group in filteredGroupEvents" :key="group.groupId" class="group-row">
                                 <div class="group-header" @click="toggleGroup(group.groupId)">
-                                    <i
-                                        class="el-icon-arrow-right"
-                                        :class="{ rotate: !groupCollapsed[group.groupId] }"></i>
+                                    <el-icon
+                                        class="el-icon-arrow-right rotation-transition"
+                                        :class="{ rotate: !groupCollapsed[group.groupId] }"
+                                        ><ArrowRight
+                                    /></el-icon>
                                     {{ group.groupName }}
                                 </div>
                                 <div class="events-row" v-show="!groupCollapsed[group.groupId]">
@@ -103,20 +105,20 @@
                 </div>
             </transition>
         </div>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { ArrowRight } from '@element-plus/icons-vue';
     import { ref, watch, computed } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
-    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
     import dayjs from 'dayjs';
     import { groupRequest } from '../../../api';
     import { useGroupStore } from '../../../stores';
     import GroupCalendarEventCard from '../components/GroupCalendarEventCard.vue';
     import { replaceBioSymbols } from '../../../shared/utils';
 
-    const { cachedGroups } = storeToRefs(useGroupStore());
+    const { cachedGroups } = useGroupStore();
 
     const { t } = useI18n();
 
@@ -133,7 +135,7 @@
     const followingCalendar = ref([]);
     const selectedDay = ref(new Date());
     const isLoading = ref(false);
-    const viewMode = ref('grid');
+    const viewMode = ref('timeline');
     const searchQuery = ref('');
     const groupCollapsed = ref({});
 
@@ -306,7 +308,7 @@
 
     function getGroupName(event) {
         if (!event) return '';
-        return cachedGroups.value.get(event.ownerId)?.name || '';
+        return cachedGroups.get(event.ownerId)?.name || '';
     }
 
     async function getCalendarData() {
@@ -357,7 +359,7 @@
 
 <style lang="scss" scoped>
     .x-dialog {
-        ::v-deep .el-dialog {
+        :deep(.el-dialog) {
             max-height: 750px;
             .el-dialog__body {
                 height: 680px;
@@ -369,7 +371,7 @@
             overflow: hidden;
             .timeline-view {
                 .timeline-container {
-                    ::v-deep .el-timeline {
+                    :deep(.el-timeline) {
                         width: 100%;
                         height: 100%;
                         min-width: 200px;
@@ -469,6 +471,7 @@
         }
         .calendar-container {
             width: 609px;
+            height: 100%;
             flex-shrink: 0;
         }
     }
@@ -540,4 +543,8 @@
     .rotate {
         transform: rotate(90deg);
     }
+
+    .rotation-transition {
+        transition: transform 0.2s ease-in-out;
+    }
 </style>

src/views/Tools/dialogs/NoteExportDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible="isNoteExportDialogVisible"
+        :model-value="isNoteExportDialogVisible"
         :title="t('dialog.note_export.header')"
         width="1000px"
         @close="closeDialog">
@@ -26,7 +26,7 @@
             {{ t('dialog.note_export.cancel') }}
         </el-button>
         <span v-if="loading" style="margin: 10px">
-            <i class="el-icon-loading" style="margin-right: 5px"></i>
+            <el-icon style="margin-right: 5px"><Loading /></el-icon>
             {{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}
         </span>
 
@@ -40,57 +40,61 @@
             <pre style="white-space: pre-wrap; font-size: 12px" v-text="errors"></pre>
         </template>
 
-        <data-tables v-loading="loading" v-bind="noteExportTable" style="margin-top: 10px">
+        <DataTable v-loading="loading" v-bind="noteExportTable" style="margin-top: 10px">
             <el-table-column :label="t('table.import.image')" width="70" prop="currentAvatarThumbnailImageUrl">
-                <template slot-scope="scope">
-                    <el-popover placement="right" height="500px" trigger="hover">
-                        <img slot="reference" v-lazy="userImage(scope.row.ref)" class="friends-list-avatar" />
+                <template #default="{ row }">
+                    <el-popover placement="right" :width="500" trigger="hover">
+                        <template #reference>
+                            <img :src="userImage(row.ref)" class="friends-list-avatar" loading="lazy" />
+                        </template>
                         <img
-                            v-lazy="userImageFull(scope.row.ref)"
-                            class="friends-list-avatar"
-                            style="height: 500px; cursor: pointer"
-                            @click="showFullscreenImageDialog(userImageFull(scope.row.ref))" />
+                            :src="userImageFull(row.ref)"
+                            :class="['friends-list-avatar', 'x-popover-image']"
+                            style="cursor: pointer"
+                            loading="lazy"
+                            @click="showFullscreenImageDialog(userImageFull(row.ref))" />
                     </el-popover>
                 </template>
             </el-table-column>
 
             <el-table-column :label="t('table.import.name')" width="170" prop="name">
-                <template slot-scope="scope">
-                    <span class="x-link" @click="showUserDialog(scope.row.id)" v-text="scope.row.name"></span>
+                <template #default="{ row }">
+                    <span class="x-link" @click="showUserDialog(row.id)" v-text="row.name"></span>
                 </template>
             </el-table-column>
 
             <el-table-column :label="t('table.import.note')" prop="memo">
-                <template slot-scope="scope">
+                <template #default="{ row }">
                     <el-input
-                        v-model="scope.row.memo"
+                        v-model="row.memo"
                         type="textarea"
                         maxlength="256"
                         show-word-limit
                         :rows="2"
                         :autosize="{ minRows: 1, maxRows: 10 }"
-                        size="mini"
+                        size="small"
                         resize="none"></el-input>
                 </template>
             </el-table-column>
 
             <el-table-column :label="t('table.import.skip_export')" width="90" align="right">
-                <template slot-scope="scope">
+                <template #default="{ row }">
                     <el-button
                         type="text"
-                        icon="el-icon-close"
-                        size="mini"
-                        @click="removeFromNoteExportTable(scope.row)"></el-button>
+                        :icon="Close"
+                        size="small"
+                        @click="removeFromNoteExportTable(row)"></el-button>
                 </template>
             </el-table-column>
-        </data-tables>
-    </safe-dialog>
+        </DataTable>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { Close, Loading } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { ref, watch } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import * as workerTimers from 'worker-timers';
     import { miscRequest } from '../../../api';
     import { removeFromArray, userImage, userImageFull } from '../../../shared/utils';
@@ -112,7 +116,7 @@
         data: [],
         tableProps: {
             stripe: true,
-            size: 'mini'
+            size: 'small'
         },
         layout: 'table'
     });

src/views/Tools/dialogs/ScreenshotMetadataDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible="isScreenshotMetadataDialogVisible"
+        :model-value="isScreenshotMetadataDialogVisible"
         :title="t('dialog.screenshot_metadata.header')"
         width="1050px"
         @close="closeDialog">
@@ -16,35 +16,35 @@
             }}</span>
             <br />
             <br />
-            <el-button size="small" icon="el-icon-folder-opened" @click="getAndDisplayScreenshotFromFile">{{
+            <el-button size="small" :icon="FolderOpened" @click="getAndDisplayScreenshotFromFile">{{
                 t('dialog.screenshot_metadata.browse')
             }}</el-button>
-            <el-button size="small" icon="el-icon-picture-outline" @click="getAndDisplayLastScreenshot">{{
+            <el-button size="small" :icon="Picture" @click="getAndDisplayLastScreenshot">{{
                 t('dialog.screenshot_metadata.last_screenshot')
             }}</el-button>
             <el-button
                 size="small"
-                icon="el-icon-copy-document"
+                :icon="CopyDocument"
                 @click="copyImageToClipboard(screenshotMetadataDialog.metadata.filePath)"
                 >{{ t('dialog.screenshot_metadata.copy_image') }}</el-button
             >
             <el-button
                 size="small"
-                icon="el-icon-folder"
+                :icon="Folder"
                 @click="openImageFolder(screenshotMetadataDialog.metadata.filePath)"
                 >{{ t('dialog.screenshot_metadata.open_folder') }}</el-button
             >
             <el-button
                 v-if="currentUser.$isVRCPlus && screenshotMetadataDialog.metadata.filePath"
                 size="small"
-                icon="el-icon-upload2"
+                :icon="Upload"
                 @click="uploadScreenshotToGallery"
                 >{{ t('dialog.screenshot_metadata.upload') }}</el-button
             >
             <el-button
                 v-if="screenshotMetadataDialog.metadata.filePath"
                 size="small"
-                icon="el-icon-delete"
+                :icon="Delete"
                 @click="deleteMetadata(screenshotMetadataDialog.metadata.filePath)"
                 >{{ t('dialog.screenshot_metadata.delete_metadata') }}</el-button
             >
@@ -93,7 +93,7 @@
                 v-if="screenshotMetadataDialog.metadata.fileResolution"
                 style="margin-right: 5px"
                 v-text="screenshotMetadataDialog.metadata.fileResolution"></span>
-            <el-tag v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="mini">{{
+            <el-tag v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="small">{{
                 screenshotMetadataDialog.metadata.fileSize
             }}</el-tag>
             <br />
@@ -117,35 +117,23 @@
                 style="margin-top: 10px"
                 @change="screenshotMetadataCarouselChange">
                 <el-carousel-item>
-                    <span placement="top" width="700px" trigger="click">
-                        <img
-                            slot="reference"
-                            class="x-link"
-                            :src="screenshotMetadataDialog.metadata.previousFilePath"
-                            style="width: 100%; height: 100%; object-fit: contain" />
-                    </span>
+                    <img
+                        class="x-link"
+                        :src="screenshotMetadataDialog.metadata.previousFilePath"
+                        style="width: 100%; height: 100%; object-fit: contain" />
                 </el-carousel-item>
                 <el-carousel-item>
-                    <span
-                        placement="top"
-                        width="700px"
-                        trigger="click"
-                        @click="showFullscreenImageDialog(screenshotMetadataDialog.metadata.filePath)">
-                        <img
-                            slot="reference"
-                            class="x-link"
-                            :src="screenshotMetadataDialog.metadata.filePath"
-                            style="width: 100%; height: 100%; object-fit: contain" />
-                    </span>
+                    <img
+                        class="x-link"
+                        :src="screenshotMetadataDialog.metadata.filePath"
+                        style="width: 100%; height: 100%; object-fit: contain"
+                        @click="showFullscreenImageDialog(screenshotMetadataDialog.metadata.filePath)" />
                 </el-carousel-item>
                 <el-carousel-item>
-                    <span placement="top" width="700px" trigger="click">
-                        <img
-                            slot="reference"
-                            class="x-link"
-                            :src="screenshotMetadataDialog.metadata.nextFilePath"
-                            style="width: 100%; height: 100%; object-fit: contain" />
-                    </span>
+                    <img
+                        class="x-link"
+                        :src="screenshotMetadataDialog.metadata.nextFilePath"
+                        style="width: 100%; height: 100%; object-fit: contain" />
                 </el-carousel-item>
             </el-carousel>
             <br />
@@ -164,13 +152,15 @@
                 <br />
             </span>
         </div>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { ElMessage } from 'element-plus';
+    import { FolderOpened, Picture, CopyDocument, Folder, Upload, Delete } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
-    import { getCurrentInstance, reactive, ref, watch } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { reactive, ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { vrcPlusImageRequest } from '../../../api';
     import { useGalleryStore, useUserStore, useVrcxStore } from '../../../stores';
     import { formatDateFilter } from '../../../shared/utils';
@@ -181,9 +171,6 @@
 
     const { t } = useI18n();
 
-    const instance = getCurrentInstance();
-    const $message = instance.proxy.$message;
-
     const userStore = useUserStore();
     const { lookupUser } = userStore;
 
@@ -286,7 +273,7 @@
             return;
         }
         AppApi.CopyImageToClipboard(path).then(() => {
-            $message({
+            ElMessage({
                 message: 'Image copied to clipboard',
                 type: 'success'
             });
@@ -297,7 +284,7 @@
             return;
         }
         AppApi.OpenFolderAndSelectItem(path).then(() => {
-            $message({
+            ElMessage({
                 message: 'Opened image folder',
                 type: 'success'
             });
@@ -309,13 +296,13 @@
         }
         AppApi.DeleteScreenshotMetadata(path).then((result) => {
             if (!result) {
-                $message({
+                ElMessage({
                     message: t('message.screenshot_metadata.delete_failed'),
                     type: 'error'
                 });
                 return;
             }
-            $message({
+            ElMessage({
                 message: t('message.screenshot_metadata.deleted'),
                 type: 'success'
             });
@@ -326,7 +313,7 @@
     function uploadScreenshotToGallery() {
         const D = screenshotMetadataDialog;
         if (D.metadata.fileSizeBytes > 10000000) {
-            $message({
+            ElMessage({
                 message: t('message.file.too_large'),
                 type: 'error'
             });
@@ -339,7 +326,7 @@
                     .uploadGalleryImage(base64Body)
                     .then((args) => {
                         handleGalleryImageAdd(args);
-                        $message({
+                        ElMessage({
                             message: t('message.gallery.uploaded'),
                             type: 'success'
                         });
@@ -350,7 +337,7 @@
                     });
             })
             .catch((err) => {
-                $message({
+                ElMessage({
                     message: t('message.gallery.failed'),
                     type: 'error'
                 });