53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<Tooltip
|
|
:text="tooltipText"
|
|
class="flex items-center space-x-2"
|
|
:class="align == 'text-right' ? 'justify-end' : ''"
|
|
>
|
|
<slot name="prefix"></slot>
|
|
<slot>
|
|
<div class="text-base truncate">
|
|
{{ label }}
|
|
</div>
|
|
</slot>
|
|
</Tooltip>
|
|
</template>
|
|
<script setup>
|
|
import { dateFormat, timeAgo, dateTooltipFormat, htmlToText } from '@/utils'
|
|
import { Tooltip } from 'frappe-ui'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
},
|
|
align: {
|
|
type: String,
|
|
default: 'left',
|
|
},
|
|
value: {
|
|
type: [String, Number, Object],
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const tooltipText = computed(() => {
|
|
if (props.type === 'html') return ''
|
|
if (props.type === 'pretty_date') {
|
|
return dateFormat(props.value, dateTooltipFormat)
|
|
}
|
|
return props.value?.toString()
|
|
})
|
|
|
|
const label = computed(() => {
|
|
if (props.type === 'pretty_date') {
|
|
return timeAgo(props.value)
|
|
}
|
|
if (props.type === 'html') {
|
|
return htmlToText(props.value?.toString())
|
|
}
|
|
return props.value?.toString()
|
|
})
|
|
</script>
|