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/UserDialog/BioDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible.sync="bioDialog.visible"
+        v-model="bioDialog.visible"
         :title="t('dialog.bio.header')"
         width="600px"
         append-to-body>
@@ -9,7 +9,7 @@
             <el-input
                 v-model="bioDialog.bio"
                 type="textarea"
-                size="mini"
+                size="small"
                 maxlength="512"
                 show-word-limit
                 :autosize="{ minRows: 5, maxRows: 20 }"
@@ -23,16 +23,13 @@
                 v-model="bioDialog.bioLinks[index]"
                 size="small"
                 style="margin-top: 5px">
-                <img
-                    slot="prepend"
-                    :src="getFaviconUrl(link)"
-                    style="width: 16px; height: 16px; vertical-align: middle" />
-                <el-button slot="append" icon="el-icon-delete" @click="bioDialog.bioLinks.splice(index, 1)" />
+                <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
+                <el-button :icon="Delete" @click="bioDialog.bioLinks.splice(index, 1)" />
             </el-input>
 
             <el-button
                 :disabled="bioDialog.bioLinks.length >= 3"
-                size="mini"
+                size="small"
                 style="margin-top: 5px"
                 @click="bioDialog.bioLinks.push('')">
                 {{ t('dialog.bio.add_link') }}
@@ -44,18 +41,19 @@
                 {{ t('dialog.bio.update') }}
             </el-button>
         </template>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
-    import { getCurrentInstance } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { ElMessage } from 'element-plus';
+
+    import { Delete } from '@element-plus/icons-vue';
+
+    import { useI18n } from 'vue-i18n';
     import { userRequest } from '../../../api';
     import { getFaviconUrl } from '../../../shared/utils';
 
     const { t } = useI18n();
