54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import GlassTooltip from '@/Components/FlightsGoneBy/GlassTooltip.vue'
|
|
import type { Anchor } from 'vuetify'
|
|
|
|
withDefaults(defineProps<{
|
|
label?: string
|
|
location?: Anchor
|
|
}>(), {
|
|
label: 'Missing something?',
|
|
})
|
|
|
|
defineSlots<{
|
|
default(): any
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<GlassTooltip :location="location ?? 'top'" :open-delay="150">
|
|
<template #activator="{ props: activatorProps }">
|
|
<button
|
|
v-bind="activatorProps"
|
|
type="button"
|
|
class="missing-entity-link"
|
|
>
|
|
{{ label }}
|
|
</button>
|
|
</template>
|
|
|
|
<template #default>
|
|
<slot />
|
|
</template>
|
|
</GlassTooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.missing-entity-link {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
font-size: 12px;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
cursor: pointer;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.missing-entity-link:hover {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
</style>
|