chore: upgrade to Vue3/Vuetify3

components/pages/events/Event/distance.vue

@@ -1,34 +0,0 @@
-<template>
-  <v-layout
-    row
-    wrap
-  >
-    <v-flex xs12 sm6>
-      <v-icon>mdi-home</v-icon>
-      <span><strong>{{ distance.origin }}</strong></span>
-    </v-flex>
-    <v-flex xs12 sm6>
-      <v-icon>mdi-car</v-icon>
-      <span>{{ numericDistance }} km</span>
-      <v-icon>mdi-clock-outline</v-icon>
-      <span>{{ distance.duration }}</span>
-    </v-flex>
-  </v-layout>
-</template>
-
-<script setup lang='ts'>
-import { computed, PropType } from 'vue'
-import { DanceHallDistance } from '~/graphql/generated/operations'
-
-const props = defineProps({
-  distance: {
-    type: Object as PropType<DanceHallDistance>,
-    required: true
-  }
-})
-const numericDistance = computed(() =>
-  Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }))
-</script>

components/pages/events/event-card.vue

@@ -1,80 +1,81 @@
 <template>
-  <v-card flat outlined rounded class="mx-3 my-3 rounded-xl">
-    <v-card-title primary-title>
+  <v-card flat variant="outlined" rounded="xl">
+    <v-card-title v-if="event.band" primary-title>
       <h3 class="headline mb-0">
         <v-icon
           v-if="hasUser"
-          class="ml-1 mr-1"
-          medium
+          class="ml-1 mr-1 text-medium-emphasis"
+          size="small"
           title="Dölj"
           @click="toggleIgnore('band', event.band.name)"
         >
           mdi-eye-off
-        </v-icon>{{ event.band.name }}
+        </v-icon>
+        {{ event.band.name }}
       </h3>
     </v-card-title>
-    <v-container>
-      <v-layout row wrap>
-        <v-flex
-          xs12
-          sm6
+    <v-card-text>
+      <v-row wrap>
+        <v-col
+          xs="12"
+          sm="6"
         >
           <strong class="mr-1" v-text="$t('events.date')" />{{
             event.date
           }}
           ({{ weekday }} {{ daysUntil }})
-        </v-flex>
-        <v-flex v-if="event.time" xs12 sm6>
+        </v-col>
+        <v-col v-if="event.time" xs="12" sm="6">
           <strong class="mr-1" v-text="$t('events.time')" />{{
             event.time
           }}
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap>
-        <v-flex
-          xs12
-          sm6
-          md3
+        </v-col>
+      </v-row>
+      <v-row v-if="event.danceHall" wrap>
+        <v-col
+          xs="12"
+          sm="6"
+          md="3"
         >
           <strong class="mr-1" v-text="$t('events.hall')" />
           <v-icon
             v-if="hasUser"
-            class="ml-1 mr-1"
-            small
+            class="ml-1 mr-1 text-medium-emphasis"
+            size="small"
             :title="$t('events.hide')"
             @click="toggleIgnore('danceHall', event.danceHall.name)"
           >
             mdi-eye-off
           </v-icon>
           {{ event.danceHall.name }}
-        </v-flex>
-        <v-flex
-          xs12
-          sm6
-          md3
+        </v-col>
+        <v-col
+          xs="12"
+          sm="6"
+          md="3"
         >
           <strong class="mr-1" v-text="$t('events.city')" />
           <v-icon
             v-if="hasUser"
-            class="ml-1 mr-1"
-            small
+            class="ml-1 mr-1 text-medium-emphasis"
+            size="small"
             :title="$t('events.hide')"
             @click="toggleIgnore('city', event.danceHall.city)"
           >
             mdi-eye-off
           </v-icon>
           {{ event.danceHall.city }}
-        </v-flex>
-        <v-flex
-          xs12
-          sm6
-          md3
+        </v-col>
+        <v-col
+          xs="12"
+          sm="6"
+          md="3"
         >
           <strong class="mr-1" v-text="$t('events.municipality')" />
           <v-icon
             v-if="hasUser"
-            class="ml-1 mr-1"
-            small
+            class="ml-1 mr-1 text-medium-emphasis"
+            size="small"
             :title="$t('events.hide')"
             @click="
               toggleIgnore('municipality', event.danceHall.municipality)
@@ -83,27 +84,27 @@
             mdi-eye-off
           </v-icon>
           {{ event.danceHall.municipality }}
-        </v-flex>
-        <v-flex
-          xs12
-          sm6
-          md3
+        </v-col>
+        <v-col
+          xs="12"
+          sm="6"
+          md="3"
         >
           <strong class="mr-1" v-text="$t('events.state')" />
           <v-icon
             v-if="hasUser"
