80 lines
3.3 KiB
Vue
80 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import Textbox from './Textbox.vue';
|
|
import QuickSwitcher from './QuickSwitcher.vue';
|
|
import ChangePassword from './ChangePassword.vue';
|
|
import TwoFactor from './TwoFactor.vue';
|
|
import DeleteAccount from './DeleteAccount.vue';
|
|
import Confirm from './Confirm.vue';
|
|
import CreateUser from './CreateUser.vue';
|
|
|
|
import { DialogType } from '~/composables/useDialog';
|
|
|
|
const { open, page, data, close, confirm, openDialog } = useDialog();
|
|
const { addShortcut } = useKeyboardShortcuts();
|
|
|
|
const unbindSettingsShortcut = addShortcut(['ctrl', ','], (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
navigateTo('/settings');
|
|
});
|
|
|
|
const unbindQuickSwitcherShortcut = addShortcut(['ctrl', 'k'], (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
openDialog(DialogType.QuickSwitcher);
|
|
});
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
close();
|
|
}
|
|
};
|
|
|
|
watch(open, (value) => {
|
|
if (value) {
|
|
document.body.addEventListener('keydown', handleKeyDown);
|
|
} else {
|
|
document.body.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (open.value) {
|
|
document.body.removeEventListener('keydown', handleKeyDown);
|
|
}
|
|
unbindSettingsShortcut();
|
|
unbindQuickSwitcherShortcut();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" enter-from-class="opacity-0"
|
|
enter-to-class="opacity-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
|
|
<div v-if="open" class="fixed inset-0 z-45 bg-black/80 backdrop-blur-md" @click.self="close">
|
|
</div>
|
|
</Transition>
|
|
|
|
<Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
|
|
enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
|
|
enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
|
|
<div v-if="open" class="z-50 fixed inset-0 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 flex items-center justify-center">
|
|
<div
|
|
class="absolute w-full h-full md:w-auto md:h-auto max-w-6xl bg-[var(--bg-base)] rounded-none md:rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
|
|
<KeepAlive>
|
|
<Textbox v-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
|
|
|
|
<QuickSwitcher v-else-if="page === DialogType.QuickSwitcher" @close="close" />
|
|
</KeepAlive>
|
|
|
|
<!-- kept out of KeepAlive so passwords never linger after it closes -->
|
|
<ChangePassword v-if="page === DialogType.ChangePassword" @confirm="confirm" @cancel="close" />
|
|
<TwoFactor v-else-if="page === DialogType.TwoFactor" :action="data.action" @confirm="confirm"
|
|
@cancel="close" />
|
|
<DeleteAccount v-else-if="page === DialogType.DeleteAccount" @confirm="confirm" @cancel="close" />
|
|
<CreateUser v-else-if="page === DialogType.CreateUser" @confirm="confirm" @cancel="close" />
|
|
<Confirm v-else-if="page === DialogType.Confirm" v-bind="data" @confirm="confirm" @cancel="close" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|