Filters
A filter builder: add a filter, pick the attribute, the condition and the value inside the chip, with an editor per value kind. ReUI's Filters, ported: the same operator catalogue, the same query tree, the same chip anatomy.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Filters />
When to Use
- A toolbar over a table or list where users build their own conditions: field, operator, value
- A saved-search or report screen that stores a query tree and restores it later
- Anything FilterBar is too small for: FilterBar shows active filters, Filters lets the user write them
Text, number, select, multiselect, date and boolean fields. The add-filter button opens the attribute list; picking one adds a chip and opens its condition, then its value. Each chip segment reopens on click, the menu duplicates, negates or removes.
Size=Sm puts every chip, button and editor control on the 28px rung.
A field with child fields becomes a branch the picker drills into; a search reaches every level. The chip shows the path and collapses a long one.
LoadOptions receives the search text and a cursor and returns a page; the list shows loading, retry and load-more rows. ResolveValues gives a restored chip its labels before the list was ever opened.
EditorTemplate replaces the editor of one field, ValueTemplate the value segment of every chip.
Read only keeps every chip focusable and readable and refuses edits; disabled removes the tab stops as well.
Variant=Advanced renders a condition builder: rows with a combinator per group, groups that nest, a menu to wrap a row in a group or move it, and Alt with the arrow keys or the drag handle (Reorderable) to reorder. Inline here; the default puts it behind a trigger in a popover.
The same builder behind a trigger that counts the rules; a chip row can hand over to it through OnConvertToAdvanced.
Last change: none, 0 rule(s)
OnQueryChanged carries the new query and the reason; OnBeforeQueryChange returns false to refuse a change. Here a fourth rule is refused.
API Reference
Filters
FilterField
Id, Label, Kind (Text, Number, Range, Date, Select, MultiSelect, Boolean),
Options or LoadOptions and ResolveValues for option-backed fields,
Fields for a branch, Operators and DefaultOperator to replace the catalogue,
Editor / EditorTemplate, ValueTemplate / ValueText, Validate.
FilterQuery
A tree of FilterRule (Path, Operator, Value, Negated) and FilterGroup (Combinator, Rules); the root is always a group.
Flatten() returns the complete rules as FilterTerms (Field, Operator, Values, Negated) for an API call;
FilterQueries holds every operation (insert, update, remove, duplicate, move, wrap, unwrap, prune, CollectIssues) as pure functions.
A value is a string, double, bool or FilterDateValue, an IReadOnlyList<string> for a many-valued operator, or a FilterRange.
The tree round-trips through System.Text.Json (nodes carry a $type discriminator, values come back in their shape), so a saved search stores the query as is.
CollectIssues() on the component reports what is not ready to run, a field's own Validate message included.
Operators per kind
| Kind | Operators |
|---|---|
| Text | contains, not_contains, starts_with, ends_with, is, is_not, empty, not_empty |
| Number | eq, neq, gt, gte, lt, lte, between, not_between, empty, not_empty |
| Range | between, not_between, empty, not_empty |
| Date | is, is_not, is_before, is_after, is_on_or_before, is_on_or_after, between, not_between, empty, not_empty |
| Select | is, is_not, is_any_of, is_none_of, empty, not_empty |
| MultiSelect | has_any_of, has_all_of, has_none_of, empty, not_empty |
| Boolean | is, is_not, empty, not_empty |
Operator labels come from the Filters.Op.* keys of the locale catalogue; every other string from Filters.*. Build a FilterLabels with FilterLabels.FromLocalizer(L), change a property, and hand it to Labels to override one.