shadcn.io is not affiliated with official shadcn/ui
Task Attachments List Block for Vue
A design-review task list with a paperclip count on each task that opens its files by type icon, name and size, with Add file, Remove with Undo and a total of files and bytes.
Installation
Overview
Hang the files on the task they belong to, with this to-do list with attachments block for Vue with Ark UI. Each row has a paperclip button with its file count that opens a list of files, each with a type icon picked from its extension, the name and a size in kilobytes or megabytes. "Add file" opens the browser's own file picker, and only the name and size of what you choose are kept: the files are never read, uploaded or stored, and the status line says so. Remove takes a file off and leaves a one-line Undo that puts it back in the same place, and the foot totals every file and its size. An Input and a Shine Button add a task, each task is a Checkbox, and the frame is ruled by Guides. For design reviews, document checklists and trackers where each item has a few files.
FAQ
How do I load my own tasks and files?
Replace START. A task has an id, a title, a done flag and a files array; a file has an id, a name and its size in bytes. The icon comes from the extension through kindOf, and sizeLabel writes the size, so only those three fields are needed.
Are my files uploaded?
No. The picker is the browser's native one, and pickFiles copies only each file's name and byte size into state. The files themselves are never read, and the list returns to its starting files on reload. In your app upload the files from pickFiles and store the returned URLs next to the name and size.
How does Undo work?
Removing a file shows one line, "Removed 'pricing-v2.png'", with an Undo button. Undo puts the file back at the position it had on that task. The line holds one removal at a time, and adding a file replaces it. Nothing disappears on a timer.