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/ModerateGroupDialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <safe-dialog
-        ref="moderateGroupDialogRef"
-        :visible.sync="moderateGroupDialog.visible"
-        :title="$t('dialog.moderate_group.header')"
+    <el-dialog
+        :z-index="moderateGroupDialogIndex"
+        v-model="moderateGroupDialog.visible"
+        :title="t('dialog.moderate_group.header')"
         width="450px"
         append-to-body>
         <div v-if="moderateGroupDialog.visible">
             <div class="x-friend-item" style="cursor: default">
                 <div class="avatar">
-                    <img v-lazy="userImage(moderateGroupDialog.userObject)" />
+                    <img :src="userImage(moderateGroupDialog.userObject)" loading="lazy" />
                 </div>
                 <div class="detail">
                     <span
@@ -22,12 +22,12 @@
             <el-select
                 v-model="moderateGroupDialog.groupId"
                 clearable
-                :placeholder="$t('dialog.moderate_group.choose_group_placeholder')"
+                :placeholder="t('dialog.moderate_group.choose_group_placeholder')"
                 filterable
                 style="margin-top: 15px; width: 100%">
                 <el-option-group
                     v-if="currentUserGroups.size"
-                    :label="$t('dialog.moderate_group.groups_with_moderation_permission')">
+                    :label="t('dialog.moderate_group.groups_with_moderation_permission')">
                     <el-option
                         v-for="group in groupsWithModerationPermission"
                         :key="group.id"
@@ -36,7 +36,7 @@
                         style="height: auto"
                         class="x-friend-item">
                         <div class="avatar">
-                            <img v-lazy="group.iconUrl" />
+                            <img :src="group.iconUrl" loading="lazy" />
                         </div>
                         <div class="detail">
                             <span class="name" v-text="group.name"></span>
@@ -54,29 +54,23 @@
                     showGroupMemberModerationDialog(moderateGroupDialog.groupId, moderateGroupDialog.userId);
                     moderateGroupDialog.visible = false;
                 ">
-                {{ $t('dialog.moderate_group.moderation_tools') }}
+                {{ t('dialog.moderate_group.moderation_tools') }}
             </el-button>
         </template>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
-    import { ref, watch, getCurrentInstance, nextTick, computed } from 'vue';
+    import { ref, watch, nextTick, computed } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
     import { groupRequest, userRequest } from '../../api';
-    import {
-        adjustDialogZ,
-        hasGroupPermission,
-        hasGroupModerationPermission,
-        userImage,
-        userStatusClass
-    } from '../../shared/utils';
+    import { getNextDialogIndex, hasGroupModerationPermission, userImage } from '../../shared/utils';
     import { useGroupStore } from '../../stores';
 
     const { currentUserGroups, moderateGroupDialog } = storeToRefs(useGroupStore());
-    const { applyGroup, showGroupMemberModerationDialog } = useGroupStore();
-
-    const { proxy } = getCurrentInstance();
+    const { showGroupMemberModerationDialog } = useGroupStore();
+    const { t } = useI18n();
 
     const groupsWithModerationPermission = computed(() => {
         return Array.from(currentUserGroups.value.values()).filter((group) => hasGroupModerationPermission(group));
@@ -93,10 +87,12 @@
         }
     );
 
-    const moderateGroupDialogRef = ref(null);
+    const moderateGroupDialogIndex = ref(2000);
 
     function initDialog() {
-        nextTick(() => adjustDialogZ(moderateGroupDialogRef.value.$el));
+        nextTick(() => {
+            moderateGroupDialogIndex.value = getNextDialogIndex();
+        });
         const D = moderateGroupDialog.value;
         if (D.groupId) {
             groupRequest