Bars
Bars
A bar names one thing in a single line: what it is, what it is called, what qualifies it, and what belongs at the far end. It is a shape, not a binding — an entity reaches it through its own template, but a search result that is a file, an app or a setting uses the very same markup.
The bar itself
Everything but the title is optional. The leading slot takes an icon, or any markup when a real avatar is needed; the trailing slot takes a date, a tag, a row of buttons. Given a link, the whole width becomes the target and the title keeps the colour of where it sits.
A list of results
The list brings the frame, the search field and the separators; each row brings a bar. Nothing here is an entity — that is the point: the same row serves a person, a document, an application and a preference.
A bare list
When the frame is already there, a vertical stack with dividers is enough — no shape of its own, just a line between two rows.
One surface each
The other reading of a list — no shared background and no line, each bar standing on its own block with room around it. Nothing new to style, the bar simply takes the block classes, and given a link the whole card becomes the target.
Findings
What an analysis reports, one bar each: the finding as the title, where it is as the subtitle, and what can be done about it in the trailing slot — nothing there when nothing can be done here. The severity is the block's tone, which the avatar at the head takes too.
A list of them, in Vue
The same rows read from an endpoint rather than written out: the list holds the page, the pagination and the empty state, and each entity says what to read on it — a title, what qualifies it, an icon, where it leads, a date at the far end. The readings above are its variants, `divided` then `surfaces`.
And kept up to date
A bar list is a collection like any other, so the three ways a collection hears that the world moved on are open to it: an app event, a live source, polling. This one listens to an event — ring it and watch the rows come back. See Keeping up for the three of them side by side.