shadcn.io is not affiliated with official shadcn/ui
Search Results CRUD Block for Vue
A documentation site's page finder: a search that marks matches in titles, a facet rail of Type and Status checkboxes with counts that follow the query, in-place renaming, and a no-results state that creates a page named after the search.
Installation
Overview
Let a search that finds nothing become the way to create the thing, with this page finder for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a search Input, a facet rail and one frame of fixed height with the results. The rail has Type and Status Checkboxes whose counts follow the query and the other group's ticks, and on a phone it folds into a Collapsible Filters section that says how many are on. Each result is a page with its type and status in words; the part of the title that matches is marked by Search Highlight Text, and the title is an Editable that renames where it sits (an empty or taken title is refused with its reason). Search for something that is not there, such as zzz, and the Empty state offers one action, "Create a page named zzz": the page appears as a Draft Guide marked New. Remove leaves "Removed Rate limits." in the foot beside an Undo. That create action is the only Shine Button, the bands are ruled by Guides, and the frame never changes height. For documentation sites, wikis, catalogs and any index where a missing result is a record waiting to be made.
FAQ
How do I fill it with my own pages?
Edit PAGES: each has an id, a title, a type of guide, reference or tutorial and a status of published, draft or review. The facet lists TYPES and STATUSES give the words. Counts, the status line and the empty state are all derived from the list and the current query and ticks.
How do the facet counts follow the query?
A count is the number of pages that match the query and the other group's ticks, with this group left open, so ticking Draft shows how many guides, references and tutorials are drafts. A group with nothing ticked does not filter at all, and ticking several values in one group shows any of them. The status line reads "4 of 10 pages" after every change.
What does the create action do?
It makes a page with the searched words as its title (trimmed, first letter capital, at most 48 characters), a type of Guide and a status of Draft, clears the facets so the page cannot be hidden by them, and puts it at the head of the list marked New with focus on its edit control. A title that another page already has is refused with its reason; since such a search would have found that page, the case only comes up when the title is cut short.
What does Undo restore?
The last removal only. Removing a page stores the list as it was; Undo puts it back and focuses its row. Creating or renaming a page replaces that Undo; searching and filtering leave it alone. Nothing times out.
What stays local, and how do I wire a real save?
The pages live in state in this tab and a reload brings the original ten back; nothing is indexed or published. In your app run the search on the server, return facet counts with the results, and create the page from create with your API, then show the server's answer in the same list.