diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue index 281040d..e3bba0f 100644 --- a/src/components/TheSidebar.vue +++ b/src/components/TheSidebar.vue @@ -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 diff --git a/src/components/pages/Artist.vue b/src/components/pages/Artist.vue index 8f2f281..be6504b 100644 --- a/src/components/pages/Artist.vue +++ b/src/components/pages/Artist.vue @@ -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> diff --git a/src/components/pages/Charts.vue b/src/components/pages/Charts.vue index 027baad..62ab262 100644 --- a/src/components/pages/Charts.vue +++ b/src/components/pages/Charts.vue @@ -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) }} diff --git a/src/components/pages/Favorites.vue b/src/components/pages/Favorites.vue index c6ccec6..7b1cf09 100644 --- a/src/components/pages/Favorites.vue +++ b/src/components/pages/Favorites.vue @@ -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) }} diff --git a/src/components/pages/Home.vue b/src/components/pages/Home.vue index f2b530e..18770de 100644 --- a/src/components/pages/Home.vue +++ b/src/components/pages/Home.vue @@ -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> diff --git a/src/components/pages/LinkAnalyzer.vue b/src/components/pages/LinkAnalyzer.vue index 1d1f62e..38cb2bd 100644 --- a/src/components/pages/LinkAnalyzer.vue +++ b/src/components/pages/LinkAnalyzer.vue @@ -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> diff --git a/src/components/pages/Tracklist.vue b/src/components/pages/Tracklist.vue index 4719cb6..8893ebf 100644 --- a/src/components/pages/Tracklist.vue +++ b/src/components/pages/Tracklist.vue @@ -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' }" diff --git a/src/components/search/ResultsAlbums.vue b/src/components/search/ResultsAlbums.vue index 37f1a96..98c4166 100644 --- a/src/components/search/ResultsAlbums.vue +++ b/src/components/search/ResultsAlbums.vue @@ -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"> diff --git a/src/components/search/ResultsArtists.vue b/src/components/search/ResultsArtists.vue index fc408ba..6f48b80 100644 --- a/src/components/search/ResultsArtists.vue +++ b/src/components/search/ResultsArtists.vue @@ -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 --> diff --git a/src/components/search/ResultsPlaylists.vue b/src/components/search/ResultsPlaylists.vue index d0ffa1c..2e45859 100644 --- a/src/components/search/ResultsPlaylists.vue +++ b/src/components/search/ResultsPlaylists.vue @@ -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"> diff --git a/src/components/search/ResultsTracks.vue b/src/components/search/ResultsTracks.vue index 7dbc620..807b7f1 100644 --- a/src/components/search/ResultsTracks.vue +++ b/src/components/search/ResultsTracks.vue @@ -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"> diff --git a/src/components/search/TopResult.vue b/src/components/search/TopResult.vue index 7b537ac..86a2069 100644 --- a/src/components/search/TopResult.vue +++ b/src/components/search/TopResult.vue @@ -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">