[web] Streamline the name of components

This commit is contained in:
Alain Nussbaumer 2025-05-13 18:37:26 +02:00
parent d010f8f655
commit f830949af1
42 changed files with 134 additions and 144 deletions

File diff suppressed because one or more lines are too long

View File

@ -20,7 +20,7 @@
import ControlButton from '@/components/ControlButton.vue'
export default {
name: 'HeadingHero',
name: 'PaneHero',
components: { ControlButton },
props: { content: { required: true, type: Object } }
}

View File

@ -18,7 +18,7 @@
<script>
export default {
name: 'HeadingTitle',
name: 'PaneTitle',
props: { content: { required: true, type: Object } }
}
</script>

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="{ title: $t('page.about.library') }" />
<pane-title :content="{ title: $t('page.about.library') }" />
</template>
<template #actions>
<control-button
@ -83,14 +83,14 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import { useConfigurationStore } from '@/stores/configuration'
import { useLibraryStore } from '@/stores/library'
import { useUIStore } from '@/stores/ui'
export default {
name: 'PageAbout',
components: { ContentWithHeading, ControlButton, HeadingTitle },
components: { ContentWithHeading, ControlButton, PaneTitle },
setup() {
return {
configurationStore: useConfigurationStore(),

View File

@ -1,7 +1,7 @@
<template>
<content-with-hero>
<template #heading>
<heading-hero :content="heading" />
<pane-hero :content="heading" />
</template>
<template #image>
<control-image
@ -26,7 +26,7 @@
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingHero from '@/components/HeadingHero.vue'
import PaneHero from '@/components/PaneHero.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import library from '@/api/library'
@ -37,7 +37,7 @@ export default {
components: {
ContentWithHero,
ControlImage,
HeadingHero,
PaneHero,
ListTracks,
ModalDialogAlbum
},

View File

@ -1,7 +1,7 @@
<template>
<content-with-hero>
<template #heading>
<heading-hero :content="heading" />
<pane-hero :content="heading" />
</template>
<template #image>
<control-image
@ -25,7 +25,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlImage from '@/components/ControlImage.vue'
import HeadingHero from '@/components/HeadingHero.vue'
import PaneHero from '@/components/PaneHero.vue'
import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -38,7 +38,7 @@ export default {
components: {
ContentWithHero,
ControlImage,
HeadingHero,
PaneHero,
ListTracksSpotify,
ModalDialogAlbumSpotify
},

View File

@ -34,7 +34,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-albums :items="albums" />
@ -47,10 +47,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListOptions from '@/components/ListOptions.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import library from '@/api/library'
import { useServicesStore } from '@/stores/services'
@ -62,10 +62,10 @@ export default {
ContentWithHeading,
ControlDropdown,
ControlSwitch,
HeadingTitle,
ListIndexButtons,
ListAlbums,
ListOptions,
PaneTitle,
TabsMusic
},
beforeRouteEnter(to, from, next) {

View File

@ -24,7 +24,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -51,10 +51,10 @@ import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListOptions from '@/components/ListOptions.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import library from '@/api/library'
import queue from '@/api/queue'
import { useServicesStore } from '@/stores/services'
@ -67,10 +67,10 @@ export default {
ControlButton,
ControlDropdown,
ControlSwitch,
HeadingTitle,
ListAlbums,
ListOptions,
ModalDialogArtist
ModalDialogArtist,
PaneTitle
},
beforeRouteEnter(to, from, next) {
Promise.all([

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -25,7 +25,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import ModalDialogArtistSpotify from '@/components/ModalDialogArtistSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -40,7 +40,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListAlbumsSpotify,
ModalDialogArtistSpotify
},

View File

@ -25,7 +25,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -52,11 +52,11 @@ import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import library from '@/api/library'
import queue from '@/api/queue'
import { useServicesStore } from '@/stores/services'
@ -69,11 +69,11 @@ export default {
ControlButton,
ControlDropdown,
ControlSwitch,
HeadingTitle,
ListIndexButtons,
ListOptions,
ListTracks,
ModalDialogArtist
ModalDialogArtist,
PaneTitle
},
beforeRouteEnter(to, from, next) {
Promise.all([

View File

@ -34,7 +34,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-artists :items="artists" />
@ -47,10 +47,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListArtists from '@/components/ListArtists.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListOptions from '@/components/ListOptions.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import library from '@/api/library'
import { useServicesStore } from '@/stores/services'
@ -62,10 +62,10 @@ export default {
ContentWithHeading,
ControlDropdown,
ControlSwitch,
HeadingTitle,
ListIndexButtons,
ListArtists,
ListOptions,
PaneTitle,
TabsMusic
},
beforeRouteEnter(to, from, next) {

View File

@ -1,7 +1,7 @@
<template>
<content-with-hero>
<template #heading>
<heading-hero :content="heading" />
<pane-hero :content="heading" />
</template>
<template #image>
<control-image
@ -27,7 +27,7 @@
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingHero from '@/components/HeadingHero.vue'
import PaneHero from '@/components/PaneHero.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import library from '@/api/library'
@ -38,7 +38,7 @@ export default {
components: {
ContentWithHero,
ControlImage,
HeadingHero,
PaneHero,
ListTracks,
ModalDialogAlbum
},

View File

@ -5,7 +5,7 @@
<list-index-buttons :indices="albums.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-albums :items="albums" />
@ -16,9 +16,9 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
import library from '@/api/library'
@ -26,9 +26,9 @@ export default {
name: 'PageAudiobooksAlbums',
components: {
ContentWithHeading,
HeadingTitle,
ListIndexButtons,
ListAlbums,
PaneTitle,
TabsAudiobooks
},
beforeRouteEnter(to, from, next) {

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -26,9 +26,9 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import library from '@/api/library'
import queue from '@/api/queue'
@ -37,9 +37,9 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
ListAlbums,
ModalDialogArtist
ModalDialogArtist,
PaneTitle
},
beforeRouteEnter(to, from, next) {
Promise.all([

View File

@ -5,7 +5,7 @@
<list-index-buttons :indices="artists.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-artists :items="artists" />
@ -16,9 +16,9 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListArtists from '@/components/ListArtists.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
import library from '@/api/library'
@ -26,9 +26,9 @@ export default {
name: 'PageAudiobooksArtists',
components: {
ContentWithHeading,
HeadingTitle,
ListIndexButtons,
ListArtists,
PaneTitle,
TabsAudiobooks
},
beforeRouteEnter(to, from, next) {

View File

@ -5,7 +5,7 @@
<list-index-buttons :indices="genres.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-genres :items="genres" media-kind="audiobook" />
@ -16,7 +16,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListGenres from '@/components/ListGenres.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
@ -26,7 +26,7 @@ export default {
name: 'PageAudiobooksGenres',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListGenres,
TabsAudiobooks

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -26,7 +26,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
import library from '@/api/library'
@ -37,7 +37,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListAlbums,
ModalDialogComposer
},

View File

@ -12,7 +12,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -38,7 +38,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue'
@ -53,7 +53,7 @@ export default {
ContentWithHeading,
ControlButton,
ControlDropdown,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListOptions,
ListTracks,

View File

@ -5,7 +5,7 @@
<list-index-buttons :indices="composers.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-composers :items="composers" />
@ -16,7 +16,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListComposers from '@/components/ListComposers.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import TabsMusic from '@/components/TabsMusic.vue'
@ -26,7 +26,7 @@ export default {
name: 'PageComposers',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListComposers,
TabsMusic

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="{ title: name }" />
<pane-title :content="{ title: name }" />
</template>
<template #actions>
<control-button
@ -28,7 +28,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListDirectories from '@/components/ListDirectories.vue'
import ListPlaylists from '@/components/ListPlaylists.vue'
import ListTracks from '@/components/ListTracks.vue'
@ -43,7 +43,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListDirectories,
ListPlaylists,
ListTracks,

View File

@ -4,7 +4,7 @@
<list-index-buttons :indices="albums.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -30,7 +30,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@ -42,7 +42,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListAlbums,
ModalDialogGenre

View File

@ -12,7 +12,7 @@
</list-options>
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -39,7 +39,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import ControlDropdown from '@/components/ControlDropdown.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListOptions from '@/components/ListOptions.vue'
import ListTracks from '@/components/ListTracks.vue'
@ -54,7 +54,7 @@ export default {
ContentWithHeading,
ControlButton,
ControlDropdown,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListOptions,
ListTracks,

View File

@ -5,7 +5,7 @@
<list-index-buttons :indices="genres.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-genres :items="genres" media-kind="music" />
@ -16,7 +16,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListGenres from '@/components/ListGenres.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import TabsMusic from '@/components/TabsMusic.vue'
@ -26,7 +26,7 @@ export default {
name: 'PageGenres',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListGenres,
TabsMusic

View File

@ -2,9 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title
:content="{ title: $t('page.music.recently-added.title') }"
/>
<pane-title :content="{ title: $t('page.music.recently-added.title') }" />
</template>
<template #content>
<list-albums :items="albums" />
@ -20,7 +18,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.music.recently-played.title') }"
/>
</template>
@ -41,9 +39,9 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListTracks from '@/components/ListTracks.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import library from '@/api/library'
@ -51,9 +49,9 @@ export default {
name: 'PageMusic',
components: {
ContentWithHeading,
HeadingTitle,
ListAlbums,
ListTracks,
PaneTitle,
TabsMusic
},
beforeRouteEnter(to, from, next) {

View File

@ -2,9 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title
:content="{ title: $t('page.music.recently-added.title') }"
/>
<pane-title :content="{ title: $t('page.music.recently-added.title') }" />
</template>
<template #content>
<list-albums :items="albums" />
@ -15,15 +13,15 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import library from '@/api/library'
import { useSettingsStore } from '@/stores/settings'
export default {
name: 'PageMusicRecentlyAdded',
components: { ContentWithHeading, HeadingTitle, ListAlbums, TabsMusic },
components: { ContentWithHeading, ListAlbums, PaneTitle, TabsMusic },
beforeRouteEnter(to, from, next) {
const limit = useSettingsStore().recentlyAddedLimit
library

View File

@ -2,7 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.music.recently-played.title') }"
/>
</template>
@ -15,14 +15,14 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListTracks from '@/components/ListTracks.vue'
import TabsMusic from '@/components/TabsMusic.vue'
import library from '@/api/library'
export default {
name: 'PageMusicRecentlyPlayed',
components: { ContentWithHeading, HeadingTitle, ListTracks, TabsMusic },
components: { ContentWithHeading, PaneTitle, ListTracks, TabsMusic },
beforeRouteEnter(to, from, next) {
library
.search({

View File

@ -2,9 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title
:content="{ title: $t('page.spotify.music.new-releases') }"
/>
<pane-title :content="{ title: $t('page.spotify.music.new-releases') }" />
</template>
<template #content>
<list-albums-spotify :items="albums" />
@ -20,7 +18,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.spotify.music.featured-playlists') }"
/>
</template>
@ -40,7 +38,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -51,7 +49,7 @@ export default {
name: 'PageMusicSpotify',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListAlbumsSpotify,
ListPlaylistsSpotify,
TabsMusic

View File

@ -2,7 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-playlists-spotify :items="playlists" />
@ -12,7 +12,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import TabsMusic from '@/components/TabsMusic.vue'
@ -22,7 +22,7 @@ export default {
name: 'PageMusicSpotifyFeaturedPlaylists',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListPlaylistsSpotify,
TabsMusic
},

View File

@ -2,7 +2,7 @@
<tabs-music />
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-albums-spotify :items="albums" />
@ -12,7 +12,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import TabsMusic from '@/components/TabsMusic.vue'
@ -22,7 +22,7 @@ export default {
name: 'PageMusicSpotifyNewReleases',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListAlbumsSpotify,
TabsMusic
},

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-playlists :items="playlists" />
@ -12,14 +12,14 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListPlaylists from '@/components/ListPlaylists.vue'
import library from '@/api/library'
import { useConfigurationStore } from '@/stores/configuration'
export default {
name: 'PagePlaylistFolder',
components: { ContentWithHeading, HeadingTitle, ListPlaylists },
components: { ContentWithHeading, PaneTitle, ListPlaylists },
beforeRouteEnter(to, from, next) {
next(async (vm) => {
await vm.fetchData(to.params.id)

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -32,7 +32,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist.vue'
import library from '@/api/library'
@ -43,7 +43,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListTracks,
ModalDialogPlaylist
},

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -35,7 +35,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
import ModalDialogPlaylistSpotify from '@/components/ModalDialogPlaylistSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -49,7 +49,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListTracksSpotify,
ModalDialogPlaylistSpotify
},

View File

@ -1,7 +1,7 @@
<template>
<content-with-hero>
<template #heading>
<heading-hero :content="heading" />
<pane-hero :content="heading" />
</template>
<template #image>
<control-image
@ -33,7 +33,7 @@
import ContentWithHero from '@/templates/ContentWithHero.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingHero from '@/components/HeadingHero.vue'
import PaneHero from '@/components/PaneHero.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import library from '@/api/library'
@ -44,7 +44,7 @@ export default {
components: {
ContentWithHero,
ControlImage,
HeadingHero,
PaneHero,
ListTracks,
ModalDialogAlbum
},

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading v-if="episodes.items.length > 0">
<template #heading>
<heading-title :content="{ title: $t('page.podcasts.new-episodes') }" />
<pane-title :content="{ title: $t('page.podcasts.new-episodes') }" />
</template>
<template #actions>
<control-button
@ -22,7 +22,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -60,7 +60,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAddRss from '@/components/ModalDialogAddRss.vue'
@ -73,7 +73,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListAlbums,
ListTracks,
ModalDialogAddRss

View File

@ -1,7 +1,7 @@
<template>
<content-with-heading>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #actions>
<control-button
@ -95,7 +95,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListItemQueueItem from '@/components/ListItemQueueItem.vue'
import ModalDialogAddStream from '@/components/ModalDialogAddStream.vue'
import ModalDialogPlaylistSave from '@/components/ModalDialogPlaylistSave.vue'
@ -112,7 +112,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListItemQueueItem,
ModalDialogAddStream,
ModalDialogPlaylistSave,

View File

@ -4,7 +4,7 @@
<list-index-buttons :indices="tracks.indices" />
</template>
<template #heading>
<heading-title :content="heading" />
<pane-title :content="heading" />
</template>
<template #content>
<list-tracks :items="tracks" />
@ -15,7 +15,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListIndexButtons from '@/components/ListIndexButtons.vue'
import ListTracks from '@/components/ListTracks.vue'
import library from '@/api/library'
@ -24,7 +24,7 @@ export default {
name: 'PageRadioStreams',
components: {
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListIndexButtons,
ListTracks
},

View File

@ -49,7 +49,7 @@
<tabs-search @search-library="search" @search-spotify="searchSpotify" />
<content-with-heading v-for="[type, items] in results" :key="type">
<template #heading>
<heading-title :content="{ title: $t(`page.search.${type}s`) }" />
<pane-title :content="{ title: $t(`page.search.${type}s`) }" />
</template>
<template #content>
<component :is="components[type]" :items="items" />
@ -77,7 +77,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import { GroupedList } from '@/lib/GroupedList'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbums from '@/components/ListAlbums.vue'
import ListArtists from '@/components/ListArtists.vue'
import ListComposers from '@/components/ListComposers.vue'
@ -103,7 +103,7 @@ export default {
components: {
ContentWithHeading,
ControlButton,
HeadingTitle,
PaneTitle,
ListAlbums,
ListArtists,
ListComposers,

View File

@ -32,7 +32,7 @@
<tabs-search @search-library="searchLibrary" @search-spotify="search" />
<content-with-heading v-for="[type, items] in results" :key="type">
<template #heading>
<heading-title :content="{ title: $t(`page.search.${type}s`) }" />
<pane-title :content="{ title: $t(`page.search.${type}s`) }" />
</template>
<template #content>
<component
@ -64,7 +64,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlButton from '@/components/ControlButton.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import ListAlbumsSpotify from '@/components/ListAlbumsSpotify.vue'
import ListArtistsSpotify from '@/components/ListArtistsSpotify.vue'
import ListPlaylistsSpotify from '@/components/ListPlaylistsSpotify.vue'
@ -83,7 +83,7 @@ export default {
components: {
ControlButton,
ContentWithHeading,
HeadingTitle,
PaneTitle,
ListAlbumsSpotify,
ListArtistsSpotify,
ListPlaylistsSpotify,

View File

@ -2,7 +2,7 @@
<tabs-settings />
<content-with-heading>
<template #heading>
<heading-title :content="{ title: $t('page.settings.artwork.title') }" />
<pane-title :content="{ title: $t('page.settings.artwork.title') }" />
</template>
<template #content>
<div class="content" v-text="$t('page.settings.artwork.explanation-1')" />
@ -71,7 +71,7 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlSettingSwitch from '@/components/ControlSettingSwitch.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import { useServicesStore } from '@/stores/services'
@ -80,7 +80,7 @@ export default {
components: {
ContentWithHeading,
ControlSettingSwitch,
HeadingTitle,
PaneTitle,
TabsSettings
},
setup() {

View File

@ -2,9 +2,7 @@
<tabs-settings />
<content-with-heading>
<template #heading>
<heading-title
:content="{ title: $t('page.settings.devices.pairing') }"
/>
<pane-title :content="{ title: $t('page.settings.devices.pairing') }" />
</template>
<template #content>
<form v-if="remotesStore.active" @submit.prevent="pairRemote">
@ -31,7 +29,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.devices.speaker-pairing') }"
/>
</template>
@ -79,7 +77,7 @@
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ControlPinField from '@/components/ControlPinField.vue'
import ControlSwitch from '@/components/ControlSwitch.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import outputs from '@/api/outputs'
import { useOutputsStore } from '@/stores/outputs'
@ -91,7 +89,7 @@ export default {
ContentWithHeading,
ControlPinField,
ControlSwitch,
HeadingTitle,
PaneTitle,
TabsSettings
},
setup() {

View File

@ -2,7 +2,7 @@
<tabs-settings />
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.services.spotify.title') }"
/>
</template>
@ -57,7 +57,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.services.lastfm.title') }"
/>
</template>
@ -127,14 +127,14 @@
<script>
import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import services from '@/api/services'
import { useServicesStore } from '@/stores/services'
export default {
name: 'PageSettingsOnlineServices',
components: { ContentWithHeading, HeadingTitle, TabsSettings },
components: { ContentWithHeading, PaneTitle, TabsSettings },
setup() {
return { servicesStore: useServicesStore() }
},

View File

@ -2,9 +2,7 @@
<tabs-settings />
<content-with-heading>
<template #heading>
<heading-title
:content="{ title: $t('page.settings.general.language') }"
/>
<pane-title :content="{ title: $t('page.settings.general.language') }" />
</template>
<template #content>
<control-dropdown
@ -15,7 +13,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.general.navigation-items') }"
/>
</template>
@ -85,7 +83,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.general.now-playing-page') }"
/>
</template>
@ -133,7 +131,7 @@
</content-with-heading>
<content-with-heading>
<template #heading>
<heading-title
<pane-title
:content="{ title: $t('page.settings.general.recently-added-page') }"
/>
</template>
@ -156,7 +154,7 @@ import ControlDropdown from '@/components/ControlDropdown.vue'
import ControlSettingIntegerField from '@/components/ControlSettingIntegerField.vue'
import ControlSettingSwitch from '@/components/ControlSettingSwitch.vue'
import ControlSettingTextField from '@/components/ControlSettingTextField.vue'
import HeadingTitle from '@/components/HeadingTitle.vue'
import PaneTitle from '@/components/PaneTitle.vue'
import TabsSettings from '@/components/TabsSettings.vue'
import { useSettingsStore } from '@/stores/settings'
@ -168,7 +166,7 @@ export default {
ControlSettingIntegerField,
ControlSettingSwitch,
ControlSettingTextField,
HeadingTitle,
PaneTitle,
TabsSettings
},
setup() {