npm i v-file-grid

Features

• 📂 Google Drive-like file grid interface
• 🖱️ Multi-select functionality
• 👻 Ghost-select capabilities
• 🔍 Drag and drop file upload hints
• 📜 Auto-scrolling during drag operations

Demo

StackBlitz

Components

VFileGridFileUploader

Props

| Prop Name | Type | Description | Default | | --------------- | --------- | ----------------------------------------------------- | ----------- | | disableUpload | boolean | Disables file upload functionality when set to true | undefined |

Event

| Event Name | Payload | Description | | -------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------ | | droppedFiles | { files: FileSystemFileEntry[], folders: FileSystemDirectoryEntry[] } | Emitted when files or folders are dropped onto the component |

Slots

| Slot Name | Description | | --------- | -------------------------------------------------------------------------- | | board | Content to display when files are being dragged over the component | | content | Main content of the component, which becomes hidden during drag operations |

VFileGridContainer

Model

| Model Name | Type | Description | | ---------- | ------------- | ------------------------ | | v-model | Set<string> | Tracks selected item IDs |

Props

Slots

| Slot Name | Description | | ----------------- | -------------------------------------------------------------------------------------------- | | items | Grid items to be displayed | | multiItemsBoard | Element to replace the original dragImage when multiple items are selected and is dragging |

VFileGridItem

provides interactive item selection, dragging, and click handling within a file grid system.

Props

Emits

Slot