Document
DocumentManager
Full-featured document manager card wrapping XADocument with search, view toggle, and configurable features.
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
<XADocumentManager />
The highest-level document component. Wraps XADocument inside an XACard with an optional search input, view toggle (grid/list), and a collapsible card. Best choice for embedding a document manager into an entity detail page.
<XADocumentManager
title="Project Files"
icon="i-lucide-folder"
:documents="project.documents"
view="grid"
:searchable="true"
:show-view-toggle="true"
:features="{
upload: true,
download: true,
delete: canDelete,
rename: canRename,
preview: true,
select: false,
}"
:upload-config="{
maxSize: 25 * 1024 * 1024,
accept: 'image/*,application/pdf',
compact: false,
}"
@upload="handleUpload"
@delete="handleDelete"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'Documents' | Card title |
description | String | '' | Card description |
icon | String | 'i-lucide-files' | Card icon |
collapsible | Boolean | false | Make the card collapsible |
collapsed | Boolean | false | Initial collapsed state |
searchable | Boolean | true | Show search input in toolbar |
showViewToggle | Boolean | true | Show grid/list toggle in toolbar |
documents | Array | [] | Document array |
endpoint | String | null | API endpoint (auto mode) |
view | 'grid' | 'list' | 'grid' | Initial view mode |
size | 'sm' | 'md' | 'lg' | 'md' | Grid card size |
features | Object | { upload, download, delete, rename, preview: true, select: false } | Feature flags |
uploadConfig | Object | { maxSize: 10MB, maxFiles: null, accept: '*', compact: false } | Upload configuration |
emptyState | Object | { icon, title, description } | Empty state customization |
disabled | Boolean | false | Disable all interactions |
loading | Boolean | false | Loading state |
showActions | Boolean | true | Show action menus on items |
Emits
upload, download, delete, rename, preview, click, error, update:documents, update:view
AI Context
component: XADocumentManager
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Embedding a full document manager inside an entity detail page (projects, contacts, orders). This is the recommended entry point for most document management use cases — wraps XADocument in a card with search, view toggle, and feature flags.
key-patterns:
- Pass documents array for manual control; pass endpoint for auto CRUD
- features object controls which actions (upload/download/delete/rename/preview/select) are visible
- uploadConfig object controls file type and size restrictions
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"