1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-12 13:48:04 +09:00
elk/components/modal/ModalContainer.vue

112 lines
3.6 KiB
Vue
Raw Normal View History

2022-11-23 12:48:01 +09:00
<script setup lang="ts">
2023-01-08 15:21:09 +09:00
import type { mastodon } from 'masto'
import type { ConfirmDialogChoice } from '~/types'
2022-11-27 10:52:46 +09:00
import {
2022-12-10 06:18:21 +09:00
isCommandPanelOpen,
isConfirmDialogOpen,
2022-11-27 10:52:46 +09:00
isEditHistoryDialogOpen,
isErrorDialogOpen,
isFavouritedBoostedByDialogOpen,
2023-03-08 04:32:21 +09:00
isKeyboardShortcutsDialogOpen,
2022-11-30 12:27:19 +09:00
isMediaPreviewOpen,
2022-11-27 10:52:46 +09:00
isPreviewHelpOpen,
isPublishDialogOpen,
2023-06-23 21:24:10 +09:00
isReportDialogOpen,
2022-11-27 10:52:46 +09:00
isSigninDialogOpen,
} from '~/composables/dialog'
2022-12-10 06:18:21 +09: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-10 06:18:21 +09: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-10 06:18:21 +09:00
useEventListener('keydown', (e: KeyboardEvent) => {
if ((e.key === 'k' || e.key === 'л') && (isMac.value ? e.metaKey : e.ctrlKey)) {
e.preventDefault()
openCommandPanel(e.shiftKey)
}
if ((e.key === '/' || e.key === ',') && (isMac.value ? e.metaKey : e.ctrlKey)) {
2022-12-10 06:18:21 +09:00
e.preventDefault()
openCommandPanel(true)
}
})
function handlePublished(status: mastodon.v1.Status) {
lastPublishDialogStatus.value = status
isPublishDialogOpen.value = false
}
function handlePublishClose() {
lastPublishDialogStatus.value = null
}
function handleConfirmChoice(choice: ConfirmDialogChoice) {
confirmDialogChoice.value = choice
isConfirmDialogOpen.value = false
}
function handleFavouritedBoostedByClose() {
isFavouritedBoostedByDialogOpen.value = false
}
2022-11-23 12:48:01 +09:00
</script>
<template>
2023-01-15 17:38:02 +09:00
<template v-if="isHydrated">
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8 max-w-125>
<UserSignIn />
</ModalDialog>
<ModalDialog v-model="isPreviewHelpOpen" keep-alive max-w-125>
<HelpPreview @close="closePreviewHelp()" />
</ModalDialog>
<ModalDialog
v-model="isPublishDialogOpen"
max-w-180 flex w-full
@close="handlePublishClose"
>
<PublishWidgetList
2023-01-06 01:48:20 +09:00
v-if="dialogDraftKey"
:draft-key="dialogDraftKey"
expanded
class="flex-1"
@published="handlePublished"
/>
</ModalDialog>
<ModalDialog
:model-value="isMediaPreviewOpen"
w-full max-w-full h-full max-h-full
bg-transparent border-0 shadow-none
@update:model-value="closeMediaPreview"
>
<ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
</ModalDialog>
<ModalDialog v-model="isEditHistoryDialogOpen" max-w-125>
2023-01-06 01:48:20 +09:00
<StatusEditPreview v-if="statusEdit" :edit="statusEdit" />
</ModalDialog>
<ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
<CommandPanel @close="closeCommandPanel()" />
</ModalDialog>
<ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
<ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
</ModalDialog>
<ModalDialog v-model="isErrorDialogOpen" py-4 px-8 max-w-125>
<ModalError v-if="errorDialogData" v-bind="errorDialogData" />
</ModalDialog>
<ModalDialog
v-model="isFavouritedBoostedByDialogOpen"
max-w-180
@close="handleFavouritedBoostedByClose"
>
<StatusFavouritedBoostedBy />
</ModalDialog>
2023-03-08 04:32:21 +09:00
<ModalDialog v-model="isKeyboardShortcutsDialogOpen" max-w-full sm:max-w-140 md:max-w-170 lg:max-w-220 md:min-w-160>
<MagickeysKeyboardShortcuts @close="closeKeyboardShortcuts()" />
</ModalDialog>
2023-06-23 21:24:10 +09:00
<ModalDialog v-model="isReportDialogOpen" keep-alive max-w-175>
<ReportModal v-if="reportAccount" :account="reportAccount" :status="reportStatus" @close="closeReportDialog()" />
</ModalDialog>
</template>
2022-11-23 12:48:01 +09:00
</template>