nuxt-ui-tools 1.24.0 → 1.25.1

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

@@ -0,0 +1,268 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import ULink from "@nuxt/ui/components/Link.vue";
+import { computed } from "vue";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { displayLinkAttrs } from "../../utils/links";
+import { DISPLAY_SURFACE_CLASSES } from "../../utils/tone";
+import DisplayChip from "../parts/display-chip.vue";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayMore from "../parts/display-more.vue";
+import DisplayRecordMedia from "../parts/display-record-media.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "row",
+  heading = void 0,
+  headingIcon = void 0,
+  items = void 0,
+  surface = "bordered",
+  max = void 0,
+  step = void 0,
+  empty = void 0,
+  loading = false,
+  ui = void 0,
+  ...record
+} = defineProps({
+  variant: { type: String, required: false },
+  heading: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  headingIcon: { type: String, required: false },
+  items: { type: Array, required: false },
+  surface: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  reference: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  meta: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  metaIcon: { type: String, required: false },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  image: { type: Object, required: false },
+  avatar: { type: Object, required: false },
+  icon: { type: String, required: false },
+  tone: { type: String, required: false },
+  badges: { type: Array, required: false },
+  trailing: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  trailingCaption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  chip: { type: Object, required: false },
+  to: { type: String, required: false },
+  target: { type: [String, Object, null], required: false },
+  onClick: { type: Function, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true }
+});
+const appUi = useDisplayAppUi("record");
+const single = computed(() => ({ ...record, title: record.title ?? "" }));
+const reveal = useDisplayReveal({ items: () => items ?? [], max: () => max, step: () => step });
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      badges: "mt-1.5 flex flex-wrap gap-1",
+      body: "min-w-0 flex-1",
+      description: "mt-1 line-clamp-2 text-sm text-muted",
+      empty: "",
+      header: "flex items-center gap-2 border-b border-default bg-elevated px-3 py-2 text-sm font-semibold text-toned",
+      icon: "size-4 shrink-0 text-dimmed",
+      item: "flex items-center gap-2.5 border-t border-muted px-3 py-2.5 first:border-t-0",
+      avatar: "",
+      list: "",
+      media: "",
+      meta: "mt-0.5 flex min-w-0 items-center gap-1 text-xs text-muted",
+      more: "w-full justify-center rounded-none border-t border-muted",
+      reference: "font-mono text-[11px] text-dimmed",
+      root: variant === "card" || variant === "stack" ? `min-w-0 overflow-hidden ${DISPLAY_SURFACE_CLASSES[surface]}` : `flex min-w-0 items-center ${variant === "compact" ? "gap-2.5 p-2" : "gap-3 p-2.5"} ${DISPLAY_SURFACE_CLASSES[surface]}`,
+      title: "truncate font-semibold text-highlighted",
+      trailing: "shrink-0 text-end",
+      trailingCaption: "text-[11px] text-dimmed",
+      trailingValue: "font-extrabold text-highlighted tabular-nums"
+    },
+    appUi.value,
+    ui
+  )
+);
+function linkProps(item) {
+  if (item.to) return { is: ULink, ...displayLinkAttrs(item.to, item.target) };
+  if (item.onClick) return { is: "button", type: "button", onClick: item.onClick };
+  return { is: "div" };
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :layout="variant === 'stack' ? 'rows' : 'card'" :count="3" />
+  <div
+    v-else-if="variant === 'stack'"
+    :class="classes.root"
+    data-display="record"
+    data-variant="stack"
+  >
+    <div v-if="!isDisplayContentEmpty(heading)" :class="classes.header">
+      <UIcon v-if="headingIcon" :name="headingIcon" class="size-4 shrink-0 text-muted" />
+      <DisplayRender :content="heading" />
+      <span
+        class="ms-auto rounded-full bg-default px-2 py-px text-xs font-semibold text-toned tabular-nums"
+      >
+        {{ items?.length ?? 0 }}
+      </span>
+    </div>
+    <DisplayEmptyLine v-if="!items?.length" :content="empty" class="m-3" :class="classes.empty" />
+    <div v-else :class="classes.list">
+      <component
+        :is="linkProps(item).is"
+        v-for="(item, index) in reveal.visible.value"
+        :key="index"
+        v-bind="linkProps(item)"
+        :class="[
+  classes.item,
+  item.to || item.onClick ? 'w-full text-start hover:bg-elevated' : ''
+]"
+      >
+        <DisplayRecordMedia
+          :item="item"
+          size="sm"
+          :class="classes.media"
+          :avatar-class="classes.avatar"
+        />
+        <div :class="classes.body">
+          <div
+            v-if="!isDisplayContentEmpty(item.reference)"
+            v-reveal-truncated
+            :class="classes.reference"
+          >
+            <DisplayRender :content="item.reference" />
+          </div>
+          <div v-reveal-truncated :class="[classes.title, 'text-sm']">
+            <DisplayRender :content="item.title" />
+          </div>
+          <div v-if="!isDisplayContentEmpty(item.meta)" v-reveal-truncated :class="classes.meta">
+            <UIcon v-if="item.metaIcon" :name="item.metaIcon" class="size-3 shrink-0" />
+            <span v-reveal-truncated class="truncate"><DisplayRender :content="item.meta" /></span>
+          </div>
+          <div
+            v-if="!isDisplayContentEmpty(item.description)"
+            v-reveal-truncated
+            :class="classes.description"
+          >
+            <DisplayRender :content="item.description" />
+          </div>
+          <div v-if="item.badges?.length" :class="classes.badges">
+            <DisplayChip
+              v-for="(badge, badgeIndex) in item.badges"
+              :key="badgeIndex"
+              :chip="badge"
+            />
+          </div>
+        </div>
+        <DisplayChip v-if="item.chip" :chip="item.chip" />
+        <div v-if="!isDisplayContentEmpty(item.trailing)" :class="classes.trailing">
+          <div v-reveal-truncated :class="classes.trailingValue">
+            <DisplayRender :content="item.trailing" />
+          </div>
+          <div
+            v-if="!isDisplayContentEmpty(item.trailingCaption)"
+            v-reveal-truncated
+            :class="classes.trailingCaption"
+          >
+            <DisplayRender :content="item.trailingCaption" />
+          </div>
+        </div>
+      </component>
+      <DisplayMore
+        v-if="reveal.hidden.value"
+        :count="reveal.next.value"
+        :class="classes.more"
+        @reveal="reveal.reveal"
+      />
+    </div>
+  </div>
+  <component
+    :is="linkProps(single).is"
+    v-else-if="variant === 'card'"
+    v-bind="linkProps(single)"
+    :class="[classes.root, 'block text-start']"
+    data-display="record"
+    data-variant="card"
+  >
+    <DisplayRecordMedia :item="single" banner :class="classes.media" />
+    <div class="p-3.5">
+      <div
+        v-if="!isDisplayContentEmpty(single.reference)"
+        v-reveal-truncated
+        :class="classes.reference"
+      >
+        <DisplayRender :content="single.reference" />
+      </div>
+      <div v-reveal-truncated :class="classes.title"><DisplayRender :content="single.title" /></div>
+      <div v-if="!isDisplayContentEmpty(single.meta)" v-reveal-truncated :class="classes.meta">
+        <UIcon v-if="single.metaIcon" :name="single.metaIcon" class="size-3 shrink-0" />
+        <span v-reveal-truncated class="truncate"><DisplayRender :content="single.meta" /></span>
+      </div>
+      <div v-if="single.badges?.length" :class="classes.badges">
+        <DisplayChip v-for="(badge, index) in single.badges" :key="index" :chip="badge" />
+      </div>
+      <div
+        v-if="!isDisplayContentEmpty(single.description)"
+        v-reveal-truncated
+        :class="classes.description"
+      >
+        <DisplayRender :content="single.description" />
+      </div>
+    </div>
+  </component>
+  <component
+    :is="linkProps(single).is"
+    v-else
+    v-bind="linkProps(single)"
+    :class="[
+  classes.root,
+  single.to || single.onClick ? 'w-full text-start hover:bg-elevated' : ''
+]"
+    data-display="record"
+    :data-variant="variant"
+  >
+    <DisplayRecordMedia
+      :item="single"
+      :size="variant === 'compact' ? 'sm' : 'lg'"
+      :avatar-class="classes.avatar"
+      :class="classes.media"
+    />
+    <div :class="classes.body">
+      <div
+        v-if="!isDisplayContentEmpty(single.reference)"
+        v-reveal-truncated
+        :class="classes.reference"
+      >
+        <DisplayRender :content="single.reference" />
+      </div>
+      <div v-reveal-truncated :class="classes.title"><DisplayRender :content="single.title" /></div>
+      <div v-if="!isDisplayContentEmpty(single.meta)" v-reveal-truncated :class="classes.meta">
+        <UIcon v-if="single.metaIcon" :name="single.metaIcon" class="size-3 shrink-0" />
+        <span v-reveal-truncated class="truncate"><DisplayRender :content="single.meta" /></span>
+      </div>
+      <div v-if="single.badges?.length && variant === 'row'" :class="classes.badges">
+        <DisplayChip v-for="(badge, index) in single.badges" :key="index" :chip="badge" />
+      </div>
+    </div>
+    <DisplayChip v-if="single.chip" :chip="single.chip" />
+    <div v-if="!isDisplayContentEmpty(single.trailing)" :class="classes.trailing">
+      <div v-reveal-truncated :class="classes.trailingValue">
+        <DisplayRender :content="single.trailing" />
+      </div>
+      <div
+        v-if="!isDisplayContentEmpty(single.trailingCaption)"
+        v-reveal-truncated
+        :class="classes.trailingCaption"
+      >
+        <DisplayRender :content="single.trailingCaption" />
+      </div>
+    </div>
+    <UIcon
+      v-if="variant === 'compact' && (single.to || single.onClick)"
+      name="i-lucide-chevron-right"
+      :class="classes.icon"
+    />
+  </component>
+</template>

