nuxt-ui-tools 1.25.0 → 1.26.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/display/components/blocks/display-accordion.vue

@@ -3,6 +3,7 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed, defineAsyncComponent, ref, useId } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import DisplayRender from "../parts/display-render";
 import DisplaySkeleton from "../parts/display-skeleton.vue";
@@ -67,7 +68,9 @@ function toggle(index) {
         @click="toggle(index)"
       >
         <UIcon v-if="item.icon" :name="item.icon" :class="classes.icon" />
-        <span :class="classes.label"><DisplayRender :content="item.label" /></span>
+        <span v-reveal-truncated :class="classes.label"
+          ><DisplayRender :content="item.label"
+        /></span>
         <UIcon
           :name="icons.chevronDown"
           :class="[classes.chevron, open.includes(index) ? 'rotate-180' : '']"

package/dist/runtime/display/components/blocks/display-alert.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { toneIcon, useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import { displayToneClass } from "../../utils/tone";
@@ -93,8 +94,10 @@ const classes = computed(
     </span>
     <UIcon v-else-if="resolvedIcon" :name="resolvedIcon" :class="classes.icon" />
     <div :class="classes.body">
-      <div v-if="titled" :class="classes.title"><DisplayRender :content="title" /></div>
-      <div v-if="!isDisplayContentEmpty(message)" :class="classes.message">
+      <div v-if="titled" v-reveal-truncated :class="classes.title">
+        <DisplayRender :content="title" />
+      </div>
+      <div v-if="!isDisplayContentEmpty(message)" v-reveal-truncated :class="classes.message">
         <DisplayRender :content="message" />
       </div>
       <div v-if="items?.length" :class="classes.items">

package/dist/runtime/display/components/blocks/display-breakdown.vue

@@ -5,6 +5,7 @@ import { computed, ref } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import { DISPLAY_SURFACE_CLASSES, displayToneClass } from "../../utils/tone";
@@ -100,6 +101,7 @@ function valueClass(line) {
             <td
               v-for="(cell, cellIndex) in line.values ?? []"
               :key="cellIndex"
+              v-reveal-truncated
               :class="['px-4 py-2 text-end', valueClass(line)]"
             >
               <DisplayRender :content="cell" />
@@ -122,7 +124,7 @@ function valueClass(line) {
     </div>
     <div v-else-if="mode === 'collapsible'" :class="classes.root">
       <div :class="classes.total">
-        <span :class="classes.totalLabel">
+        <span v-reveal-truncated :class="classes.totalLabel">
           <DisplayRender :content="total?.label ?? title" />
           <DisplayChip v-if="total?.chip" :chip="total.chip" />
         </span>
@@ -140,31 +142,35 @@ function valueClass(line) {
       </div>
       <div v-if="open" :class="classes.body">
         <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
-          <span :class="classes.label">
+          <span v-reveal-truncated :class="classes.label">
             <DisplayRender :content="line.label" />
             <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
               ><DisplayRender :content="line.detail"
             /></span>
           </span>
-          <span :class="valueClass(line)"><DisplayRender :content="line.value" /></span>
+          <span v-reveal-truncated :class="valueClass(line)"
+            ><DisplayRender :content="line.value"
+          /></span>
         </div>
       </div>
     </div>
     <div v-else :class="classes.root">
-      <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
+      <div v-if="!isDisplayContentEmpty(title)" v-reveal-truncated :class="classes.title">
         <DisplayRender :content="title" />
       </div>
       <div v-for="(line, index) in lines" :key="index" :class="lineClass(line)">
-        <span :class="classes.label">
+        <span v-reveal-truncated :class="classes.label">
           <DisplayRender :content="line.label" />
           <span v-if="!isDisplayContentEmpty(line.detail)" :class="classes.detail"
             ><DisplayRender :content="line.detail"
           /></span>
         </span>
-        <span :class="valueClass(line)"><DisplayRender :content="line.value" /></span>
+        <span v-reveal-truncated :class="valueClass(line)"
+          ><DisplayRender :content="line.value"
+        /></span>
       </div>
       <div v-if="total" :class="classes.total">
-        <span :class="classes.totalLabel">
+        <span v-reveal-truncated :class="classes.totalLabel">
           <DisplayRender :content="total.label" />
           <DisplayChip v-if="total.chip" :chip="total.chip" />
         </span>

package/dist/runtime/display/components/blocks/display-chart.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayNumber } from "../../composables/use-display-number";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import DisplayEmptyLine from "../parts/display-empty-line.vue";
@@ -113,7 +114,7 @@ function colorOf(datum, index) {
       v-if="!isDisplayContentEmpty(title) || !isDisplayContentEmpty(aside)"
       :class="classes.header"
     >
-      <span :class="classes.title"><DisplayRender :content="title" /></span>
+      <span v-reveal-truncated :class="classes.title"><DisplayRender :content="title" /></span>
       <span :class="classes.aside"><DisplayRender :content="aside" /></span>
     </div>
     <DisplayEmptyLine v-if="!data.length" :content="empty" :class="classes.plot" />
@@ -145,6 +146,7 @@ function colorOf(datum, index) {
         <span
           v-for="(datum, index) in data"
           :key="index"
+          v-reveal-truncated
           class="min-w-0 flex-1 truncate text-center"
         >
           {{ resolveDisplayText(datum.label) }}
@@ -220,7 +222,9 @@ function colorOf(datum, index) {
     </div>
     <div v-else-if="variant === 'funnel'" :class="[classes.plot, 'flex flex-col gap-1.5']">
       <div v-for="(step, index) in steps" :key="index" :class="classes.step">
-        <span :class="classes.stepLabel">{{ resolveDisplayText(step.label) }}</span>
+        <span v-reveal-truncated :class="classes.stepLabel">{{
+          resolveDisplayText(step.label)
+        }}</span>
         <span
           class="h-4 rounded-[3px]"
           :style="{

package/dist/runtime/display/components/blocks/display-code.vue

@@ -6,6 +6,7 @@ import { isNumber } from "../../../shared/utils/predicate";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { resolveDisplayText } from "../../utils/content";
 import { tokenizeJson } from "../../utils/json";
@@ -109,7 +110,7 @@ const classes = computed(
   </div>
   <div v-else :class="classes.root" data-display="code" :data-variant="variant">
     <UIcon v-if="icon" :name="icon" :class="classes.icon" />
-    <span :class="classes.value" data-display-value>{{
+    <span v-reveal-truncated :class="classes.value" data-display-value>{{
       variant === "secret" && !revealed ? masked : value
     }}</span>
     <div :class="classes.actions">

package/dist/runtime/display/components/blocks/display-date.vue

@@ -1,10 +1,10 @@
 <script setup>
-import UBadge from "@nuxt/ui/components/Badge.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import {
@@ -16,6 +16,7 @@ import {
   toDisplayDate
 } from "../../utils/dates";
 import { displayToneClass } from "../../utils/tone";
+import DisplayChip from "../parts/display-chip.vue";
 import DisplayRender from "../parts/display-render";
 import DisplaySkeleton from "../parts/display-skeleton.vue";
 const {
@@ -83,7 +84,10 @@ const countdownText = computed(() => {
     return t("display.overdue", { duration: formatDayCount(-days.value, code.value) });
   return formatRelativeDays(days.value, code.value);
 });
-const longDate = (date) => date ? formatDisplayDate(date, code.value, time ? LONG_DATE_TIME_FORMAT : LONG_DATE_FORMAT) : "";
+const longDate = (date) => date ? formatDisplayDate(date, code.value, {
+  ...time ? LONG_DATE_TIME_FORMAT : LONG_DATE_FORMAT,
+  year: date.getFullYear() === reference.value.getFullYear() ? void 0 : "numeric"
+}) : "";
 const duration = computed(
   () => start.value && finish.value ? formatDayCount(calendarDaysBetween(start.value, finish.value) + 1, code.value) : void 0
 );
@@ -124,8 +128,10 @@ const classes = computed(
     <template v-if="variant === 'countdown'">
       <UIcon :name="icon ?? (overdue ? icons.warning : 'i-lucide-clock')" :class="classes.icon" />
       <div :class="classes.body">
-        <div :class="classes.value" data-display-countdown>{{ countdownText }}</div>
-        <div :class="classes.caption">
+        <div v-reveal-truncated :class="classes.value" data-display-countdown>
+          {{ countdownText }}
+        </div>
+        <div v-reveal-truncated :class="classes.caption">
           <DisplayRender
             :content="
   description ?? (deadline ? t('display.dueOn', { date: longDate(start) }) : longDate(start))
@@ -137,21 +143,14 @@ const classes = computed(
     <template v-else-if="variant === 'range'">
       <div :class="classes.bound">
         <span :class="classes.boundLabel">{{ t("display.from") }}</span>
-        <span :class="classes.boundValue">{{ longDate(start) }}</span>
+        <span v-reveal-truncated :class="classes.boundValue">{{ longDate(start) }}</span>
       </div>
       <div :class="classes.line">
-        <UBadge
-          v-if="duration"
-          color="neutral"
-          variant="soft"
-          size="sm"
-          :label="duration"
-          :class="classes.duration"
-        />
+        <DisplayChip v-if="duration" :chip="{ label: duration }" :class="classes.duration" />
       </div>
       <div :class="[classes.bound, 'text-end']">
         <span :class="classes.boundLabel">{{ t("display.to") }}</span>
-        <span :class="classes.boundValue">{{ longDate(finish) }}</span>
+        <span v-reveal-truncated :class="classes.boundValue">{{ longDate(finish) }}</span>
       </div>
     </template>
     <template v-else>
@@ -161,8 +160,14 @@ const classes = computed(
         <div :class="classes.weekday">{{ leaf?.weekday }}</div>
       </div>
       <div :class="classes.body">
-        <div :class="classes.title"><DisplayRender :content="title ?? longDate(start)" /></div>
-        <div v-if="!isDisplayContentEmpty(description) || timeRange" :class="classes.description">
+        <div v-reveal-truncated :class="classes.title">
+          <DisplayRender :content="title ?? longDate(start)" />
+        </div>
+        <div
+          v-if="!isDisplayContentEmpty(description) || timeRange"
+          v-reveal-truncated
+          :class="classes.description"
+        >
           <UIcon v-if="timeRange" :name="icon ?? 'i-lucide-clock'" class="size-3 shrink-0" />
           <span v-if="timeRange">{{ timeRange }}</span>
           <template v-if="timeRange && !isDisplayContentEmpty(description)"> · </template>

package/dist/runtime/display/components/blocks/display-diff.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import DisplayChip from "../parts/display-chip.vue";
@@ -42,6 +43,7 @@ const classes = computed(
       arrow: "size-3.5 shrink-0 text-dimmed",
       before: "rounded-[4px] bg-[var(--nut-display-error-soft)] px-1.5 py-px text-[var(--nut-display-error-ink)] line-through decoration-[color-mix(in_oklab,currentColor_45%,transparent)]",
       cell: "border-t border-muted px-3 py-2 align-middle",
+      frame: "overflow-hidden rounded-[var(--nut-display-radius)] border border-default",
       headCell: "bg-elevated px-3 py-2 text-start text-[11px] font-bold tracking-[0.07em] text-muted uppercase",
       item: "",
       label: "mb-1 flex items-center gap-2 text-xs text-muted",
@@ -65,12 +67,12 @@ const classes = computed(
     :count="Math.max(items.length, 2)"
   />
   <div v-else :class="classes.root" data-display="diff" :data-variant="variant">
-    <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
+    <div v-if="!isDisplayContentEmpty(title)" v-reveal-truncated :class="classes.title">
       <DisplayRender :content="title" />
     </div>
     <template v-if="variant === 'inline'">
       <div v-for="(item, index) in inlineItems" :key="index" :class="classes.item">
-        <div :class="classes.label">
+        <div v-reveal-truncated :class="classes.label">
           <DisplayRender :content="item.label" />
           <DisplayChip v-if="item.note" :chip="item.note" :class="classes.note" />
         </div>
@@ -82,7 +84,10 @@ const classes = computed(
           <DisplayRender :content="isDisplayContentEmpty(item.after) ? item.before : item.after" />
         </div>
         <div v-else :class="classes.values">
-          <span v-if="!isDisplayContentEmpty(item.before)" :class="classes.before"
+          <span
+            v-if="!isDisplayContentEmpty(item.before)"
+            v-reveal-truncated
+            :class="classes.before"
             ><DisplayRender :content="item.before"
           /></span>
           <UIcon
@@ -90,13 +95,13 @@ const classes = computed(
             :name="icons.arrowRight"
             :class="classes.arrow"
           />
-          <span v-if="!isDisplayContentEmpty(item.after)" :class="classes.after"
+          <span v-if="!isDisplayContentEmpty(item.after)" v-reveal-truncated :class="classes.after"
             ><DisplayRender :content="item.after"
           /></span>
         </div>
       </div>
     </template>
-    <div v-else class="overflow-hidden rounded-[var(--nut-display-radius)] border border-default">
+    <div v-else :class="classes.frame">
       <table :class="classes.table">
         <thead>
           <tr>
@@ -104,6 +109,7 @@ const classes = computed(
               v-for="(heading, index) in headings"
               :key="index"
               scope="col"
+              v-reveal-truncated
               :class="classes.headCell"
             >
               <DisplayRender :content="heading" />
@@ -117,13 +123,19 @@ const classes = computed(
             :class="item.changed === false ? 'text-dimmed' : ''"
             :data-changed="item.changed !== false"
           >
-            <td :class="[classes.cell, item.changed === false ? '' : 'text-toned']">
+            <td
+              v-reveal-truncated
+              :class="[classes.cell, item.changed === false ? '' : 'text-toned']"
+            >
               <span class="inline-flex flex-wrap items-center gap-1.5">
                 <DisplayRender :content="item.label" />
                 <DisplayChip v-if="item.note" :chip="item.note" :class="classes.note" />
               </span>
             </td>
-            <td :class="[classes.cell, item.changed === false ? '' : 'text-muted']">
+            <td
+              v-reveal-truncated
+              :class="[classes.cell, item.changed === false ? '' : 'text-muted']"
+            >
               <DisplayRender :content="item.before" />
             </td>
             <td

package/dist/runtime/display/components/blocks/display-empty.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import { displayToneClass } from "../../utils/tone";
@@ -63,10 +64,10 @@ const classes = computed(
   >
     <UIcon v-if="variant === 'plain'" :name="icon ?? icons.empty" :class="classes.icon" />
     <span v-else :class="classes.icon"><UIcon :name="icon ?? icons.empty" class="size-5" /></span>
-    <div :class="classes.title">
+    <div v-reveal-truncated :class="classes.title">
       <DisplayRender :content="title ?? (variant === 'plain' ? void 0 : t('display.empty'))" />
     </div>
-    <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+    <div v-if="!isDisplayContentEmpty(description)" v-reveal-truncated :class="classes.description">
       <DisplayRender :content="description" />
     </div>
     <DisplayActions v-if="actions?.length" :actions="actions" :class="classes.actions" />

package/dist/runtime/display/components/blocks/display-facts.vue

@@ -3,6 +3,7 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty } from "../../utils/content";
 import {
@@ -125,40 +126,54 @@ function valueClass(fact) {
   >
     <template v-for="(group, groupIndex) in resolvedGroups" :key="groupIndex">
       <div v-if="!isDisplayContentEmpty(group.title)" :class="classes.groupHeader">
-        <span :class="classes.groupTitle"><DisplayRender :content="group.title" /></span>
-        <span v-if="!isDisplayContentEmpty(group.aside)" :class="classes.groupAside">
+        <span v-reveal-truncated :class="classes.groupTitle"
+          ><DisplayRender :content="group.title"
+        /></span>
+        <span
+          v-if="!isDisplayContentEmpty(group.aside)"
+          v-reveal-truncated
+          :class="classes.groupAside"
+        >
           <DisplayRender :content="group.aside" />
         </span>
       </div>
       <div v-for="(fact, index) in group.items" :key="index" :class="classes.item">
         <div class="flex min-w-0 flex-col gap-px">
-          <span :class="classes.label">
+          <span v-reveal-truncated :class="classes.label">
             <UIcon v-if="fact.icon" :name="fact.icon" class="size-3.5 shrink-0" />
             <DisplayRender :content="fact.label" />
           </span>
-          <span v-if="!isDisplayContentEmpty(fact.hint)" :class="classes.hint">
+          <span v-if="!isDisplayContentEmpty(fact.hint)" v-reveal-truncated :class="classes.hint">
             <DisplayRender :content="fact.hint" />
           </span>
         </div>
-        <div :class="valueClass(fact)" data-display-value><DisplayFactValue :fact="fact" /></div>
+        <div v-reveal-truncated :class="valueClass(fact)" data-display-value>
+          <DisplayFactValue :fact="fact" />
+        </div>
       </div>
     </template>
   </div>
   <div v-else :class="classes.root" data-display="facts" :data-layout="layout">
     <div v-for="(group, groupIndex) in resolvedGroups" :key="groupIndex">
       <div v-if="!isDisplayContentEmpty(group.title)" :class="classes.groupHeader">
-        <span :class="classes.groupTitle"><DisplayRender :content="group.title" /></span>
-        <span v-if="!isDisplayContentEmpty(group.aside)" :class="classes.groupAside">
+        <span v-reveal-truncated :class="classes.groupTitle"
+          ><DisplayRender :content="group.title"
+        /></span>
+        <span
+          v-if="!isDisplayContentEmpty(group.aside)"
+          v-reveal-truncated
+          :class="classes.groupAside"
+        >
           <DisplayRender :content="group.aside" />
         </span>
       </div>
       <dl :class="['m-0', classes.group]" :style="groupStyle">
         <div v-for="(fact, index) in group.items" :key="index" :class="classes.item">
-          <dt :class="classes.label">
+          <dt v-reveal-truncated :class="classes.label">
             <UIcon v-if="fact.icon" :name="fact.icon" class="size-3.5 shrink-0" />
             <DisplayRender :content="fact.label" />
           </dt>
-          <dd :class="['m-0', valueClass(fact)]" data-display-value>
+          <dd v-reveal-truncated :class="['m-0', valueClass(fact)]" data-display-value>
             <DisplayFactValue :fact="fact" />
           </dd>
           <dd

package/dist/runtime/display/components/blocks/display-heading.vue

@@ -3,8 +3,10 @@ import UButton from "@nuxt/ui/components/Button.vue";
 import UIcon from "@nuxt/ui/components/Icon.vue";
 import { computed } from "vue";
 import { useDisplayAppUi } from "../../composables/use-display-config";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { isExternalLink } from "../../utils/links";
 import { displayToneClass } from "../../utils/tone";
 import DisplayRender from "../parts/display-render";
 import DisplaySkeleton from "../parts/display-skeleton.vue";
@@ -64,7 +66,8 @@ const actionButton = computed(() => {
     size: "sm",
     variant: "link",
     ...rest,
-    label: resolveDisplayText(label)
+    label: resolveDisplayText(label),
+    target: rest.target === void 0 && isExternalLink(rest.to) ? "_blank" : rest.target
   };
 });
 </script>
@@ -80,14 +83,18 @@ const actionButton = computed(() => {
   <div v-else :class="[classes.root, displayToneClass(tone)]" data-display="heading">
     <span v-if="tile" :class="classes.icon"><UIcon :name="icon ?? ''" class="size-5" /></span>
     <UIcon v-else-if="icon" :name="icon" :class="classes.icon" />
-    <div :class="classes.text">
+    <div v-reveal-truncated :class="classes.text">
       <component :is="`h${level}`" :class="classes.title">
         <DisplayRender :content="title" />
         <span v-if="count !== void 0" :class="classes.count">{{
           resolveDisplayText(count)
         }}</span>
       </component>
-      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+      <div
+        v-if="!isDisplayContentEmpty(description)"
+        v-reveal-truncated
+        :class="classes.description"
+      >
         <DisplayRender :content="description" />
       </div>
     </div>

package/dist/runtime/display/components/blocks/display-list.vue

@@ -10,6 +10,7 @@ import { useDisplayIcons } from "../../composables/use-display-icons";
 import { useDisplayLocale } from "../../composables/use-display-locale";
 import { useDisplayReveal } from "../../composables/use-display-reveal";
 import { useDisplayUrlActions } from "../../composables/use-display-url";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { displayContentText, isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import { displayToneClass } from "../../utils/tone";
@@ -160,7 +161,7 @@ function downloadFile(index) {
 <template>
   <DisplaySkeleton v-if="loading" :count="Math.min(Math.max(items.length, 2), 5)" />
   <div v-else :class="classes.root" data-display="list" :data-variant="variant">
-    <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
+    <div v-if="!isDisplayContentEmpty(title)" v-reveal-truncated :class="classes.title">
       <DisplayRender :content="title" />
     </div>
     <DisplayEmptyLine v-if="!items.length" :content="empty" :class="classes.empty" />
@@ -193,7 +194,7 @@ function downloadFile(index) {
             {{ files[index]?.label }}
           </span>
           <div class="min-w-0 flex-1">
-            <div :class="classes.text">
+            <div v-reveal-truncated :class="classes.text">
               <a
                 v-if="item.href"
                 :href="isString(item.href) ? item.href : '#'"
@@ -209,6 +210,7 @@ function downloadFile(index) {
             </div>
             <div
               v-if="files[index]?.size || !isDisplayContentEmpty(item.description)"
+              v-reveal-truncated
               :class="classes.description"
             >
               {{ files[index]?.size
@@ -274,11 +276,15 @@ function downloadFile(index) {
             >
               <DisplayRender :content="item.text" />
             </div>
-            <div v-if="!isDisplayContentEmpty(item.description)" :class="classes.description">
+            <div
+              v-if="!isDisplayContentEmpty(item.description)"
+              v-reveal-truncated
+              :class="classes.description"
+            >
               <DisplayRender :content="item.description" />
             </div>
           </div>
-          <span v-if="!isDisplayContentEmpty(item.meta)" :class="classes.meta"
+          <span v-if="!isDisplayContentEmpty(item.meta)" v-reveal-truncated :class="classes.meta"
             ><DisplayRender :content="item.meta"
           /></span>
         </template>

package/dist/runtime/display/components/blocks/display-media.vue

@@ -8,6 +8,7 @@ import { useDisplayAppUi } from "../../composables/use-display-config";
 import { useDisplayFilePreview } from "../../composables/use-display-file-preview";
 import { useDisplayLocale } from "../../composables/use-display-locale";
 import { useDisplayUrlActions, useResolvedDisplayUrl } from "../../composables/use-display-url";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
 import { resolveDisplayClasses } from "../../utils/classes";
 import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
 import { downloadDisplayUrl, openDisplayUrl } from "../../utils/urls";
@@ -181,7 +182,7 @@ function openLink() {
       />
       <span v-else-if="shown.pending.value" class="nut-dash-shimmer absolute inset-0" />
     </component>
-    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+    <figcaption v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
       <DisplayRender :content="caption" />
     </figcaption>
   </figure>
@@ -208,7 +209,7 @@ function openLink() {
         >
       </button>
     </div>
-    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+    <figcaption v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
       <DisplayRender :content="caption" />
     </figcaption>
   </figure>
@@ -242,6 +243,7 @@ function openLink() {
         /></span>
         <span
           v-if="!isDisplayContentEmpty(title)"
+          v-reveal-truncated
           :class="[classes.title, 'absolute start-3 bottom-2 text-white']"
         >
           <DisplayRender :content="title" />
@@ -251,7 +253,7 @@ function openLink() {
         }}</span>
       </button>
     </div>
-    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+    <figcaption v-if="!isDisplayContentEmpty(caption)" v-reveal-truncated :class="classes.caption">
       <DisplayRender :content="caption" />
     </figcaption>
   </figure>
@@ -277,9 +279,13 @@ function openLink() {
       />
     </div>
     <div :class="classes.body">
-      <div :class="classes.name">{{ fileName }}</div>
-      <div v-if="documentMeta" :class="classes.meta">{{ documentMeta }}</div>
-      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+      <div v-reveal-truncated :class="classes.name">{{ fileName }}</div>
+      <div v-if="documentMeta" v-reveal-truncated :class="classes.meta">{{ documentMeta }}</div>
+      <div
+        v-if="!isDisplayContentEmpty(description)"
+        v-reveal-truncated
+        :class="classes.description"
+      >
         <DisplayRender :content="description" />
       </div>
       <DisplayActions
@@ -301,10 +307,10 @@ function openLink() {
     @click="isString(href) ? void 0 : openLink()"
   >
     <div :class="[classes.body, 'px-3 py-2.5']">
-      <div v-if="domain" :class="classes.domain">
+      <div v-if="domain" v-reveal-truncated :class="classes.domain">
         <UIcon name="i-lucide-globe" class="size-3.5 shrink-0" />{{ domain }}
       </div>
-      <div :class="[classes.title, 'mt-0.5 flex items-center gap-1.5']">
+      <div v-reveal-truncated :class="[classes.title, 'mt-0.5 flex items-center gap-1.5']">
         <DisplayRender :content="title ?? (isString(href) ? href : void 0)" />
         <UIcon
           v-if="links.pending.value === 'open'"
@@ -312,7 +318,11 @@ function openLink() {
           class="size-3.5 shrink-0 animate-spin text-muted"
         />
       </div>
-      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+      <div
+        v-if="!isDisplayContentEmpty(description)"
+        v-reveal-truncated
+        :class="classes.description"
+      >
         <DisplayRender :content="description" />
       </div>
     </div>