shadcn.io is not affiliated with official shadcn/ui
Draft Publish Stage Gates CRUD Block for Vue
A magazine's content desk with a rail of four stages, one next action per article, gates that say what is missing and a schedule popover that only takes a future day.
Installation
Overview
Move articles through a desk one honest step at a time, with this draft and publish list for Vue with Ark UI. A rail at the start lists Draft, In review, Scheduled and Published, each a button with its count (a sideways row on a phone), and the rows of the chosen stage fill the held frame at the end. Every row has one next action: Submit for review, Schedule, Publish now or Unpublish. Gates name what is missing, "Add an excerpt before review" and "Pick a reviewer first", and keep the button aria-disabled with that reason. Schedule opens a Popover with a date input that must be after 14 October. Delete exists only on drafts; other rows say to unpublish first. A move follows the article into its new stage and focuses its next action, and the foot offers Undo. New draft is the quick Input with the one Shine Button; reviewers come from a Native Select. Not one record's state graph: that is the status workflow.
FAQ
How do I fill it with my articles?
Edit ARTICLES: each has an id, a title, a stage (draft, review, scheduled or published), an excerpt, a reviewer from REVIEWERS and an ISO date for scheduled and published rows. The rail counts, the row meta lines and the gates are derived from them; "now" is the constant AS_OF.
What exactly is a gate?
A rule that must hold before a move. gateOf returns the reason for a draft that has no excerpt or no reviewer; the Submit button then stays in the tab order, aria-disabled and pressing it says the reason in the polite line and moves focus to the missing field. The schedule gate is the date: empty or not after the as-of day shows a problem inside the popover.
Why can only drafts be deleted?
Because anything in review, scheduled or live has readers or a plan attached. The Delete button on those rows is aria-disabled with "Unpublish first to delete", and a draft deletes at once with an Undo line instead of a dialog, because nothing public goes with it.
Where does focus go after a move?
The desk switches to the stage the article reached and focuses its next action, so you can keep going with the keyboard. Undo switches back and focuses the same control. After a delete, focus goes to the next row's action or to the stage button.
What stays local, and how do I wire a real desk?
Articles live in state in this tab and a reload brings the ten originals back; nothing is published and no reviewer is told. In your app call your API from moveTo, schedule and remove, enforce the gates on the server too, and have a job publish scheduled rows on their day.