nuxt-x-app

Document

File management components for uploading, listing, previewing, and managing documents with grid and list views.

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

`<XADocument />`

The core orchestration component. Combines an uploader, grid or list view, preview modal, and rename/delete confirmation dialogs. Accepts documents either as a direct array (manual mode) or via an endpoint string that drives useXCrud (auto mode).

<XADocument
  :documents="files"
  view="grid"
  size="md"
  :uploadable="true"
  :downloadable="true"
  :deletable="true"
  :renamable="true"
  :previewable="true"
  :selectable="false"
  accept="image/*,application/pdf"
  :max-size="10 * 1024 * 1024"
  @upload="handleUpload"
  @download="handleDownload"
  @delete="handleDelete"
  @rename="handleRename"
/>

Props

Prop	Type	Default	Description
`documents`	`Array`	`[]`	Direct array of document objects (manual mode)
`endpoint`	`String`	`null`	API endpoint for CRUD operations (auto mode)
`view`	`'grid' \| 'list'`	`'grid'`	Display mode
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Grid card size
`uploadable`	`Boolean`	`true`	Show upload zone
`downloadable`	`Boolean`	`true`	Allow downloads
`deletable`	`Boolean`	`true`	Allow delete
`renamable`	`Boolean`	`true`	Allow rename
`previewable`	`Boolean`	`true`	Allow preview
`selectable`	`Boolean`	`false`	Enable multi-select
`maxSize`	`Number`	`262144000`	Max file size in bytes (250 MB)
`maxFiles`	`Number`	`null`	Max files per upload
`accept`	`String`	`'*'`	Accepted MIME types or extensions
`compactUploader`	`Boolean`	`false`	Use compact upload zone
`disabled`	`Boolean`	`false`	Disable all interactions
`loading`	`Boolean`	`false`	Loading state (manual mode)
`showActions`	`Boolean`	`true`	Show action menus on items
`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

Event	Payload	Description
`upload`	`File[]`	Files selected for upload
`download`	`Document`	Document to download
`delete`	`Document`	Document deleted
`rename`	`{ document, name }`	Document renamed
`preview`	`Document`	Document to preview
`click`	`Document`	Document clicked
`error`	`Error`	Upload or operation error
`update:documents`	`Document[]`	Updated documents array

`<XADocumentList />`

Table-based document listing with sortable columns (name, size, date), inline preview/download buttons, and a per-row dropdown for rename/delete actions.

<XADocumentList
  :documents="files"
  :loading="isLoading"
  :selectable="true"
  v-model:selected="selectedIds"
  :previewable="true"
  :downloadable="true"
  :renamable="true"
  :deletable="true"
  @preview="openPreview"
  @download="downloadFile"
/>

Props

Prop	Type	Default	Description
`documents`	`Array`	required	Array of document objects
`loading`	`Boolean`	`false`	Show loading skeleton
`selectable`	`Boolean`	`false`	Enable multi-select checkboxes
`selected`	`Array`	`[]`	Selected document IDs (`v-model:selected`)
`previewable`	`Boolean`	`true`	Show preview button
`downloadable`	`Boolean`	`true`	Show download button
`renamable`	`Boolean`	`true`	Show rename action
`deletable`	`Boolean`	`true`	Show delete action
`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

`<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

`<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

`<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

`<XADocumentUploader />`

A styled drag-and-drop upload zone. Validates file count and size before emitting. Shows an upload progress overlay when uploading is true.

<XADocumentUploader
  :multiple="true"
  accept="image/*,application/pdf"
  :max-size="10 * 1024 * 1024"
  :max-files="5"
  :compact="false"
  :uploading="isUploading"
  @upload="handleFiles"
  @error="handleError"
/>

Props

Prop	Type	Default	Description
`multiple`	`Boolean`	`true`	Allow multiple file selection
`accept`	`String`	`'*'`	Accepted MIME types or extensions
`acceptLabel`	`String`	`''`	Human-readable accept label shown in UI
`maxSize`	`Number`	`262144000`	Max file size in bytes (250 MB)
`maxFiles`	`Number`	`null`	Max number of files per upload
`compact`	`Boolean`	`false`	Compact mode for smaller spaces
`disabled`	`Boolean`	`false`	Disable uploads
`uploading`	`Boolean`	`false`	Show upload progress overlay

Emits

Event	Payload	Description
`upload`	`File[]`	Valid files ready for upload
`error`	`{ type, message }`	Validation error (size/count exceeded)

`<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

category: Document
package: "@xenterprises/nuxt-x-app"
components:
  - XADocument
  - XADocumentList
  - XADocumentGrid
  - XADocumentItem
  - XADocumentPreview
  - XADocumentUploader
  - XADocumentManager
use-when: >
  Any feature that needs file upload, browsing, and management. Use
  XADocumentManager for entity detail pages (projects, contacts, orders).
  Use XADocument for embedded file sections. Use lower-level components
  (XADocumentList, XADocumentGrid) when you need custom layout control.
key-patterns:
  - XADocumentManager is the recommended entry point for most use cases
  - Pass documents array for manual control; pass endpoint for auto CRUD
  - Feature flags object controls which actions are visible
  - uploadConfig object controls file type and size restrictions
  - XADocumentPreview handles images, PDFs, video, and audio natively
document-object-shape: "{ id, name, size, type, url, thumbnailUrl?, createdAt?, uploadedAt? }"

Edit this pageorReport an issue

Detail

Read-only detail panel for record pages with field-driven rendering and automatic type formatting.

Rich email composer with grouped recipient autocomplete, CC support, rich-text body, and file attachments.