shadcn.io is not affiliated with official shadcn/ui
Task Notes List Block for Vue
A task list where each row opens a 500-character note under the task, shows the first line of the note as a preview when closed, and saves it when you leave the field.
Installation
Overview
Keep the detail next to the task, with this to-do list with notes block for Vue with Ark UI. Every row has a chevron button, "Show notes for" plus the task title, that opens a labelled Textarea under the row with a live count out of 500; closed, the row shows the first line of its note in one muted line, or "No note" when it is empty. A note saves when the field loses focus and a polite status line says so, and Escape closes the note and puts focus back on the chevron. Above the list an Input and a Shine Button add a task, each task is a Checkbox named by its title, and the foot counts what is done and how many tasks have a note. Bands and corners are ruled by Guides. For journals, project trackers and any list where a task needs a few lines of context.
FAQ
How do I load my own tasks and notes?
Replace START with your tasks. Each has an id, a title, a done flag and a note string, which may be empty. The preview is the first non-empty line of the note, worked out by previewOf, so nothing else needs to be stored.
What stays local, and how do I save for real?
Everything. Typing a note changes state on the page and "Note saved" only means the field was left; nothing is sent, and the notes return to the starting text on reload. In your app write the note from saveNote, which runs on blur, to your own store, or debounce it from type if you prefer to save while typing.
How do I work the notes with the keyboard?
Tab to a row's chevron and press Enter or Space to open its note, then Tab into the field. Escape inside the field closes the note and returns focus to that chevron. The chevron is named "Show notes for" or "Hide notes for" followed by the task, and reports whether it is expanded.