shadcn.io is not affiliated with official shadcn/ui
Automation Rules Task List Block for Vue
Three if-then rules for tasks, each a sentence of two selects and a switch, run for real on a six-task sandbox when you tick a task or press High or Today, with a rule log, up to four rules and a reset.
Installation
Overview
Let people see what a rule will do before they trust it, with this task automation block for Vue with Ark UI. A hairline frame with a plus mark on each corner is split in two. The first cell holds the rules of Rulemill, a task-rules workshop: each is a sentence ("When a task is completed, then move it to Archive") made of two Native Selects, a Switch that turns it on or off and a remove button. The second holds a sandbox of six Checkbox tasks and the rule log. Ticking a task, pressing High to give it High priority or pressing Today to make it due today runs the active rules in order against the fixed day: archived tasks sink to the bottom, pinned ones rise to the top, the tag Today is added, and each run lands in the log, newest first ("Rule 2 ran on 'Send the Q4 invoice': pinned"). Add rule, the only Shine Button, adds another row, up to four. For automation settings, workflow builders and any product with "if this, then that".
FAQ
Do the rules really run?
Yes, on the sandbox. runRules takes the rules, the tasks, the task that changed and the trigger, and goes through the active rules whose trigger matches, top to bottom, applying each action and writing a line for it. A rule whose result is already true (a task already pinned) writes "matched, already pinned" and changes nothing. Unticking a task does not run rules, and a switched-off rule never runs.
What can a rule react to, and what can it do?
Three triggers: a task is completed, is given High priority, or is made due today (against the fixed AS_OF day). Three actions: move it to Archive, pin it to the top, or add the tag Today. They are typed lists, TRIGGERS and ACTIONS, so adding one means a new entry and a branch in applyAction. Archived tasks stay put until you reset the sandbox.
What stays local, and how do I save for real?
The rules, the sandbox and the log are local state and reset on reload. In your app store the rules per workspace, and run them on your server when a task changes, so the same rules apply to every client; the log then comes from your audit trail.
Why at most four rules?
So the cell keeps a fixed height and the demo stays readable. At four, Add rule stays focusable, is marked as unavailable and says why in the status line; removing a rule frees a place. Rule numbers follow the order on screen, and the log uses those numbers.
Is it accessible?
Each select has a visible label ("When a task is", "Then"), each switch is named for its rule, and the High and Today buttons name their task. Row order changes only after you press something, never under the pointer, and one polite status message reports each run in words. State is shown by a pin glyph, the words "In Archive" and a strike, not by colour.