vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: use vue-router 4 for vue3

This commit is contained in:
Dominik Pschenitschni 2021-08-20 15:17:19 +02:00
parent b31da0cefe
commit 72518212da
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
11 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -34,6 +34,7 @@
"vue-easymde": "1.4.0",
"vue-flatpickr-component": "9.0.4",
"vue-i18n": "8.26.3",
"vue-router": "4.0.11",
"vue-shortkey": "3.1.7",
"vuedraggable": "2.24.3",
"vuex": "3.6.2",
@ -70,7 +71,6 @@
"vite": "2.6.1",
"vite-plugin-pwa": "0.11.2",
"vue-notification": "1.3.20",
"vue-router": "3.5.2",
"wait-on": "6.0.0",
"workbox-cli": "6.3.0"
},

8
src/components/home/contentAuth.vue
View File

@ -22,9 +22,11 @@
<router-view/>
<transition name="modal">
<router-view name="popup"/>
</transition>
<router-view name="popup" v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
</transition>
</router-view>
<a
class="keyboard-shortcuts-button"

49
src/components/home/navigation.vue
View File

@ -106,29 +106,36 @@
:class="{'is-loading': listUpdating[l.id]}"
>
<router-link
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
:to="{ name: 'list.index', params: { listId: l.id} }"
tag="span"
v-slot="{ href, navigate, isActive }"
custom
>
<span class="icon handle">
<icon icon="grip-lines"/>
</span>
<span
:style="{ backgroundColor: l.hexColor }"
class="color-bubble"
v-if="l.hexColor !== ''">
</span>
<span class="list-menu-title">
{{ getListTitle(l) }}
</span>
<span
:class="{'is-favorite': l.isFavorite}"
@click.stop="toggleFavoriteList(l)"
class="favorite">
<icon icon="star" v-if="l.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</span>
<a
@click="navigate"
:href="href"
:active="isActive"
class="list-menu-link"
:class="{'router-link-exact-active': currentList.id === l.id}"
>
<span class="icon handle">
<icon icon="grip-lines"/>
</span>
<span
:style="{ backgroundColor: l.hexColor }"
class="color-bubble"
v-if="l.hexColor !== ''">
</span>
<span class="list-menu-title">
{{ getListTitle(l) }}
</span>
<span
:class="{'is-favorite': l.isFavorite}"
@click.stop="toggleFavoriteList(l)"
class="favorite">
<icon icon="star" v-if="l.isFavorite"/>
<icon :icon="['far', 'star']" v-else/>
</span>
</a>
</router-link>
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
<span class="list-setting-spacer" v-else></span>

41
src/router/index.js
View File

@ -1,5 +1,4 @@
import Vue from 'vue'
import Router from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import HomeComponent from '../views/Home'
import NotFoundComponent from '../views/404'
@ -59,10 +58,8 @@ const NewNamespaceComponent = () => import('../views/namespaces/NewNamespace')
const EditTeamComponent = () => import('../views/teams/EditTeam')
const NewTeamComponent = () => import('../views/teams/NewTeam')
Vue.use(Router)
export default new Router({
mode: 'history',
const router = createRouter({
history: createWebHistory(),
scrollBehavior(to, from, savedPosition) {
// If the user is using their forward/backward keys to navigate, we want to restore the scroll view
if (savedPosition) {
@ -71,13 +68,11 @@ export default new Router({
// Scroll to anchor should still work
if (to.hash) {
return {
selector: to.hash,
}
return {el: document.getElementById(to.hash.slice(1))}
}
// Otherwise just scroll to the top
return {x: 0, y: 0}
return {left: 0, top: 0}
},
routes: [
{
@ -86,8 +81,14 @@ export default new Router({
component: HomeComponent,
},
{
path: '*',
name: '404',
path: '/:pathMatch(.*)*',
name: 'not-found',
component: NotFoundComponent,
},
// if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
{
path: '/:pathMatch(.*)',
name: 'bad-not-found',
component: NotFoundComponent,
},
{
@ -505,4 +506,18 @@ export default new Router({
component: About,
},
],
})
})
// bad example if using named routes:
router.resolve({
name: 'bad-not-found',
params: { pathMatch: 'not/found' },
}).href // '/not%2Ffound'
// good example:
router.resolve({
name: 'not-found',
params: { pathMatch: ['not', 'found'] },
}).href // '/not/found'
export default router

8
src/views/list/views/Gantt.vue
View File

@ -53,9 +53,11 @@
/>
<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
<transition name="modal">
<router-view/>
</transition>
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
</transition>
</router-view>
</card>
</div>

8
src/views/list/views/Kanban.vue
View File

@ -212,9 +212,11 @@
</div>
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal">
<router-view/>
</transition>
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
</transition>
</router-view>
<transition name="modal">
<modal

8
src/views/list/views/List.vue
View File

@ -128,9 +128,11 @@
</card>
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
<transition name="modal">
<router-view/>
</transition>
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>

8
src/views/list/views/Table.vue
View File

@ -179,9 +179,11 @@
</card>
<!-- This router view is used to show the task popup while keeping the table view itself -->
<transition name="modal">
<router-view/>
</transition>
<router-view v-slot="{ Component }">
<transition name="modal">
<component :is="Component" />
</transition>
</router-view>
</div>
</template>

2
src/views/migrator/MigrateService.vue
View File

@ -32,7 +32,7 @@ export default {
this.identifier = identifier
this.isFileMigrator = isFileMigrator
} catch (e) {
this.$router.push({name: '404'})
this.$router.push({name: 'not-found'})
}
},
}

22
vite.config.js
View File

@ -106,26 +106,10 @@ module.exports = {
target: 'es2015',
rollupOptions: {
plugins: [
visualizer(),
visualizer({
filename: 'stats.html',
}),
],
output: {
manualChunks: {
'user-settings': [
'./src/views/user/PasswordReset',
'./src/views/user/RequestPasswordReset',
'./src/views/user/Settings',
],
'settings': [
'./src/views/list/NewList',
'./src/views/namespaces/NewNamespace',
'./src/views/teams/EditTeam',
'./src/views/teams/NewTeam',
],
'highlight': [
'highlight.js',
],
},
},
},
},
}

15
yarn.lock
View File

@ -1785,6 +1785,11 @@
"@vue/compiler-dom" "3.2.14"
"@vue/shared" "3.2.14"
"@vue/devtools-api@^6.0.0-beta.14":
version "6.0.0-beta.15"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
"@vue/eslint-config-typescript@7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
@ -6913,10 +6918,12 @@ vue-notification@1.3.20:
resolved "https://registry.yarnpkg.com/vue-notification/-/vue-notification-1.3.20.tgz#d85618127763b46f3e25b8962b857947d5a97cbe"
integrity sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==
vue-router@3.5.2:
version "3.5.2"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
vue-router@4.0.11:
version "4.0.11"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
dependencies:
"@vue/devtools-api" "^6.0.0-beta.14"
vue-shortkey@3.1.7:
version "3.1.7"