<template>
  <p class="vm-clamp-text" :style="lineStyle">
    <slot>{{ text }}</slot>
  </p>
</template>

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

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

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

const lineStyle = computed(() => ({
  '--vm-clamp-lines': String(props.lines),
}))
</script>

<style lang="scss" scoped>
.vm-clamp-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--vm-clamp-lines, 2);
  line-clamp: var(--vm-clamp-lines, 2);
}
</style>
