chore: upgrade to Vue3/Vuetify3
This commit is contained in:
+65
-114
@@ -1,140 +1,91 @@
|
||||
<template>
|
||||
<v-app :key="$i18n.locale + isAuthenticated">
|
||||
<themed>
|
||||
<v-navigation-drawer v-model="nav" temporary app>
|
||||
<v-list dense>
|
||||
<v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-switch v-model="darkMode" />
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.darkMode') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="locale = 'en'">
|
||||
<v-list-item-title>In English 🇬🇧</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="locale = 'sv'">
|
||||
<v-list-item-title>På Svenska 🇸🇪</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="!user" link @click="doLogin">
|
||||
<v-list-item-title>{{ $t('app.login') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name" />
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title><span v-text="user.name" /></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-calendar-outline</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.events') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link to="/origins/">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.origins') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link to="/filters/">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.filters') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link>
|
||||
<v-list-item-action>
|
||||
<v-icon>exit_to_app</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content @click="doLogout">
|
||||
<v-list-item-title>{{ $t('app.logout') }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon @click="nav = !nav" />
|
||||
<v-toolbar-title><span v-text="title" /></v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name" />
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title><span v-text="user.name" /></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container v-if="!loading" fluid>
|
||||
<nuxt />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</themed>
|
||||
<v-navigation-drawer v-model="nav" temporary app>
|
||||
<v-list dense>
|
||||
<v-list-item v-if="!user" link :title="$t('app.login')" @click="doLogin" />
|
||||
<v-list-item v-if="isAuthenticated && user" :title="user.name" :prepend-avatar="user.picture" />
|
||||
<v-list-item>
|
||||
<v-switch v-model="darkMode" color="primary" :label="$t('app.darkMode')" hide-details class="ms-1" />
|
||||
</v-list-item>
|
||||
<v-list-item title="In English" :to="switchLocalePath('en')">
|
||||
<template #prepend>
|
||||
<div class="d-flex d-inline-flex text-h5 me-8">
|
||||
🇬🇧
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item title="På Svenska" :to="switchLocalePath('sv')">
|
||||
<template #prepend>
|
||||
<div class="d-flex d-inline-flex text-h5 me-8">
|
||||
🇸🇪
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item to="/" :title="$t('app.links.events')" prepend-icon="mdi-calendar-outline" />
|
||||
<v-list-item v-if="isAuthenticated" to="/origins/" :title="$t('app.links.origins')" prepend-icon="mdi-home" />
|
||||
<v-list-item v-if="isAuthenticated" to="/filters/" :title="$t('app.links.filters')" prepend-icon="mdi-magnify" />
|
||||
<v-list-item v-if="isAuthenticated" link :title="$t('app.logout')" prepend-icon="mdi-exit-to-app" @click="doLogout" />
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon @click="nav = !nav" />
|
||||
<v-toolbar-title :title="title" />
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if="isAuthenticated && user" :prepend-avatar="user.picture" :title="user.name" />
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container v-if="!isLoading" fluid>
|
||||
<slot />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
import { computed, getCurrentInstance, provide, ref } from 'vue'
|
||||
import { DefaultApolloClient } from '@vue/apollo-composable'
|
||||
import Themed from './components/themed.vue'
|
||||
import { useAuth } from '~/plugins/auth'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { useSwitchLocalePath } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
if (instance) {
|
||||
provide(DefaultApolloClient, instance.proxy.$apollo)
|
||||
}
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
const state = useState()
|
||||
const router = useRouter()
|
||||
const onRedirectCallback = (appState) => {
|
||||
router.push(
|
||||
appState && appState.targetUrl
|
||||
? appState.targetUrl
|
||||
: window.location.pathname
|
||||
)
|
||||
}
|
||||
const { loading, isAuthenticated, user, loginWithRedirect, logout } =
|
||||
useAuth(onRedirectCallback)
|
||||
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } =
|
||||
useAuth0()
|
||||
const doLogin = () => {
|
||||
loginWithRedirect({
|
||||
appState: { targetUrl: window.location.pathname }
|
||||
appState: { targetUrl: window.location.pathname },
|
||||
})
|
||||
}
|
||||
const doLogout = () => {
|
||||
logout({
|
||||
logoutParams: {
|
||||
returnTo: window.location.origin
|
||||
}
|
||||
returnTo: window.location.origin,
|
||||
},
|
||||
})
|
||||
}
|
||||
const darkMode = computed({
|
||||
get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
|
||||
set: (val) => {
|
||||
if (instance) {
|
||||
instance.proxy.$vuetify.theme.dark = val
|
||||
state.setDarkMode(instance.proxy.$vuetify.theme.dark)
|
||||
}
|
||||
const theme = useTheme()
|
||||
onMounted(() => {
|
||||
if (state.darkMode) {
|
||||
theme.global.name.value = 'dark'
|
||||
} else {
|
||||
theme.global.name.value = 'light'
|
||||
}
|
||||
})
|
||||
const locale = computed({
|
||||
get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
|
||||
set: (newLocale) => {
|
||||
if (instance) {
|
||||
instance.proxy.$i18n.setLocaleCookie(newLocale)
|
||||
instance.proxy.$vuetify.lang.current = newLocale
|
||||
instance.proxy.$i18n.locale = newLocale
|
||||
const darkMode = computed<boolean>({
|
||||
get: () => theme.global.current.value.dark,
|
||||
set: (value: boolean) => {
|
||||
state.setDarkMode(value)
|
||||
if (value) {
|
||||
theme.global.name.value = 'dark'
|
||||
} else {
|
||||
theme.global.name.value = 'light'
|
||||
}
|
||||
state.setLocale(newLocale)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const nav = ref(false)
|
||||
locale.value = instance.proxy.$i18n.locale
|
||||
const title = computed(() => state.title)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user