-            class="ml-1 mr-1"
-            small
+            class="ml-1 mr-1 text-medium-emphasis"
+            size="small"
             :title="$t('events.hide')"
             @click="toggleIgnore('state', event.danceHall.state)"
           >
             mdi-eye-off
           </v-icon>
           {{ event.danceHall.state }}
-        </v-flex>
-      </v-layout>
+        </v-col>
+      </v-row>
       <distance-display v-for="distance in event.distances" :key="distance.origin" :distance="distance" />
-    </v-container>
+    </v-card-text>
   </v-card>
 </template>
 
@@ -112,30 +113,31 @@
 import { format, formatDistanceToNow, parseISO } from 'date-fns'
 
 import { enGB, sv } from 'date-fns/locale'
-import { computed, getCurrentInstance, PropType } from 'vue'
-import { Event } from '~/graphql/generated/operations'
-import DistanceDisplay from '~/components/pages/events/Event/distance.vue'
+import { computed, type PropType } from 'vue'
+import { useI18n } from '#i18n'
+import { type Event } from '~/graphql/generated/operations'
+import DistanceDisplay from '~/components/pages/events/event-distance.vue'
 
 const props = defineProps({
   event: {
     type: Object as PropType<Event>,
-    required: true
+    required: true,
   },
   hasUser: {
     type: Boolean,
-    required: true
+    required: true,
   },
   toggleIgnore: {
     type: Function,
-    required: true
-  }
+    required: true,
+  },
 })
-const instance = getCurrentInstance()
-const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv)
+const { locale: currentLocale } = useI18n()
+const locale = computed(() => (currentLocale.value ?? 'sv') === 'en' ? enGB : sv)
 const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
 const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))
 const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), {
   addSuffix: true,
-  locale: locale.value
+  locale: locale.value,
 }))
 </script>

components/pages/events/event-distance.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-row
+    wrap
+  >
+    <v-col xs="12" sm="6">
+      <v-icon class="me-1">
+        mdi-home
+      </v-icon>
+      <span><strong>{{ distance.origin }}</strong></span>
+    </v-col>
+    <v-col xs="12" sm="6">
+      <v-icon class="me-1">
+        mdi-car
+      </v-icon>
+      <span>{{ numericDistance }} km</span>
+      <v-icon class="ms-2 me-1">
+        mdi-clock-outline
+      </v-icon>
+      <span>{{ distance.duration }}</span>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang='ts'>
+import { computed, type PropType } from 'vue'
+import { type DanceHallDistance } from '~/graphql/generated/operations'
+
+const props = defineProps({
+  distance: {
+    type: Object as PropType<DanceHallDistance>,
+    required: true,
+  },
+})
+const numericDistance = computed(() =>
+  Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }))
+</script>

components/pages/events/event-list.vue

@@ -1,34 +1,34 @@
 <template>
   <div>
     <v-row v-for="event in events" :key="event.id" wrap>
-      <v-flex xs12>
+      <v-col xs="12">
         <event-card
           :event="event"
           :has-user="hasUser"
           :toggle-ignore="toggleIgnore"
         />
-      </v-flex>
+      </v-col>
     </v-row>
   </div>
 </template>
 
 <script setup lang='ts'>
 import { type PropType } from 'vue'
