shadcn.io is not affiliated with official shadcn/ui
Feature Requests Kanban Block for Vue
A three-column request board (Requested, Planned, Building) of ten feature requests with vote counts, a vote button and a Top voted mark, where a request needs ten votes before it can be planned.
Installation
Overview
Let users shape a roadmap with this feature request board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Requested, Planned and Building, and ten requests. Each card shows the request, its area in an outline Badge and a vote button with the count; pressing it adds a vote and the status line says the new total. The request with the most votes on the board wears a "Top voted" mark, worked out from the counts, so it moves when the lead changes. One rule guards the roadmap: a request needs 10 votes before it can be Planned or Building, and the refusal says how many it has. Column heads count their cards and votes, and the sentence under the heading is worked out from the cards. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the board and the votes. On a phone the columns scroll sideways in one named region. For public roadmaps, product feedback boards and any list ranked by demand.
FAQ
How do I fill it with my own requests?
Edit COLUMNS and START. A request has an id, the column it starts in, an area, a title and votes, a whole number. Counts, the Top voted mark and the header sentence are calculated from the cards.
How do votes work, and can one person vote twice?
In this demo each press adds one vote to the component's state, so you can vote more than once. In a real product, send the vote to your API from act, let the server decide whether a person has voted, and render the count it returns.
How does the votes rule work?
refusalOf compares a request's votes with NEEDED, 10, when it leaves Requested. Drag, keys and menu all ask it, and the refusal says how many votes it has. Votes can push it past the line, after which it moves.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag.