FilterTriggerBar
components/filter/TriggerBar.vue
A segmented quick-filter bar for use in context (e.g. above a table), restyled in c92: a key segment whose chevron edge points into single-select value segments ("All" plus one per option), divided by hairlines. The key segment gets a caret and a key dropdown only when filterKeyDefs has more than one entry. Full-width and right-aligned by design — it sits over the right edge of whatever follows. Colours are provisional (legacy brand blue at opacity + stock slate-500), gathered in one TONE map inside the component ahead of joining the token set. The key segment shows no focus ring (c95).
Presentational only — wire update:modelValue/update:filterKey into the same state that feeds a page's Filter bar (see the Phase 2 global-filter lab page).
Team
Scenarios
Single fixed key — no key dropdown
Team
Multiple keys — dropdown shown
Team
With lead-in label
Global Filter :
Team
Overflow — many quick-select options
Team
#end slot — a trailing segment drawn from the bar's tone (DataListingBar seats the column picker here)
Team
components/filter/TriggerBar.vue
Usage
<FilterTriggerBar
label = "—"
:filterKeyDefs = "[]"
filterKey = "—"
:options = "[]"
:modelValue = "modelValue"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | Optional lead-in text left of the bar, e.g. "Global Filter :". |
| filterKeyDefs | Array | [] | FilterKeyDefinition[] — only rendered as a dropdown when there's more than one; a single key renders as static label text. |
| filterKey | String | '' | The currently selected key. |
| options | Array | [] | { value, label }[] — quick-select values for the current key. null/undefined values are reserved for "All". |
| modelValue | Any | null | Currently selected value; null/undefined selects "All". Compared with ===, so a string '3' won't match the number 3. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fired with the clicked segment's value, or null when "All" is clicked. |
| update:filterKey | Fired with the newly selected key from the dropdown. |
Slots
| Slot | Description |
|---|---|
| end | Trailing segment(s) after the values, hairline-divided, for a control that belongs on the bar but isn't a filter value (DataListingBar seats the column picker here). Scope { tone } — the bar's colour roles. Content should carry rounded-r-6 on its hover/selected surface |