[web] Simplify modal dialogs

web-src/src/components/ListAlbums.vue

@@ -47,7 +47,7 @@
       @remove-podcast="open_remove_podcast_dialog()"
       @play-count-changed="play_count_changed()"
     />
-    <modal-dialog-action
+    <modal-dialog
       :actions="actions"
       :show="show_remove_podcast_modal"
       :title="$t('page.podcast.remove-podcast')"
@@ -64,20 +64,20 @@
           </template>
         </i18n-t>
       </template>
-    </modal-dialog-action>
+    </modal-dialog>
   </teleport>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import { useSettingsStore } from '@/stores/settings'
 import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { CoverArtwork, ModalDialogAction, ModalDialogAlbum },
+  components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
   props: {
     items: { required: true, type: Object },
     media_kind: { default: '', type: String }

web-src/src/components/ModalDialog.vue

@@ -5,10 +5,20 @@
       <div class="modal-content">
         <div class="card">
           <div class="card-content">
-            <slot name="content" />
+            <p v-if="title" class="title is-4" v-text="title" />
+            <slot name="modal-content" />
           </div>
           <footer class="card-footer">
-            <slot name="footer" />
+            <a
+              v-for="action in actions"
+              :key="action.event"
+              class="card-footer-item"
+              :class="{ 'is-disabled': action.disabled }"
+              @click="$emit(action.event)"
+            >
+              <mdicon class="icon" :name="action.icon" size="16" />
+              <span class="is-size-7" v-text="action.label" />
+            </a>
           </footer>
         </div>
       </div>
@@ -18,9 +28,11 @@
 
 <script>
 export default {
-  name: 'ModalDialog',
+  name: 'ModalDialogCombined',
   props: {
-    show: Boolean
+    show: Boolean,
+    title: { type: String, default: '' },
+    actions: { type: Array, required: true }
   },
   emits: ['close'],
   watch: {

web-src/src/components/ModalDialogAction.vue

@@ -1,44 +0,0 @@
-<template>
-  <modal-dialog :show="show">
-    <template #content>
-      <p v-if="title" class="title is-4" v-text="title" />
-      <slot name="modal-content" />
-    </template>
-    <template #footer>
-      <a
-        v-for="action in actions"
-        :key="action.event"
-        class="card-footer-item"
-        :class="{ 'is-disabled': action.disabled }"
-        @click="$emit(action.event)"
-      >
-        <mdicon class="icon" :name="action.icon" size="16" />
-        <span class="is-size-7" v-text="action.label" />
-      </a>
-    </template>
-  </modal-dialog>
-</template>
-
-<script>
-import ModalDialog from '@/components/ModalDialog.vue'
-
-export default {
-  name: 'ModalDialogAction',
-  components: { ModalDialog },
-  props: {
-    actions: { type: Array, required: true },
-    show: Boolean,
-    title: { default: '', type: String }
-  },
-  watch: {
-    show() {
-      const { classList } = document.querySelector('html')
-      if (this.show) {
-        classList.add('is-clipped')
-      } else {
-        classList.remove('is-clipped')
-      }
-    }
-  }
-}
-</script>

web-src/src/components/ModalDialogAddRss.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @cancel="$emit('close')"
@@ -26,16 +26,16 @@
         <p class="help" v-text="$t('dialog.add.rss.help')" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddRss',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close', 'podcast-added'],
   data() {

web-src/src/components/ModalDialogAddUrlStream.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="add"
@@ -28,16 +28,16 @@
         </div>
       </form>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAddUrlStream',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
   data() {

web-src/src/components/ModalDialogAlbum.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -84,17 +84,17 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbum',
-  components: { ModalDialogAction, CoverArtwork },
+  components: { ModalDialog, CoverArtwork },
   props: {
     item: { required: true, type: Object },
     media_kind: { default: '', type: String },

web-src/src/components/ModalDialogAlbumSpotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -43,17 +43,17 @@
         <div class="title is-6" v-text="item.album_type" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
 import CoverArtwork from '@/components/CoverArtwork.vue'
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogAlbumSpotify',
-  components: { ModalDialogAction, CoverArtwork },
+  components: { ModalDialog, CoverArtwork },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   data() {

web-src/src/components/ModalDialogArtist.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -37,16 +37,16 @@
         <div class="title is-6" v-text="$filters.datetime(item.time_added)" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtist',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogArtistSpotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -29,16 +29,16 @@
         <div class="title is-6" v-text="item.genres.join(', ')" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogArtistSpotify',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogComposer.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -40,16 +40,16 @@
         />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogComposer',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogDirectory.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     :title="item"
@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogDirectory',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: String }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogGenre.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -36,16 +36,16 @@
         />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogGenre',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: {
     item: { required: true, type: Object },
     media_kind: { required: true, type: String },

web-src/src/components/ModalDialogPlaylist.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -33,16 +33,16 @@
         <div class="title is-6" v-text="item.item_count" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylist',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: {
     item: { required: true, type: Object },
     show: Boolean,

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @cancel="$emit('close')"
@@ -27,16 +27,16 @@
         </div>
       </form>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSave',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
   data() {

web-src/src/components/ModalDialogPlaylistSpotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -33,16 +33,16 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlaylistSpotify',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogQueueItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @remove="remove"
@@ -120,18 +120,18 @@
         </div>
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogQueueItem',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   setup() {

web-src/src/components/ModalDialogRemotePairing.vue

@@ -1,8 +1,8 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
-    @cancel="cancel"
+    @cancel="$emit('close')"
     @close="$emit('close')"
     @pair="pair"
   >
@@ -24,17 +24,17 @@
         </div>
       </form>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import { useRemotesStore } from '@/stores/remotes'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogRemotePairing',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
   setup() {

web-src/src/components/ModalDialogTrack.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -157,18 +157,18 @@
         <div class="title is-6" v-text="item.comment" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import SpotifyWebApi from 'spotify-web-api-js'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrack',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close', 'play-count-changed'],
   setup() {

web-src/src/components/ModalDialogTrackSpotify.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     @add="queue_add"
@@ -66,16 +66,16 @@
         <div class="title is-6" v-text="item.uri" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogTrackSpotify',
-  components: { ModalDialogAction },
+  components: { ModalDialog },
   props: { item: { required: true, type: Object }, show: Boolean },
   emits: ['close'],
   computed: {

web-src/src/components/ModalDialogUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal-dialog-action
+  <modal-dialog
     :actions="actions"
     :show="show"
     :title="$t('dialog.update.title')"
@@ -39,19 +39,19 @@
         <p class="mb-3" v-text="$t('dialog.update.progress')" />
       </div>
     </template>
-  </modal-dialog-action>
+  </modal-dialog>
 </template>
 
 <script>
 import ControlSwitch from '@/components/ControlSwitch.vue'
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import { useLibraryStore } from '@/stores/library'
 import { useServicesStore } from '@/stores/services'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogUpdate',
-  components: { ControlSwitch, ModalDialogAction },
+  components: { ControlSwitch, ModalDialog },
   props: { show: Boolean },
   emits: ['close'],
 

web-src/src/pages/PagePodcast.vue

@@ -46,7 +46,7 @@
           @play-count-changed="reload_tracks"
           @remove-podcast="open_remove_podcast_dialog"
         />
-        <modal-dialog-action
+        <modal-dialog
           :actions="actions"
           :show="show_remove_podcast_modal"
           :title="$t('page.podcast.remove-podcast')"
@@ -63,7 +63,7 @@
               </template>
             </i18n-t>
           </template>
-        </modal-dialog-action>
+        </modal-dialog>
       </template>
     </content-with-hero>
   </div>
@@ -74,7 +74,7 @@ import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import { GroupedList } from '@/lib/GroupedList'
 import ListTracks from '@/components/ListTracks.vue'
-import ModalDialogAction from '@/components/ModalDialogAction.vue'
+import ModalDialog from '@/components/ModalDialog.vue'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
 import webapi from '@/webapi'
 
@@ -98,7 +98,7 @@ export default {
     ContentWithHero,
     CoverArtwork,
     ListTracks,
-    ModalDialogAction,
+    ModalDialog,
     ModalDialogAlbum
   },