[web] Rename template slots

This commit is contained in:
Alain Nussbaumer 2025-03-15 15:06:45 +01:00
parent 9e2c9fddcb
commit 59b680db9b
36 changed files with 64 additions and 68 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="{ title: $t('page.about.library') }" /> <heading-title :content="{ title: $t('page.about.library') }" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ :button="{
handler: openUpdateDialog, handler: openUpdateDialog,

View File

@ -34,7 +34,7 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -24,10 +24,10 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -25,10 +25,10 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -34,7 +34,7 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -5,7 +5,7 @@
<template #options> <template #options>
<index-button-list :indices="albums.indices" /> <index-button-list :indices="albums.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -5,7 +5,7 @@
<template #options> <template #options>
<index-button-list :indices="artists.indices" /> <index-button-list :indices="artists.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -5,7 +5,7 @@
<template #options> <template #options>
<index-button-list :indices="genres.indices" /> <index-button-list :indices="genres.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -12,10 +12,10 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -5,7 +5,7 @@
<template #options> <template #options>
<index-button-list :indices="composers.indices" /> <index-button-list :indices="composers.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="{ title: name }" /> <heading-title :content="{ title: name }" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -4,10 +4,10 @@
<template #options> <template #options>
<index-button-list :indices="albums.indices" /> <index-button-list :indices="albums.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -12,10 +12,10 @@
</template> </template>
</list-options> </list-options>
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -5,7 +5,7 @@
<template #options> <template #options>
<index-button-list :indices="genres.indices" /> <index-button-list :indices="genres.indices" />
</template> </template>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.music.recently-added.title') }" :content="{ title: $t('page.music.recently-added.title') }"
/> />
@ -20,7 +20,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.music.recently-played.title') }" :content="{ title: $t('page.music.recently-played.title') }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.music.recently-added.title') }" :content="{ title: $t('page.music.recently-added.title') }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.music.recently-played.title') }" :content="{ title: $t('page.music.recently-played.title') }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.spotify.music.new-releases') }" :content="{ title: $t('page.spotify.music.new-releases') }"
/> />
@ -20,7 +20,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.spotify.music.featured-playlists') }" :content="{ title: $t('page.spotify.music.featured-playlists') }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-music /> <tabs-music />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ handler: openDetails, icon: 'dots-horizontal' }" :button="{ handler: openDetails, icon: 'dots-horizontal' }"
/> />

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading v-if="tracks.items.length > 0"> <content-with-heading v-if="tracks.items.length > 0">
<template #heading-left> <template #heading>
<heading-title :content="{ title: $t('page.podcasts.new-episodes') }" /> <heading-title :content="{ title: $t('page.podcasts.new-episodes') }" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ :button="{
handler: markAllAsPlayed, handler: markAllAsPlayed,
@ -22,10 +22,10 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
v-if="rss.tracks > 0" v-if="rss.tracks > 0"
:button="{ :button="{
@ -36,7 +36,7 @@
/> />
<control-button <control-button
:button="{ :button="{
handler: 'openAddPodcastDialog', handler: openAddPodcastDialog,
icon: 'rss', icon: 'rss',
key: 'actions.add' key: 'actions.add'
}" }"

View File

@ -1,10 +1,10 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #heading-right> <template #actions>
<control-button <control-button
:button="{ :button="{
handler: uiStore.toggleHideReadItems, handler: uiStore.toggleHideReadItems,

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="heading" /> <heading-title :content="heading" />
</template> </template>
<template #content> <template #content>

View File

@ -50,7 +50,7 @@
<tabs-search @search-library="search" @search-spotify="searchSpotify" /> <tabs-search @search-library="search" @search-spotify="searchSpotify" />
<template v-for="[type, items] in results" :key="type"> <template v-for="[type, items] in results" :key="type">
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title :content="{ title: $t(`page.search.${type}s`) }" /> <heading-title :content="{ title: $t(`page.search.${type}s`) }" />
</template> </template>
<template #content> <template #content>

View File

@ -33,7 +33,7 @@
<tabs-search @search-library="searchLibrary" @search-spotify="search" /> <tabs-search @search-library="searchLibrary" @search-spotify="search" />
<template v-for="[type, items] in results" :key="type"> <template v-for="[type, items] in results" :key="type">
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t(`page.spotify.search.${type}s`) }" :content="{ title: $t(`page.spotify.search.${type}s`) }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-settings /> <tabs-settings />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.artwork.title') }" :content="{ title: $t('page.settings.artwork.title') }"
/> />

View File

@ -2,15 +2,12 @@
<div> <div>
<tabs-settings /> <tabs-settings />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.services.spotify.title') }" :content="{ title: $t('page.settings.services.spotify.title') }"
/> />
</template> </template>
<template #content> <template #content>
<div v-if="!spotify.spotify_installed" class="notification help">
<p v-text="$t('page.settings.services.spotify.no-support')" />
</div>
<div v-if="spotify.spotify_installed"> <div v-if="spotify.spotify_installed">
<div> <div>
<p <p
@ -54,18 +51,16 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else v-text="$t('page.settings.services.spotify.no-support')" />
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.services.lastfm.title') }" :content="{ title: $t('page.settings.services.lastfm.title') }"
/> />
</template> </template>
<template #content> <template #content>
<div v-if="!lastfm.enabled" class="notification is-size-7">
<p v-text="$t('page.settings.services.lastfm.no-support')" />
</div>
<div v-if="lastfm.enabled"> <div v-if="lastfm.enabled">
<p <p
class="content" class="content"
@ -118,6 +113,7 @@
</form> </form>
</div> </div>
</div> </div>
<div v-else v-text="$t('page.settings.services.lastfm.no-support')" />
</template> </template>
</content-with-heading> </content-with-heading>
</div> </div>

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-settings /> <tabs-settings />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.devices.pairing') }" :content="{ title: $t('page.settings.devices.pairing') }"
/> />
@ -40,7 +40,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.devices.speaker-pairing') }" :content="{ title: $t('page.settings.devices.speaker-pairing') }"
/> />

View File

@ -2,7 +2,7 @@
<div> <div>
<tabs-settings /> <tabs-settings />
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.general.language') }" :content="{ title: $t('page.settings.general.language') }"
/> />
@ -15,7 +15,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.general.navigation-items') }" :content="{ title: $t('page.settings.general.navigation-items') }"
/> />
@ -88,7 +88,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.general.now-playing-page') }" :content="{ title: $t('page.settings.general.now-playing-page') }"
/> />
@ -136,7 +136,7 @@
</template> </template>
</content-with-heading> </content-with-heading>
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading>
<heading-title <heading-title
:content="{ title: $t('page.settings.general.recently-added-page') }" :content="{ title: $t('page.settings.general.recently-added-page') }"
/> />

View File

@ -20,16 +20,16 @@
class="level-item is-flex-shrink-1 has-text-centered-mobile" class="level-item is-flex-shrink-1 has-text-centered-mobile"
> >
<div> <div>
<slot name="heading-left" /> <slot name="heading" />
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if="$slots['heading-right']" v-if="$slots.actions"
class="level-right has-text-centered-mobile" class="level-right has-text-centered-mobile"
> >
<div class="buttons"> <div class="buttons">
<slot name="heading-right" /> <slot name="actions" />
</div> </div>
</div> </div>
</nav> </nav>