Multi-Project Kanban Block for Vue

Edit LANES, STAGES and START. A task has an id, a title, an owner's name and a column that names its cell, such as portal|active. Progress is the tasks in the complete stage over all of a project's tasks, so the bar, the words and the header sentence are always calculated from the cards.

A row that jumps while you are dragging into it is hard to hit, so the order only changes when you press "Sort lanes". Choosing another sort key only tells you to press it. Hiding finished projects works the same way: the rows that are hidden are the ones that were finished when you flipped the switch or pressed Sort.

Tab to the grip at the start of a card, named "Move" with the task's title. Space or Enter picks it up, the arrow keys move it (left and right change the stage, up and down reorder and then cross into the row above or below; they swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line in the foot.

Yes: the menu at the end of each card lists every project and stage with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.

Everything. The moves, the order and the hidden rows live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the people and the cards are made up. To keep a change, call your API from put, the one function every finished move goes through, and update the cards from the response.

The rows sit in one named region that scrolls both ways, so the controls above it stay put; each cell scrolls up and down inside its fixed height. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.