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 }"
:to="{ name: link.routerName }"
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"
>
<i

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

@ -49,27 +49,30 @@
<tbody>
<tr v-for="release in sortedData" :key="release.releaseID">
<router-link
tag="td"
custom
v-slot="{ navigate }"
class="flex items-center clickable"
:data-cm-link="release.releaseLink"
:to="{ name: 'Album', params: { id: release.releaseID } }"
>
<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>
<div>
<span class="flex hover:text-primary">
{{ release.releaseTitle }}
<i
v-if="checkNewRelease(release.releaseDate)"
class="material-icons title-icon title-icon--right title-icon--new"
>
fiber_new
</i>
</span>
<span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter">
{{ $tc(`globals.listTabs.${release.releaseType}`) }}
</span>
</div>
<td @click="navigate" @keypress.enter="navigate" role="link">
<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>
<div>
<span class="flex hover:text-primary">
{{ release.releaseTitle }}
<i
v-if="checkNewRelease(release.releaseDate)"
class="material-icons title-icon title-icon--right title-icon--new"
>
fiber_new
</i>
</span>
<span v-show="currentTab === 'all'" class="block text-xs opacity-50 uppercase-first-letter">
{{ $tc(`globals.listTabs.${release.releaseType}`) }}
</span>
</div>
</td>
</router-link>
<td class="w-32 text-center xl:w-40">{{ release.releaseDate }}</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
:to="{ name: 'Artist', params: { id: track.artist.id } }"
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
:to="{ name: 'Album', params: { id: track.album.id } }"
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>
<td class="table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}

46
src/components/pages/Favorites.vue
View File

@ -29,9 +29,11 @@
</div>
<div v-if="(playlists.length + spotifyPlaylists.length) > 0" class="release-grid">
<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">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<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" />
<p class="primary-text">{{ release.title }}</p>
</div>
</router-link>
<p class="secondary-text">
@ -45,9 +47,11 @@
</div>
<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">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<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" />
<p class="primary-text">{{ release.title }}</p>
</div>
</router-link>
<p class="secondary-text">
@ -72,11 +76,14 @@
:key="release.id"
:to="{ name: 'Album', params: { id: release.id } }"
class="release clickable"
tag="div"
custom
v-slot="{ navigate }"
>
<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link>
</div>
</div>
@ -91,10 +98,13 @@
:key="release.id"
:to="{ name: 'Artist', params: { id: release.id } }"
class="release clickable"
tag="div"
custom
v-slot="{ navigate }"
>
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
<p class="primary-text">{{ release.name }}</p>
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
<p class="primary-text">{{ release.name }}</p>
</div>
</router-link>
</div>
</div>
@ -127,16 +137,18 @@
<router-link
:to="{ name: 'Artist', params: { id: track.artist.id } }"
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
:to="{ name: 'Album', params: { id: track.album.id } }"
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>
<td class="table__cell--small">
{{ 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">
<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' }">
{{ $t('home.openSettings') }}
<router-link custom v-slot="{ navigate }" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
<button @click="navigate" @keypress.enter="navigate" role="link">{{ $t('home.openSettings') }}</button>
</router-link>
</section>
@ -15,22 +15,25 @@
<router-link
v-for="release in playlists"
:key="release.id"
tag="div"
custom
v-slot="{ navigate }"
class="release clickable"
:to="{ name: 'Playlist', params: { id: release.id } }"
tabindex="0"
@keyup.enter.native="$router.push({ name: 'Playlist', params: { id: release.id } })"
>
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</router-link>
</div>
</section>
@ -41,16 +44,19 @@
<router-link
v-for="release in albums"
:key="release.id"
tag="div"
custom
v-slot="{ navigate }"
class="release clickable"
:to="{ name: 'Album', params: { id: release.id } }"
:data-id="release.id"
tabindex="0"
@keyup.enter.native="$router.push({ name: 'Album', params: { id: release.id } })"
>
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</router-link>
</div>
</section>

58
src/components/pages/LinkAnalyzer.vue
View File

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

10
src/components/pages/Tracklist.vue
View File

@ -73,17 +73,19 @@
<router-link
:to="{ name: 'Artist', params: { id: track.artist.id } }"
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
v-if="type === 'playlist'"
:to="{ name: 'Album', params: { id: track.album.id } }"
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>
<td
: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-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 } }">
<CoverContainer
is-rounded
:cover="release.albumCoverMedium"
:link="release.albumLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<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
is-rounded
:cover="release.albumCoverMedium"
:link="release.albumLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<span class="primary-text">
<i
v-if="release.isAlbumExplicit"
class="material-icons title-icon"
style="font-size: 1.0625rem !important"
>
explicit
</i>
{{ release.albumTitle }}
</span>
<span class="primary-text">
<i
v-if="release.isAlbumExplicit"
class="material-icons title-icon"
style="font-size: 1.0625rem !important"
>
explicit
</i>
{{ release.albumTitle }}
</span>
</div>
</router-link>
<p class="secondary-text">

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

@ -10,17 +10,19 @@
<div v-else class="release-grid">
<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 } }">
<CoverContainer
is-circle
:cover="release.artistPictureMedium"
:link="release.artistLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<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
is-circle
:cover="release.artistPictureMedium"
:link="release.artistLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<span class="primary-text">
{{ release.artistName }}
</span>
<span class="primary-text">
{{ release.artistName }}
</span>
</div>
</router-link>
<!-- 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 v-else class="release-grid">
<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 } }">
<CoverContainer
is-rounded
:cover="playlist.playlistPictureMedium"
:link="playlist.playlistLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<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
is-rounded
:cover="playlist.playlistPictureMedium"
:link="playlist.playlistLink"
@click.stop="$emit('add-to-queue', $event)"
/>
<span class="primary-text">
{{ playlist.playlistTitle }}
</span>
<span class="primary-text">
{{ playlist.playlistTitle }}
</span>
</div>
</router-link>
<p class="secondary-text">

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

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

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

@ -1,22 +1,25 @@
<template>
<div class="flex flex-col items-center justify-center">
<router-link
tag="div"
custom
v-slot="{ navigate }"
class="cursor-pointer"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
>
<CoverContainer
class="w-40 h-40"
:is-rounded="$attrs.info.type !== 'artist'"
:is-circle="$attrs.info.type === 'artist'"
:cover="$attrs.info.picture"
:link="$attrs.info.link"
@click.stop="$emit('add-to-queue', $event)"
/>
<div @click="navigate" @keypress.enter="navigate" role="link">
<CoverContainer
class="w-40 h-40"
:is-rounded="$attrs.info.type !== 'artist'"
:is-circle="$attrs.info.type === 'artist'"
:cover="$attrs.info.picture"
: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">
{{ $attrs.info.title }}
</p>
<p class="mt-4 mb-1 text-xl text-center transition-colors duration-200 ease-in-out hover:text-primary">
{{ $attrs.info.title }}
</p>
</div>
</router-link>
<p class="mb-3 text-center secondary-text">