45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<template>
|
|
<div class="group relative shrink-0">
|
|
<button
|
|
type="button"
|
|
class="relative z-10 flex h-6 w-6 items-center justify-center rounded-full text-zinc-500 hover:text-amber-200"
|
|
:aria-label="ariaLabel"
|
|
title="Copy prompt"
|
|
@click.stop="emit('copy', text)"
|
|
@wheel.prevent="onIconWheel"
|
|
>
|
|
<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 right-0 top-full z-20 -mt-1 pt-2 group-hover:visible group-focus-within:visible">
|
|
<div
|
|
ref="panel"
|
|
class="pointer-events-auto max-h-48 w-64 max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-zinc-950 p-3 text-xs leading-relaxed text-zinc-300 shadow-2xl"
|
|
>
|
|
{{ text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
text: string
|
|
ariaLabel: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
copy: [text: string]
|
|
}>()
|
|
|
|
const panel = ref<HTMLElement | null>(null)
|
|
|
|
function onIconWheel(event: WheelEvent) {
|
|
const el = panel.value
|
|
if (!el) return
|
|
el.scrollTop += event.deltaY
|
|
}
|
|
</script>
|