2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-12-28 21:43:07 +00:00
koel/resources/assets/js/components/layout/ModalWrapper.vue

118 lines
4.7 KiB
Vue

<template>
<dialog
ref="dialog"
class="text-k-text-primary min-w-full md:min-w-[480px] border-0 p-0 rounded-md bg-k-bg-primary overflow-visible backdrop:bg-black/70"
@cancel.prevent
>
<Component :is="modalNameToComponentMap[activeModalName]" v-if="activeModalName" @close="close" />
</dialog>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, watch } from 'vue'
import { arrayify, eventBus, provideReadonly } from '@/utils'
import { ModalContextKey } from '@/symbols'
const modalNameToComponentMap = {
'about-koel': defineAsyncComponent(() => import('@/components/meta/AboutKoelModal.vue')),
'add-podcast-form': defineAsyncComponent(() => import('@/components/podcast/AddPodcastForm.vue')),
'add-user-form': defineAsyncComponent(() => import('@/components/user/AddUserForm.vue')),
'create-playlist-folder-form': defineAsyncComponent(() => import('@/components/playlist/CreatePlaylistFolderForm.vue')),
'create-playlist-form': defineAsyncComponent(() => import('@/components/playlist/CreatePlaylistForm.vue')),
'create-smart-playlist-form': defineAsyncComponent(() => import('@/components/playlist/smart-playlist/CreateSmartPlaylistForm.vue')),
'edit-playlist-folder-form': defineAsyncComponent(() => import('@/components/playlist/EditPlaylistFolderForm.vue')),
'edit-playlist-form': defineAsyncComponent(() => import('@/components/playlist/EditPlaylistForm.vue')),
'edit-smart-playlist-form': defineAsyncComponent(() => import('@/components/playlist/smart-playlist/EditSmartPlaylistForm.vue')),
'edit-song-form': defineAsyncComponent(() => import('@/components/song/EditSongForm.vue')),
'edit-user-form': defineAsyncComponent(() => import('@/components/user/EditUserForm.vue')),
'equalizer': defineAsyncComponent(() => import('@/components/ui/equalizer/Equalizer.vue')),
'invite-user-form': defineAsyncComponent(() => import('@/components/user/InviteUserForm.vue')),
'koel-plus': defineAsyncComponent(() => import('@/components/koel-plus/KoelPlusModal.vue')),
'playlist-collaboration': defineAsyncComponent(() => import('@/components/playlist/PlaylistCollaborationModal.vue'))
}
type ModalName = keyof typeof modalNameToComponentMap
const dialog = ref<HTMLDialogElement>()
const activeModalName = ref<ModalName | null>(null)
const context = ref<Record<string, any>>({})
provideReadonly(ModalContextKey, context)
watch(activeModalName, name => name ? dialog.value?.showModal() : dialog.value?.close())
const close = () => {
activeModalName.value = null
context.value = {}
}
eventBus.on('MODAL_SHOW_ABOUT_KOEL', () => (activeModalName.value = 'about-koel'))
.on('MODAL_SHOW_KOEL_PLUS', () => (activeModalName.value = 'koel-plus'))
.on('MODAL_SHOW_ADD_USER_FORM', () => (activeModalName.value = 'add-user-form'))
.on('MODAL_SHOW_INVITE_USER_FORM', () => (activeModalName.value = 'invite-user-form'))
.on('MODAL_SHOW_CREATE_PLAYLIST_FORM', (folder, playables?) => {
context.value = {
folder,
playables: playables ? arrayify(playables) : []
}
activeModalName.value = 'create-playlist-form'
})
.on('MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM', folder => {
context.value = { folder }
activeModalName.value = 'create-smart-playlist-form'
})
.on('MODAL_SHOW_CREATE_PLAYLIST_FOLDER_FORM', () => (activeModalName.value = 'create-playlist-folder-form'))
.on('MODAL_SHOW_EDIT_PLAYLIST_FORM', playlist => {
context.value = { playlist }
activeModalName.value = playlist.is_smart ? 'edit-smart-playlist-form' : 'edit-playlist-form'
})
.on('MODAL_SHOW_EDIT_USER_FORM', user => {
context.value = { user }
activeModalName.value = 'edit-user-form'
})
.on('MODAL_SHOW_EDIT_SONG_FORM', (songs, initialTab: EditSongFormTabName = 'details') => {
context.value = {
initialTab,
songs: arrayify(songs)
}
activeModalName.value = 'edit-song-form'
})
.on('MODAL_SHOW_EDIT_PLAYLIST_FOLDER_FORM', folder => {
context.value = { folder }
activeModalName.value = 'edit-playlist-folder-form'
})
.on('MODAL_SHOW_PLAYLIST_COLLABORATION', playlist => {
context.value = { playlist }
activeModalName.value = 'playlist-collaboration'
})
.on('MODAL_SHOW_ADD_PODCAST_FORM', () => {
activeModalName.value = 'add-podcast-form'
})
.on('MODAL_SHOW_EQUALIZER', () => (activeModalName.value = 'equalizer'))
</script>
<style lang="postcss" scoped>
dialog {
:deep(form), :deep(>div) {
@apply relative;
> header, > main, > footer {
@apply px-6 py-5;
}
> footer {
@apply mt-0 bg-black/10 border-t border-white/5 space-x-2;
}
> header {
@apply flex bg-k-bg-secondary;
h1 {
@apply text-3xl leading-normal overflow-hidden text-ellipsis whitespace-nowrap;
}
}
}
}
</style>