<template>
  <div v-if="text.length <= tailLength" class="w100">
    {{ text }}
  </div>
  <div v-else class="flex no-wrap w100">
    <div class="col ellipsis col-shrink">
      {{ textStart }}
    </div>      
    <div class="col col-grow">
      {{ textEnd }}
    </div>
  </div>
</template>

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

  const props = withDefaults(defineProps<{
    text: string
    tailLength?: number
  }>(), {
    tailLength: 15
  })

  const textStart = computed(() => {
    return props.text.slice(0, props.text.length - props.tailLength)
  })
  
  const textEnd = computed(() => {
    return props.text.slice(-props.tailLength)
  })
</script>
