Data
KeyValueList
List container that renders an array of key-value items using XAKeyValue.
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
<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. |
AI Context
component: XAKeyValueList
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Data
use-when: Rendering a metadata block with multiple labeled fields in detail panels, drawers, and sidebars. Pass an items array where each item supports any XAKeyValue prop.