Fixed vue deprecation warnings for router-link

This commit is contained in:
RemixDev 2022-05-28 15:12:11 +02:00
parent b9d641e04b
commit d5117d9ee7
12 changed files with 188 additions and 143 deletions

View File

@ -15,7 +15,6 @@
:class="{ 'bg-background-main': activeTablink === link.name }" :class="{ 'bg-background-main': activeTablink === link.name }"
:to="{ name: link.routerName }" :to="{ name: link.routerName }"
class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground" class="relative flex items-center h-16 no-underline group main_tablinks hover:bg-background-main text-foreground"
tag="a"
@click.native="activeTablink = link.name" @click.native="activeTablink = link.name"
> >
<i <i

View File

@ -49,11 +49,13 @@
<tbody> <tbody>
<tr v-for="release in sortedData" :key="release.releaseID"> <tr v-for="release in sortedData" :key="release.releaseID">
<router-link <router-link
tag="td" custom
v-slot="{ navigate }"
class="flex items-center clickable" class="flex items-center clickable"
:data-cm-link="release.releaseLink" :data-cm-link="release.releaseLink"
:to="{ name: 'Album', params: { id: release.releaseID } }" :to="{ name: 'Album', params: { id: release.releaseID } }"
> >
<td @click="navigate" @keypress.enter="navigate" role="link">
<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" /> <img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
<i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i> <i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i>
<div> <div>
@ -70,6 +72,7 @@
{{ $tc(`globals.listTabs.${release.releaseType}`) }} {{ $tc(`globals.listTabs.${release.releaseType}`) }}
</span> </span>
</div> </div>
</td>
</router-link> </router-link>
<td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</td> <td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</td>
<td class="w-20 text-center xl:w-32">{{ release.releaseTracksNumber }}</td> <td class="w-20 text-center xl:w-32">{{ release.releaseTracksNumber }}</td>

View File

@ -51,16 +51,18 @@
<router-link <router-link
:to="{ name: 'Artist', params: { id: track.artist.id } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell table__cell--medium table__cell--center clickable" class="table__cell table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.artist.name }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
</router-link> </router-link>
<router-link <router-link
:to="{ name: 'Album', params: { id: track.album.id } }" :to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable" class="table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.album.title }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
</router-link> </router-link>
<td class="table__cell--small table__cell--center"> <td class="table__cell--small table__cell--center">
{{ convertDuration(track.duration) }} {{ convertDuration(track.duration) }}

View File

@ -29,9 +29,11 @@
</div> </div>
<div v-if="(playlists.length + spotifyPlaylists.length) > 0" class="release-grid"> <div v-if="(playlists.length + spotifyPlaylists.length) > 0" class="release-grid">
<div v-for="release in playlists" :key="release.id" class="release"> <div v-for="release in playlists" :key="release.id" class="release">
<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div"> <router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</div>
</router-link> </router-link>
<p class="secondary-text"> <p class="secondary-text">
@ -45,9 +47,11 @@
</div> </div>
<div v-for="release in spotifyPlaylists" :key="release.id" class="release"> <div v-for="release in spotifyPlaylists" :key="release.id" class="release">
<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div"> <router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" custom v-slot="{ navigate }">
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</div>
</router-link> </router-link>
<p class="secondary-text"> <p class="secondary-text">
@ -72,11 +76,14 @@
:key="release.id" :key="release.id"
:to="{ name: 'Album', params: { id: release.id } }" :to="{ name: 'Album', params: { id: release.id } }"
class="release clickable" class="release clickable"
tag="div" custom
v-slot="{ navigate }"
> >
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link> </router-link>
</div> </div>
</div> </div>
@ -91,10 +98,13 @@
:key="release.id" :key="release.id"
:to="{ name: 'Artist', params: { id: release.id } }" :to="{ name: 'Artist', params: { id: release.id } }"
class="release clickable" class="release clickable"
tag="div" custom
v-slot="{ navigate }"
> >
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
<p class="primary-text">{{ release.name }}</p> <p class="primary-text">{{ release.name }}</p>
</div>
</router-link> </router-link>
</div> </div>
</div> </div>
@ -127,16 +137,18 @@
<router-link <router-link
:to="{ name: 'Artist', params: { id: track.artist.id } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell table__cell--medium table__cell--center clickable" class="table__cell table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.artist.name }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
</router-link> </router-link>
<router-link <router-link
:to="{ name: 'Album', params: { id: track.album.id } }" :to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable" class="table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.album.title }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
</router-link> </router-link>
<td class="table__cell--small"> <td class="table__cell--small">
{{ convertDuration(track.duration) }} {{ convertDuration(track.duration) }}

