<template>
  <span class="vm-ellipsis-text" :title="titleText">{{ text }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'vm-ellipsis-text' })

const props = defineProps<{
  modelValue?: unknown
  title?: string
}>()

const text = computed(() => {
  const v = props.modelValue
  if (v == null || v === '') return '—'
  return String(v)
})

const titleText = computed(() => props.title ?? (text.value === '—' ? undefined : text.value))
</script>

<style lang="scss" scoped>
.vm-ellipsis-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted-foreground);
}
</style>
