nuxt-x-app

Data

Display primitives for presenting structured data — numbers, key-value pairs, status badges, timelines, activity feeds, and loading skeletons.

Data

Data components handle the rendering of structured information in detail views, sidebars, and list pages. They cover everything from a single formatted number to a full activity feed with date grouping.

Components

`<XADataNumber />`

Renders a single number as an inline <span> using Intl.NumberFormat. Supports decimal, percent, and unit styles; compact notation; and optional color styling for positive/negative values.

<!-- Currency compact -->
<XADataNumber :value="1248000" format="decimal" notation="compact" compact-display="short" />
<!-- Result: 1.2M -->

<!-- Percent with sign coloring -->
<XADataNumber :value="-4.2" format="percent" show-sign colorize />

<!-- Unit -->
<XADataNumber :value="128" format="unit" unit="gigabyte" unit-display="short" />

Props

Prop	Type	Default	Description
`value`	`number \| string`	`null`	The numeric value to format.
`locale`	`string`	`'en-US'`	Intl locale string.
`format`	`'decimal' \| 'percent' \| 'unit'`	`'decimal'`	Intl number style.
`unit`	`string`	`''`	Unit identifier (e.g. `'gigabyte'`). Only used when `format` is `'unit'`.
`unitDisplay`	`'short' \| 'long' \| 'narrow'`	`'short'`	Unit display style.
`notation`	`'standard' \| 'scientific' \| 'engineering' \| 'compact'`	`'standard'`	Number notation.
`compactDisplay`	`'short' \| 'long'`	`'short'`	Compact display style (used with `notation: 'compact'`).
`minimumFractionDigits`	`number`	`0`	Minimum decimal places.
`maximumFractionDigits`	`number`	`2`	Maximum decimal places.
`showSign`	`boolean`	`false`	Always show `+` or `−` sign.
`colorize`	`boolean`	`false`	Apply green/red color class for positive/negative values.
`prefix`	`string`	`''`	Text prepended to the formatted output.
`suffix`	`string`	`''`	Text appended to the formatted output.

`<XAKeyValue />`

A single label-value row (<dt> / <dd>) that automatically renders the value according to its type. Accepts a default slot for fully custom value rendering.

<XAKeyValue label="Email" value="alice@example.com" type="email" />
<XAKeyValue label="Status" value="active" type="badge" badge-color="success" />
<XAKeyValue label="Created" value="2025-03-15" type="date" date-format="long" />
<XAKeyValue label="API Key" value="sk-abc123" type="copy" />
<XAKeyValue label="Verified" :value="true" type="boolean" />

Props

Prop	Type	Default	Description
`label`	`string`	—	Required. The key/label text.
`value`	`string \| number \| boolean \| Date \| object`	`undefined`	The value to display.
`type`	`'text' \| 'badge' \| 'boolean' \| 'link' \| 'email' \| 'phone' \| 'currency' \| 'date' \| 'copy' \| 'code'`	`'text'`	Rendering type.
`layout`	`'horizontal' \| 'vertical' \| 'inline'`	`'horizontal'`	Label/value layout direction.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size variant.
`icon`	`string`	`''`	Lucide icon shown before the label.
`emptyText`	`string`	`'—'`	Text shown when the value is empty/null/undefined.
`currency`	`string`	`'USD'`	ISO currency code for `type="currency"`.
`dateFormat`	`'date' \| 'time' \| 'datetime' \| 'relative' \| 'short' \| 'long'`	`'date'`	Date display format for `type="date"`.
`badgeColor`	`string`	`'neutral'`	Badge color for `type="badge"`.
`linkText`	`string`	`''`	Link label for `type="link"` (defaults to the URL).
`showBooleanLabel`	`boolean`	`true`	Show Yes/No label beside the boolean icon.
`trueLabel`	`string`	`'Yes'`	Label for `true` in boolean type.
`falseLabel`	`string`	`'No'`	Label for `false` in boolean type.
`noBorder`	`boolean`	`false`	Remove the bottom border/divider.

`<XAKeyValueList />`

Renders an array of key-value item objects as a vertical <dl> list using <XAKeyValue> for each entry. Supports a card style and a default slot for custom rendering.

<XAKeyValueList
  :items="[
    { label: 'Name', value: 'Alice Johnson' },
    { label: 'Email', value: 'alice@example.com', type: 'email' },
    { label: 'Role', value: 'admin', type: 'badge', badgeColor: 'primary' },
    { label: 'Joined', value: '2024-01-15', type: 'date', dateFormat: 'long' },
    { label: 'Active', value: true, type: 'boolean' },
  ]"
  layout="horizontal"
  size="md"
  card
/>

Props

Prop	Type	Default	Description
`items`	`array`	`[]`	Array of item objects. Each item can include any `XAKeyValue` prop (`label`, `value`, `type`, `icon`, `currency`, `dateFormat`, `badgeColor`, `linkText`, `emptyText`).
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	Applied to all items.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Applied to all items.
`emptyText`	`string`	`'—'`	Default empty text for all items (overridden per-item).
`showLastBorder`	`boolean`	`false`	Show the bottom border on the last item.
`card`	`boolean`	`false`	Apply card-like background, padding, and rounded corners.

`<XADataStatusBadge />`

A UBadge wrapper that automatically maps common status string values to semantic colors. Supports a custom colorMap to extend or override defaults.

Built-in mappings include:

success: active, completed, approved, success, paid, delivered, published, verified, online
warning: pending, review, processing, draft, scheduled
error: failed, rejected, error, cancelled, overdue, blocked
neutral: inactive, archived, unknown

