zoeissleeping
61c73f394d
Sidenav becomes a full-screen overlay on mobile with slide-in animation. Dialog goes full-screen on small screens. Settings dialog gets a mobile nav with hamburger menu. Touch targets and text sizes scaled up for mobile. Slider gets visual checked/unchecked colors. Sidebar auto-closes on mobile route navigation. Resize handle hidden on mobile.
70 lines
2.6 KiB
Vue
70 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import Textbox from './Textbox.vue';
|
|
import Settings from './Settings.vue';
|
|
import QuickSwitcher from './QuickSwitcher.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();
|
|
openDialog(DialogType.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>
|
|
<Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
|
|
|
|
<Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
|
|
|
|
<QuickSwitcher v-else-if="page === DialogType.QuickSwitcher" @close="close" />
|
|
</KeepAlive>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|