diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 271ed8ee..5b4f1b35 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -34,7 +34,7 @@ module.exports = { path.join(__dirname, '../node_modules') ], alias: { - 'vue$': 'vue/dist/vue.runtime.common', + vue: "@vue/runtime-dom", 'static': path.resolve(__dirname, '../static'), 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), diff --git a/package.json b/package.json index af4f06b1..0fdc9836 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,12 @@ }, "dependencies": { "@babel/runtime": "^7.7.6", - "@chenfengyuan/vue-qrcode": "^1.0.0", + "@chenfengyuan/vue-qrcode": "^2.0.0-beta", "@fortawesome/fontawesome-svg-core": "^1.2.32", "@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1", - "@fortawesome/vue-fontawesome": "^3.0.0-2", - "@vue/compiler-sfc": "^3.0.2", + "@fortawesome/vue-fontawesome": "^3.0.0-3", + "@vue/compiler-sfc": "^3.0.7", "body-scroll-lock": "^2.6.4", "chromatism": "^3.0.0", "cropperjs": "^1.4.3", @@ -31,14 +31,14 @@ "localforage": "^1.5.0", "parse-link-header": "^1.0.1", "phoenix": "^1.3.0", - "portal-vue": "^2.1.4", "punycode.js": "^2.1.0", "v-click-outside": "^2.1.1", - "vue": "^3.0.2", - "vue-i18n": "^9.0.0-beta.6", - "vue-router": "^4.0.0-rc.1", + "vue": "^3.0.7", + "vue-i18n": "^9.0.0-beta.18", + "vue-router": "^4.0.5", "vuelidate": "^0.7.6", - "vuex": "^3.0.1" + "vuex": "^4.0.0", + "qrcode": "^1.4.4" }, "devDependencies": { "@babel/core": "^7.7.5", @@ -109,7 +109,7 @@ "stylelint-config-standard": "^20.0.0", "stylelint-rscss": "^0.4.0", "url-loader": "^1.1.2", - "vue-loader": "^16.0.0-beta.10", + "vue-loader": "^16.1.2", "vue-style-loader": "^4.0.0", "webpack": "^4.0.0", "webpack-dev-middleware": "^3.6.0", diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 45090e5d..6f84f686 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,7 +1,13 @@ -import Vue from 'vue' -import VueRouter from 'vue-router' -import routes from './routes' +import { createApp } from 'vue' +import { createRouter, createWebHistory } from 'vue-router' +import VueClickOutside from 'v-click-outside' + +import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' + import App from '../App.vue' +import routes from './routes' +import VBodyScrollLock from 'src/directives/body_scroll_lock' + import { windowWidth } from '../services/window_utils/window_utils' import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' @@ -366,25 +372,32 @@ const afterStoreSetup = async ({ store, i18n }) => { getTOS({ store }) getStickers({ store }) - const router = new VueRouter({ - mode: 'history', + const router = createRouter({ + history: createWebHistory(), routes: routes(store), scrollBehavior: (to, _from, savedPosition) => { if (to.matched.some(m => m.meta.dontScroll)) { return false } - return savedPosition || { x: 0, y: 0 } + return savedPosition || { left: 0, top: 0 } } }) - /* eslint-disable no-new */ - return new Vue({ - router, - store, - i18n, - el: '#app', - render: h => h(App) - }) + const app = createApp(App) + + app.use(router) + app.use(store) + app.use(i18n) + + app.use(VueClickOutside) + app.use(VBodyScrollLock) + + app.component('FAIcon', FontAwesomeIcon) + app.component('FALayers', FontAwesomeLayers) + + app.mount('#app') + + return app } export default afterStoreSetup diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js index edfbe7a4..1da04d4b 100644 --- a/src/components/chat_title/chat_title.js +++ b/src/components/chat_title/chat_title.js @@ -1,8 +1,7 @@ -import Vue from 'vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import UserAvatar from '../user_avatar/user_avatar.vue' -export default Vue.component('chat-title', { +export default { name: 'ChatTitle', components: { UserAvatar @@ -23,4 +22,4 @@ export default Vue.component('chat-title', { return generateProfileLink(user.id, user.screen_name) } } -}) +} diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js index 6274780b..f434f621 100644 --- a/src/components/font_control/font_control.js +++ b/src/components/font_control/font_control.js @@ -1,4 +1,3 @@ -import { set } from 'vue' import { library } from '@fortawesome/fontawesome-svg-core' import { faChevronDown @@ -40,7 +39,7 @@ export default { return this.dValue.family }, set (v) { - set(this.lValue, 'family', v) + this.lValue.family = v this.$emit('input', this.lValue) } }, diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index 552ca41f..5c171033 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -11,22 +11,24 @@ {{ $t('settings.settings') }} - - - {{ $t('settings.saving_err') }} - + + + + {{ $t('settings.saving_err') }} + - - {{ $t('settings.saving_ok') }} - + + {{ $t('settings.saving_ok') }} + + Object.assign({}, _))) + this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _)) } else { - del(this.shadowsLocal, this.shadowSelected) + delete this.shadowsLocal[this.shadowSelected] } } }, @@ -328,7 +327,7 @@ export default { return this.shadowsLocal[this.shadowSelected] }, set (v) { - set(this.shadowsLocal, this.shadowSelected, v) + this.shadowsLocal[this.shadowSelected] = v } }, themeValid () { @@ -546,7 +545,7 @@ export default { .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal')) .filter(_ => !v1OnlyNames.includes(_)) .forEach(key => { - set(this.$data, key, undefined) + this.$data[key] = undefined }) }, @@ -554,7 +553,7 @@ export default { Object.keys(this.$data) .filter(_ => _.endsWith('RadiusLocal')) .forEach(key => { - set(this.$data, key, undefined) + this.$data[key] = undefined }) }, @@ -562,7 +561,7 @@ export default { Object.keys(this.$data) .filter(_ => _.endsWith('OpacityLocal')) .forEach(key => { - set(this.$data, key, undefined) + this.$data[key] = undefined }) }, diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue index d35ff25e..0330d49f 100644 --- a/src/components/settings_modal/tabs/version_tab.vue +++ b/src/components/settings_modal/tabs/version_tab.vue @@ -28,4 +28,4 @@ -