elk/components/modal/ModalContainer.vue

57 lines
1.8 KiB
Vue
Raw Normal View History

2022-11-23 04:48:01 +01:00
<script setup lang="ts">
2022-11-27 02:52:46 +01:00
import {
2022-12-09 22:18:21 +01:00
isCommandPanelOpen,
2022-11-27 02:52:46 +01:00
isEditHistoryDialogOpen,
2022-11-30 04:27:19 +01:00
isMediaPreviewOpen,
2022-11-27 02:52:46 +01:00
isPreviewHelpOpen,
isPublishDialogOpen,
isSigninDialogOpen,
} from '~/composables/dialog'
2022-12-09 22:18:21 +01:00
const isMac = useIsMac()
// TODO: temporary, await for keybind system
// open search panel
// listen to ctrl+k on windows/linux or cmd+k on mac
// open command panel
2022-12-09 22:18:21 +01:00
// listen to ctrl+/ on windows/linux or cmd+/ on mac
// or shift+ctrl+k on windows/linux or shift+cmd+k on mac
2022-12-09 22:18:21 +01:00
useEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'k' && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
openCommandPanel(e.shiftKey)
}
2022-12-09 22:18:21 +01:00
if (e.key === '/' && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
openCommandPanel(true)
}
})
2022-11-23 04:48:01 +01:00
</script>
<template>
2022-12-02 08:27:44 +01:00
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
2022-12-02 08:02:44 +01:00
<UserSignIn />
2022-11-23 04:48:01 +01:00
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen" max-w-125>
2022-11-27 04:13:39 +01:00
<HelpPreview @close="closePreviewHelp()" />
2022-11-24 03:38:14 +01:00
</ModalDialog>
<ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
<!-- This `w-0` style is used to avoid overflow problems in flex layoutsso don't remove it unless you know what you're doing -->
<PublishWidget :draft-key="dialogDraftKey" expanded flex-1 w-0 />
2022-11-24 09:04:53 +01:00
</ModalDialog>
<ModalDialog
v-model="isMediaPreviewOpen"
pointer-events-none
w-full max-w-full h-full max-h-full
bg-transparent border-0 shadow-none
>
2022-11-30 04:27:19 +01:00
<ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
</ModalDialog>
2022-11-26 06:05:44 +01:00
<ModalDialog v-model="isEditHistoryDialogOpen">
<StatusEditPreview :edit="statusEdit" />
</ModalDialog>
2022-12-09 22:18:21 +01:00
<ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
<CommandPanel @close="closeCommandPanel()" />
</ModalDialog>
2022-11-23 04:48:01 +01:00
</template>