TuxRuleBuilder

flagship · pre-seeded query

Length > 5 mi AND (district IS bryan OR austin) AND compliance between 40 and 60

A realistic corridor-research query exercising every operator category. Toggle the inner group's combinator to flip OR → AND; add or remove rules; nest another group.

<tux-rule-builder
  v-model="query"
  :fields="fields"
  @apply="onApply"
  @clear="onClear"
/>

empty state · build from scratch

Empty root

With no children, the root still shows its combinator toggle and the "Add rule" / "Add group" affordances. Useful for surfaces where the user starts from zero.

<tux-rule-builder
  v-model="query"
  :fields="fields"
  @apply="onApply"
  @clear="onClear"
/>

data shape

Field catalog

The consumer passes a field catalog via :fields. Each field declares its type; the operator set is derived from the type (overridable per field). Value editors switch based on type + operator: text input · numeric input · date picker · select · "between" pair · boolean (no input).

interface FieldDef {
  key: string;
  label: string;
  type: "string" | "number" | "date" | "select" | "boolean";
  options?: { value: string; label: string }[]; // for select
  operators?: string[]; // override type defaults
}

// Operator defaults per type:
// string:  contains · equals · starts with · not contains
// number:  = · ≠ · < · ≤ · > · ≥ · between
// date:    on · before · after · between
// select:  is · is not
// boolean: is true · is false

faceted vs relational

When to reach for which

Same surface area as TuxFilterPanel, but a different shape of question. The two compose well — facets for the dominant narrowing dimensions, rule builder for the long-tail relational ones.

• TuxFilterPanel — multi-select narrowing across a known set of facets ("owner ∈ {Chen, Kim} AND type ∈ {PDF, CSV}"). The user picks from buckets you've pre-aggregated. Right answer for browse / search results.
• TuxRuleBuilder — relational predicates across heterogeneous fields ("compliance < 50% AND last inspected before 2024-01-01 AND treatment IS rumble"). The user writes the predicate; you evaluate at query time. Right answer for analytical / reporting surfaces.
• Both together — facets on the left rail for the narrowing axes (district, project), rule builder in a slideover for the "save this as a smart view" flow.