explorer-app/components/Project/ProjectInfoItem.vue

156 lines
3.7 KiB
Vue

<script lang="ts" setup>
defineProps<{
header?: string
title?: string
link?: string
textSize?: string
bold?: boolean
color?: string
opacity?: number
tooltip?: string
tooltipLink?: string
checkUndefined?: any | undefined | null
}>()
const heading = ref()
const tooltipDiv = ref()
const tooltipLeftOffset = computed(() => (tooltipDiv.value?.offsetWidth / 2) - (heading.value?.offsetWidth / 2))
const mouseOverTooltip = ref(false)
const showTooltip = ref(false)
function headingMouseOut() {
setTimeout(() => mouseOverTooltip.value ? showTooltip.value = true : showTooltip.value = false, 500)
}
function tooltipMouseOver() {
mouseOverTooltip.value = true
showTooltip.value = true
}
function tooltipMouseOut() {
mouseOverTooltip.value = false
showTooltip.value = false
}
</script>
<template>
<div
flex
items-start
relative
>
<div
h-full
flex
items-center
text-32px
gap-12px
>
<slot name="prefix" />
<div />
</div>
<div
class="peer"
flex
flex-col
justify-center
w-full
>
<h3
v-if="title"
ref="heading"
w-fit
text="14px sm:16px app-text-grey"
leading-24px
:class="[tooltip ? 'cursor-pointer underline underline-offset-5 decoration-dotted hover:decoration-solid hover:text-app-white' : '']"
@mouseover="showTooltip = true"
@mouseout="headingMouseOut()"
>
{{ title }}
</h3>
<template v-if="checkUndefined === undefined || checkUndefined === null">
<span
opacity-50
leading-24px
font-700
text-14px
:class="`sm:text-${textSize ?? '16px'}`"
>{{ 'N/A' }}</span>
</template>
<template v-else>
<template v-if="link">
<div
flex
gap-6px
items-center
justify-start
hover:underline
hover:text-white
text-14px
:color="color ?? '#FFF'"
class="hoverEl"
:class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
leading-24px
@click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
>
<slot />
<UnoIcon
i-web-openinnew
text-16px
text-app-text-grey
class="customHover"
/>
</div>
</template>
<div
v-else
flex
items-center
gap-4px
:color="color ?? '#FFF'"
text-14px
:class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
leading-24px
>
<slot />
</div>
</template>
</div>
<div
v-if="tooltip"
ref="tooltipDiv"
:style="{ left: `-${tooltipLeftOffset}px` }"
:class="[showTooltip ? 'visible' : 'invisible']"
class="flex flex-col max-w-232px top-40px absolute z-100 inline-block px-3 py-2 text-14px font-400 text-app-black bg-app-white"
@mouseover="tooltipMouseOver()"
@mouseout="tooltipMouseOut()"
>
{{ tooltip }}
<NuxtLink
v-if="tooltipLink"
mt-12px
text-14px
font-400
leading-20px
underline
underline-offset-2
:to="tooltipLink"
>
{{ 'Learn More' }}
</NuxtLink>
<div
w-16px
h-16px
absolute
bg-white
class="top--8px left-50% translate-x--50% rotate-45 z-99"
/>
</div>
</div>
</template>
<style scoped>
.hoverEl:hover .customHover {
color: #FFF;
}
</style>