Document
DocumentPreview
Modal for previewing images, PDFs, videos, and audio with document navigation.
Document
The Document category provides a complete file management system — from drag-and-drop upload through grid/list browsing to in-browser preview. Components are composable: use XADocumentManager for a turnkey solution or assemble individual pieces for custom layouts.
Components
<XADocumentPreview />
A large modal for in-browser document preview. Supports images, PDFs (via iframe), video, and audio. Includes prev/next navigation when a documents array is provided.
<XADocumentPreview
v-model="previewOpen"
:document="activeDocument"
:documents="allDocuments"
:downloadable="true"
@download="handleDownload"
@navigate="setActiveDocument"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Controls modal open state (v-model) |
document | Object | null | Current document to preview |
documents | Array | [] | All documents for prev/next navigation |
downloadable | Boolean | true | Show download button in header |
Emits
update:modelValue, download, navigate
AI Context
component: XADocumentPreview
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Showing a full-screen modal preview for images, PDFs, video, and audio. Includes prev/next navigation when a documents array is provided. Handles all common file types natively.
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"