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/assets/scss/themes/theme.material3.scss

@@ -1651,35 +1651,35 @@ img.x-link.el-popover__reference {
     border-color: rgb(var(--md-sys-color-outline-variant)) !important;
 }
 
-.el-popper[x-placement^='top'] .popper__arrow {
+.el-popper[data-popper-placement^='top'] .el-popper__arrow {
     border-top-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='top'] .popper__arrow::after {
+.el-popper[data-popper-placement^='top'] .el-popper__arrow::after {
     border-top-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='bottom'] .popper__arrow {
+.el-popper[data-popper-placement^='bottom'] .el-popper__arrow {
     border-bottom-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='bottom'] .popper__arrow::after {
+.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::after {
     border-bottom-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='left'] .popper__arrow {
+.el-popper[data-popper-placement^='left'] .el-popper__arrow {
     border-left-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='left'] .popper__arrow::after {
+.el-popper[data-popper-placement^='left'] .el-popper__arrow::after {
     border-left-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='right'] .popper__arrow {
+.el-popper[data-popper-placement^='right'] .el-popper__arrow {
     border-right-color: var(--md-sys-color-surface-3) !important;
 }
 
-.el-popper[x-placement^='right'] .popper__arrow::after {
+.el-popper[data-popper-placement^='right'] .el-popper__arrow::after {
     border-right-color: var(--md-sys-color-surface-3) !important;
 }
 
@@ -2065,7 +2065,7 @@ i.x-user-status {
     text-align: center !important;
 }
 
-.el-collapse-item .el-tag--mini {
+.el-collapse-item .el-tag--small {
     background-color: transparent;
     border: transparent;
     padding-top: 6px;
@@ -2074,7 +2074,7 @@ i.x-user-status {
     justify-content: space-between;
 }
 
-.el-dialog__body .el-tag--mini {
+.el-dialog__body .el-tag--small {
     line-height: 28px;
 }
 .el-divider {
@@ -2149,7 +2149,7 @@ i.x-user-status {
 div.x-friend-list
     > div:nth-child(1)
     > div
-    > div.el-textarea.el-input--mini
+    > div.el-textarea.el-input--small
     > span.el-input__count {
     background-color: var(--md-sys-color-surface-3) !important;
 }
@@ -2192,3 +2192,44 @@ div.x-friend-list
 .group-header {
     border-bottom: 2px solid rgba(var(--md-sys-color-outline), 0.5) !important;
 }
+
+.el-select__wrapper {
+    background-color: rgb(var(--md-sys-color-surface-variant)) !important;
+    border: 1px solid rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+.el-select__wrapper.is-focused {
+    border-color: rgb(var(--md-sys-color-primary)) !important;
+}
+
+.el-select__wrapper.is-disabled {
+    background-color: rgba(var(--md-sys-color-on-surface), 0.12) !important;
+    color: rgba(var(--md-sys-color-on-surface), 0.38) !important;
+}
+
+.el-input__wrapper {
+    background-color: rgb(var(--md-sys-color-surface-variant)) !important;
+    border: 1px solid rgb(var(--md-sys-color-outline-variant)) !important;
+}
+
+.el-input__wrapper.is-focus {
+    border-color: rgb(var(--md-sys-color-primary)) !important;
+}
+
+.el-table {
+    background-color: rgb(var(--md-sys-color-surface)) !important;
+}
+
+.el-table tr,
+.el-table td.el-table__cell,
+.el-table th.el-table__cell {
+    background-color: transparent !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+    background-color: rgba(var(--md-sys-color-primary), 0.05) !important;
+}
+
+.el-table__body-wrapper .el-table__row:hover > .el-table__cell {
+    background-color: rgba(var(--md-sys-color-primary), 0.08) !important;
+}