Minimal Task List Block for Vue

Into the Done section, closed by default, which counts its tasks in its label. Open it with its button, then untick a task to move it back to the open list. The open list keeps a held minimum height, so ticking never pulls the field up the page.

They fade in on hover, and they are always reachable by keyboard because the row shows them whenever focus is inside it. On touch screens, which can't hover, they stay visible. The buttons have names that include the task title.

Edit replaces the title with a field holding it. Enter or Save keeps the new title, Escape or Cancel keeps the old one, and focus returns to that row's Edit button. An empty title is refused with a status message.

All of it: adding, editing, ticking and deleting change the page's state only, and a reload brings the starting list back. Write each change to your own store from add, toggle, save and remove.

The Done section opens with a height transition and a task that arrives in a list grows in. With reduced motion on, both are instant. Nothing else animates.