[ @sdxc/ui/mixins ]
commandFilter
Search-as-you-type filtering for a Command root.
import { commandFilter } from "@sdxc/ui/mixins";Usage
Filters a Command root's pre-rendered items as the user types, hiding everything that doesn't match the current query and toggling the empty-state element when nothing does.
Signature
commandFilter(model: FilterModel): MixinDescriptor<HTMLElement>Parameters
| Parameter | Type | Description |
|---|---|---|
model | FilterModel | Behavior class instance owning the query, matched option set, and active option. |
Examples
let model = new FilterModel();
<Command mix={commandFilter(model)}>
<Command.Input />
<Command.Item id="home" value="Home">Home</Command.Item>
<Command.Item id="settings" value="Settings">Settings</Command.Item>
<Command.Empty>No matches</Command.Empty>
</Command>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
COMMAND_INPUT_ATTRIBUTE
Attribute the search input exposes itself on — Command.Input's own
<input> carries this automatically, and commandFilter() forwards its
typed value into FilterModel.setQuery.
const COMMAND_INPUT_ATTRIBUTE = "data-command-input"COMMAND_ITEM_ATTRIBUTE
Attribute every filterable item exposes itself on — the same data-value
attribute Command.Item already sets, so pre-rendered items need no
extra wiring to become filterable; its value is matched against the query.
const COMMAND_ITEM_ATTRIBUTE = "data-value"COMMAND_EMPTY_ATTRIBUTE
Attribute the empty-state element exposes itself on — Command.Empty
carries this automatically. commandFilter() toggles its hidden
property opposite FilterModel.isEmpty.
const COMMAND_EMPTY_ATTRIBUTE = "data-command-empty"getCommandItemId
Resolves the id a DOM item correlates to a FilterModel.Option:
its own id attribute when set, doubling as an aria-activedescendant
target, otherwise its position among the other items.
getCommandItemId(item: HTMLElement, index: number): string| Parameter | Type | Description |
|---|---|---|
item | HTMLElement | Item element read from the DOM. |
index | number | Item's position among the other items carrying COMMAND_ITEM_ATTRIBUTE. |