shadcn.io is not affiliated with official shadcn/ui
Assign Task Dialog Block for Vue
A sprint board with a side sheet that assigns its one unowned task shown open: five people with their open tasks and load, a priority, a due date from chips or an inline calendar, and a switch to notify the assignee.
Installation
Overview
Put a name on a task without opening a form page, with this side sheet for Vue with Ark UI. It opens from the Sprint 14 board of Rungboard, a sprint board: the page's header holds an outline Assign task Button, and the board itself, three lanes of cards with the open task in Doing, its assignee slot empty, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Sheet lists five people as radio rows with a role, how many tasks they have open and a small bar of their load, the chosen one showing what this task adds, plus Unassigned. Below are a priority in a Toggle Group, from Low to Urgent, and a due date as chips, Today, Tomorrow, Next Monday or a day picked in an inline Calendar that closes the past. The foot has a Switch to notify the assignee and the only Shine Button, which names who it assigns. Assigning puts the assignee's initials, the due date and the priority on the drawn card. For preview the sheet is drawn open in place at the end of the frame when the page loads; the header button opens the real Sheet, with the same choices. For boards, trackers and any app where work has an owner.
FAQ
Why is the sheet already open, and what do I keep?
So you can see it without a click. On load the sheet is a copy drawn in place at the end of the frame: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Assign task button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same AssignFields and AssignFoot components and share the block's state, so what you chose in the copy is there in the real one. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
Which side does the sheet open from?
From the end of the page's reading direction: the right in a left-to-right page and the left in a right-to-left one. The sheet's own sides are physical, so sideOf reads the page's direction when the sheet opens and passes the matching one. The copy shown on load uses logical positions, so it is already on the right side in either direction. On a phone the copy docks to the foot of the frame as a bottom sheet, and the real sheet is full width.
What do the open tasks and the bars mean?
Each person has a typed count of open tasks and the number they can carry. The row says "3 open", or "5 open, full"; the person chosen shows "3 open, 4 with this", and their bar gets a hatched stretch for the task being assigned. Choosing someone who is full is allowed: the row says so and the choice is yours. Once the task is assigned, their count includes it, and choosing another person shows the difference again.
How does the due date work?
Today is AS_OF, a fixed day, so the chips read the same for everyone. Tomorrow and Next Monday are worked out from it, and each chip shows its date. Pick a date opens the calendar under the chips, which closes every day before today; choosing a day there keeps that chip pressed with its date. The calendar is the last thing in the sheet's body, so opening it moves nothing above it.
What stays local in the demo, and how do I wire it up?
All of it. The five people and their load are typed constants, and Assign only updates the drawn card and says in a polite message whether the assignee would be notified: the switch is honest, nothing is sent. In your app post the assignee, priority and due date from assign, notify the person on your server when the switch is on, and recompute each person's open count from the response.
Is it accessible from the keyboard?
Yes. The real sheet is named by its title and described by its sentence, focus starts on the chosen person and stays inside until it closes, and Escape, Cancel and the close button return focus to Assign task. The people are native radios, so the arrow keys move the choice. The trigger is the button wrapped in SheetTrigger with asChild, and the sheet is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the button.