26 lines
1.4 KiB
Vue
26 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<button v-if="!advanced" type="button" class="rounded-xl border border-white/20 px-4 py-3 text-sm text-zinc-200 hover:border-amber-300" @click="show">Generation settings</button>
|
|
<div v-if="advanced" class="space-y-5"><slot /></div>
|
|
<dialog v-else ref="panel" aria-label="Generation settings" class="settings-drawer fixed inset-y-0 left-auto right-0 m-0 h-dvh max-h-none w-full max-w-lg overflow-y-auto border-l border-white/15 bg-zinc-950 p-5 text-zinc-100 shadow-2xl backdrop:bg-black/60" @click="backdrop" @close="restoreFocus">
|
|
<div class="mb-6 flex items-center justify-between gap-4">
|
|
<h2 class="font-display text-xl font-bold">Generation settings</h2>
|
|
<button type="button" class="rounded-xl border border-white/20 px-4 py-2" @click="panel?.close()">Close</button>
|
|
</div>
|
|
<div class="space-y-5"><slot /></div>
|
|
</dialog>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
defineProps<{ advanced: boolean }>()
|
|
const panel = ref<HTMLDialogElement | null>(null)
|
|
let opener: HTMLElement | null = null
|
|
function show() { opener = document.activeElement as HTMLElement; panel.value?.showModal() }
|
|
function restoreFocus() { opener?.focus() }
|
|
function backdrop(event: MouseEvent) {
|
|
if (event.target !== panel.value) return
|
|
const rect = panel.value.getBoundingClientRect()
|
|
if (event.clientX < rect.left || event.clientX > rect.right) panel.value.close()
|
|
}
|
|
</script>
|