99 lines
2.9 KiB
Vue
99 lines
2.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">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
<h2 class="min-w-0 truncate font-display text-lg font-bold">{{ title }}</h2>
|
|
<KeepPromptMenu
|
|
v-if="editable"
|
|
:items="keepItems"
|
|
:heading="keepHeading"
|
|
align="left"
|
|
@insert="onKeepInsert"
|
|
/>
|
|
</div>
|
|
<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 v-if="editable && keepItems.length" class="mt-3 flex flex-wrap gap-1.5">
|
|
<button
|
|
v-for="item in keepItems"
|
|
:key="item.id"
|
|
type="button"
|
|
class="max-w-full truncate rounded-full border border-white/10 px-2.5 py-1 text-xs text-zinc-300 hover:border-amber-300/40 hover:text-amber-100"
|
|
:title="item.text"
|
|
@click="onKeepInsert(item)"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { insertKeepSnippet, type KeepPrompt } from '~/utils/keepPrompts'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
open: boolean
|
|
title?: string
|
|
text?: string
|
|
editable?: boolean
|
|
placeholder?: string
|
|
keepItems?: KeepPrompt[]
|
|
keepHeading?: string
|
|
}>(), {
|
|
title: 'Prompt',
|
|
text: '',
|
|
editable: true,
|
|
placeholder: '',
|
|
keepItems: () => [],
|
|
keepHeading: 'Saved prompts'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [value: boolean]
|
|
'update:text': [value: string]
|
|
}>()
|
|
|
|
function onInput(event: Event) {
|
|
emit('update:text', (event.target as HTMLTextAreaElement).value)
|
|
}
|
|
|
|
function onKeepInsert(item: KeepPrompt) {
|
|
emit('update:text', insertKeepSnippet(props.text || '', item.text))
|
|
}
|
|
|
|
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>
|