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/components/dialogs/PreviousInstancesDialog/PreviousInstancesGroupDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
-        ref="previousInstancesGroupDialogRef"
-        :visible.sync="isVisible"
+    <el-dialog
+        :z-index="previousInstancesGroupDialogIndex"
+        v-model="isVisible"
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
@@ -13,7 +13,7 @@
                 style="width: 150px" />
         </div>
 
-        <data-tables v-loading="loading" v-bind="previousInstancesGroupDialogTable" style="margin-top: 10px">
+        <DataTable v-loading="loading" v-bind="previousInstancesGroupDialogTable" style="margin-top: 10px">
             <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
                 <template #default="scope">
                     <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
@@ -39,48 +39,50 @@
                 <template #default="scope">
                     <el-button
                         type="text"
-                        icon="el-icon-s-data"
-                        size="mini"
+                        :icon="DataLine"
+                        size="small"
                         @click="showPreviousInstancesInfoDialog(scope.row.location)" />
                     <el-button
                         v-if="shiftHeld"
                         style="color: #f56c6c"
                         type="text"
-                        icon="el-icon-close"
-                        size="mini"
+                        :icon="Close"
+                        size="small"
                         @click="deleteGameLogGroupInstance(scope.row)" />
                     <el-button
                         v-else
                         type="text"
-                        icon="el-icon-close"
-                        size="mini"
+                        :icon="Close"
+                        size="small"
                         @click="deleteGameLogGroupInstancePrompt(scope.row)" />
                 </template>
             </el-table-column>
-        </data-tables>
-    </safe-dialog>
+        </DataTable>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { DataLine, Close } from '@element-plus/icons-vue';
+
+    import { ElMessageBox } from 'element-plus';
     import { ref, reactive, computed, watch, nextTick, getCurrentInstance } from 'vue';
     import {
         parseLocation,
         compareByCreatedAt,
         timeToText,
         removeFromArray,
-        adjustDialogZ,
+        getNextDialogIndex,
         formatDateFilter
     } from '../../../shared/utils';
     import { database } from '../../../service/database';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import { useInstanceStore, useUiStore } from '../../../stores';
 
-    const { proxy } = getCurrentInstance();
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = useUiStore();
     const { t } = useI18n();
 
