FilterItem
c88 Phase 2 redesign of the filter pill — primarily a display element: a static key label + delete (x) on top, and a value row below that opens a closed dropdown over valSuggestions when clicked (key and operator are not editable here — change those in the Config modal). A slash-circle glyph prefixes the value for the neq ("not this") operator instead of Phase 1's "!=" text. Tag filters with no value read as "tag exists" and have no dropdown. `removable=false` drops the x for a column that is always in place — Filter uses it for the permanent `when:` timeframe pill (design c92 timeframe-always). Look (design c92, 2026-09-24): a 24 px key row (grey-500, medium, not italic; ✕ in content-subtle) over the value row (bold, var(--qf-value, #759ac0)) with the chevron in var(--qf-accent, #4c99f8) — the vars come from Filter's .qf-bar, with fallbacks for standalone use.
Key and operator are fixed — only the value is interactive. Click the value to pick a different one from its dropdown.
removable=false) — the timeframe pill: no ✕, value still a dropdown, formatVal shows the option labelUsage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| _key | String | undefined | The filter key (static — not editable here). |
| val | String | undefined | The filter value. |
| operator | String | undefined | Falls back to FILTER_DEFAULT_OP when unset; neq renders a slash-circle glyph. Static — not editable here. |
| isTagFilter | Boolean | false | Renders "tag exists" instead of a value when true and val is empty, and disables the value dropdown. |
| valSuggestions | Array | [] | string[] offered in the value dropdown for the current key. |
| formatVal | Function | null | Display-only formatter for the value and its suggestions (FilterKeyDefinition.formatVal); the emitted value stays raw. |
| roundLeft | Boolean | false | Rounds the value box's bottom-left corner — set by Filter on its leftmost column. |
| removable | Boolean | true | False renders no x button (and never emits delete) — a permanent column such as the timeframe pill. Row height is unchanged. |
Events
| Event | Description |
|---|---|
| update:val | Fired with the newly selected value from the dropdown. |
| delete | Fired on the x button — stops propagation. Never fired when removable is false. |