Query builder

Build a search as groups of conditions that match all, any or none.

<mm-search-bar label="Search the catalog"></mm-search-bar>
<!-- "Build query" on the bar opens mm-query-builder in place; Apply writes the query back. -->

Guidance

The query builder edits a search as groups of conditions, for anything the search bar's tokens cannot say. Each group has an All, Any or None switch with a plain hint ("Every condition must match"), and rows read as a sentence ("Where … and …", "or", "nor"); groups nest up to three deep, indented with a rule, never boxed. A row is a field, an operator that fits it and a value control that fits both. Operators follow what Marmot's query engine accepts per field (see operatorsFor): a glossary term only "is" or "matches" a pattern, a provider has no comparisons, metadata takes everything including "between" for numbers. Any metadata path can be typed as the field, with suggestions from loadFields, and values suggest from loadValues. Free text is a row too ("Any field contains orders"). It reads and writes the full query syntax, so every query can be built here; nothing falls back to text.

Open it from the search bar ("Build query"). It edits a copy: Apply fires mm-apply with the new query, Cancel or Escape fires mm-cancel. Every change fires mm-input, so the page can set count to the live number of results. Adding and removing rows and groups is announced, and focus moves to the new row or to the control that adds one.

Properties

Property	Attribute	Type	Default	Description
value	value	string	''	The query to edit, in Marmot search syntax.
fields		SearchBarField[]	[]	Fields with everyday labels and known values.
count	count	number | undefined		Live number of results for the draft, set by the page after mm-input.
loadFields		((prefix: string) => Promise<string[]>) | undefined		Suggests metadata fields as people type a field name, such as from /assets/suggestions/metadata/fields.
loadValues		((field: string, prefix: string) => Promise<string[]>) | undefined		Suggests values for a field as people type, such as from /assets/suggestions/metadata/values.
draft		string		The draft as query syntax.

Events

Event	Detail	Description
mm-input	CustomEvent<{ value: string }>	The draft query changed.
mm-apply	CustomEvent<{ value: string }>	Apply was pressed.
mm-cancel	CustomEvent<Record<string, never>>	Cancel or Escape was pressed.

CSS parts

Part	Description
panel	The bordered panel.
group	Each group.
footer	The count and actions.

Examples

Every state of mm-query-builder in Storybook, with keyboard and screen reader tests.