View File

@ -4,8 +4,8 @@
<section v-if="!isLoggedIn" ref="notLogged" class="py-6 border-0 border-t border-solid border-grayscale-500"> <section v-if="!isLoggedIn" ref="notLogged" class="py-6 border-0 border-t border-solid border-grayscale-500">
<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p> <p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Settings' }"> <router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
{{ $t('home.openSettings') }} <button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('home.openSettings') }}</button>
</router-link> </router-link>
</section> </section>
@ -15,12 +15,14 @@
<router-link <router-link
v-for="release in playlists" v-for="release in playlists"
:key="release.id" :key="release.id"
tag="div" custom
v-slot="{ navigate }"
class="release clickable" class="release clickable"
:to="{ name: 'Playlist', params: { id: release.id } }" :to="{ name: 'Playlist', params: { id: release.id } }"
tabindex="0" tabindex="0"
@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })" @keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
> >
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <p class="secondary-text">
@ -31,6 +33,7 @@
)}` )}`
}} }}
</p> </p>
</div>
</router-link> </router-link>
</div> </div>
</section> </section>
@ -41,16 +44,19 @@
<router-link <router-link
v-for="release in albums" v-for="release in albums"
:key="release.id" :key="release.id"
tag="div" custom
v-slot="{ navigate }"
class="release clickable" class="release clickable"
:to="{ name: 'Album', params: { id: release.id } }" :to="{ name: 'Album', params: { id: release.id } }"
:data-id="release.id" :data-id="release.id"
tabindex="0" tabindex="0"
@keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })" @keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })"
> >
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link> </router-link>
</div> </div>
</section> </section>

View File