-    const { $message } = getCurrentInstance().proxy;
-
     const props = defineProps({
         bioDialog: {
             type: Object,
@@ -79,7 +77,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                $message({
+                ElMessage({
                     message: 'Bio updated',
                     type: 'success'
                 });

src/components/dialogs/UserDialog/LanguageDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible.sync="languageDialog.visible"
+        v-model="languageDialog.visible"
         :title="t('dialog.language.header')"
         width="400px"
         append-to-body>
@@ -22,7 +22,6 @@
                 </el-tag>
             </div>
             <el-select
-                value=""
                 :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
                 :placeholder="t('dialog.language.select_language')"
                 style="margin-top: 14px"
@@ -40,12 +39,12 @@
                 </el-option>
             </el-select>
         </div>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
     import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import { userRequest } from '../../../api';
     import { languageClass } from '../../../shared/utils';
     import { useUserStore } from '../../../stores';

src/components/dialogs/UserDialog/PreviousInstancesUserDialog.vue

@@ -1,24 +1,24 @@
 <template>
-    <safe-dialog
-        ref="previousInstancesUserDialogRef"
-        :visible.sync="isVisible"
-        :title="$t('dialog.previous_instances.header')"
+    <el-dialog
+        :z-index="previousInstancesUserDialogIndex"
+        v-model="isVisible"
+        :title="t('dialog.previous_instances.header')"
         width="1000px"
         append-to-body>
         <div style="display: flex; align-items: center; justify-content: space-between">
             <span style="font-size: 14px" v-text="previousInstancesUserDialog.userRef.displayName"></span>
             <el-input
                 v-model="previousInstancesUserDialogTable.filters[0].value"
-                :placeholder="$t('dialog.previous_instances.search_placeholder')"
+                :placeholder="t('dialog.previous_instances.search_placeholder')"
                 style="display: block; width: 150px"></el-input>
         </div>
-        <data-tables v-loading="loading" v-bind="previousInstancesUserDialogTable" style="margin-top: 10px">
-            <el-table-column :label="$t('table.previous_instances.date')" prop="created_at" sortable width="170">
+        <DataTable v-loading="loading" v-bind="previousInstancesUserDialogTable" 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>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.world')" prop="name" sortable>
+            <el-table-column :label="t('table.previous_instances.world')" prop="name" sortable>
                 <template #default="scope">
                     <Location
                         :location="scope.row.location"
@@ -26,53 +26,61 @@
                         :grouphint="scope.row.groupName" />
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.instance_creator')" prop="location" width="170">
+            <el-table-column :label="t('table.previous_instances.instance_creator')" prop="location" width="170">
                 <template #default="scope">
                     <DisplayName :userid="scope.row.$location.userId" :location="scope.row.$location.tag" />
                 </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 v-text="scope.row.timer"></span>
                 </template>
             </el-table-column>
-            <el-table-column :label="$t('table.previous_instances.action')" width="90" align="right">
+            <el-table-column :label="t('table.previous_instances.action')" width="90" align="right">
                 <template #default="scope">
                     <el-button
                         type="text"
-                        icon="el-icon-switch-button"
-                        size="mini"
+                        :icon="SwitchButton"
+                        size="small"
+                        class="button-pd-0"
                         @click="showLaunchDialog(scope.row.location)"></el-button>
                     <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="deleteGameLogUserInstance(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="deleteGameLogUserInstancePrompt(scope.row)"></el-button>
                 </template>
             </el-table-column>
-        </data-tables>
-    </safe-dialog>
+        </DataTable>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { SwitchButton, 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 { computed, nextTick, reactive, ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { database } from '../../../service/database';
     import {
-        adjustDialogZ,
+        getNextDialogIndex,
         compareByCreatedAt,
         parseLocation,
         removeFromArray,
@@ -93,22 +101,20 @@
                 previousInstancesTable: {
                     data: [],
                     filters: [{ prop: 'displayName', value: '' }],
-                    tableProps: { stripe: true, size: 'mini', height: '400px' }
+                    tableProps: { stripe: true, size: 'small', height: '400px' }
                 }
             })
         }
     });
 
     const emit = defineEmits(['update:previous-instances-user-dialog']);
-    const { proxy } = getCurrentInstance();
-
     const loading = ref(false);
     const previousInstancesUserDialogTable = reactive({
         data: [],
         filters: [{ prop: 'worldName', value: '' }],
         tableProps: {
             stripe: true,
-            size: 'mini',
+            size: 'small',
             defaultSort: { prop: 'created_at', order: 'descending' }
         },
         pageSize: 10,
@@ -122,8 +128,9 @@
     const { showLaunchDialog } = useLaunchStore();
     const { showPreviousInstancesInfoDialog } = useInstanceStore();
     const { shiftHeld } = storeToRefs(useUiStore());
+    const { t } = useI18n();
 
-    const previousInstancesUserDialogRef = ref(null);
+    const previousInstancesUserDialogIndex = ref(2000);
 
     const isVisible = computed({
         get: () => props.previousInstancesUserDialog.visible,
@@ -154,7 +161,7 @@
         () => {
             if (props.previousInstancesUserDialog.visible) {
                 nextTick(() => {
-                    adjustDialogZ(previousInstancesUserDialogRef.value.$el);
+                    previousInstancesUserDialogIndex.value = getNextDialogIndex();
                 });
                 refreshPreviousInstancesUserTable();
             }
@@ -172,13 +179,20 @@
     }
 
     function deleteGameLogUserInstancePrompt(row) {
-        proxy.$confirm('Continue? Delete User From GameLog Instance', 'Confirm', {
+        ElMessageBox.confirm('Continue? Delete User From GameLog Instance', 'Confirm', {
             confirmButtonText: 'Confirm',
             cancelButtonText: 'Cancel',
-            type: 'info',
-            callback: (action) => {
+            type: 'info'
+        })
+            .then((action) => {
                 if (action === 'confirm') deleteGameLogUserInstance(row);
-            }
-        });
+            })
+            .catch(() => {});
     }
 </script>
+
+<style scoped>
+    .button-pd-0 {
+        padding: 0;
+    }
+</style>

src/components/dialogs/UserDialog/PronounsDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible.sync="pronounsDialog.visible"
+        v-model="pronounsDialog.visible"
         :title="t('dialog.pronouns.header')"
         width="600px"
         append-to-body>
@@ -9,7 +9,7 @@
             <el-input
                 type="textarea"
                 v-model="pronounsDialog.pronouns"
-                size="mini"
+                size="small"
                 maxlength="32"
                 show-word-limit
                 :autosize="{ minRows: 2, maxRows: 5 }"
@@ -21,18 +21,15 @@
                 {{ t('dialog.pronouns.update') }}
             </el-button>
         </template>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
-    import { getCurrentInstance } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { ElMessage } from 'element-plus';
+    import { useI18n } from 'vue-i18n';
     import { userRequest } from '../../../api';
 
     const { t } = useI18n();
-    const { proxy } = getCurrentInstance();
-    const { $message } = proxy;
-
     const props = defineProps({
         pronounsDialog: {
             type: Object,
@@ -55,7 +52,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                $message({
+                ElMessage({
                     message: 'Pronouns updated',
                     type: 'success'
                 });

src/components/dialogs/UserDialog/SendInviteRequestDialog.vue

@@ -1,7 +1,8 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible.sync="sendInviteRequestDialogVisible"
+        :model-value="sendInviteRequestDialogVisible"
+        @update:model-value="$emit('update:sendInviteRequestDialogVisible', $event)"
         :title="t('dialog.invite_request_message.header')"
         width="800px"
         append-to-body
@@ -10,20 +11,20 @@
             <input class="inviteImageUploadButton" type="file" accept="image/*" @change="inviteImageUpload" />
         </template>
 
-        <data-tables
+        <DataTable
             v-bind="inviteRequestMessageTable"
             style="margin-top: 10px; cursor: pointer"
             @row-click="showSendInviteConfirmDialog">
             <el-table-column
                 :label="t('table.profile.invite_messages.slot')"
                 prop="slot"
-                sortable="custom"
+                :sortable="true"
                 width="70"></el-table-column>
             <el-table-column :label="t('table.profile.invite_messages.message')" prop="message"></el-table-column>
             <el-table-column
                 :label="t('table.profile.invite_messages.cool_down')"
                 prop="updatedAt"
-                sortable="custom"
+                :sortable="true"
                 width="110"
                 align="right">
                 <template #default="scope">
@@ -34,38 +35,38 @@
                 <template #default="scope">
                     <el-button
                         type="text"
-                        icon="el-icon-edit"
-                        size="mini"
+                        :icon="Edit"
+                        size="small"
                         @click.stop="showEditAndSendInviteDialog(scope.row)"></el-button>
                 </template>
             </el-table-column>
-        </data-tables>
+        </DataTable>
 
         <template #footer>
-            <el-button type="small" @click="cancelSendInviteRequest">{{
-                t('dialog.invite_request_message.cancel')
-            }}</el-button>
-            <el-button type="small" @click="refreshInviteMessageTableData('request')">{{
+            <el-button @click="cancelSendInviteRequest">{{ t('dialog.invite_request_message.cancel') }}</el-button>
+            <el-button @click="refreshInviteMessageTableData('request')">{{
                 t('dialog.invite_request_message.refresh')
             }}</el-button>
         </template>
         <SendInviteConfirmDialog
-            :visible.sync="isSendInviteConfirmDialogVisible"
+            v-model="isSendInviteConfirmDialogVisible"
             :send-invite-dialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <EditAndSendInviteDialog
-            :edit-and-send-invite-dialog.sync="editAndSendInviteDialog"
+            :edit-and-send-invite-dialog="editAndSendInviteDialog"
             :send-invite-dialog="sendInviteDialog"
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { Edit } from '@element-plus/icons-vue';
+
     import { storeToRefs } from 'pinia';
     import { ref } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import { useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
     import EditAndSendInviteDialog from '../InviteDialog/EditAndSendInviteDialog.vue';
     import SendInviteConfirmDialog from '../InviteDialog/SendInviteConfirmDialog.vue';

src/components/dialogs/UserDialog/SocialStatusDialog.vue

@@ -1,7 +1,7 @@
 <template>
-    <safe-dialog
+    <el-dialog
         class="x-dialog"
-        :visible.sync="socialStatusDialog.visible"
+        v-model="socialStatusDialog.visible"
         :title="t('dialog.social_status.header')"
         append-to-body
         width="400px">
@@ -11,13 +11,13 @@
                     <template #title>
                         <span style="font-size: 16px">{{ t('dialog.social_status.history') }}</span>
                     </template>
-                    <data-tables
+                    <DataTable
                         v-bind="socialStatusHistoryTable"
                         style="cursor: pointer"
                         @row-click="setSocialStatusFromHistory">
                         <el-table-column :label="t('table.social_status.no')" prop="no" width="50"></el-table-column>
                         <el-table-column :label="t('table.social_status.status')" prop="status"></el-table-column>
-                    </data-tables>
+                    </DataTable>
                 </el-collapse-item>
             </el-collapse>
 
@@ -53,19 +53,18 @@
                 {{ t('dialog.social_status.update') }}
             </el-button>
         </template>
-    </safe-dialog>
+    </el-dialog>
 </template>
 
 <script setup>
+    import { ElMessage } from 'element-plus';
+
     import { storeToRefs } from 'pinia';
-    import { getCurrentInstance } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { useI18n } from 'vue-i18n';
     import { userRequest } from '../../../api';
     import { useUserStore } from '../../../stores';
 
     const { t } = useI18n();
-    const { $message } = getCurrentInstance().proxy;
-
     const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
@@ -103,7 +102,7 @@
             })
             .then((args) => {
                 D.visible = false;
-                $message({
+                ElMessage({
                     message: 'Status updated',
                     type: 'success'
                 });