83 lines
2.7 KiB
Vue
83 lines
2.7 KiB
Vue
<template>
|
|
<div class="group relative shrink-0" @wheel.prevent="onIconWheel">
|
|
<button
|
|
type="button"
|
|
class="relative z-10 flex h-6 w-6 items-center justify-center rounded-full"
|
|
:class="text ? 'text-amber-200/80 hover:text-amber-100' : 'text-zinc-600 hover:text-zinc-400'"
|
|
:aria-label="ariaLabel"
|
|
:title="text ? 'Insert activation word' : 'Set activation word'"
|
|
@click.stop="onIconClick"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M12 16v-4M12 8h.01" stroke-linecap="round" />
|
|
</svg>
|
|
</button>
|
|
<div class="invisible absolute left-0 top-full z-30 -mt-1 pt-2 group-hover:visible group-focus-within:visible">
|
|
<div
|
|
ref="panel"
|
|
class="pointer-events-auto w-64 max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl"
|
|
@click.stop
|
|
>
|
|
<p class="text-[10px] uppercase tracking-wide text-zinc-500">Activation</p>
|
|
<p v-if="text" class="mt-1 max-h-24 overflow-y-auto whitespace-pre-wrap break-words">{{ text }}</p>
|
|
<p v-else class="mt-1 text-zinc-500">No word yet. Type one, then insert it into the prompt.</p>
|
|
<input
|
|
ref="input"
|
|
v-model="draft"
|
|
class="mt-2 w-full rounded-lg border border-white/10 bg-zinc-900 px-2 py-1 text-xs outline-none ring-amber-300/40 focus:ring-2"
|
|
maxlength="240"
|
|
placeholder="ohwx woman"
|
|
@keydown.enter.prevent="save"
|
|
>
|
|
<div class="mt-2 flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
class="text-[11px] text-amber-200 hover:text-amber-100 disabled:text-zinc-600"
|
|
:disabled="!text"
|
|
@click="emit('insert', text)"
|
|
>
|
|
Insert into prompt
|
|
</button>
|
|
<button type="button" class="text-[11px] text-zinc-400 hover:text-white" @click="save">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
text: string
|
|
ariaLabel: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
insert: [text: string]
|
|
save: [text: string]
|
|
}>()
|
|
|
|
const panel = ref<HTMLElement | null>(null)
|
|
const input = ref<HTMLInputElement | null>(null)
|
|
const draft = ref(props.text)
|
|
|
|
watch(() => props.text, (value) => {
|
|
draft.value = value
|
|
})
|
|
|
|
function onIconClick() {
|
|
if (props.text) emit('insert', props.text)
|
|
else input.value?.focus()
|
|
}
|
|
|
|
function save() {
|
|
emit('save', draft.value)
|
|
}
|
|
|
|
function onIconWheel(event: WheelEvent) {
|
|
const el = panel.value
|
|
if (!el) return
|
|
el.scrollTop += event.deltaY
|
|
}
|
|
</script>
|