shadcn.io is not affiliated with official shadcn/ui
Automation Rule Chains CRUD Block for Vue
A shop's order automations as cards: a trigger over a numbered chain of steps with Move earlier and Move later, a pause switch, a step limit, named refusals for duplicates, and an Undo for every change.
Installation
Overview
Let people build "when this happens, do these things in order" without a rule builder, with these automation rules for Vue with Ark UI. A quick line makes a rule from a trigger and a first step: two Native Selects and the one Shine Button, Add rule. Each rule is a card in a held, scrolling frame: its trigger as the heading, an On or Paused Badge, a pause Switch, a numbered list of steps with Move earlier, Move later and Remove, and a select with Add a step. A rule keeps between one and four steps, never repeats a step and never twins another rule (the same trigger and the same chain): every refusal is named in the polite line. Delete, pause, add, move and remove each leave one Undo in the foot, and focus follows the step or rule that changed. For order desks, support tooling and any product where the order of actions matters.
FAQ
How do I change the triggers, steps and starting rules?
Edit TRIGGERS and ACTIONS (each an id and the text shown) and RULES, where a rule has an id, a trigger id, a steps array of action ids in the order they run and a paused flag. The headings, the "2 rules, 1 on" count and the numbering are derived from that data.
What does it refuse, and how does it say so?
A fifth step ("A rule has at most 4 steps."), a step that is already in the rule, and any change that would make a rule identical to another ("Same as rule 2: trigger and steps match."). Removing the only step is refused too, since Delete is the way to drop a rule. The reason goes in the polite status line, and in the form's reserved line when it comes from the quick add.
Why Move earlier and Move later instead of drag and drop?
The buttons work with any input device and a screen reader, and the polite line says what moved ("Step 2 moved to 1."). At the ends the button is aria-disabled, not disabled, so it stays in the tab order and explains itself when pressed. Focus stays on the moved step's own button.
What does Undo bring back?
The last change only: it restores the whole list as it was and puts focus back where you were working. A new change replaces the Undo, so it never restores something older than what you just did.
What stays local, and how do I wire real automations?
Rules live in state in this tab, nothing runs, and a reload brings the four originals back. In your app, send each change from addRule, pause, addStep, moveStep, removeStep and deleteRule to your API, keep the step limit and the twin check on the server, and run the steps there.