Document
DocumentItem
Single document card with thumbnail, metadata, and hover actions.
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
<XADocumentItem />
Single document card used by XADocumentGrid. Displays a thumbnail (or file-type icon), filename, size, and date. Shows an action dropdown on hover.
<XADocumentItem
:document="file"
:selected="isSelected"
:show-actions="true"
size="md"
@click="handleClick"
@preview="handlePreview"
@download="handleDownload"
@rename="handleRename"
@delete="handleDelete"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
document | Object | required | Document object with id, name, size, type, url |
selected | Boolean | false | Whether the item is selected |
showActions | Boolean | true | Show action menu on hover |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
Emits
click, download, delete, rename, preview
AI Context
component: XADocumentItem
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
category: Document
use-when: Rendering a single document card with thumbnail or file-type icon, filename, size, and hover action menu. Typically used inside XADocumentGrid; use standalone for fully custom grid layouts.
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"