@ -27,37 +27,43 @@
<h1 class="m-0">{{ title }}</h1> <h1 class="m-0">{{ title }}</h1>
<h2 v-if="type === 'track'" class="m-0 mb-3 text-lg"> <h2 v-if="type === 'track'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span"> <i18n path="globals.by" tag="span">
<template #artist>
<router-link <router-link
tag="span" custom
place="artist" v-slot="{ navigate }"
class="clickable" class="clickable"
:to="{ name: 'Artist', params: { id: data.artist.id } }" :to="{ name: 'Artist', params: { id: data.artist.id } }"
> >
{{ data.artist.name }} <span place="artist" @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
</router-link> </router-link>
</template>
</i18n> </i18n>
<i18n path="globals.in" tag="span"> <i18n path="globals.in" tag="span">
<template #album>
<router-link <router-link
tag="span" custom
place="album" v-slot="{ navigate }"
class="clickable" class="clickable"
:to="{ name: 'Album', params: { id: data.album.id } }" :to="{ name: 'Album', params: { id: data.album.id } }"
> >
{{ data.album.title }} <span @click="navigate" @keypress.enter="navigate" role="link">{{ data.album.title }}</span>
</router-link> </router-link>
</template>
</i18n> </i18n>
</h2> </h2>
<h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg"> <h2 v-else-if="type === 'album'" class="m-0 mb-3 text-lg">
<i18n path="globals.by" tag="span"> <i18n path="globals.by" tag="span">
<template #artist>
<router-link <router-link
tag="span" custom
place="artist" v-slot="{ navigate }"
class="clickable" class="clickable"
:to="{ name: 'Artist', params: { id: data.artist.id } }" :to="{ name: 'Artist', params: { id: data.artist.id } }"
> >
{{ data.artist.name }} <span @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
</router-link> </router-link>
</template>
</i18n> </i18n>
{{ `${$tc('globals.listTabs.trackN', data.nb_tracks)}` }} {{ `${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
</h2> </h2>
@ -137,8 +143,8 @@
</template> </template>
<div v-if="type === 'album'"> <div v-if="type === 'album'">
<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }"> <router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
{{ $t('linkAnalyzer.table.tracklist') }} <button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('linkAnalyzer.table.tracklist') }}</button>
</router-link> </router-link>
</div> </div>
</div> </div>

View File

@ -73,17 +73,19 @@
<router-link <router-link
:to="{ name: 'Artist', params: { id: track.artist.id } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell--medium table__cell--center clickable" class="table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.artist.name }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
</router-link> </router-link>
<router-link <router-link
v-if="type === 'playlist'" v-if="type === 'playlist'"
:to="{ name: 'Album', params: { id: track.album.id } }" :to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable" class="table__cell--medium table__cell--center clickable"
tag="td" custom
v-slot="{ navigate }"
> >
{{ track.album.title }} <td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
</router-link> </router-link>
<td <td
:class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }" :class="{ 'table__cell--small': type === 'album', 'table__cell--x-small': type === 'playlist' }"

View File

@ -10,7 +10,8 @@
<div v-else class="release-grid"> <div v-else class="release-grid">
<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID" class="w-40 release"> <div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.albumID" class="w-40 release">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }"> <router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Album', params: { id: release.albumID } }">
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer <CoverContainer
is-rounded is-rounded
:cover="release.albumCoverMedium" :cover="release.albumCoverMedium"
@ -28,6 +29,7 @@
</i> </i>
{{ release.albumTitle }} {{ release.albumTitle }}
</span> </span>
</div>
</router-link> </router-link>
<p class="secondary-text"> <p class="secondary-text">

View File

@ -10,7 +10,8 @@
<div v-else class="release-grid"> <div v-else class="release-grid">
<div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID" class="w-40 release"> <div v-for="release in viewInfo.data.slice(0, itemsToShow)" :key="release.artistID" class="w-40 release">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }"> <router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Artist', params: { id: release.artistID } }">
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer <CoverContainer
is-circle is-circle
:cover="release.artistPictureMedium" :cover="release.artistPictureMedium"
@ -21,6 +22,7 @@
<span class="primary-text"> <span class="primary-text">
{{ release.artistName }} {{ release.artistName }}
</span> </span>
</div>
</router-link> </router-link>
<!-- TODO Fix, depending on the tab there are albums number or fans number --> <!-- TODO Fix, depending on the tab there are albums number or fans number -->

View File

@ -9,7 +9,8 @@
</div> </div>
<div v-else class="release-grid"> <div v-else class="release-grid">
<div v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID" class="w-40 release"> <div v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID" class="w-40 release">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }"> <router-link custom v-slot="{ navigate }" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: playlist.playlistID } }">
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer <CoverContainer
is-rounded is-rounded
:cover="playlist.playlistPictureMedium" :cover="playlist.playlistPictureMedium"
@ -20,6 +21,7 @@
<span class="primary-text"> <span class="primary-text">
{{ playlist.playlistTitle }} {{ playlist.playlistTitle }}
</span> </span>
</div>
</router-link> </router-link>
<p class="secondary-text"> <p class="secondary-text">

View File

@ -43,23 +43,29 @@
</td> </td>
<router-link <router-link
tag="td" custom
v-slot="{ navigate }"
class="break-words table__cell table__cell--medium table__cell--center" class="break-words table__cell table__cell--medium table__cell--center"
:to="{ name: 'Artist', params: { id: track.artistID } }" :to="{ name: 'Artist', params: { id: track.artistID } }"
> >
<td @click="navigate" @keypress.enter="navigate" role="link">
<span class="cursor-pointer hover:underline"> <span class="cursor-pointer hover:underline">
{{ track.artistName }} {{ track.artistName }}
</span> </span>
</td>
</router-link> </router-link>
<router-link <router-link
tag="td" custom
v-slot="{ navigate }"
class="break-words table__cell table__cell--medium table__cell--center" class="break-words table__cell table__cell--medium table__cell--center"
:to="{ name: 'Album', params: { id: track.albumID } }" :to="{ name: 'Album', params: { id: track.albumID } }"
> >
<td @click="navigate" @keypress.enter="navigate" role="link">
<span class="cursor-pointer hover:underline"> <span class="cursor-pointer hover:underline">
{{ track.albumTitle }} {{ track.albumTitle }}
</span> </span>
</td>
</router-link> </router-link>
<td class="table__cell table__cell--small table__cell--center"> <td class="table__cell table__cell--small table__cell--center">

View File

@ -1,10 +1,12 @@
<template> <template>
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<router-link <router-link
tag="div" custom
v-slot="{ navigate }"
class="cursor-pointer" class="cursor-pointer"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }" :to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
> >
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer <CoverContainer
class="w-40 h-40" class="w-40 h-40"
:is-rounded="$attrs.info.type !== 'artist'" :is-rounded="$attrs.info.type !== 'artist'"
@ -17,6 +19,7 @@
<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary"> <p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
{{ $attrs.info.title }} {{ $attrs.info.title }}
</p> </p>
</div>
</router-link> </router-link>
<p class="mb-3 text-center secondary-text"> <p class="mb-3 text-center secondary-text">