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/plugin/components.js

@@ -1,7 +1,5 @@
-import Vue from 'vue';
 import AvatarInfo from '../components/AvatarInfo.vue';
 import CountdownTimer from '../components/CountdownTimer.vue';
-import SafeDialog from '../components/dialogs/SafeDialog.vue';
 import DisplayName from '../components/DisplayName.vue';
 import InstanceInfo from '../components/InstanceInfo.vue';
 import InviteYourself from '../components/InviteYourself.vue';
@@ -11,16 +9,19 @@ import Location from '../components/Location.vue';
 import LocationWorld from '../components/LocationWorld.vue';
 import SimpleSwitch from '../components/SimpleSwitch.vue';
 import Timer from '../components/Timer.vue';
+import DataTable from '../components/DataTable.vue';
 
-Vue.component('SafeDialog', SafeDialog);
-Vue.component('SimpleSwitch', SimpleSwitch);
-Vue.component('Location', Location);
-Vue.component('Timer', Timer);
-Vue.component('InstanceInfo', InstanceInfo);
-Vue.component('LastJoin', LastJoin);
-Vue.component('CountdownTimer', CountdownTimer);
-Vue.component('AvatarInfo', AvatarInfo);
-Vue.component('DisplayName', DisplayName);
-Vue.component('InviteYourself', InviteYourself);
-Vue.component('Launch', Launch);
-Vue.component('LocationWorld', LocationWorld);
+export default function registerComponents(app) {
+    app.component('SimpleSwitch', SimpleSwitch);
+    app.component('Location', Location);
+    app.component('Timer', Timer);
+    app.component('InstanceInfo', InstanceInfo);
+    app.component('LastJoin', LastJoin);
+    app.component('CountdownTimer', CountdownTimer);
+    app.component('AvatarInfo', AvatarInfo);
+    app.component('DisplayName', DisplayName);
+    app.component('InviteYourself', InviteYourself);
+    app.component('Launch', Launch);
+    app.component('LocationWorld', LocationWorld);
+    app.component('DataTable', DataTable);
+}

src/plugin/i18n.js

@@ -1,30 +1,20 @@
-import ElementUI from 'element-ui';
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-import { createI18n } from 'vue-i18n-bridge';
+import { createI18n } from 'vue-i18n';
 import * as localizedStrings from '../localization/localizedStrings';
 
-// i18n: execution order matters here
-Vue.use(VueI18n, { bridge: true });
-const i18n = createI18n(
-    {
-        locale: 'en',
-        fallbackLocale: 'en',
-        messages: localizedStrings,
-        legacy: false,
-        globalInjection: true,
-        missingWarn: false,
-        warnHtmlMessage: false,
-        fallbackWarn: false
-    },
-    VueI18n
-);
-
-Vue.use(i18n);
-Vue.use(ElementUI, {
-    i18n: (key, value) => i18n.global.t(key, value)
+const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: Object.fromEntries(
+        Object.entries(localizedStrings).map(([key, value]) => [
+            key.replaceAll('_', '-'),
+            value
+        ])
+    ),
+    legacy: false,
+    globalInjection: false,
+    missingWarn: false,
+    warnHtmlMessage: false,
+    fallbackWarn: false
 });
 
-const t = i18n.global.t;
-
-export { i18n, t };
+export { i18n };

src/plugin/index.js

@@ -1,5 +0,0 @@
-import './ipc';
-import './dayjs';
-import './components';
-
-export { t, i18n } from './i18n';