shadcn.io is not affiliated with official shadcn/ui
Location Manager CRUD Block for Vue
A retailer's stores in one frame of fixed height, each with an address and an opening-hours line that is written from seven day rows, a form that swaps in for the list, a Copy Monday to weekdays button, and a named problem when a day closes before it opens.
Installation
Overview
Let people edit the hours a shop shows its customers, with this location manager for Vue with Ark UI. A hairline frame with a plus mark on each corner holds five stores of Siteloom, a retailer, in one frame of fixed height: each row has the store's name, its address and postcode, and its hours as one line written by a small pure function from seven days ("Mon to Fri 08:00 to 17:00, Sat 09:00 to 13:00"). Open a store, or press New store, and the list is swapped for the form inside the same frame with a Back to stores button: a name, an address and a postcode whose shape is checked, then seven rows, each a Switch for open and two Native Selects for opening and closing in half-hour steps. Copy Monday to weekdays fills Tuesday to Friday, a day that closes before it opens is named in a reserved line, and the summary updates as you go. Save returns to the list with focus on the store; Delete opens an Alert Dialog and the foot then offers Undo. Save is the only Shine Button, the bands are ruled by Guides, and deleting every store shows an Empty state without the frame changing height. For store finders, clinics, depots and any place with opening hours.
FAQ
How do I fill it with my own stores?
Edit STORES. Each has an id, a name, an address, a postcode and seven days, Monday first, each with on, open and close as HH:MM text. The list rows, the summary line, the count and the draft's preview all come from that data, and new stores take their id from a counter held in state.
How is the hours line written?
By hoursText, a pure function that walks the seven days, joins consecutive open days that share the same hours into one run, and prints each run as "Mon to Fri 08:00 to 17:00", "Sat and Sun 10:00 to 16:00" or just "Sat 09:00 to 13:00", skipping closed days. A week with no open day reads "Closed all week". It is the same function in the list and in the form, so what you see while editing is what the list will show after Save.
What does the form refuse?
An empty name, one over 32 characters or one another store has; an empty address; a postcode that does not have the shape of letters, digits, a space and digit-letter-letter, such as NF2 4QA; and any open day whose closing time is not after its opening time. Field problems appear under their fields after the first Save attempt in slots that are always there, the hours problem appears at once, and focus goes to the first field that needs attention.
What does Undo restore?
The deleted store in the same position, with its address and all seven days, and it puts focus on its row. A new Save replaces the Undo, so it never reaches further back than what you see. Back to stores drops unsaved changes and says so in the polite line.
What stays local, and how do I wire a real save?
The stores live in React state in this tab and a reload brings the original five back; nothing is sent. In your app call your API in save and remove, take the stored record from the response, and show a server refusal in the field slots the form already has. Times are plain local text with no time zone; store the zone with the store if your shops span several.