[web] Fix emit warnings

2025-03-03 23:30:09 -05:00 · 2025-02-09 08:05:03 +01:00 · 2025-02-09 08:05:03 +01:00 · 714fc4e1b8
commit 714fc4e1b8
parent bb8b2a72e4
21 changed files with 111 additions and 212 deletions
--- a/web-src/src/components/ListAlbums.vue
+++ b/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'
        }
      ]
--- a/web-src/src/components/ModalDialog.vue
+++ b/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: '' },
-    actions: { type: Array, required: true }
+    title: { type: String, default: '' }
  },
  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>
--- a/web-src/src/components/ModalDialogAddRss.vue
+++ b/web-src/src/components/ModalDialogAddRss.vue
@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @add="add"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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
--- a/web-src/src/components/ModalDialogAddUrlStream.vue
+++ b/web-src/src/components/ModalDialogAddUrlStream.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="add"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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
--- a/web-src/src/components/ModalDialogAlbumSpotify.vue
+++ b/web-src/src/components/ModalDialogAlbumSpotify.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogArtist.vue
+++ b/web-src/src/components/ModalDialogArtist.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogArtistSpotify.vue
+++ b/web-src/src/components/ModalDialogArtistSpotify.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogComposer.vue
+++ b/web-src/src/components/ModalDialogComposer.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogDirectory.vue
+++ b/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'
        }
      ]
--- a/web-src/src/components/ModalDialogGenre.vue
+++ b/web-src/src/components/ModalDialogGenre.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogPlaylist.vue
+++ b/web-src/src/components/ModalDialogPlaylist.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
          }
        ]
--- a/web-src/src/components/ModalDialogPlaylistSave.vue
+++ b/web-src/src/components/ModalDialogPlaylistSave.vue
@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @save="save"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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
--- a/web-src/src/components/ModalDialogPlaylistSpotify.vue
+++ b/web-src/src/components/ModalDialogPlaylistSpotify.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogQueueItem.vue
+++ b/web-src/src/components/ModalDialogQueueItem.vue
@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @remove="remove"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogRemotePairing.vue
+++ b/web-src/src/components/ModalDialogRemotePairing.vue
@ -1,12 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @cancel="$emit('close')"
-    @close="$emit('close')"
-    @pair="pair"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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 = ''
--- a/web-src/src/components/ModalDialogTrack.vue
+++ b/web-src/src/components/ModalDialogTrack.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogTrackSpotify.vue
+++ b/web-src/src/components/ModalDialogTrackSpotify.vue
@ -1,13 +1,6 @@
 <template>
-  <modal-dialog
-    :actions="actions"
-    :show="show"
-    @add="queue_add"
-    @add-next="queue_add_next"
-    @close="$emit('close')"
-    @play="play"
-  >
-    <template #modal-content>
+  <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
+    <template #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'
        }
      ]
--- a/web-src/src/components/ModalDialogUpdate.vue
+++ b/web-src/src/components/ModalDialogUpdate.vue
@ -3,10 +3,9 @@
    :actions="actions"
    :show="show"
    :title="$t('dialog.update.title')"
-    @analyse="update_library"
-    @cancel="close()"
+    @close="$emit('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() {
-      this.libraryStore.update_dialog_scan_kind = ''
+    cancel() {
      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 {
--- a/web-src/src/mystyles.scss
+++ b/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 {
--- a/web-src/src/pages/PagePodcast.vue
+++ b/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'
        }
      ]