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/views/Tools/components/GroupCalendarEventCard.vue

@@ -6,7 +6,7 @@
                 <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
                     {{ groupName }}
                 </div>
-                <el-popover placement="right" width="500" trigger="hover">
+                <el-popover placement="right" :width="500" trigger="hover">
                     <el-descriptions :title="event.title" size="small" :column="2" class="event-title-popover">
                         <template #extra>
                             <div>
@@ -28,9 +28,11 @@
                         }}</el-descriptions-item>
                         <el-descriptions-item label="Description">{{ event.description }}</el-descriptions-item>
                     </el-descriptions>
-                    <div class="event-title-content" slot="reference" @click="onGroupClick">
-                        {{ event.title }}
-                    </div>
+                    <template #reference>
+                        <div class="event-title-content" @click="onGroupClick">
+                            {{ event.title }}
+                        </div>
+                    </template>
                 </el-popover>
             </div>
             <div class="event-info">
@@ -43,19 +45,18 @@
             </div>
         </div>
         <div v-if="isFollowing" class="following-badge">
-            <i class="el-icon-check"></i>
+            <el-icon><Check /></el-icon>
         </div>
     </el-card>
 </template>
 
 <script setup>
+    import { Check } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import dayjs from 'dayjs';
-    import { storeToRefs } from 'pinia';
     import { useGroupStore } from '../../../stores';
 
-    const { cachedGroups } = storeToRefs(useGroupStore());
-    const { showGroupDialog } = useGroupStore();
+    const { cachedGroups, showGroupDialog } = useGroupStore();
 
     const props = defineProps({
         event: {
@@ -87,13 +88,13 @@
         if (props.event.imageUrl) {
             return props.event.imageUrl;
         } else {
-            return cachedGroups.value.get(props.event.ownerId)?.bannerUrl || '';
+            return cachedGroups.get(props.event.ownerId)?.bannerUrl || '';
         }
     });
 
     const groupName = computed(() => {
         if (!props.event) return '';
-        return cachedGroups.value.get(props.event.ownerId)?.name || '';
+        return cachedGroups.get(props.event.ownerId)?.name || '';
     });
 
     const formattedTime = computed(() => {
@@ -131,7 +132,7 @@
             flex: 0 0 280px;
             max-width: 280px;
         }
-        ::v-deep .el-card__body {
+        :deep(.el-card__body) {
             overflow: visible;
         }
         .banner {
@@ -213,7 +214,7 @@
             }
         }
     }
-    ::v-deep .el-card {
+    :deep(.el-card) {
         border-radius: 8px;
         width: 100%;
         overflow: visible;