shadcn.io is not affiliated with official shadcn/ui
Department Tasks Kanban Block for Vue
A swimlane board of fifteen tasks in department rows by Backlog, In progress and Done, with a Group by toggle that regroups the same cards into priority rows.
Installation
Overview
Keep several teams on one board with this swimlane kanban for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three department rows (Design, Engineering and Marketing) and three stages that share their lines: Backlog, In progress and Done. A "Group by" Toggle Group regroups the same fifteen tasks into High, Medium and Low priority rows, and the stage of every task stays where it was. Dragging a task across rows changes its department under Department and its priority under Priority, and the status line says which. Each row head counts its tasks and how many are done, a priority is a three-bar glyph with its word, the owner's initials sit in an Avatar and the sentence under the heading is worked out from the cards. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the rows scroll in one named region. For cross-team planning, launch checklists and any work that belongs to more than one dimension.
FAQ
How do I fill it with my own tasks?
Edit DEPARTMENTS, PRIORITIES, STAGES and START. A task has an id, a title, a department, a priority of high, med or low, an owner's name (the initials are drawn from it) and a column that names its cell, such as d:eng|doing. The cells are built from the rows and stages, and the header sentence and the row counts are calculated from the cards.
What does Group by change?
Only the rows. Switching to Priority maps each task's stage into the row of its priority, and switching back returns it to its department row. A drag across rows then writes the row it landed in to that one attribute: settleCards sets the department under Department and the priority under Priority, and the status line names the new value.
How do I move a card without a mouse?
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.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every cell of the current grouping 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.
What stays in the demo?
Everything. The moves and the grouping 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.
How does it look on a phone?
The rows sit in one named region that scrolls both ways, with the next stage or row showing, and each cell scrolls up and down inside its fixed height, so the page does not jump when a card moves. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.