From ced9c0fa7ef18d81d68a6833299c89582e0e749e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 24 Apr 2021 17:56:00 +0300 Subject: some bare minimum to get vue3 boot (no UI yet) --- src/boot/after_store.js | 41 +++++++++++++++++++++++++++-------------- 1 file changed, 27 insertions(+), 14 deletions(-) (limited to 'src/boot') 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 -- cgit v1.2.3-70-g09d2 From 051d51bcd92530e5aff0c3e47f26b26695af7843 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Mar 2022 09:28:19 +0200 Subject: fix suggest not working --- package.json | 2 +- src/boot/after_store.js | 11 ++++++++--- src/components/emoji_input/emoji_input.js | 1 + yarn.lock | 10 +++++----- 4 files changed, 15 insertions(+), 9 deletions(-) (limited to 'src/boot') diff --git a/package.json b/package.json index 4f494324..4bcd4853 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "portal-vue": "2.1.7", "punycode.js": "2.1.0", "ruffle-mirror": "2021.4.11", - "v-click-outside": "2.1.5", + "click-outside-vue3": "4.0.1", "vue": "^3.1.0", "@vue/compat": "^3.1.0", "vue-i18n": "9.1.9", diff --git a/src/boot/after_store.js b/src/boot/after_store.js index e0d7aa0f..5ddc7465 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,6 +1,6 @@ -import { createApp } from 'vue' +import { createApp, configureCompat } from 'vue' import { createRouter, createWebHistory } from 'vue-router' -import VueClickOutside from 'v-click-outside' +import vClickOutside from 'click-outside-vue3' import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome' @@ -15,6 +15,11 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { applyTheme } from '../services/style_setter/style_setter.js' import FaviconService from '../services/favicon_service/favicon_service.js' +// disable compat for certain features +configureCompat({ + COMPONENT_V_MODEL: false +}) + let staticInitialResults = null const parsedInitialResults = () => { @@ -390,7 +395,7 @@ const afterStoreSetup = async ({ store, i18n }) => { app.use(store) app.use(i18n) - app.use(VueClickOutside) + app.use(vClickOutside) app.use(VBodyScrollLock) app.component('FAIcon', FontAwesomeIcon) diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index c836317a..5b51da18 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -31,6 +31,7 @@ library.add( */ const EmojiInput = { + emits: ['update:modelValue'], props: { suggest: { /** diff --git a/yarn.lock b/yarn.lock index bcd8d06f..4af18daa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2731,6 +2731,11 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" +click-outside-vue3@4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz#81a6ac01696b301764b42db6fdbdf28e7cd8ef95" + integrity sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g== + cliui@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1" @@ -9639,11 +9644,6 @@ uuid@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131" -v-click-outside@2.1.5: - version "2.1.5" - resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.5.tgz#aa69172fb41fcc79b26b9a4bc72a30ccf03f7a3c" - integrity sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg== - v8-compile-cache@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745" -- cgit v1.2.3-70-g09d2 From b3ed29ff02fa3db46a1ec7b5856f2c9131b8fa33 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Mar 2022 13:32:36 +0200 Subject: made withLoadMore work... sorta --- src/boot/after_store.js | 4 +++- src/boot/routes.js | 2 +- src/components/gallery/gallery.js | 4 ++-- src/components/tab_switcher/tab_switcher.jsx | 6 +++--- src/hocs/with_load_more/with_load_more.jsx | 11 ++++------- 5 files changed, 13 insertions(+), 14 deletions(-) (limited to 'src/boot') diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 5ddc7465..91a13174 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -17,7 +17,9 @@ import FaviconService from '../services/favicon_service/favicon_service.js' // disable compat for certain features configureCompat({ - COMPONENT_V_MODEL: false + COMPONENT_V_MODEL: false, + INSTANCE_SET: false, + RENDER_FUNCTION: false }) let staticInitialResults = null diff --git a/src/boot/routes.js b/src/boot/routes.js index 1bc1f9f7..e5bdd1f0 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -69,7 +69,7 @@ export default (store) => { { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, - { name: 'user-profile', path: '/(users/)?:name', component: UserProfile } + { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile } ] if (store.state.instance.pleromaChatMessagesAvailable) { diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 094b3e57..4e1bda55 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,5 +1,5 @@ import Attachment from '../attachment/attachment.vue' -import { sumBy } from 'lodash' +import { sumBy, set } from 'lodash' const Gallery = { props: [ @@ -85,7 +85,7 @@ const Gallery = { }, methods: { onNaturalSizeLoad ({ id, width, height }) { - this.$set(this.sizes, id, { width, height }) + set(this.sizes, id, { width, height }) }, rowStyle (row) { if (row.audio) { diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index d9df42ce..db82e075 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -43,14 +43,14 @@ export default { }, data () { return { - active: findFirstUsable(this.$slots.default) + active: findFirstUsable(this.$slots.default()) } }, computed: { activeIndex () { // In case of controlled component if (this.activeTab) { - return this.$slots.default.findIndex(slot => this.activeTab === slot.key) + return this.$slots.default().findIndex(slot => this.activeTab === slot.key) } else { return this.active } @@ -74,7 +74,7 @@ export default { }, // DO NOT put it to computed, it doesn't work (caching?) slots () { - return this.$slots.default + return this.$slots.default() }, setTab (index) { if (typeof this.onSwitch === 'function') { diff --git a/src/hocs/with_load_more/with_load_more.jsx b/src/hocs/with_load_more/with_load_more.jsx index 6cd198ed..e57f9b20 100644 --- a/src/hocs/with_load_more/with_load_more.jsx +++ b/src/hocs/with_load_more/with_load_more.jsx @@ -82,14 +82,11 @@ const withLoadMore = ({ }, render () { const props = { - props: { - ...this.$props, - [childPropName]: this.entries - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots + ...this.$props, + [childPropName]: this.entries + // on: this.$listeners // TODO fix listeners } - const children = Object.entries(this.$slots).map(([key, value]) => h('template', { slot: key }, value)) + const children = this.$slots return (
-- cgit v1.2.3-70-g09d2 From 6b5791fda6fdf2efe39e1c05e3340a5cf970f312 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Mar 2022 19:20:12 +0200 Subject: fix other weird route --- src/boot/routes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/boot') diff --git a/src/boot/routes.js b/src/boot/routes.js index e5bdd1f0..905ffe41 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -46,7 +46,7 @@ export default (store) => { { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'remote-user-profile-acct', - path: '/remote-users/(@?):username([^/@]+)@:hostname([^/@]+)', + path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)', component: RemoteUserResolver, beforeEnter: validateAuthenticatedRoute }, -- cgit v1.2.3-70-g09d2 From c57af7e242ac4294f15738cbf723abd6e3fc8a6c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 28 Mar 2022 17:13:48 +0300 Subject: remove some warnings --- src/boot/after_store.js | 1 + 1 file changed, 1 insertion(+) (limited to 'src/boot') diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 91a13174..87448c8c 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -17,6 +17,7 @@ import FaviconService from '../services/favicon_service/favicon_service.js' // disable compat for certain features configureCompat({ + ATTR_FALSE_VALUE: false, COMPONENT_V_MODEL: false, INSTANCE_SET: false, RENDER_FUNCTION: false -- cgit v1.2.3-70-g09d2 From dc8bef7928cb6a5e06a793a78652234276ca6fce Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 29 Mar 2022 00:58:17 +0300 Subject: remove compat build --- build/webpack.base.conf.js | 8 -------- build/webpack.dev.conf.js | 4 +++- build/webpack.prod.conf.js | 4 +++- package.json | 1 - src/boot/after_store.js | 10 +--------- test/unit/index.js | 7 ------- yarn.lock | 5 ----- 7 files changed, 7 insertions(+), 32 deletions(-) (limited to 'src/boot') diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 65d398c8..d7ff9b9a 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -35,7 +35,6 @@ module.exports = { path.join(__dirname, '../node_modules') ], alias: { - 'vue': '@vue/compat', 'static': path.resolve(__dirname, '../static'), 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), @@ -62,13 +61,6 @@ module.exports = { { test: /\.vue$/, loader: 'vue-loader', - options: { - compilerOptions: { - compatConfig: { - MODE: 2 - } - } - } }, { test: /\.jsx?$/, diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 159572ba..4605b93d 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -21,7 +21,9 @@ module.exports = merge(baseWebpackConfig, { new webpack.DefinePlugin({ 'process.env': config.dev.env, 'COMMIT_HASH': JSON.stringify('DEV'), - 'DEV_OVERRIDES': JSON.stringify(config.dev.settings) + 'DEV_OVERRIDES': JSON.stringify(config.dev.settings), + '__VUE_OPTIONS_API__': true, + '__VUE_PROD_DEVTOOLS__': false }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index ed11ebad..a67ed2f6 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -36,7 +36,9 @@ var webpackConfig = merge(baseWebpackConfig, { new webpack.DefinePlugin({ 'process.env': env, 'COMMIT_HASH': JSON.stringify(commitHash), - 'DEV_OVERRIDES': JSON.stringify(undefined) + 'DEV_OVERRIDES': JSON.stringify(undefined), + '__VUE_OPTIONS_API__': true, + '__VUE_PROD_DEVTOOLS__': false }), // extract css into its own file new MiniCssExtractPlugin({ diff --git a/package.json b/package.json index f9a58b87..1a743c16 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,6 @@ "ruffle-mirror": "2021.12.31", "click-outside-vue3": "4.0.1", "vue": "^3.1.0", - "@vue/compat": "^3.1.0", "vue-i18n": "9.1.9", "vue-router": "4.0.14", "vue-template-compiler": "2.6.11", diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 87448c8c..76832708 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,4 +1,4 @@ -import { createApp, configureCompat } from 'vue' +import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import vClickOutside from 'click-outside-vue3' @@ -15,14 +15,6 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { applyTheme } from '../services/style_setter/style_setter.js' import FaviconService from '../services/favicon_service/favicon_service.js' -// disable compat for certain features -configureCompat({ - ATTR_FALSE_VALUE: false, - COMPONENT_V_MODEL: false, - INSTANCE_SET: false, - RENDER_FUNCTION: false -}) - let staticInitialResults = null const parsedInitialResults = () => { diff --git a/test/unit/index.js b/test/unit/index.js index 24d2825c..83a2dcdb 100644 --- a/test/unit/index.js +++ b/test/unit/index.js @@ -1,10 +1,3 @@ -import { configureCompat } from 'vue' -// disable compat for certain features -configureCompat({ - COMPONENT_V_MODEL: false, - INSTANCE_SET: false, - RENDER_FUNCTION: false -}) // require all test files (files that ends with .spec.js) const testsContext = require.context('./specs', true, /\.spec$/) testsContext.keys().forEach(testsContext) diff --git a/yarn.lock b/yarn.lock index a1206eff..ca954c04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1452,11 +1452,6 @@ html-tags "^3.1.0" svg-tags "^1.0.0" -"@vue/compat@^3.1.0": - version "3.2.31" - resolved "https://registry.yarnpkg.com/@vue/compat/-/compat-3.2.31.tgz#9c8bdf265eeba1777e5edb56cda73581e351a648" - integrity sha512-hhwJk/SRwpT2OADctj+t7QZCRIgh04AcelGpe6gdj0OxA75xpHnPrG+fmG37U3Z6WDrNHZpGvu2eXBzWXM4OVA== - "@vue/compiler-core@3.2.31": version "3.2.31" resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz#d38f06c2cf845742403b523ab4596a3fda152e89" -- cgit v1.2.3-70-g09d2 From 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 5 Apr 2022 18:38:05 +0300 Subject: wide mode initial implementation + cleanup --- src/App.js | 8 +- src/App.scss | 127 +++++++++++++++++-------------- src/App.vue | 6 +- src/boot/after_store.js | 7 +- src/components/about/about.vue | 2 +- src/components/mobile_nav/mobile_nav.vue | 1 - src/components/user_card/user_card.vue | 1 + src/modules/interface.js | 10 +-- 8 files changed, 89 insertions(+), 73 deletions(-) (limited to 'src/boot') diff --git a/src/App.js b/src/App.js index 4a59f412..b2ec95d4 100644 --- a/src/App.js +++ b/src/App.js @@ -79,7 +79,7 @@ export default { hideShoutbox () { return this.$store.getters.mergedConfig.hideShoutbox }, - isMobileLayout () { return this.$store.state.interface.mobileLayout }, + layoutType () { return this.$store.state.interface.layoutType }, privateMode () { return this.$store.state.instance.private }, reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight }, ...mapGetters(['mergedConfig']) @@ -87,10 +87,12 @@ export default { methods: { updateMobileState () { const mobileLayout = windowWidth() <= 800 + const wideLayout = windowWidth() >= 1300 const layoutHeight = windowHeight() - const changed = mobileLayout !== this.isMobileLayout + const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal') + const changed = layoutType !== this.layoutType if (changed) { - this.$store.dispatch('setMobileLayout', mobileLayout) + this.$store.dispatch('setLayoutType', layoutType) } this.$store.dispatch('setLayoutHeight', layoutHeight) } diff --git a/src/App.scss b/src/App.scss index c8a7969c..e32a2d36 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,11 +63,11 @@ nav { } #sidebar { - display: grid; - grid-template-columns: 100%; - row-gap: 1em; grid-area: sidebar; - align-content: start; + + @media all and (max-width: 800px) { + display: none; + } } #main-scroller { @@ -88,6 +88,19 @@ nav { background-position: 50%; } +.underlay { + grid-column-start: 1; + grid-column-end: span 3; + grid-row-start: 1; + grid-row-end: 1; + margin: 0 -0.5em; + padding: 0 0.5em; + pointer-events: none; + background-color: rgba(0, 0, 0, 0.15); + background-color: var(--underlay, rgba(0, 0, 0, 0.15)); + z-index: -2000; +} + .app-layout { position: relative; display: grid; @@ -103,44 +116,66 @@ nav { justify-content: center; --miniColumn: 345px; - --maxiColumn: minmax(auto, 615px); + --maxiColumn: minmax(345px, 615px); + + .column { + display: grid; + grid-template-columns: 100%; + box-sizing: border-box; + padding-top: 10px; + grid-row-start: 1; + grid-row-end: 1; + margin: 0 0.5em; + row-gap: 1em; + align-content: start; + + &.-scrollable { + padding-top: 10px; + position: sticky; + top: 0; + max-height: calc(100vh - var(--navbar-height)); + overflow-y: auto; + overflow-x: hidden; - &.-reverse { + .panel-heading.-sticky { + top: -10px; + } + } + } + + .column-inner { + display: grid; + grid-template-columns: 100%; + box-sizing: border-box; + row-gap: 1em; + align-content: start; + } + + &.-reverse:not(.-wide):not(.-mobile) { grid-template-columns: var(--maxiColumn) var(--miniColumn); grid-template-areas: "content sidebar"; } -} -.underlay { - grid-column-start: 1; - grid-column-end: span 2; - grid-row-start: 1; - grid-row-end: 1; - margin: 0 -0.5em; - padding: 0 0.5em; - pointer-events: none; - background-color: rgba(0, 0, 0, 0.15); - background-color: var(--underlay, rgba(0, 0, 0, 0.15)); - z-index: -2000; -} + &.-wide { + grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn); + grid-template-areas: "sidebar content notifs"; -.column { - box-sizing: border-box; - padding-top: 10px; - grid-row-start: 1; - grid-row-end: 1; - margin: 0 0.5em; + &.-reverse { + grid-template-areas: "notifs content sidebar"; + } + } - &.-scrollable { - padding-top: 10px; - position: sticky; - top: 0; - max-height: calc(100vh - var(--navbar-height)); - overflow-y: auto; - overflow-x: hidden; + &.-mobile { + grid-template-columns: 100vw; + grid-template-areas: "content"; + padding: 0; + + .column { + margin: 0; + } - .panel-heading.-sticky { - top: -10px; + .underlay { + display: none; } } } @@ -464,17 +499,6 @@ i[class*=icon-], color: grey; } -.sidebar-bounds { - flex: 0; - flex-basis: 35%; -} - -.sidebar-flexer { - flex: 1; - flex-basis: 345px; - width: 365px; -} - .mobile-shown { display: none; } @@ -652,19 +676,6 @@ i[class*=icon-], .mobile-hidden { display: none; } - - .panel-switcher { - display: flex; - } - - .menu-button { - display: block; - margin-right: 0.8em; - } - - .main { - margin-bottom: 7em; - } } @keyframes spin { diff --git a/src/App.vue b/src/App.vue index 71de2a36..f87d895b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,12 +7,12 @@ id="app_bg_wrapper" class="app-bg-wrapper" /> - +
-