package/dist/runtime/display/components/blocks/display-record.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayRecordProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayRecordProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayRecordProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-stat.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayStatProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayStatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayStatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,189 @@
+<script setup>
+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, resolveDisplayText } from "../../utils/content";
+import {
+  DISPLAY_SURFACE_CLASSES,
+  DISPLAY_SURFACE_PADDING,
+  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 {
+  variant = "hero",
+  label = void 0,
+  value = void 0,
+  unit = void 0,
+  caption = void 0,
+  chip = void 0,
+  status = void 0,
+  delta = void 0,
+  trend = void 0,
+  items = void 0,
+  tone = "primary",
+  size = "md",
+  surface = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  label: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  value: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  unit: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  caption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  chip: { type: Object, required: false },
+  status: { type: Object, required: false },
+  delta: { type: Object, required: false },
+  trend: { type: Array, required: false },
+  items: { type: Array, required: false },
+  tone: { type: String, required: false },
+  size: { type: String, required: false },
+  surface: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const VALUE_SIZES = {
+  hero: { lg: "text-4xl", md: "text-3xl", sm: "text-xl" },
+  price: { lg: "text-3xl", md: "text-2xl", sm: "text-lg" },
+  row: { lg: "text-2xl", md: "text-xl", sm: "text-base" },
+  trend: { lg: "text-3xl", md: "text-2xl", sm: "text-lg" }
+};
+const appUi = useDisplayAppUi("stat");
+const resolvedSurface = computed(
+  () => surface ?? (variant === "hero" ? "muted" : variant === "row" ? "bordered" : "plain")
+);
+const deltaTone = computed(() => {
+  if (!delta) return "neutral";
+  if (delta.tone) return delta.tone;
+  if (delta.direction === "down") return "error";
+  return delta.direction === "flat" ? "neutral" : "success";
+});
+const deltaIcon = computed(() => {
+  if (delta?.direction === "down") return "i-lucide-trending-down";
+  return delta?.direction === "flat" ? "i-lucide-minus" : "i-lucide-trending-up";
+});
+const sparkline = computed(() => {
+  if (!trend || trend.length < 2) return void 0;
+  const min = Math.min(...trend);
+  const span = Math.max(...trend) - min || 1;
+  const points = trend.map((point, index) => {
+    const x = index / (trend.length - 1) * 100;
+    const y = 30 - (point - min) / span * 26;
+    return `${x.toFixed(2)} ${y.toFixed(2)}`;
+  });
+  const line = `M${points.join(" L")}`;
+  return { area: `${line} L100 32 L0 32 Z`, line };
+});
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      caption: variant === "hero" ? "mt-1 flex flex-wrap items-center justify-center gap-1.5 text-xs text-muted" : "mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted",
+      delta: "inline-flex items-center gap-1 rounded-full bg-[var(--nut-tone-soft)] px-2 py-0.5 text-xs font-bold text-[var(--nut-tone-ink)]",
+      item: "min-w-0 border-s border-default px-3.5 py-3 first:border-s-0",
+      itemCaption: "mt-0.5 text-xs text-muted",
+      itemLabel: "text-xs text-dimmed",
+      itemValue: `mt-0.5 font-extrabold text-highlighted tabular-nums ${VALUE_SIZES.row[size]}`,
+      items: "grid",
+      label: "text-xs font-semibold text-muted",
+      root: variant === "row" ? DISPLAY_SURFACE_CLASSES[resolvedSurface.value] : `flex min-w-0 ${variant === "hero" ? "flex-col items-center text-center" : variant === "trend" ? "items-end gap-4" : "flex-col"} ${DISPLAY_SURFACE_CLASSES[resolvedSurface.value]} ${DISPLAY_SURFACE_PADDING[resolvedSurface.value]}`,
+      sparkline: "h-11 min-w-0 flex-1 text-[var(--nut-tone)]",
+      status: "mt-1 flex items-center gap-1.5 text-sm font-semibold text-[var(--nut-tone-ink)]",
+      unit: "ms-1 text-sm font-semibold tracking-normal text-muted",
+      value: `my-0.5 leading-tight font-extrabold tracking-tight text-highlighted tabular-nums ${VALUE_SIZES[variant][size]}`
+    },
+    appUi.value,
+    ui
+  )
+);
+</script>
+
+<template>
+  <DisplaySkeleton
+    v-if="loading"
+    :layout="variant === 'row' ? 'tiles' : 'lines'"
+    :count="variant === 'row' ? 3 : 2"
+  />
+  <div v-else-if="variant === 'row'" :class="classes.root" data-display="stat" data-variant="row">
+    <div
+      :class="classes.items"
+      :style="{ gridTemplateColumns: `repeat(${items?.length || 1}, minmax(0, 1fr))` }"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :class="[classes.item, item.tone ? displayToneClass(item.tone) : '']"
+      >
+        <div v-reveal-truncated :class="classes.itemLabel">
+          <DisplayRender :content="item.label" />
+        </div>
+        <div :class="twMerge(classes.itemValue, item.tone ? 'text-[var(--nut-tone-ink)]' : '')">
+          <DisplayRender :content="item.value" />
+        </div>
+        <div
+          v-if="!isDisplayContentEmpty(item.caption)"
+          v-reveal-truncated
+          :class="classes.itemCaption"
+        >
+          <DisplayRender :content="item.caption" />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    :class="[classes.root, displayToneClass(tone)]"
+    data-display="stat"
+    :data-variant="variant"
+  >
+    <div :class="variant === 'trend' ? 'min-w-0' : 'contents'">
+      <div v-if="!isDisplayContentEmpty(label)" v-reveal-truncated :class="classes.label">
+        <DisplayRender :content="label" />
+      </div>
+      <div :class="variant === 'trend' ? 'flex items-center gap-2' : 'contents'">
+        <div v-reveal-truncated :class="classes.value">
+          <DisplayRender :content="value" />
+          <span v-if="!isDisplayContentEmpty(unit)" :class="classes.unit"
+            ><DisplayRender :content="unit"
+          /></span>
+        </div>
+        <span v-if="delta" :class="[classes.delta, displayToneClass(deltaTone)]" data-display-delta>
+          <UIcon :name="deltaIcon" class="size-3.5" />{{ resolveDisplayText(delta.value) }}
+        </span>
+      </div>
+      <div v-if="status" :class="[classes.status, displayToneClass(status.tone ?? 'success')]">
+        <UIcon v-if="status.icon" :name="status.icon" class="size-4 shrink-0" />
+        <DisplayRender :content="status.text" />
+      </div>
+      <div
+        v-if="!isDisplayContentEmpty(caption) || chip"
+        v-reveal-truncated
+        :class="classes.caption"
+      >
+        <DisplayChip v-if="chip" :chip="chip" />
+        <DisplayRender :content="caption" />
+      </div>
+    </div>
+    <svg
+      v-if="variant === 'trend' && sparkline"
+      :class="classes.sparkline"
+      viewBox="0 0 100 32"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <path :d="sparkline.area" fill="currentColor" fill-opacity="0.14" />
+      <path
+        :d="sparkline.line"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linejoin="round"
+        vector-effect="non-scaling-stroke"
+      />
+    </svg>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-stat.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayStatProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayStatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayStatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-table.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayTableProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,136 @@
+<script setup>
+import { computed } from "vue";
+import { isNumber } from "../../../shared/utils/predicate";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { vRevealTruncated } from "../../directives/reveal-truncated";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty } from "../../utils/content";
+import { DISPLAY_SURFACE_CLASSES } from "../../utils/tone";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayMore from "../parts/display-more.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  columns,
+  rows,
+  footer = void 0,
+  caption = void 0,
+  note = void 0,
+  maxHeight = void 0,
+  surface = "bordered",
+  max = void 0,
+  step = void 0,
+  empty = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  columns: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  footer: { type: Object, required: false },
+  caption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  note: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  maxHeight: { type: [Number, String], required: false },
+  surface: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true }
+});
+const ALIGN_CLASSES = { center: "text-center", end: "text-end", start: "text-start" };
+const appUi = useDisplayAppUi("table");
+const reveal = useDisplayReveal({ items: () => rows, max: () => max, step: () => step });
+const scrollerStyle = computed(
+  () => maxHeight === void 0 ? void 0 : { maxHeight: isNumber(maxHeight) ? `${maxHeight}px` : maxHeight }
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      cell: "px-3 py-2 align-middle text-default",
+      empty: "",
+      foot: "",
+      footCell: "sticky bottom-0 border-t border-default bg-elevated px-3 py-2 font-bold text-highlighted",
+      head: "",
+      headCell: "sticky top-0 z-[1] border-b border-default bg-elevated px-3 py-2 text-[11px] font-bold tracking-[0.07em] whitespace-nowrap text-muted uppercase",
+      meta: "mt-1.5 flex justify-between gap-3 text-xs text-dimmed",
+      more: "mt-1 self-center",
+      root: "flex min-w-0 flex-col",
+      row: "border-t border-muted first:border-t-0",
+      scroller: `min-w-0 overflow-auto ${DISPLAY_SURFACE_CLASSES[surface]}`,
+      table: "w-full border-collapse text-sm"
+    },
+    appUi.value,
+    ui
+  )
+);
+function alignClass(column) {
+  return [
+    ALIGN_CLASSES[column.align ?? (column.numeric ? "end" : "start")],
+    column.numeric ? "tabular-nums" : "",
+    column.mono ? "font-mono text-[13px]" : ""
+  ];
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" layout="rows" :count="Math.min(Math.max(rows.length, 3), 6)" />
+  <DisplayEmptyLine v-else-if="!rows.length" :content="empty" :class="classes.empty" />
+  <div v-else :class="classes.root" data-display="table">
+    <div :class="classes.scroller" :style="scrollerStyle">
+      <table :class="classes.table">
+        <thead :class="classes.head">
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              scope="col"
+              v-reveal-truncated
+              :class="[classes.headCell, ...alignClass(column)]"
+              :style="column.width ? { width: column.width } : void 0"
+            >
+              <DisplayRender :content="column.label" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in reveal.visible.value" :key="index" :class="classes.row">
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              v-reveal-truncated
+              :class="[classes.cell, ...alignClass(column)]"
+            >
+              <DisplayRender :content="row[column.key]" />
+            </td>
+          </tr>
+        </tbody>
+        <tfoot v-if="footer" :class="classes.foot">
+          <tr>
+            <td
+              v-for="column in columns"
+              :key="column.key"
+              :class="[classes.footCell, ...alignClass(column)]"
+            >
+              <DisplayRender :content="footer[column.key]" />
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+    <DisplayMore
+      v-if="reveal.hidden.value"
+      :count="reveal.next.value"
+      :class="classes.more"
+      @reveal="reveal.reveal"
+    />
+    <div
+      v-if="!isDisplayContentEmpty(caption) || !isDisplayContentEmpty(note)"
+      v-reveal-truncated
+      :class="classes.meta"
+    >
+      <span><DisplayRender :content="caption" /></span>
+      <span><DisplayRender :content="note" /></span>
+    </div>
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-table.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayTableProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayTableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-text.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayTextProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;