68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="open"
|
|
class="fixed inset-0 z-50 flex flex-col bg-zinc-950 px-4 pb-4 pt-[max(1rem,env(safe-area-inset-top))]"
|
|
>
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
|
|
<button
|
|
type="button"
|
|
class="shrink-0 rounded-full border border-white/15 px-3 py-1 text-sm text-zinc-300 hover:text-white"
|
|
@click="close"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
v-if="editable"
|
|
:value="text"
|
|
class="min-h-0 w-full flex-1 resize-none rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-100 outline-none ring-amber-300/40 [overflow-wrap:anywhere] focus:ring-2"
|
|
:placeholder="placeholder"
|
|
@input="onInput"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="min-h-0 flex-1 overflow-y-auto whitespace-pre-wrap rounded-2xl border border-white/10 bg-zinc-900 px-4 py-3 text-base leading-relaxed text-zinc-200 [overflow-wrap:anywhere]"
|
|
>{{ text }}</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(defineProps<{
|
|
open: boolean
|
|
title?: string
|
|
text?: string
|
|
editable?: boolean
|
|
placeholder?: string
|
|
}>(), {
|
|
title: 'Prompt',
|
|
text: '',
|
|
editable: true,
|
|
placeholder: ''
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [value: boolean]
|
|
'update:text': [value: string]
|
|
}>()
|
|
|
|
function onInput(event: Event) {
|
|
emit('update:text', (event.target as HTMLTextAreaElement).value)
|
|
}
|
|
|
|
function close() {
|
|
emit('update:open', false)
|
|
}
|
|
|
|
watch(() => props.open, (open) => {
|
|
if (typeof document === 'undefined') return
|
|
document.body.style.overflow = open ? 'hidden' : ''
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (typeof document !== 'undefined') document.body.style.overflow = ''
|
|
})
|
|
</script>
|