Filter builder

A universal, inline OData filter builder. controlMonoFilterBuilder owns the filter; <mono-filter-builder :control-filter-builder.prop="…"> renders it as nested rule rows and writes edits straight back.

Control

controlMonoFilterBuilder owns the filter tree; bind it with :control-filter-builder and read it back as an OData $filter string whenever it notifies.

It also owns the element's own props. Declare them in the controller's props block and <mono-filter-builder> needs nothing but the controller binding — the same arrangement as controlMonoTable({ props }), minus the per-element nesting, since this family has a single element.

const filter = controlMonoFilterBuilder({
  fields,
  props: { size: 'sm', width: '100%', maxHeight: 260 },
})

filter.props()                  // { size: 'sm', width: '100%', maxHeight: 260 }
filter.setProps({ size: 'lg' }) // merges, notifies, the element re-applies

props() returns one object with a stable identity, so a controller can be handed around and stay in sync. setProps is a merge — keys you omit keep their current value. A grid-owned builder takes the same block: controlMonoTable({ filterBuilder: { props: … } }).

Setting props on the element still works

Writing size / width / max-height directly on <mono-filter-builder> is still supported. Where both declare the same key, the controller wins; keys the controller never mentions are left to the template.

Basic

Reading the filter

const filter = controlMonoFilterBuilder({ fields, filter: ['Name', 'contains', 'Andy'] })

filter.original({ type: 'array' }) // the filter as first supplied — never changes
filter.changed({ type: 'array' })  // as currently edited; a devextreme expr — feed to a DataSource
filter.changed({ type: 'string' }) // an OData $filter — "contains(Name,'Andy')"
filter.changed()                   // omit `type` to get back the shape you passed in

subscribe(cb) fires on every edit; the element also emits mno-change (with array and string in the detail), plus mno-apply / mno-clear from the action row.

filter takes either shape

There is no filterType flag — a string is parsed, an array is normalised, decided by typeof. Input and output shapes are independent, so you can load a string and read back an array.

Parsing covers the subset this builder emits

The string parser handles parentheses, and / or / not, the six comparisons, contains / startswith / endswith, in (…), null, and quoted / numeric / boolean literals. Anything else — a lambda like Job/any(d: d/X eq 1), arithmetic, other functions — warns once and yields an empty builder rather than a filter that silently means something different. Array input has no such limit.

Fields

fields is the source of truth for the field dropdown — dataType decides which operators and value editor a column gets, values renders a select instead of free text, and a dotted field maps a nav column (Job.Name → Job/Name). Pass dataGrid: table instead (or as well) to derive fields from a table's props.th; explicit fields win.

Operators

Only OData-expressible operators are offered, filtered by dataType — pick a field type in the demo to see each set. Group operators are and / or / notAnd / notOr (the last two wrap the group in not (…)). in expands to an OR of equalities, between to ge … and le …, and isblank / isnotblank to eq null / ne null. Values are quoted properly — O'Brien serialises as 'O''Brien', numbers and booleans stay bare.

Localisation

Every user-facing string is overridable through texts; anything omitted keeps its English default.

controlMonoFilterBuilder({
  fields,
  texts: {
    matchPrefix: 'Cocokkan', matchSuffix: 'dari aturan berikut:',
    and: 'semua', or: 'apapun',
    contains: 'mengandung', eq: 'adalah sama dengan', isblank: 'diatur',
    addRule: 'Peraturan Baru', apply: 'Pencarian', clear: 'Buang',
  },
})

Apply / Clear

The action row renders above the rules. It's on by default; pass actions: false when the surrounding modal supplies its own buttons and you'd rather read changed() yourself.

Custom serializer

type: 'string' uses a built-in serializer. To route it through your own — e.g. dxFilterToString from mono-utils — pass toODataString; it must be synchronous, and it only affects the string form.

const { dxFilterToString } = useMonoUtility()
controlMonoFilterBuilder({ fields, toODataString: (f) => dxFilterToString({ filter: f }) })

CSS Variables

Themed through --mono-filter-* (read via private --_mono-filter-* resolvers, so they inherit and pierce the shadow boundary): -primary, -accent, -text, -muted, -border, -surface, -danger, -indent (nested-group indent).

Types

controlMonoFilterBuilder is also exported as monoFilterBuilder, and :control-filter-builder is also accepted as :data-filter — the older spellings still work.

Importimport { MonoFilterBuilderProps } from 'mono-helper'

Prop	Value	Default	Description
dataFilter	MonoFilterController	—	The controller, bound with `:data-filter.prop` / `:dataFilter`.
controlFilterBuilder	MonoFilterController	—	Renamed — `:control-filter-builder` / `:controlFilterBuilder` alias `dataFilter`.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Visual size of the inner controls (default `sm`).
width	string | number	—	Fixed builder width (CSS length or px number).
height	string | number	—	Fixed builder height — when set, the rules scroll between the pinned Apply/Clear row and the Add rule/group row.
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	Caps the builder height so a long rule list scrolls instead of growing.