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

@@ -4,7 +4,7 @@
             <div
                 class="avatar"
                 :class="isFriendActiveOrOffline ? undefined : userStatusClass(friend.ref, friend.pendingOffline)">
-                <img v-lazy="userImage(friend.ref, true)" />
+                <img :src="userImage(friend.ref, true)" loading="lazy" />
             </div>
             <div class="detail">
                 <span v-if="!hideNicknames && friend.$nickName" class="name" :style="{ color: friend.ref.$userColour }">
@@ -17,21 +17,18 @@
                 <span v-if="isFriendActiveOrOffline" class="extra">{{ friend.ref.statusDescription }}</span>
                 <template v-else>
                     <span v-if="friend.pendingOffline" class="extra">
-                        <i class="el-icon-warning-outline" /> {{ $t('side_panel.pending_offline') }}
+                        <el-icon><WarningFilled /></el-icon> {{ t('side_panel.pending_offline') }}
                     </span>
                     <template v-else-if="isGroupByInstance">
-                        <i v-if="isFriendTraveling" class="el-icon el-icon-loading"></i>
+                        <el-icon v-if="isFriendTraveling" class="is-loading" style="margin-right: 3px"
+                            ><Loading
+                        /></el-icon>
                         <Timer
                             class="extra"
                             :epoch="epoch"
                             :style="isFriendTraveling ? { display: 'inline-block', overflow: 'unset' } : undefined" />
                     </template>
-                    <Location
-                        v-else
-                        class="extra"
-                        :location="friend.ref.location"
-                        :traveling="friend.ref.travelingToLocation"
-                        :link="false" />
+                    <Location v-else class="extra" :location="locationProp" :traveling="travelingProp" :link="false" />
                 </template>
             </div>
         </template>
@@ -39,15 +36,15 @@
             <span>{{ friend.name || friend.id }}</span>
             <el-button
                 ttype="text"
-                icon="el-icon-close"
-                size="mini"
+                :icon="Close"
+                size="small"
                 style="margin-left: 5px"
                 @click.stop="$emit('confirm-delete-friend', friend.id)">
             </el-button>
         </template>
 
         <el-skeleton v-else animated class="skeleton" :throttle="100">
-            <template slot="template">
+            <template #template>
                 <div>
                     <el-skeleton-item variant="circle" />
                     <div>
@@ -61,8 +58,10 @@
 </template>
 
 <script setup>
+    import { WarningFilled, Close, Loading } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { computed } from 'vue';
+    import { useI18n } from 'vue-i18n';
     import { userImage, userStatusClass } from '../shared/utils';
     import { useAppearanceSettingsStore, useFriendStore } from '../stores';
 
@@ -71,21 +70,27 @@
         isGroupByInstance: Boolean
     });
 
+    defineEmits(['click', 'confirm-delete-friend']);
+
     const { hideNicknames } = storeToRefs(useAppearanceSettingsStore());
     const { isRefreshFriendsLoading } = storeToRefs(useFriendStore());
+    const { t } = useI18n();
 
     const isFriendTraveling = computed(() => props.friend.ref?.location === 'traveling');
     const isFriendActiveOrOffline = computed(() => props.friend.state === 'active' || props.friend.state === 'offline');
     const epoch = computed(() =>
         isFriendTraveling.value ? props.friend.ref?.$travelingToTime : props.friend.ref?.$location_at
     );
+
+    const locationProp = computed(() => props.friend.ref?.location || '');
+    const travelingProp = computed(() => props.friend.ref?.travelingToLocation || '');
 </script>
 
 <style scoped>
     .skeleton {
         height: 40px;
         width: 100%;
-        ::v-deep .el-skeleton {
+        :deep(.el-skeleton) {
             height: 100%;
             > div {
                 height: 100%;