UIPerformanceEllipsis

UIPerformanceEllipsis

A performance-optimized component for truncating text with support for line clamping, expansion, and tooltips.

<template>
  <UIPerformanceEllipsis
    :lineClamp="2"
    :expandTrigger="'click'"
    :tooltip="true"
    :text="longText"
    :expandable="true"
    v-model:expanded="isExpanded"
    @expand="handleExpand"
  >
    {{ longText }}
  </UIPerformanceEllipsis>
</template>

<script setup lang="ts">
const longText = ref('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')
const isExpanded = ref(false)

const handleExpand = (expanded: boolean) => {
  console.log('Text expanded:', expanded)
}
</script>

Props

• lineClamp (number): Number of lines before truncating
• expandTrigger (‘click’): Trigger for expanding text
• tooltip (boolean | TooltipProps): Show tooltip on hover
• text (string): Text content to truncate
• expandable (boolean): Allow text expansion
• expanded (boolean): Control expanded state
• tooltipMaxWidth (number): Maximum tooltip width
• tooltipPlacement (string): Tooltip placement
• ellipsis (string): Custom ellipsis string
• useNativeEllipsis (boolean): Use native CSS ellipsis

Events

• update:expanded: Emitted when expanded state changes
• expand: Emitted when text is expanded
• collapse: Emitted when text is collapsed

Usage Examples

1. Basic Usage:

<template>
  <UIPerformanceEllipsis :lineClamp="2">
    {{ longText }}
  </UIPerformanceEllipsis>
</template>

2. With Tooltip:

<template>
  <UIPerformanceEllipsis
    :lineClamp="1"
    :tooltip="{
      placement: 'top',
      maxWidth: 300
    }"
  >
    {{ description }}
  </UIPerformanceEllipsis>
</template>

3. Expandable Text:

<template>
  <UIPerformanceEllipsis
    :lineClamp="3"
    :expandable="true"
    v-model:expanded="isExpanded"
  >
    <template #default>
      {{ content }}
    </template>
    <template #expand-trigger="{ expanded }">
      <UIButton text size="small">
        {{ expanded ? 'Show Less' : 'Show More' }}
      </UIButton>
    </template>
  </UIPerformanceEllipsis>
</template>

4. Custom Ellipsis:

<template>
  <UIPerformanceEllipsis
    :lineClamp="2"
    ellipsis="... (more)"
    :useNativeEllipsis="false"
  >
    {{ text }}
  </UIPerformanceEllipsis>
</template>

Best Practices

1. Performance:

   • Use native ellipsis when possible
   • Avoid unnecessary re-renders
   • Cache truncation calculations
   • Optimize for large text blocks

2. User Experience:

   • Show clear expansion triggers
   • Provide tooltips for context
   • Maintain consistent behavior
   • Handle text updates smoothly

3. Accessibility:

   • Ensure expandable content is accessible
   • Provide keyboard navigation
   • Include ARIA attributes
   • Support screen readers

4. Responsiveness:

   • Adjust line clamp based on screen size
   • Handle dynamic container widths
   • Maintain readability
   • Consider mobile interactions

Common Use Cases

1. List Items:

<template>
  <ul class="space-y-2">
    <li v-for="item in items" :key="item.id">
      <UIPerformanceEllipsis
        :lineClamp="2"
        :tooltip="true"
      >
        {{ item.description }}
      </UIPerformanceEllipsis>
    </li>
  </ul>
</template>

2. Card Content:

<template>
  <UICard>
    <UIPerformanceEllipsis
      :lineClamp="3"
      :expandable="true"
      class="text-sm"
    >
      {{ cardContent }}
    </UIPerformanceEllipsis>
  </UICard>
</template>

3. Table Cells:

<template>
  <UITable :columns="columns" :data="data">
    <template #description="{ text }">
      <UIPerformanceEllipsis
        :lineClamp="1"
        :tooltip="true"
      >
        {{ text }}
      </UIPerformanceEllipsis>
    </template>
  </UITable>
</template>

Performance Tips

1. Text Processing:

   • Use efficient truncation algorithms
   • Implement virtual scrolling for lists
   • Cache computed lengths
   • Debounce resize handlers

2. Memory Management:

   • Clean up event listeners
   • Dispose tooltip instances
   • Clear cached calculations
   • Handle component unmounting

3. Rendering Optimization:

   • Use CSS when possible
   • Minimize DOM operations
   • Batch updates
   • Avoid unnecessary calculations