2022-04-15 14:24:30 +00:00
|
|
|
<template>
|
2024-05-08 09:11:32 +00:00
|
|
|
<ContextMenu ref="base">
|
2022-12-06 10:28:48 +00:00
|
|
|
<li data-testid="playlist-context-menu-create-simple" @click="onItemClicked('new-playlist')">New Playlist…</li>
|
2022-08-10 14:56:01 +00:00
|
|
|
<li data-testid="playlist-context-menu-create-smart" @click="onItemClicked('new-smart-playlist')">
|
2022-12-06 10:28:48 +00:00
|
|
|
New Smart Playlist…
|
2022-08-10 14:56:01 +00:00
|
|
|
</li>
|
2022-12-06 10:28:48 +00:00
|
|
|
<li data-testid="playlist-context-menu-create-folder" @click="onItemClicked('new-folder')">New Folder…</li>
|
2024-05-08 09:11:32 +00:00
|
|
|
</ContextMenu>
|
2022-04-15 14:24:30 +00:00
|
|
|
</template>
|
|
|
|
|
2022-04-15 17:00:08 +00:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { useContextMenu } from '@/composables'
|
2022-08-10 14:56:01 +00:00
|
|
|
import { eventBus } from '@/utils'
|
2024-10-13 17:37:01 +00:00
|
|
|
import type { Events } from '@/config'
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-05-08 09:11:32 +00:00
|
|
|
const { base, ContextMenu, open, trigger } = useContextMenu()
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2024-05-08 09:11:32 +00:00
|
|
|
type Action = 'new-playlist' | 'new-smart-playlist' | 'new-folder'
|
|
|
|
|
|
|
|
const actionToEventMap: Record<Action, keyof Events> = {
|
2022-08-10 14:56:01 +00:00
|
|
|
'new-playlist': 'MODAL_SHOW_CREATE_PLAYLIST_FORM',
|
|
|
|
'new-smart-playlist': 'MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM',
|
2024-10-13 17:37:01 +00:00
|
|
|
'new-folder': 'MODAL_SHOW_CREATE_PLAYLIST_FOLDER_FORM',
|
2022-08-10 14:56:01 +00:00
|
|
|
}
|
2022-04-15 14:24:30 +00:00
|
|
|
|
2022-08-10 14:56:01 +00:00
|
|
|
const onItemClicked = (key: keyof typeof actionToEventMap) => trigger(() => eventBus.emit(actionToEventMap[key]))
|
2022-04-20 12:38:38 +00:00
|
|
|
|
2024-01-14 13:20:56 +00:00
|
|
|
eventBus.on('CREATE_NEW_PLAYLIST_CONTEXT_MENU_REQUESTED', async ({ top, left }) => await open(top, left))
|
2022-04-15 14:24:30 +00:00
|
|
|
</script>
|