48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div v-if="visible" class="ghost-text-overlay" :style="overlayStyle"
|
||
|
|
@click="acceptSuggestion"
|
||
|
|
>{{ suggestion }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
suggestion: { type: String, default: '' },
|
||
|
|
position: { type: Object, required: true },
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['accept', 'dismiss'])
|
||
|
|
|
||
|
|
const visible = computed(() => props.suggestion && props.position)
|
||
|
|
|
||
|
|
const overlayStyle = computed(() => ({
|
||
|
|
position: 'absolute',
|
||
|
|
left: `${props.position.left}px`,
|
||
|
|
top: `${props.position.top}px`,
|
||
|
|
fontSize: `${props.position.fontSize || 16}px`,
|
||
|
|
fontFamily: props.position.fontFamily || 'monospace',
|
||
|
|
color: '#999',
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
pointerEvents: 'auto',
|
||
|
|
cursor: 'text',
|
||
|
|
whiteSpace: 'pre-wrap',
|
||
|
|
zIndex: 1000,
|
||
|
|
}))
|
||
|
|
|
||
|
|
const acceptSuggestion = () => emit('accept')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.ghost-text-overlay {
|
||
|
|
opacity: 0.6;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ghost-text-overlay:hover {
|
||
|
|
opacity: 1;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
</style>
|