<XADataStatusBadge status="active" />
<XADataStatusBadge status="pending" />
<XADataStatusBadge status="custom-state" :color-map="{ 'custom-state': 'info' }" />

Props

Prop	Type	Default	Description
`status`	`string`	`''`	Status string — auto-mapped to a color.
`label`	`string`	`''`	Custom display label (defaults to capitalized `status`).
`color`	`string`	`''`	Override the auto-mapped color.
`colorMap`	`object`	`{}`	Additional status-to-color mappings merged with the defaults.
`variant`	`string`	`'soft'`	UBadge variant.
`size`	`string`	`'sm'`	UBadge size.
`badgeClass`	`string`	`''`	Extra CSS classes.

`<XADataTimeline />`

Vertical timeline list. Each item renders an icon (or dot) on the left connected by a vertical line. Items support color, icon, title, description, time, content, and per-item named slots.

<XADataTimeline
  :items="[
    {
      title: 'Account created',
      description: 'Welcome to the platform',
      time: '2 hours ago',
      icon: 'i-lucide-user-plus',
      color: 'success',
    },
    {
      title: 'Payment received',
      time: 'Yesterday',
      icon: 'i-lucide-credit-card',
      color: 'primary',
    },
  ]"
  size="md"
/>

Props

Prop	Type	Default	Description
`items`	`array`	`[]`	Timeline items. Each item: `{ title, description?, time?, datetime?, icon?, color?, content?, id? }`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls icon container and text sizes.

Item color values: primary, success, error, warning, info, neutral.

Per-item slot: #item-{index} receives { item, index }.

`<XADataTimelineFeed />`

Activity feed timeline that renders user-action entries. Supports optional date-header grouping, a load-more button, and an empty state. Uses an ActivityItem sub-component internally.

<XADataTimelineFeed
  :items="activityItems"
  group-by-date
  date-field="time"
  :has-more="hasMore"
  :loading-more="loading"
  load-more-text="Load more activity"
  empty-text="No activity yet"
  icon-size="md"
  @load-more="loadNextPage"
>
  <template #item-actions="{ item }">
    <UButton size="xs" icon="i-lucide-reply" variant="ghost" />
  </template>
</XADataTimelineFeed>

Each item object shape: { id?, user?: { name, avatar }, action, target?, time, icon?, iconColor?, description? }.

Props

Prop	Type	Default	Description
`items`	`array`	—	Required. Array of activity item objects.
`groupByDate`	`boolean`	`false`	Group items under sticky date headers.
`dateField`	`string`	`'time'`	Item field used as the date key for grouping.
`hasMore`	`boolean`	`false`	Show the load-more button.
`loadingMore`	`boolean`	`false`	Show loading spinner on the load-more button.
`loadMoreText`	`string`	`'Load more'`	Load-more button label.
`emptyText`	`string`	`'No activity yet'`	Empty state message.
`iconSize`	`'sm' \| 'md' \| 'lg'`	`'md'`	Icon size for each activity item.

Emits

Event	Payload	Description
`load-more`	—	Fired when the user clicks the load-more button.

Slots

Slot	Scope	Description
`item-actions`	`{ item }`	Action buttons rendered on each activity item.

`<XADataSkeleton />`

A single animated loading placeholder element. Combine multiples to build skeleton screens.

<!-- Text line skeleton -->
<XADataSkeleton variant="text" width="60%" />

<!-- Avatar skeleton -->
<XADataSkeleton variant="circular" width="40px" height="40px" />

<!-- Card body skeleton -->
<XADataSkeleton variant="rounded" height="120px" />

<!-- Non-animated -->
<XADataSkeleton variant="rectangular" :animate="false" />

Props

Prop	Type	Default	Description
`variant`	`'text' \| 'circular' \| 'rectangular' \| 'rounded'`	`'text'`	Shape variant. `text` renders a thin rounded bar; `circular` renders a full circle; `rectangular` is a plain rect; `rounded` has `rounded-lg`.
`width`	`string`	`''`	CSS width (e.g. `'80%'`, `'200px'`). Falls back to variant defaults.
`height`	`string`	`''`	CSS height. Falls back to variant defaults.
`as`	`string`	`'div'`	HTML element to render.
`animate`	`boolean`	`true`	Apply `animate-pulse` animation.

AI Context

category: Data
package: "@xenterprises/nuxt-x-app"
components:
  - XADataNumber
  - XAKeyValue
  - XAKeyValueList
  - XADataStatusBadge
  - XADataTimeline
  - XADataTimelineFeed
  - XADataSkeleton
use-when: >
  Rendering structured entity details, audit logs, activity streams,
  or any read-only data in detail panels, drawers, and list views.
  Use XAKeyValueList for metadata blocks, XADataStatusBadge in table
  cells and headers, XADataTimelineFeed for audit/activity history,
  and XADataSkeleton while async data is loading.
patterns:
  - XAKeyValue handles 10 value types automatically — prefer it over custom formatting.
  - XADataStatusBadge has a built-in color map; extend it with the colorMap prop for custom statuses.
  - XADataTimelineFeed groups by any date field; set dateField to match your data structure.
  - XADataSkeleton composes — build skeleton screens by stacking multiple instances.

Edit this pageorReport an issue

Command

A keyboard-driven command palette modal with grouped results, fuzzy search, and keyboard navigation.

Detail

Read-only detail panel for record pages with field-driven rendering and automatic type formatting.