37 lines
916 B
Vue
37 lines
916 B
Vue
<template>
|
|
<div ref="wrapper" class="table-short-text" v-bind="attrs">
|
|
<UTooltip v-if="isMobile" :text="text" :open="open">
|
|
{{ truncate(text, maxLength) }}
|
|
<Icon
|
|
v-if="!hideIcon"
|
|
name="heroicons:information-circle"
|
|
@click="open = !open"
|
|
/>
|
|
</UTooltip>
|
|
|
|
<UTooltip v-else :text="text">
|
|
<span>{{ truncate(text, maxLength) }}</span>
|
|
</UTooltip>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onClickOutside, useMediaQuery } from '@vueuse/core'
|
|
|
|
defineProps<{ text: string, maxLength: number, hideIcon: boolean }>()
|
|
const attrs = useAttrs()
|
|
|
|
const wrapper = ref<HTMLElement | null>(null)
|
|
const open = ref(false)
|
|
|
|
const isMobile = useMediaQuery('(max-width: 1280px)')
|
|
|
|
onClickOutside(wrapper, () => {
|
|
open.value = false
|
|
})
|
|
|
|
function truncate(text: string, max = 15) {
|
|
return text?.length > max ? `${text?.slice(0, max)}…` : text
|
|
}
|
|
</script>
|