danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/TheSidebar.vue
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

37
src/components/pages/Artist.vue
View File

@ -49,27 +49,30 @@
<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 } }"
> >
<img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" /> <td @click="navigate" @keypress.enter="navigate" role="link">
<i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i> <img class="mr-4 rounded coverart" :src="release.releaseCover" style="width: 56px; height: 56px" />
<div> <i v-if="release.isReleaseExplicit" class="material-icons title-icon title-icon--explicit">explicit</i>
<span class="flex hover:text-primary"> <div>
{{ release.releaseTitle }} <span class="flex hover:text-primary">
<i {{ release.releaseTitle }}
v-if="checkNewRelease(release.releaseDate)" <i
class="material-icons title-icon title-icon--right title-icon--new" v-if="checkNewRelease(release.releaseDate)"
> class="material-icons title-icon title-icon--right title-icon--new"
fiber_new >
</i> fiber_new
</span> </i>
<span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter"> </span>
{{ $tc(`globals.listTabs.${release.releaseType}`) }} <span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter">
</span> {{ $tc(`globals.listTabs.${release.releaseType}`) }}
</div> </span>
</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>

10
src/components/pages/Charts.vue
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) }}

46
src/components/pages/Favorites.vue
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 }">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.title }}</p> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<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 }">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.title }}</p> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<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 }"
> >
<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.title }}</p> <CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="primary-text">{{ release.title }}</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 }"
> >
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.name }}</p> <CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
<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) }}

40
src/components/pages/Home.vue
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,22 +15,25 @@
<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 } })"
> >
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.title }}</p> <CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="secondary-text"> <p class="primary-text">{{ release.title }}</p>
{{ <p class="secondary-text">
`${$t('globals.by', { artist: release.user.name })} - ${$tc( {{
'globals.listTabs.trackN', `${$t('globals.by', { artist: release.user.name })} - ${$tc(
release.nb_tracks 'globals.listTabs.trackN',
)}` release.nb_tracks
}} )}`
</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 } })"
> >
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" /> <div @click="navigate" @keypress.enter="navigate" role="link">
<p class="primary-text">{{ release.title }}</p> <CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link> </router-link>
</div> </div>
</section> </section>

58
src/components/pages/LinkAnalyzer.vue
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">
<router-link <template #artist>
tag="span" <router-link
place="artist" custom
class="clickable" v-slot="{ navigate }"
:to="{ name: 'Artist', params: { id: data.artist.id } }" class="clickable"
> :to="{ name: 'Artist', params: { id: data.artist.id } }"
{{ data.artist.name }} >
</router-link> <span place="artist" @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
</router-link>
</template>
</i18n> </i18n>
• •
<i18n path="globals.in" tag="span"> <i18n path="globals.in" tag="span">
<router-link <template #album>
tag="span" <router-link
place="album" custom
class="clickable" v-slot="{ navigate }"
:to="{ name: 'Album', params: { id: data.album.id } }" class="clickable"
> :to="{ name: 'Album', params: { id: data.album.id } }"
{{ data.album.title }} >
</router-link> <span @click="navigate" @keypress.enter="navigate" role="link">{{ data.album.title }}</span>
</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">
<router-link <template #artist>
tag="span" <router-link
place="artist" custom
class="clickable" v-slot="{ navigate }"
:to="{ name: 'Artist', params: { id: data.artist.id } }" class="clickable"
> :to="{ name: 'Artist', params: { id: data.artist.id } }"
{{ data.artist.name }} >
</router-link> <span @click="navigate" @keypress.enter="navigate" role="link">{{ data.artist.name }}</span>
</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>

10
src/components/pages/Tracklist.vue
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' }"

36
src/components/search/ResultsAlbums.vue
View File

@ -10,24 +10,26 @@
<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 } }">
<CoverContainer <div @click="navigate" @keypress.enter="navigate" role="link">
is-rounded <CoverContainer
:cover="release.albumCoverMedium" is-rounded
:link="release.albumLink" :cover="release.albumCoverMedium"
@click.stop="$emit('add-to-queue', $event)" :link="release.albumLink"
/> @click.stop="$emit('add-to-queue', $event)"
/>
<span class="primary-text"> <span class="primary-text">
<i <i
v-if="release.isAlbumExplicit" v-if="release.isAlbumExplicit"
class="material-icons title-icon" class="material-icons title-icon"
style="font-size: 1.0625rem !important" style="font-size: 1.0625rem !important"
> >
explicit explicit
</i> </i>
{{ release.albumTitle }} {{ release.albumTitle }}
</span> </span>
</div>
</router-link> </router-link>
<p class="secondary-text"> <p class="secondary-text">

22
src/components/search/ResultsArtists.vue
View File

@ -10,17 +10,19 @@
<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 } }">
<CoverContainer <div @click="navigate" @keypress.enter="navigate" role="link">
is-circle <CoverContainer
:cover="release.artistPictureMedium" is-circle
:link="release.artistLink" :cover="release.artistPictureMedium"
@click.stop="$emit('add-to-queue', $event)" :link="release.artistLink"
/> @click.stop="$emit('add-to-queue', $event)"
/>
<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 -->

22
src/components/search/ResultsPlaylists.vue
View File

@ -9,17 +9,19 @@
</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 } }">
<CoverContainer <div @click="navigate" @keypress.enter="navigate" role="link">
is-rounded <CoverContainer
:cover="playlist.playlistPictureMedium" is-rounded
:link="playlist.playlistLink" :cover="playlist.playlistPictureMedium"
@click.stop="$emit('add-to-queue', $event)" :link="playlist.playlistLink"
/> @click.stop="$emit('add-to-queue', $event)"
/>
<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">

22
src/components/search/ResultsTracks.vue
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 } }"
> >
<span class="cursor-pointer hover:underline"> <td @click="navigate" @keypress.enter="navigate" role="link">
{{ track.artistName }} <span class="cursor-pointer hover:underline">
</span> {{ track.artistName }}
</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 } }"
> >
<span class="cursor-pointer hover:underline"> <td @click="navigate" @keypress.enter="navigate" role="link">
{{ track.albumTitle }} <span class="cursor-pointer hover:underline">
</span> {{ track.albumTitle }}
</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">

27
src/components/search/TopResult.vue
View File

@ -1,22 +1,25 @@
<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 } }"
> >
<CoverContainer <div @click="navigate" @keypress.enter="navigate" role="link">
class="w-40 h-40" <CoverContainer
:is-rounded="$attrs.info.type !== 'artist'" class="w-40 h-40"
:is-circle="$attrs.info.type === 'artist'" :is-rounded="$attrs.info.type !== 'artist'"
:cover="$attrs.info.picture" :is-circle="$attrs.info.type === 'artist'"
:link="$attrs.info.link" :cover="$attrs.info.picture"
@click.stop="$emit('add-to-queue', $event)" :link="$attrs.info.link"
/> @click.stop="$emit('add-to-queue', $event)"
/>
<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">