zoeissleeping
62f1fe1c27
I should have split this into two commits, but I found the issue with the settings buttons *after* I changed how the model selector worked, so its all in this single commit.
52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import Textbox from './Textbox.vue';
|
|
import Settings from './Settings.vue';
|
|
|
|
import { DialogType } from '~/composables/useDialog';
|
|
|
|
const { open, page, data, close, confirm } = useDialog();
|
|
|
|
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);
|
|
}
|
|
});
|
|
</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 top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
|
|
<div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
|
|
overflow-hidden flex max-h-[90vh]">
|
|
<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" />
|
|
</KeepAlive>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|