Document
DocumentGrid
Card grid display of documents with thumbnail previews and action menus.
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
<XADocumentGrid />
Wraps documents in a flex card grid with thumbnail previews for images and file-type icons for other types.
<XADocumentGrid
:documents="files"
:loading="isLoading"
size="md"
:show-actions="true"
:selectable="true"
v-model:selected="selectedIds"
@click="openDocument"
@preview="openPreview"
@delete="deleteDocument"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
documents | Array | required | Array of document objects |
loading | Boolean | false | Show loading skeleton |
size | 'sm' | 'md' | 'lg' | 'md' | Card size variant |
showActions | Boolean | true | Show action menu on items |
selectable | Boolean | false | Enable multi-select |
selected | Array | [] | Selected document IDs (v-model:selected) |
emptyIcon | String | 'i-lucide-files' | Empty state icon |
emptyTitle | String | 'No documents' | Empty state title |
emptyDescription | String | 'Upload files to get started.' | Empty state description |
Emits
click, preview, download, rename, delete, update:selected
AI Context
component: XADocumentGrid
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Displaying documents in a card grid layout with thumbnail previews. Use when you need custom layout control without the full XADocument orchestration.
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"