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

@@ -7,7 +7,7 @@
                     <template v-if="state.canCloseInstance">
                         <el-button
                             :disabled="state.isClosed"
-                            size="mini"
+                            size="small"
                             type="primary"
                             @click="closeInstance(props.location)">
                             {{ t('dialog.user.info.close_instance') }} </el-button
@@ -24,17 +24,14 @@
                         >{{ t('dialog.user.info.instance_disabled_content') }} {{ state.disabledContentSettings }}<br
                     /></span>
                     <span v-if="state.userList.length">{{ t('dialog.user.info.instance_users') }}<br /></span>
-                    <template v-for="user in state.userList">
-                        <span
-                            style="cursor: pointer; margin-right: 5px"
-                            @click="showUserDialog(user.id)"
-                            :key="user.id"
-                            >{{ user.displayName }}</span
-                        >
+                    <template v-for="user in state.userList" :key="user.id">
+                        <span style="cursor: pointer; margin-right: 5px" @click="showUserDialog(user.id)">{{
+                            user.displayName
+                        }}</span>
                     </template>
                 </div>
             </template>
-            <i class="el-icon-caret-bottom"></i>
+            <el-icon><CaretBottom /></el-icon>
         </el-tooltip>
         <span v-if="state.occupants" style="margin-left: 5px">{{ state.occupants }}/{{ state.capacity }}</span>
         <span v-if="props.friendcount" style="margin-left: 5px">({{ props.friendcount }})</span>
@@ -57,8 +54,10 @@
 </template>
 
 <script setup>
-    import { getCurrentInstance, reactive, watch } from 'vue';
-    import { useI18n } from 'vue-i18n-bridge';
+    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { CaretBottom } from '@element-plus/icons-vue';
+    import { reactive, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { miscRequest } from '../api';
     import { formatDateFilter, hasGroupPermission } from '../shared/utils';
     import { useGroupStore, useInstanceStore, useLocationStore, useUserStore } from '../stores';
@@ -94,8 +93,6 @@
         disabledContentSettings: ''
     });
 
-    const { proxy } = getCurrentInstance();
-
     function parse() {
         Object.assign(state, {
             isValidInstance: false,
@@ -153,18 +150,19 @@
     }
 
     function closeInstance(location) {
-        proxy.$confirm('Continue? Close Instance, nobody will be able to join', 'Confirm', {
+        ElMessageBox.confirm('Continue? Close Instance, nobody will be able to join', 'Confirm', {
             confirmButtonText: 'Confirm',
             cancelButtonText: 'Cancel',
-            type: 'warning',
-            callback: async (action) => {
+            type: 'warning'
+        })
+            .then(async (action) => {
                 if (action !== 'confirm') return;
                 const args = await miscRequest.closeInstance({ location, hardClose: false });
                 if (args.json) {
-                    proxy.$message({ message: t('message.instance.closed'), type: 'success' });
+                    ElMessage({ message: t('message.instance.closed'), type: 'success' });
                     instanceStore.applyInstance(args.json);
                 }
-            }
-        });
+            })
+            .catch(() => {});
     }
 </script>