fix(app): replace Vuetify 2 legacy props with proper V3 API
dancefinder-app / build (pull_request) Successful in 3m3s
dancefinder-app / deploy-prod (pull_request) Has been skipped

Replace deprecated V2 props that were being silently ignored:
- v-layout → v-row, grid-list-md removed, xs → cols on v-col
- v-tooltip top → location="top", v-list dense → density="compact"
- v-app-bar app/scroll-off-screen → scroll-behavior="hide"
- append-outer-icon → append-icon, remove primary-title
- headline class → text-h6, remove wrap from v-row

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-25 17:53:41 +01:00
parent 051585a70f
commit 348e0fa045
7 changed files with 35 additions and 40 deletions
+3 -8
View File
@@ -1,7 +1,7 @@
<template> <template>
<v-card flat variant="outlined" rounded="xl"> <v-card flat variant="outlined" rounded="xl">
<v-card-title v-if="event.band" primary-title> <v-card-title v-if="event.band">
<h3 class="headline mb-0"> <h3 class="text-h6 mb-0">
<v-icon <v-icon
v-if="hasUser" v-if="hasUser"
class="ml-1 mr-1 text-medium-emphasis" class="ml-1 mr-1 text-medium-emphasis"
@@ -17,7 +17,6 @@
<v-row dense> <v-row dense>
<v-col <v-col
cols="12" cols="12"
xs="12"
sm="6" sm="6"
> >
<strong class="mr-1" v-text="t('events.date')" />{{ <strong class="mr-1" v-text="t('events.date')" />{{
@@ -25,7 +24,7 @@
}} }}
({{ weekday }} {{ daysUntil }}) ({{ weekday }} {{ daysUntil }})
</v-col> </v-col>
<v-col v-if="event.time" cols="12" xs="12" sm="6"> <v-col v-if="event.time" cols="12" sm="6">
<strong class="mr-1" v-text="t('events.time')" />{{ <strong class="mr-1" v-text="t('events.time')" />{{
event.time event.time
}} }}
@@ -34,7 +33,6 @@
<v-row v-if="event.danceHall" dense> <v-row v-if="event.danceHall" dense>
<v-col <v-col
cols="12" cols="12"
xs="12"
sm="6" sm="6"
> >
<strong class="mr-1" v-text="t('events.hall')" /> <strong class="mr-1" v-text="t('events.hall')" />
@@ -50,7 +48,6 @@
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
xs="12"
sm="6" sm="6"
> >
<strong class="mr-1" v-text="t('events.city')" /> <strong class="mr-1" v-text="t('events.city')" />
@@ -66,7 +63,6 @@
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
xs="12"
sm="6" sm="6"
> >
<strong class="mr-1" v-text="t('events.municipality')" /> <strong class="mr-1" v-text="t('events.municipality')" />
@@ -84,7 +80,6 @@
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
xs="12"
sm="6" sm="6"
> >
<strong class="mr-1" v-text="t('events.state')" /> <strong class="mr-1" v-text="t('events.state')" />
+2 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<v-row v-for="event in events" :key="event.id" wrap> <v-row v-for="event in events" :key="event.id">
<v-col xs="12"> <v-col cols="12">
<event-card <event-card
:event="event" :event="event"
:has-user="hasUser" :has-user="hasUser"
+10 -10
View File
@@ -1,13 +1,13 @@
<template> <template>
<div :key="isAuthenticated ? 'true' : 'false'"> <div :key="isAuthenticated ? 'true' : 'false'">
<v-container :key="range" fluid grid-list-md class="app-fade-in"> <v-container :key="range" fluid class="app-fade-in">
<v-row v-if="!isAuthenticated" wrap> <v-row v-if="!isAuthenticated">
<v-col xs="12"> <v-col cols="12">
<p><b v-text="t('events.login')" /></p> <p><b v-text="t('events.login')" /></p>
</v-col> </v-col>
</v-row> </v-row>
<v-row wrap> <v-row>
<v-col xs="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="origin" v-model="origin"
variant="underlined" variant="underlined"
@@ -16,7 +16,7 @@
:placeholder="t('origins.geolocation')" :placeholder="t('origins.geolocation')"
> >
<template #append> <template #append>
<v-tooltip top> <v-tooltip location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon <v-icon
icon='mdi-crosshairs-gps' icon='mdi-crosshairs-gps'
@@ -28,7 +28,7 @@
</v-tooltip> </v-tooltip>
</template> </template>
<template #prepend> <template #prepend>
<v-tooltip v-if="isAuthenticated" top> <v-tooltip v-if="isAuthenticated" location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon <v-icon
icon='mdi-bookmark-plus-outline' icon='mdi-bookmark-plus-outline'
@@ -43,7 +43,7 @@
</v-text-field> </v-text-field>
</v-col> </v-col>
</v-row> </v-row>
<v-row wrap> <v-row>
<v-col> <v-col>
<v-btn-toggle <v-btn-toggle
v-if="smAndUp" v-if="smAndUp"
@@ -65,12 +65,12 @@
/> />
</v-col> </v-col>
</v-row> </v-row>
<v-row wrap> <v-row>
<v-col cols="12" sm="8"> <v-col cols="12" sm="8">
<v-text-field <v-text-field
v-model="state.search" v-model="state.search"
variant="underlined" variant="underlined"
append-outer-icon="mdi-magnify" append-icon="mdi-magnify"
:label="t('events.filter')" :label="t('events.filter')"
:placeholder="t('events.filter')" :placeholder="t('events.filter')"
hide-details hide-details
+1 -1
View File
@@ -7,7 +7,7 @@
<v-list-item v-for="item in model" :key="item" :title="item"> <v-list-item v-for="item in model" :key="item" :title="item">
<template #prepend> <template #prepend>
<v-list-item-action @click="toggleIgnore(type, item)"> <v-list-item-action @click="toggleIgnore(type, item)">
<v-tooltip top> <v-tooltip location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon icon='mdi-delete-outline' v-bind="props" /> <v-icon icon='mdi-delete-outline' v-bind="props" />
</template> </template>
+6 -6
View File
@@ -1,12 +1,12 @@
<template> <template>
<div :key="isAuthenticated ? 'true' : 'false'"> <div :key="isAuthenticated ? 'true' : 'false'">
<v-container fluid grid-list-md class="app-fade-in"> <v-container fluid class="app-fade-in">
<v-row wrap> <v-row>
<v-col cols="12"> <v-col cols="12">
<v-card> <v-card>
<v-container fluid grid-list-md> <v-container fluid>
<v-row wrap> <v-row>
<v-col xs="12" sm="12" md="4" lg="4"> <v-col cols="12" sm="12" md="4" lg="4">
<list <list
:model="bands || []" :model="bands || []"
title-key="filters.band" title-key="filters.band"
@@ -14,7 +14,7 @@
:toggle-ignore="toggleIgnore" :toggle-ignore="toggleIgnore"
/> />
</v-col> </v-col>
<v-col xs="12" sm="12" md="4" lg="4"> <v-col cols="12" sm="12" md="4" lg="4">
<v-row> <v-row>
<v-col cols="12"> <v-col cols="12">
<list <list
+10 -10
View File
@@ -1,8 +1,8 @@
<template> <template>
<div :key="isAuthenticated ? 'true' : 'false'"> <div :key="isAuthenticated ? 'true' : 'false'">
<v-container fluid grid-list-md class="app-fade-in"> <v-container fluid class="app-fade-in">
<v-layout row wrap> <v-row>
<v-col xs="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="origin" v-model="origin"
variant="underlined" variant="underlined"
@@ -10,7 +10,7 @@
:placeholder="t('origins.geolocation')" :placeholder="t('origins.geolocation')"
> >
<template #append> <template #append>
<v-tooltip top> <v-tooltip location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon <v-icon
icon='mdi-crosshairs-gps' icon='mdi-crosshairs-gps'
@@ -22,7 +22,7 @@
</v-tooltip> </v-tooltip>
</template> </template>
<template #prepend> <template #prepend>
<v-tooltip top> <v-tooltip location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon <v-icon
icon='mdi-bookmark-plus-outline' icon='mdi-bookmark-plus-outline'
@@ -36,10 +36,10 @@
</template> </template>
</v-text-field> </v-text-field>
</v-col> </v-col>
</v-layout> </v-row>
<v-layout v-for="o in origins" :key="o" row wrap> <v-row v-for="o in origins" :key="o">
<v-col xs="12"> <v-col cols="12">
<v-tooltip top> <v-tooltip location="top">
<template #activator="{ props }"> <template #activator="{ props }">
<v-icon <v-icon
icon='mdi-delete-outline' icon='mdi-delete-outline'
@@ -51,7 +51,7 @@
</v-tooltip> </v-tooltip>
<span>{{ o }}</span> <span>{{ o }}</span>
</v-col> </v-col>
</v-layout> </v-row>
</v-container> </v-container>
<v-snackbar <v-snackbar
v-model="snackbar.active" v-model="snackbar.active"
+3 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<v-app :key='locale + isAuthenticated'> <v-app :key='locale + isAuthenticated'>
<v-navigation-drawer v-model='nav' temporary app> <v-navigation-drawer v-model='nav' temporary>
<v-list dense> <v-list density="compact">
<v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' /> <v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
<v-list-item> <v-list-item>
<v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' /> <v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
@@ -35,7 +35,7 @@ v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
@click='doLogout' /> @click='doLogout' />
</v-list> </v-list>
</v-navigation-drawer> </v-navigation-drawer>
<v-app-bar app scroll-off-screen> <v-app-bar scroll-behavior="hide">
<v-app-bar-nav-icon @click='nav = !nav' /> <v-app-bar-nav-icon @click='nav = !nav' />
<v-toolbar-title :title='title' /> <v-toolbar-title :title='title' />
<v-spacer /> <v-spacer />