-    const previousInstancesGroupDialogRef = ref(null);
+    const previousInstancesGroupDialogIndex = ref(2000);
     const loading = ref(false);
 
     const previousInstancesGroupDialogTable = reactive({
@@ -88,7 +90,7 @@
         filters: [{ prop: 'groupName', value: '' }],
         tableProps: {
             stripe: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: { prop: 'created_at', order: 'descending' }
         },
         pageSize: 10,
@@ -115,7 +117,7 @@
         () => {
             if (props.previousInstancesGroupDialog.visible) {
                 nextTick(() => {
-                    adjustDialogZ(previousInstancesGroupDialogRef.value.$el);
+                    previousInstancesGroupDialogIndex.value = getNextDialogIndex();
                 });
                 refreshPreviousInstancesGroupTable();
             }
@@ -144,15 +146,16 @@
     }
 
     function deleteGameLogGroupInstancePrompt(row) {
-        proxy.$confirm('Continue? Delete GameLog Instance', 'Confirm', {
+        ElMessageBox.confirm('Continue? Delete GameLog Instance', 'Confirm', {
             confirmButtonText: 'Confirm',
             cancelButtonText: 'Cancel',
-            type: 'info',
-            callback: (action) => {
+            type: 'info'
+        })
+            .then((action) => {
                 if (action === 'confirm') {
                     deleteGameLogGroupInstance(row);
                 }
-            }
-        });
+            })
+            .catch(() => {});
     }
 </script>

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue

@@ -1,8 +1,8 @@
 <template>
-    <safe-dialog
-        ref="dialogRef"
-        :visible="previousInstancesInfoDialogVisible"
-        :title="$t('dialog.previous_instances.info')"
+    <el-dialog
+        :z-index="previousInstancesInfoDialogIndex"
+        :model-value="previousInstancesInfoDialogVisible"
+        :title="t('dialog.previous_instances.info')"
         width="800px"
         :fullscreen="fullscreen"
         destroy-on-close
@@ -11,12 +11,12 @@
             <Location :location="location.tag" style="font-size: 14px" />
             <el-input
                 v-model="dataTable.filters[0].value"
-                :placeholder="$t('dialog.previous_instances.search_placeholder')"
+                :placeholder="t('dialog.previous_instances.search_placeholder')"
                 style="width: 150px"
                 clearable></el-input>
         </div>
-        <data-tables v-loading="loading" v-bind="dataTable" style="margin-top: 10px">
-            <el-table-column :label="$t('table.previous_instances.date')" prop="created_at" sortable width="110">
+        <DataTable v-loading="loading" v-bind="dataTable" style="margin-top: 10px">
+            <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="110">
                 <template #default="scope">
                     <el-tooltip placement="left">
                         <template #content>
@@ -26,7 +26,7 @@
                     </el-tooltip>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
+            <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
                 <template #default="scope">
                     <template v-if="gameLogIsFriend(scope.row)">
                         <el-tooltip v-if="gameLogIsFavorite(scope.row)" placement="top" content="Favorite">
@@ -36,33 +36,35 @@
                             <span>💚</span>
                         </el-tooltip>
                     </template>
+                    <span v-else></span>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.display_name')" prop="displayName" sortable>
+            <el-table-column :label="t('table.previous_instances.display_name')" prop="displayName" sortable>
                 <template #default="scope">
                     <span class="x-link" @click="lookupUser(scope.row)">{{ scope.row.displayName }}</span>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.time')" prop="time" width="100" sortable>
+            <el-table-column :label="t('table.previous_instances.time')" prop="time" width="100" sortable>
                 <template #default="scope">
                     <span>{{ scope.row.timer }}</span>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.count')" prop="count" width="100" sortable>
+            <el-table-column :label="t('table.previous_instances.count')" prop="count" width="100" sortable>
                 <template #default="scope">
                     <span>{{ scope.row.count }}</span>
                 </template>
             </el-table-column>
-        </data-tables>
-    </safe-dialog>
+        </DataTable>
+    </el-dialog>
 </template>
 
 <script setup>
     import { ref, watch, nextTick } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
     import { database } from '../../../service/database';
     import {
-        adjustDialogZ,
+        getNextDialogIndex,
         compareByCreatedAt,
         parseLocation,
         timeToText,
@@ -74,8 +76,9 @@
     const { previousInstancesInfoDialogVisible, previousInstancesInfoDialogInstanceId } =
         storeToRefs(useInstanceStore());
     const { gameLogIsFriend, gameLogIsFavorite } = useGameLogStore();
+    const { t } = useI18n();
 
-    const dialogRef = ref(null);
+    const previousInstancesInfoDialogIndex = ref(2000);
 
     const loading = ref(false);
     const location = ref({
@@ -111,7 +114,7 @@
         ],
         tableProps: {
             stripe: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: {
                 prop: 'created_at',
                 order: 'descending'
@@ -139,7 +142,7 @@
     );
 
     function init() {
-        adjustDialogZ(dialogRef.value.$el);
+        previousInstancesInfoDialogIndex.value = getNextDialogIndex();
         loading.value = true;
         location.value = parseLocation(previousInstancesInfoDialogInstanceId.value);
     }

src/components/dialogs/PreviousInstancesDialog/PreviousInstancesWorldDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
-        ref="previousInstancesWorldDialogRef"
-        :visible.sync="isVisible"
+    <el-dialog
+        :z-index="previousInstancesWorldDialogIndex"
+        v-model="isVisible"
         :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
@@ -12,7 +12,7 @@
                 :placeholder="t('dialog.previous_instances.search_placeholder')"
                 style="display: block; width: 150px"></el-input>
         </div>
-        <data-tables v-loading="loading" v-bind="previousInstancesWorldDialogTable" style="margin-top: 10px">
+        <DataTable v-loading="loading" v-bind="previousInstancesWorldDialogTable" style="margin-top: 10px">
             <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="170">
                 <template #default="scope">
                     <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
@@ -43,35 +43,41 @@
                 <template #default="scope">
                     <el-button
                         type="text"
-                        icon="el-icon-s-data"
-                        size="mini"
+                        :icon="DataLine"
+                        size="small"
+                        class="button-pd-0"
                         @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
                     <el-button
                         v-if="shiftHeld"
                         style="color: #f56c6c"
                         type="text"
-                        icon="el-icon-close"
-                        size="mini"
+                        :icon="Close"
+                        size="small"
+                        class="button-pd-0"
                         @click="deleteGameLogWorldInstance(scope.row)"></el-button>
                     <el-button
                         v-else
                         type="text"
-                        icon="el-icon-close"
-                        size="mini"
+                        :icon="Close"
+                        size="small"
+                        class="button-pd-0"
                         @click="deleteGameLogWorldInstancePrompt(scope.row)"></el-button>
                 </template>
             </el-table-column>
-        </data-tables>
-    </safe-dialog>
+        </DataTable>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { DataLine, Close } from '@element-plus/icons-vue';
+
+    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
-    import { computed, getCurrentInstance, nextTick, reactive, ref, watch } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { database } from '../../../service/database';
     import {
-        adjustDialogZ,
+        getNextDialogIndex,
         compareByCreatedAt,
         parseLocation,
         removeFromArray,
@@ -80,7 +86,6 @@
     } from '../../../shared/utils';
     import { useInstanceStore, useUiStore, useUserStore } from '../../../stores';
 
-    const { proxy } = getCurrentInstance();
     const { t } = useI18n();
 
     const props = defineProps({
@@ -100,7 +105,7 @@
         filters: [{ prop: 'groupName', value: '' }],
         tableProps: {
             stripe: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: { prop: 'created_at', order: 'descending' }
         },
         pageSize: 10,
@@ -111,7 +116,7 @@
         }
     });
     const loading = ref(false);
-    const previousInstancesWorldDialogRef = ref(null);
+    const previousInstancesWorldDialogIndex = ref(2000);
 
     const isVisible = computed({
         get: () => props.previousInstancesWorldDialog.visible,
@@ -145,16 +150,17 @@
     }
 
     function deleteGameLogWorldInstancePrompt(row) {
-        proxy.$confirm('Continue? Delete GameLog Instance', 'Confirm', {
+        ElMessageBox.confirm('Continue? Delete GameLog Instance', 'Confirm', {
             confirmButtonText: 'Confirm',
             cancelButtonText: 'Cancel',
-            type: 'info',
-            callback: (action) => {
+            type: 'info'
+        })
+            .then((action) => {
                 if (action === 'confirm') {
                     deleteGameLogWorldInstance(row);
                 }
-            }
-        });
+            })
+            .catch(() => {});
     }
 
     watch(
@@ -162,10 +168,16 @@
         () => {
             if (props.previousInstancesWorldDialog.visible) {
                 nextTick(() => {
-                    adjustDialogZ(previousInstancesWorldDialogRef.value.$el);
+                    previousInstancesWorldDialogIndex.value = getNextDialogIndex();
                 });
                 refreshPreviousInstancesWorldTable();
             }
         }
     );
 </script>
+
+<style scoped>
+    .button-pd-0 {
+        padding: 0;
+    }
+</style>