Modal
ModalKeyValue
Modal that displays an object or array of key-value pairs using XAFmtData.
Modal
The Modal category provides three composable dialog components built on top of Nuxt UI's UModal. XAModal is the general container; XAModalConfirm handles destructive action confirmations; XAModalKeyValue presents structured data in a readable format. All three support both v-model and internal open-state management, and expose open() / close() methods via defineExpose.
Components
<XAModalKeyValue />
Displays a structured object or array of fields in a modal using XAFmtData. Useful for record detail views, audit logs, or quick-look inspections.
<XAModalKeyValue
v-model="showDetails"
title="Order Details"
:data="{
orderId: 'ORD-1234',
status: 'Shipped',
total: '$149.00',
createdAt: '2025-03-01'
}"
size="lg"
layout="horizontal"
/>
<!-- With array-form data for full control -->
<XAModalKeyValue
title="User Details"
trigger-label="View"
:data="[
{ key: 'name', label: 'Full Name', value: user.name },
{ key: 'role', label: 'Role', value: user.role, type: 'badge' }
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | undefined | v-model open state |
title | String | '' | Modal title |
data | Object | Array | {} | Data to display — plain object or array of field descriptors |
size | String | 'md' | Modal width: sm md lg xl |
layout | String | 'horizontal' | Layout passed to XAFmtData |
spacing | String | 'md' | Spacing passed to XAFmtData |
triggerLabel | String | '' | Text for the built-in trigger button |
triggerIcon | String | '' | Icon for the built-in trigger button |
triggerColor | String | 'primary' | Color of the trigger button |
triggerVariant | String | 'solid' | Variant of the trigger button |
triggerSize | String | 'md' | Size of the trigger button |
Slots
| Slot | Description |
|---|---|
trigger | Replace the default trigger button |
footer | Optional footer content below the data |
AI Context
component: XAModalKeyValue
package: "@xenterprises/nuxt-x-app"
category: Modal
use-when: >
Use XAModalKeyValue to surface read-only structured data (record details,
audit entries) in a quick-look overlay without building a custom layout.
Pass a plain object for automatic key/value rendering or an array of field
descriptors for full control over labels and types.