[web] Fix emit warnings

web-src/src/components/ListAlbums.vue

@@ -54,7 +54,7 @@
       @cancel="show_remove_podcast_modal = false"
       @remove="remove_podcast"
     >
-      <template #modal-content>
+      <template #content>
         <i18n-t keypath="list.albums.info" tag="p" scope="global">
           <template #separator>
             <br />
@@ -102,12 +102,12 @@ export default {
       return [
         {
           label: this.$t('page.podcast.cancel'),
-          event: 'cancel',
+          handler: 'cancel',
           icon: 'cancel'
         },
         {
           label: this.$t('page.podcast.remove'),
-          event: 'remove',
+          handler: 'remove',
           icon: 'delete'
         }
       ]

web-src/src/components/ModalDialog.vue

@@ -6,15 +6,15 @@
         <div class="card">
           <div class="card-content">
             <p v-if="title" class="title is-4" v-text="title" />
-            <slot name="modal-content" />
+            <slot name="content" />
           </div>
-          <footer class="card-footer">
+          <footer v-if="actions.length" class="card-footer">
             <a
               v-for="action in actions"
               :key="action.event"
               class="card-footer-item"
               :class="{ 'is-disabled': action.disabled }"
-              @click="$emit(action.event)"
+              @click="action.handler"
             >
               <mdicon class="icon" :name="action.icon" size="16" />
               <span class="is-size-7" v-text="action.label" />
@@ -28,11 +28,11 @@
 
 <script>
 export default {
-  name: 'ModalDialogCombined',
+  name: 'ModalDialog',
   props: {
+    actions: { type: Array, required: true },
     show: Boolean,
-    title: { type: String, default: '' },
+    title: { type: String, default: '' }
-    actions: { type: Array, required: true }
   },
   emits: ['close'],
   watch: {
@@ -63,4 +63,8 @@ export default {
 .fade-leave-from {
   opacity: 1;
 }
+.card-content {
+  max-height: calc(100vh - calc(4 * var(--bulma-navbar-height)));
+  overflow: auto;
+}
 </style>

web-src/src/components/ModalDialogAddRss.vue

@@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @add="add"
-  >
-    <template #modal-content>
       <p class="title is-4" v-text="$t('dialog.add.rss.title')" />
       <div class="field">
         <p class="control has-icons-left">
@@ -53,13 +47,13 @@ export default {
       return [
         {
           label: this.$t('dialog.add.rss.cancel'),
-          event: 'cancel',
+          handler: this.cancel,
           icon: 'cancel'
         },
         {
           label: this.$t('dialog.add.rss.add'),
           disabled: this.disabled,
-          event: 'add',
+          handler: this.add,
           icon: 'playlist-plus'
         }
       ]
@@ -90,6 +84,9 @@ export default {
           this.loading = false
         })
     },
+    cancel() {
+      this.$emit('close')
+    },
     check_url(event) {
       const { validity } = event.target
       this.disabled = validity.patternMismatch || validity.valueMissing

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="add"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <form @submit.prevent="play">
         <p class="title is-4" v-text="$t('dialog.add.stream.title')" />
         <div class="field">
@@ -55,19 +48,19 @@ export default {
       return [
         {
           label: this.$t('dialog.add.stream.cancel'),
-          event: 'cancel',
+          handler: this.cancel,
           icon: 'cancel'
         },
         {
           label: this.$t('dialog.add.stream.add'),
           disabled: this.disabled,
-          event: 'add',
+          handler: this.add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.add.stream.play'),
           disabled: this.disabled,
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]
@@ -97,10 +90,14 @@ export default {
           this.loading = false
         })
     },
+    cancel() {
+      this.$emit('close')
+    },
     check_url(event) {
       const { validity } = event.target
       this.disabled = validity.patternMismatch || validity.valueMissing
     },
+
     play() {
       this.loading = true
       webapi

web-src/src/components/ModalDialogAlbum.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -101,29 +94,27 @@ export default {
     show: Boolean
   },
   emits: ['close', 'remove-podcast', 'play-count-changed'],
-
   data() {
     return {
       artwork_visible: false
     }
   },
-
   computed: {
     actions() {
       return [
         {
           label: this.$t('dialog.album.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.album.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.album.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]
@@ -132,7 +123,6 @@ export default {
       return this.media_kind || this.item.media_kind
     }
   },
-
   methods: {
     mark_played() {
       webapi

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -66,17 +59,17 @@ export default {
       return [
         {
           label: this.$t('dialog.spotify.album.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.spotify.album.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.spotify.album.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogArtist.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -54,17 +47,17 @@ export default {
       return [
         {
           label: this.$t('dialog.artist.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.artist.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.artist.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogArtistSpotify.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -46,17 +39,17 @@ export default {
       return [
         {
           label: this.$t('dialog.spotify.artist.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.spotify.artist.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.spotify.artist.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogComposer.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open_albums" v-text="item.name" />
       </div>
@@ -57,17 +50,17 @@ export default {
       return [
         {
           label: this.$t('dialog.composer.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.composer.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.composer.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogDirectory.vue

@@ -3,10 +3,7 @@
     :actions="actions"
     :show="show"
     :title="item"
-    @add="queue_add"
-    @add-next="queue_add_next"
     @close="$emit('close')"
-    @play="play"
   />
 </template>
 
@@ -24,17 +21,17 @@ export default {
       return [
         {
           label: this.$t('dialog.directory.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.directory.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.directory.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogGenre.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -57,17 +50,17 @@ export default {
       return [
         {
           label: this.$t('dialog.genre.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.genre.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.genre.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogPlaylist.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -55,17 +48,17 @@ export default {
         return [
           {
             label: this.$t('dialog.playlist.add'),
-            event: 'add',
+            handler: this.queue_add,
             icon: 'playlist-plus'
           },
           {
             label: this.$t('dialog.playlist.add-next'),
-            event: 'add-next',
+            handler: this.queue_add_next,
             icon: 'playlist-play'
           },
           {
             label: this.$t('dialog.playlist.play'),
-            event: 'play',
+            handler: this.play,
             icon: 'play'
           }
         ]

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @save="save"
-  >
-    <template #modal-content>
       <form @submit.prevent="save">
         <p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
         <div class="field">
@@ -53,12 +47,12 @@ export default {
     return [
       {
         label: this.$t('dialog.playlist.save.cancel'),
-        event: 'cancel',
+        handler: this.cancel,
         icon: 'cancel'
       },
       {
         label: this.$t('dialog.playlist.save.save'),
-        event: 'content-save',
+        handler: this.save,
         icon: 'save'
       }
     ]
@@ -75,6 +69,9 @@ export default {
     }
   },
   methods: {
+    cancel() {
+      this.$emit('close')
+    },
     check_name(event) {
       const { validity } = event.target
       this.disabled = validity.patternMismatch || validity.valueMissing

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4">
         <a @click="open" v-text="item.name" />
       </div>
@@ -50,17 +43,17 @@ export default {
       return [
         {
           label: this.$t('dialog.spotify.playlist.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.spotify.playlist.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.spotify.playlist.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogQueueItem.vue

@@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @remove="remove"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <div class="title is-4" v-text="item.title" />
       <div class="subtitle" v-text="item.artist" />
       <div v-if="item.album" class="mb-3">
@@ -147,12 +141,12 @@ export default {
       return [
         {
           label: this.$t('dialog.queue-item.remove'),
-          event: 'remove',
+          handler: this.remove,
           icon: 'delete'
         },
         {
           label: this.$t('dialog.queue-item.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogRemotePairing.vue

@@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @pair="pair"
-  >
-    <template #modal-content>
       <p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
       <form @submit.prevent="pair">
         <label class="label" v-text="pairing.remote" />
@@ -50,12 +44,12 @@ export default {
       return [
         {
           label: this.$t('dialog.remote-pairing.cancel'),
-          event: 'cancel',
+          handler: this.cancel,
           icon: 'cancel'
         },
         {
           label: this.$t('dialog.remote-pairing.pair'),
-          event: 'pair',
+          handler: this.pair,
           icon: 'cellphone'
         }
       ]
@@ -76,6 +70,9 @@ export default {
     }
   },
   methods: {
+    cancel() {
+      this.$emit('close')
+    },
     pair() {
       webapi.pairing_kickoff(this.pairing_req).then(() => {
         this.pairing_req.pin = ''

web-src/src/components/ModalDialogTrack.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <p class="title is-4" v-text="item.title" />
       <p class="subtitle" v-text="item.artist" />
       <div v-if="item.media_kind === 'podcast'" class="buttons">
@@ -184,17 +177,17 @@ export default {
       return [
         {
           label: this.$t('dialog.track.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.track.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.track.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
-    :actions="actions"
+    <template #content>
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
       <p class="title is-4" v-text="item.name" />
       <p class="subtitle" v-text="item.artists[0].name" />
       <div class="mb-3">
@@ -83,17 +76,17 @@ export default {
       return [
         {
           label: this.$t('dialog.spotify.track.add'),
-          event: 'add',
+          handler: this.queue_add,
           icon: 'playlist-plus'
         },
         {
           label: this.$t('dialog.spotify.track.add-next'),
-          event: 'add-next',
+          handler: this.queue_add_next,
           icon: 'playlist-play'
         },
         {
           label: this.$t('dialog.spotify.track.play'),
-          event: 'play',
+          handler: this.play,
           icon: 'play'
         }
       ]

web-src/src/components/ModalDialogUpdate.vue

@@ -3,10 +3,9 @@
     :actions="actions"
     :show="show"
     :title="$t('dialog.update.title')"
-    @analyse="update_library"
+    @close="$emit('close')"
-    @cancel="close()"
   >
-    <template #modal-content>
+    <template #content>
       <div v-if="!libraryStore.updating">
         <div v-if="spotify_enabled || rss.tracks > 0" class="field">
           <label class="label" v-text="$t('dialog.update.info')" />
@@ -54,33 +53,30 @@ export default {
   components: { ControlSwitch, ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
-
   setup() {
     return {
       libraryStore: useLibraryStore(),
       servicesStore: useServicesStore()
     }
   },
-
   data() {
     return {
       rescan_metadata: false
     }
   },
-
   computed: {
     actions() {
       return [
         {
           label: this.$t('dialog.update.cancel'),
-          event: 'cancel',
+          handler: this.cancel,
           icon: 'cancel'
         },
         {
           label: this.libraryStore.updating
-            ? 'In progress'
+            ? this.$t('dialog.update.progress')
             : this.$t('dialog.update.rescan'),
-          event: 'analyse',
+          handler: this.analyse,
           icon: 'check'
         }
       ]
@@ -92,13 +88,12 @@ export default {
       return this.servicesStore.spotify.webapi_token_valid
     }
   },
-
   methods: {
-    close() {
+    cancel() {
-      this.libraryStore.update_dialog_scan_kind = ''
       this.$emit('close')
+      this.libraryStore.update_dialog_scan_kind = ''
     },
-    update_library() {
+    analyse() {
       if (this.rescan_metadata) {
         webapi.library_rescan(this.libraryStore.update_dialog_scan_kind)
       } else {

web-src/src/mystyles.scss

@@ -33,12 +33,6 @@
   padding-top: 1rem;
 }
 
-/* Only scroll content if modal contains a card component */
-.modal-content .card-content {
-  max-height: calc(100vh - calc(4 * var(--bulma-navbar-height)));
-  overflow: auto;
-}
-
 .buttons {
   @include mixins.mobile {
     &.is-centered-mobile {

web-src/src/pages/PagePodcast.vue

@@ -53,7 +53,7 @@
           @cancel="show_remove_podcast_modal = false"
           @remove="remove_podcast"
         >
-          <template #modal-content>
+          <template #content>
             <i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
               <template #separator>
                 <br />
@@ -122,12 +122,12 @@ export default {
       return [
         {
           label: this.$t('page.podcast.cancel'),
-          event: 'cancel',
+          handler: 'cancel',
           icon: 'cancel'
         },
         {
           label: this.$t('page.podcast.remove'),
-          event: 'remove',
+          handler: 'remove',
           icon: 'delete'
         }
       ]