-import EventCard from '../Event/index.vue'
+import EventCard from './event-card.vue'
 import { type Event } from '~/graphql/generated/operations'
 
 defineProps({
   hasUser: {
     type: Boolean,
-    required: true
+    required: true,
   },
   toggleIgnore: {
     type: Function,
-    required: true
+    required: true,
   },
   events: {
     type: Array as PropType<Event[]>,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>

components/pages/events/event-page.vue

@@ -10,14 +10,15 @@
         <v-col xs="12">
           <v-text-field
             v-model="origin"
+            variant="underlined"
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
-            <template #append-outer>
+            <template #append>
               <v-tooltip top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
-                    v-on="on"
+                    v-bind="props"
                     @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
@@ -28,10 +29,10 @@
             </template>
             <template #prepend>
               <v-tooltip v-if="isAuthenticated" top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
                     :disabled="!origin"
-                    v-on="on"
+                    v-bind="props"
                     @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
@@ -46,20 +47,20 @@
       <v-row wrap>
         <v-col>
           <v-btn-toggle
-            v-if="$vuetify.breakpoint.smAndUp"
+            v-if="smAndUp"
             v-model="state.range"
             mandatory
           >
-            <v-btn v-for="r in ranges" :key="r.value" text :value="r.value">
+            <v-btn v-for="r in ranges" :key="r.value" variant="outlined" :value="r.value">
               <span v-text="$t(`events.range.${r.value}`)" />
             </v-btn>
           </v-btn-toggle>
           <v-select
             v-else
             v-model="state.range"
-            outline
+            variant="outlined"
             :items="ranges"
-            item-text="name"
+            item-title="name"
             item-value="value"
           />
         </v-col>
@@ -68,6 +69,7 @@
         <v-col cols="12" sm="8">
           <v-text-field
             v-model="state.search"
+            variant="underlined"
             append-outer-icon="mdi-magnify"
             :label="$t('events.filter')"
             :placeholder="$t('events.filter')"
@@ -95,11 +97,12 @@
 
 <script setup lang='ts'>
 import { computed, ref, watch } from 'vue'
-import EventList from './List/index.vue'
-import { useAuth } from '~/plugins/auth'
-import { useTranslation } from '~/plugins/i18n'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useDisplay } from 'vuetify'
+import { useI18n } from '#i18n'
+import EventList from './event-list.vue'
 import {
-  FindEventsQueryVariables,
+  type FindEventsQueryVariables,
   useFetchAddressLazyQuery,
   useFindEventsQuery,
   useSaveOriginMutation,
@@ -107,20 +110,21 @@ import {
   useToggleIgnoreCityMutation,
   useToggleIgnoreDanceHallMutation,
   useToggleIgnoreMunicipalityMutation,
-  useToggleIgnoreStateMutation
+  useToggleIgnoreStateMutation,
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
 const state = useState()
+const { smAndUp } = useDisplay()
 const range = computed(() => state.range)
-const { t } = useTranslation()
+const { t } = useI18n()
 state.setTitle(t('app.links.events'))
-const { isAuthenticated } = useAuth()
+const { isAuthenticated } = useAuth0()
 const variables = ref<FindEventsQueryVariables>({
   range: state.range,
   includeOrigins: isAuthenticated.value || false,
   search: state.search,
-  includeHidden: state.includeHidden
+  includeHidden: state.includeHidden,
 })
 const { result, refetch } = useFindEventsQuery(() => variables.value)
 watch([state, isAuthenticated], () => {
@@ -137,7 +141,7 @@ const ranges = [
   { name: '2 veckor', value: 'TWO_WEEKS' },
   { name: '1 månad', value: 'ONE_MONTH' },
   { name: '1 kvartal', value: 'ONE_QUARTER' },
-  { name: '1 år', value: 'ONE_YEAR' }
+  { name: '1 år', value: 'ONE_YEAR' },
 ]
 const snackbar = ref({ active: false, color: 'success', text: '' })
 
@@ -151,7 +155,7 @@ const fetchEvents = () => {
     ...variables.value,
     range: state.range,
     origins: originsTemp,
-    includeOrigins: isAuthenticated.value || false
+    includeOrigins: isAuthenticated.value || false,
   }
   refetch(variables.value)
 }
@@ -217,7 +221,7 @@ const fetchAddressFn = () => {
     window.navigator.geolocation.getCurrentPosition((pos) => {
       loadFetchAddress()
       doFetchAddress({
-        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
       })?.then((result) => {
         origin.value = result.data.address
       })

components/pages/filters/List/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <v-card flat outlined class="mx-3 my-3 rounded-xl">
-    <v-card-title>
-      <span v-text="$tc(title, model.length)" />
-    </v-card-title>
-    <v-list>
-      <v-list-item v-for="item in model" :key="item">
-        <v-list-item-action @click="toggleIgnore(type, item)">
-          <v-tooltip top>
-            <template #activator="{ on }">
-              <v-icon v-on="on">
-                mdi-delete-outline
-              </v-icon>
-            </template>
-            <span v-text="$t('filters.remove')" />
-          </v-tooltip>
-        </v-list-item-action>
-        <v-list-item-title><span v-text="item" /></v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-card>
-</template>
-
-<script setup lang='ts'>
-defineProps({
-  model: {
-    type: Array,
-    required: true
-  },
-  title: {
-    type: String,
-    required: true
-  },
-  type: {
-    type: String,
-    required: true
-  },
-  toggleIgnore: {
-    type: Function,
-    required: true
-  }
-})
-</script>

components/pages/filters/filter-list.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-card flat variant="outlined" rounded="xl" class="mx-3 my-3">
+    <v-card-title>
+      <span v-text="$t(title, model.length)" />
+    </v-card-title>
+    <v-list>
+      <v-list-item v-for="item in model" :key="item" :title="item">
+        <template #prepend>
+          <v-list-item-action @click="toggleIgnore(type, item)">
+            <v-tooltip top>
+              <template #activator="{ props }">
+                <v-icon v-bind="props">
+                  mdi-delete-outline
+                </v-icon>
+              </template>
+              <span v-text="$t('filters.remove')" />
+            </v-tooltip>
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script setup lang='ts'>
+defineProps({
+  model: {
+    type: Array,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  toggleIgnore: {
+    type: Function,
+    required: true,
+  },
+})
+</script>

components/pages/filters/filter-page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="isAuthenticated">
+  <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container fluid grid-list-md class="app-fade-in">
       <v-row wrap>
         <v-col cols="12">
@@ -62,23 +62,23 @@
 
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import List from './List/index.vue'
-import { useAuth } from '~/plugins/auth'
-import { useTranslation } from '~/plugins/i18n'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useI18n } from '#i18n'
+import List from './filter-list.vue'
 import {
   useFetchFiltersQuery,
   useToggleIgnoreBandMutation,
   useToggleIgnoreCityMutation,
   useToggleIgnoreDanceHallMutation,
   useToggleIgnoreMunicipalityMutation,
-  useToggleIgnoreStateMutation
+  useToggleIgnoreStateMutation,
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
 const state = useState()
-const { t } = useTranslation()
+const { t } = useI18n()
 state.setTitle(t('app.links.filters'))
-const { isAuthenticated } = useAuth()
+const { isAuthenticated } = useAuth0()
 const { result, refetch } = useFetchFiltersQuery()
 const bands = computed(() => result.value?.bands ?? [])
 const cities = computed(() => result.value?.cities ?? [])

components/pages/origins/origin-page.vue

@@ -2,17 +2,18 @@
   <div :key="isAuthenticated ? 'true' : 'false'">
     <v-container fluid grid-list-md class="app-fade-in">
       <v-layout row wrap>
-        <v-flex xs12>
+        <v-col xs="12">
           <v-text-field
             v-model="origin"
+            variant="underlined"
             :label="$t('origins.origin')"
             :placeholder="$t('origins.geolocation')"
           >
-            <template #append-outer>
+            <template #append>
               <v-tooltip top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
-                    v-on="on"
+                    v-bind="props"
                     @click="fetchAddressFn()"
                   >
                     mdi-crosshairs-gps
@@ -23,10 +24,10 @@
             </template>
             <template #prepend>
               <v-tooltip top>
-                <template #activator="{ on }">
+                <template #activator="{ props }">
                   <v-icon
                     :disabled="!origin"
-                    v-on="on"
+                    v-bind="props"
                     @click="saveOriginFn(origin)"
                   >
                     mdi-bookmark-plus-outline
@@ -36,14 +37,14 @@
               </v-tooltip>
             </template>
           </v-text-field>
-        </v-flex>
+        </v-col>
       </v-layout>
       <v-layout v-for="o in origins" :key="o" row wrap>
-        <v-flex xs12>
+        <v-col xs="12">
           <v-tooltip top>
-            <template #activator="{ on }">
+            <template #activator="{ props }">
               <v-icon
-                v-on="on"
+                v-bind="props"
                 @click="removeOriginFn(o)"
               >
                 mdi-delete-outline
@@ -52,7 +53,7 @@
             <span v-text="$t('origins.remove')" />
           </v-tooltip>
           <span>{{ o }}</span>
-        </v-flex>
+        </v-col>
       </v-layout>
     </v-container>
     <v-snackbar
@@ -67,20 +68,20 @@
 
 <script setup lang='ts'>
 import { computed, ref } from 'vue'
-import { useAuth } from '~/plugins/auth'
-import { useTranslation } from '~/plugins/i18n'
+import { useAuth0 } from '@auth0/auth0-vue'
+import { useI18n } from '#i18n'
 import {
   useFetchAddressLazyQuery,
   useFindOriginsQuery,
   useRemoveOriginMutation,
-  useSaveOriginMutation
+  useSaveOriginMutation,
 } from '~/graphql/generated/operations'
 import { useState } from '~/store'
 
 const state = useState()
-const { t } = useTranslation()
+const { t } = useI18n()
 state.setTitle(t('app.links.origins'))
-const { isAuthenticated } = useAuth()
+const { isAuthenticated } = useAuth0()
 const { result, refetch } = useFindOriginsQuery()
 const origins = computed(() => result.value?.origins ?? [])
 const snackbar = ref({ active: false, color: 'success', text: '' })
@@ -93,7 +94,7 @@ const fetchAddressFn = () => {
     window.navigator.geolocation.getCurrentPosition((pos) => {
       load()
       doFetchAddress({
-        latlng: `${pos.coords.latitude},${pos.coords.longitude}`
+        latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
       })?.then((res) => {
         origin.value = res.data.address
       })