@navette-js/tables 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/query-builder.d.ts

@@ -55,7 +55,24 @@ export type Condition = {
     keys: Key[] | null;
     negate: boolean;
     modify?: RelationshipQueryModifier;
+}
+/** Application-defined condition (custom operator). */
+ | {
+    kind: 'custom';
+    apply: (query: any) => void;
+}
+/** Sum, average, minimum or maximum of a column of the related records, compared to a value. */
+ | {
+    kind: 'aggregate';
+    relationship: string;
+    column: string;
+    aggregate: Aggregate;
+    operator: Comparison;
+    value: number;
+    modify?: RelationshipQueryModifier;
 };
+declare const AGGREGATES: readonly ["sum", "avg", "min", "max"];
+type Aggregate = typeof AGGREGATES[number];
 /** `{ relationship, nodes }`: the nodes apply to the related records (`whereExists` subquery). */
 export type ConditionNode = Condition | {
     or: ConditionNode[][];
@@ -65,9 +82,11 @@ export type ConditionNode = Condition | {
     modify?: RelationshipQueryModifier;
 };
 type Settings = Record<string, unknown>;
+/** `onBaseQuery`: the condition applies to the table's query even for a relationship constraint (it queries the relationship itself). */
 type Resolved = {
     condition: Condition;
     summary: string;
+    onBaseQuery?: boolean;
 };
 /** Constraint operator: its settings form and how it turns into a condition. */
 type Operator = {
@@ -105,6 +124,10 @@ export declare class Constraint {
     protected _model: any;
     constructor(name: string, type: ConstraintType, icon: string);
     label(label: string): this;
+    private _pickerGroup;
+    /** Group of the constraint in the constraint picker. */
+    pickerGroup(label: string | null): this;
+    getPickerGroup(): string | null;
     /** Attribute name used in rule summaries (defaults to the label). */
     attributeLabel(label: string | null): this;
     icon(name: string): this;
@@ -129,6 +152,14 @@ export declare class Constraint {
     getRelationshipName(): string | null;
     getModifyRelationshipQueryUsing(): RelationshipQueryModifier | null;
     getOperators(): Operator[];
+    protected _operatorsOverride: Operator[] | null;
+    protected _extraOperators: Operator[];
+    /** Replaces the operators of the constraint. */
+    operators(operators: (QueryBuilderOperator | Operator)[]): this;
+    /** Adds operators after the default ones. */
+    pushOperators(operators: (QueryBuilderOperator | Operator)[]): this;
+    /** Operators offered to the user: the default ones, or those set with `operators()` / `pushOperators()`. */
+    getAvailableOperators(): Operator[];
     /** `contains` or `contains.inverse` → operator and direction; null if the constraint does not declare it. */
     parseOperator(value: unknown): {
         operator: Operator;
@@ -141,11 +172,50 @@ export declare class Constraint {
     getListSettingNames(): string[];
     getDefaultData(): Record<string, unknown>;
 }
+/** A constraint built only from your own operators: `Constraint.make('name').operators([...])`. */
+export declare class CustomConstraint extends Constraint {
+    static make(name: string): CustomConstraint;
+}
+/**
+ * Operator of a query builder constraint: its label, its settings form, the condition it adds to the query, and the summary
+ * shown in the filter indicator.
+ */
+export declare class QueryBuilderOperator {
+    readonly name: string;
+    private _label;
+    private _inverseLabel;
+    private _fields;
+    private _query;
+    private _summary;
+    constructor(name: string);
+    static make(name: string): QueryBuilderOperator;
+    /** Labels of the operator and of its inverse ("is not ..."). */
+    label(label: string, inverseLabel?: string | null): this;
+    /** Settings fields; their values reach `query()` and `summary()`, keyed by field name, as scalars from the browser. */
+    schema(fields: Component[]): this;
+    /** Adds the condition to the query. Check `settings` before using them, and pass them as bound parameters. */
+    query(callback: (query: any, ctx: {
+        settings: Record<string, unknown>;
+        inverse: boolean;
+        column: string;
+    }) => void): this;
+    /** Text of the filter indicator. */
+    summary(callback: (ctx: {
+        attribute: string;
+        settings: Record<string, unknown>;
+        inverse: boolean;
+    }) => string): this;
+    toOperator(): Operator;
+}
 export declare class TextConstraint extends Constraint {
     static make(name: string): TextConstraint;
 }
 export declare class NumberConstraint extends Constraint {
+    private _integer;
     static make(name: string): NumberConstraint;
+    /** Whole numbers only: an integer field, and a rule with a decimal value has no effect. */
+    integer(condition?: boolean): this;
+    getOperators(): Operator[];
 }
 export declare class BooleanConstraint extends Constraint {
     static make(name: string): BooleanConstraint;
@@ -226,6 +296,13 @@ export declare class RelationshipConstraint extends Constraint {
     /** Loads labels of the keys cited by rules (for indicators such as "Author is Ada or Linus"). */
     loadRelatedLabels(keys: Key[], host: unknown): Promise<void>;
 }
+/**
+ * `[key, title]` pairs of the records of a relationship of `model` (an Objection model with `relationMappings`), sorted by
+ * title; only `keys` when given. `titleAttribute` is a column of the related table, written by the application.
+ */
+export declare function loadRelationshipOptions(model: any, relationship: string, titleAttribute: string | null, modify?: RelationshipQueryModifier | null, keys?: string[] | null, limit?: number): Promise<[string, string][]>;
+/** Objection model of the host's table (`ObjectionAdapter`), when the application did not declare one. */
+export declare function modelOfHost(host: unknown): any;
 type Rule = {
     type: string;
     data: Record<string, any>;
@@ -237,7 +314,7 @@ type Rules = Record<string, Rule>;
  */
 export declare function sanitizeRules(constraints: Constraint[], raw: unknown, depth?: number, budget?: {
     rules: number;
-}): Rules;
+}, maxDepth?: number): Rules;
 /** Sanitized rules → conditions and indicator labels (one entry per effective top-level rule). */
 export declare function compileRules(constraints: Constraint[], rules: Rules, iteration?: number): {
     nodes: ConditionNode[];
@@ -272,8 +349,17 @@ export declare class QueryBuilder implements TableFilter {
     private _constraints;
     private _pickerColumns;
     private _model;
+    private _maxRules;
+    private _maxNestingDepth;
     static make(): QueryBuilder;
-    constraints(constraints: Constraint[]): this;
+    /** Maximum number of rules (at most `MAX_RULES`, 100). Extra rules sent by the browser are dropped. */
+    maxRules(count: number): this;
+    getMaxRules(): number;
+    /** Maximum nesting depth of "or" groups: 1 forbids them (at most `MAX_NESTING_DEPTH`, 3). */
+    maxNestingDepth(depth: number): this;
+    getMaxNestingDepth(): number;
+    /** Constraints, or `{ 'Group label': [constraints] }` to group them in the constraint picker. */
+    constraints(list: Constraint[] | Record<string, Constraint[]>): this;
     /** Objection model of the table, passed to relationship constraints (related record lists). */
     model(model: any): this;
     /** Before indicators: loads labels of the related records cited by rules (`RelationshipConstraint.selectable`). */
@@ -281,6 +367,10 @@ export declare class QueryBuilder implements TableFilter {
     constraintPickerColumns(columns?: number | null): this;
     getConstraints(): Constraint[];
     getConstraintPickerColumns(): number | null;
+    private _pickerWidth;
+    /** Width of the constraint picker dropdown: `xs` to `7xl` (wider by default with 2 or 3 columns). */
+    constraintPickerWidth(width: string | null): this;
+    getConstraintPickerWidth(): string | null;
     getLabel(): string;
     getDefaultState(): FilterState;
     getFormDefinition(): {

package/lib/query-builder.js

@@ -20,6 +20,8 @@ export const MAX_NESTING_DEPTH = 3;
 /** Maximum number of values in a multiple select. */
 export const MAX_LIST_VALUES = 100;
 const OR = 'or';
+const AGGREGATES = ['sum', 'avg', 'min', 'max'];
+const AGGREGATE_KEYS = { sum: 'sum', avg: 'average', min: 'min', max: 'max' };
 const label = (group, name) => (inverse) => tr(`operators.${group}.${name}.label.${inverse ? 'inverse' : 'direct'}`);
 /** Joins labels as "a, b or c" using the translated glue strings. */
 const joinLabels = (labels, glueKey) => (labels.length <= 1 ? labels.join('') : `${labels.slice(0, -1).join(tr(`${glueKey}.0`))}${tr(`${glueKey}.final`)}${labels[labels.length - 1]}`);
@@ -41,17 +43,31 @@ function textOperator(name, key, pattern) {
         },
     };
 }
-function numberOperator(name, key, direct, inverted) {
+function numberOperator(name, key, direct, inverted, integer = false, aggregatable = false) {
     return {
         name, label: label('number', key), defaults: () => ({ number: null, aggregate: null }),
-        // `aggregate` is only used for relationships; the field exists but stays hidden.
-        fields: () => [TextInput.make('number').label(tr('operators.number.form.number.label')).numeric().required(), Select.make('aggregate').label(tr('operators.number.form.aggregate.label')).hidden()],
+        // `aggregate` is offered for relationship constraints: the sum, average, minimum or maximum of the related records.
+        fields: () => [
+            (integer ? TextInput.make('number').integer() : TextInput.make('number').numeric()).label(tr('operators.number.form.number.label')).required(),
+            Select.make('aggregate').label(tr('operators.number.form.aggregate.label')).options(AGGREGATES.map((aggregate) => [aggregate, tr(`operators.number.aggregates.${AGGREGATE_KEYS[aggregate]}.label`)])).hidden(!aggregatable),
+        ],
         resolve: (settings, inverse, constraint) => {
             const raw = settings.number;
             if (!(typeof raw === 'number' || (typeof raw === 'string' && raw.trim() !== '')) || !Number.isFinite(Number(raw)))
                 return null;
             const number = Number(raw);
-            return { condition: { kind: 'compare', column: constraint.getColumn(), operator: inverse ? inverted : direct, value: number }, summary: summary('number', key, inverse, { attribute: constraint.getAttributeLabel(), number: new Intl.NumberFormat('en-US').format(number) }) };
+            if (integer && !Number.isInteger(number))
+                return null;
+            const relationship = constraint.getRelationshipName();
+            // Only a known aggregate, and only on a relationship constraint: anything else compares each related value.
+            const aggregate = aggregatable && relationship !== null && AGGREGATES.includes(String(settings.aggregate)) ? settings.aggregate : null;
+            const attribute = aggregate ? tr(`operators.number.aggregates.${AGGREGATE_KEYS[aggregate]}.summary`, { attribute: constraint.getAttributeLabel() }) : constraint.getAttributeLabel();
+            const text = summary('number', key, inverse, { attribute, number: new Intl.NumberFormat('en-US').format(number) });
+            if (aggregate) {
+                const modify = constraint.getModifyRelationshipQueryUsing();
+                return { condition: { kind: 'aggregate', relationship: relationship, column: constraint.getColumn(), aggregate, operator: inverse ? inverted : direct, value: number, ...(modify ? { modify } : {}) }, summary: text, onBaseQuery: true };
+            }
+            return { condition: { kind: 'compare', column: constraint.getColumn(), operator: inverse ? inverted : direct, value: number }, summary: text };
         },
     };
 }
@@ -243,6 +259,10 @@ export class Constraint {
         this._icon = icon;
     }
     label(label) { this._label = label; return this; }
+    _pickerGroup = null;
+    /** Group of the constraint in the constraint picker. */
+    pickerGroup(label) { this._pickerGroup = label; return this; }
+    getPickerGroup() { return this._pickerGroup; }
     /** Attribute name used in rule summaries (defaults to the label). */
     attributeLabel(label) { this._attributeLabel = label; return this; }
     icon(name) { this._icon = name; return this; }
@@ -271,27 +291,100 @@ export class Constraint {
     /** Relationship whose records hold the attribute, or `null` for a column of the table. */
     getRelationshipName() { return this._relationship; }
     getModifyRelationshipQueryUsing() { return this._modifyRelationshipQuery; }
-    getOperators() { return [...OPERATORS[this.type], ...(this._nullable ? [isFilledOperator] : [])]; }
+    getOperators() { return [...(OPERATORS[this.type] ?? []), ...(this._nullable ? [isFilledOperator] : [])]; }
+    _operatorsOverride = null;
+    _extraOperators = [];
+    /** Replaces the operators of the constraint. */
+    operators(operators) { this._operatorsOverride = operators.map(toOperator); return this; }
+    /** Adds operators after the default ones. */
+    pushOperators(operators) { this._extraOperators = [...this._extraOperators, ...operators.map(toOperator)]; return this; }
+    /** Operators offered to the user: the default ones, or those set with `operators()` / `pushOperators()`. */
+    getAvailableOperators() {
+        const list = this._operatorsOverride ?? [...this.getOperators(), ...this._extraOperators];
+        if (new Set(list.map((operator) => operator.name)).size !== list.length)
+            throw new Error(`Constraint ${this.name}: two operators have the same name.`);
+        return list;
+    }
     /** `contains` or `contains.inverse` → operator and direction; null if the constraint does not declare it. */
     parseOperator(value) {
         if (typeof value !== 'string')
             return null;
         const inverse = value.endsWith('.inverse');
-        const operator = this.getOperators().find((candidate) => candidate.name === (inverse ? value.slice(0, -8) : value));
+        const operator = this.getAvailableOperators().find((candidate) => candidate.name === (inverse ? value.slice(0, -8) : value));
         return operator ? { operator, inverse } : null;
     }
-    getOperatorOptions() { return this.getOperators().flatMap((operator) => [[operator.name, operator.label(false)], [`${operator.name}.inverse`, operator.label(true)]]); }
+    getOperatorOptions() { return this.getAvailableOperators().flatMap((operator) => [[operator.name, operator.label(false)], [`${operator.name}.inverse`, operator.label(true)]]); }
     /** Setting names known to the constraint across all operators (switching operator keeps the previous settings). */
-    getSettingNames() { return [...new Set(this.getOperators().flatMap((operator) => Object.keys(operator.defaults() ?? {})))]; }
+    getSettingNames() { return [...new Set(this.getAvailableOperators().flatMap((operator) => Object.keys(operator.defaults() ?? {})))]; }
     /** Settings whose value is a list (multiple select). */
-    getListSettingNames() { return [...new Set(this.getOperators().flatMap((operator) => Object.entries(operator.defaults() ?? {}).filter(([, value]) => Array.isArray(value)).map(([name]) => name)))]; }
-    getDefaultData() { const [first] = this.getOperators(); return { operator: first.name, settings: first.defaults() }; }
+    getListSettingNames() { return [...new Set(this.getAvailableOperators().flatMap((operator) => Object.entries(operator.defaults() ?? {}).filter(([, value]) => Array.isArray(value)).map(([name]) => name)))]; }
+    getDefaultData() { const [first] = this.getAvailableOperators(); return { operator: first.name, settings: first.defaults() }; }
 }
+/** A constraint built only from your own operators: `Constraint.make('name').operators([...])`. */
+export class CustomConstraint extends Constraint {
+    static make(name) { return configured(new CustomConstraint(name, 'custom', 'm-funnel')); }
+}
+/**
+ * Operator of a query builder constraint: its label, its settings form, the condition it adds to the query, and the summary
+ * shown in the filter indicator.
+ */
+export class QueryBuilderOperator {
+    name;
+    _label;
+    _inverseLabel;
+    _fields = [];
+    _query = null;
+    _summary = null;
+    constructor(name) {
+        if (!/^[A-Za-z][A-Za-z0-9_]{0,63}$/.test(name))
+            throw new Error(`Invalid operator name: ${name}`);
+        this.name = name;
+        this._label = headline(name);
+        this._inverseLabel = `Not ${headline(name).toLowerCase()}`;
+    }
+    static make(name) { return configured(new QueryBuilderOperator(name)); }
+    /** Labels of the operator and of its inverse ("is not ..."). */
+    label(label, inverseLabel = null) { this._label = label; if (inverseLabel !== null)
+        this._inverseLabel = inverseLabel; return this; }
+    /** Settings fields; their values reach `query()` and `summary()`, keyed by field name, as scalars from the browser. */
+    schema(fields) { this._fields = fields; return this; }
+    /** Adds the condition to the query. Check `settings` before using them, and pass them as bound parameters. */
+    query(callback) { this._query = callback; return this; }
+    /** Text of the filter indicator. */
+    summary(callback) { this._summary = callback; return this; }
+    toOperator() {
+        const fields = this._fields;
+        return {
+            name: this.name,
+            label: (inverse) => (inverse ? this._inverseLabel : this._label),
+            defaults: () => (fields.length ? Object.fromEntries(fields.filter((field) => typeof field.getName === 'function').map((field) => [field.getName(), typeof field.getDefaultState === 'function' ? field.getDefaultState() : null])) : null),
+            fields: () => fields,
+            resolve: (settings, inverse, constraint) => {
+                if (!this._query)
+                    return null;
+                const column = constraint.getColumn();
+                const query = this._query;
+                return {
+                    condition: { kind: 'custom', apply: (builder) => query(builder, { settings, inverse, column }) },
+                    summary: this._summary ? this._summary({ attribute: constraint.getAttributeLabel(), settings, inverse }) : `${constraint.getAttributeLabel()} ${(inverse ? this._inverseLabel : this._label).toLowerCase()}`,
+                };
+            },
+        };
+    }
+}
+const toOperator = (operator) => (operator instanceof QueryBuilderOperator ? operator.toOperator() : operator);
 export class TextConstraint extends Constraint {
     static make(name) { return configured(new TextConstraint(name, 'text', 'm-language')); }
 }
 export class NumberConstraint extends Constraint {
+    _integer = false;
     static make(name) { return configured(new NumberConstraint(name, 'number', 'm-variable')); }
+    /** Whole numbers only: an integer field, and a rule with a decimal value has no effect. */
+    integer(condition = true) { this._integer = condition; return this; }
+    getOperators() {
+        const integer = this._integer, aggregatable = this._relationship !== null;
+        return [numberOperator('isMin', 'is_min', '>=', '<', integer, aggregatable), numberOperator('isMax', 'is_max', '<=', '>', integer, aggregatable), numberOperator('equals', 'equals', '=', '!=', integer, aggregatable), ...(this._nullable ? [isFilledOperator] : [])];
+    }
 }
 export class BooleanConstraint extends Constraint {
     static make(name) { return configured(new BooleanConstraint(name, 'boolean', 'm-check-circle')); }
@@ -468,8 +561,28 @@ export class RelationshipConstraint extends Constraint {
             this._relatedLabels.set(String(row.__key), String(row.__title ?? row.__key));
     }
 }
+/**
+ * `[key, title]` pairs of the records of a relationship of `model` (an Objection model with `relationMappings`), sorted by
+ * title; only `keys` when given. `titleAttribute` is a column of the related table, written by the application.
+ */
+export async function loadRelationshipOptions(model, relationship, titleAttribute, modify = null, keys = null, limit = 1000) {
+    if (typeof model?.getRelation !== 'function')
+        throw new Error(`Relationship ${relationship}: the table's records must come from an Objection model with relationMappings.`);
+    const related = model.getRelation(relationship).relatedModelClass;
+    const id = `${related.tableName}.${related.idColumn}`;
+    const title = `${related.tableName}.${titleAttribute ?? related.idColumn}`;
+    const query = related.query();
+    modify?.(query);
+    if (keys !== null) {
+        if (!keys.length)
+            return [];
+        query.whereIn(id, keys.slice(0, MAX_LIST_VALUES));
+    }
+    const rows = await query.clearSelect().select({ __key: id, __title: title }).orderBy(title).limit(limit);
+    return rows.map((row) => [String(row.__key), String(row.__title ?? row.__key)]);
+}
 /** Objection model of the host's table (`ObjectionAdapter`), when the application did not declare one. */
-function modelOfHost(host) {
+export function modelOfHost(host) {
     const adapter = host?.getDataAdapterForTable?.() ?? host?.resource?.adapter ?? null;
     const model = adapter?.model;
     return typeof model === 'function' && typeof model.getRelation === 'function' ? model : null;
@@ -479,7 +592,7 @@ const isObject = (value) => value !== null && typeof value === 'object' && !Arra
  * Reduces the browser's rule tree to what the filter declares: known block types, the constraint's operators, scalar settings with
  * known names, bounded depth and rule count. An unknown operator is reset to null (the rule has no effect).
  */
-export function sanitizeRules(constraints, raw, depth = 1, budget = { rules: MAX_RULES }) {
+export function sanitizeRules(constraints, raw, depth = 1, budget = { rules: MAX_RULES }, maxDepth = MAX_NESTING_DEPTH) {
     const rules = {};
     if (!isObject(raw))
         return rules;
@@ -490,12 +603,12 @@ export function sanitizeRules(constraints, raw, depth = 1, budget = { rules: MAX
             continue;
         const data = isObject(rule.data) ? rule.data : {};
         if (rule.type === OR) {
-            if (depth >= MAX_NESTING_DEPTH)
+            if (depth >= maxDepth)
                 continue;
             const groups = {};
             for (const [groupKey, group] of Object.entries(isObject(data.groups) ? data.groups : {}).slice(0, 20)) {
                 if (isItemKey(groupKey))
-                    groups[groupKey] = { rules: sanitizeRules(constraints, isObject(group) ? group.rules : null, depth + 1, budget) };
+                    groups[groupKey] = { rules: sanitizeRules(constraints, isObject(group) ? group.rules : null, depth + 1, budget, maxDepth) };
             }
             rules[key] = { type: OR, data: { groups } };
             continue;
@@ -535,7 +648,7 @@ export function compileRules(constraints, rules, iteration = 1) {
         if (!resolved)
             continue;
         // Relationship attribute: the condition applies to the related records, unless the operator targets the base query.
-        const relationship = parsed.operator.onBaseQuery ? null : constraint.getRelationshipName();
+        const relationship = parsed.operator.onBaseQuery || resolved.onBaseQuery ? null : constraint.getRelationshipName();
         const modify = constraint.getModifyRelationshipQueryUsing();
         nodes.push(relationship === null ? resolved.condition : { relationship, nodes: [resolved.condition], ...(modify ? { modify } : {}) });
         summaries[key] = resolved.summary;
@@ -615,10 +728,19 @@ export function applyConditions(query, nodes, dialect = sqlDialectOf(query)) {
             else
                 query.whereIn(node.column, node.values);
         }
+        else if (node.kind === 'aggregate') {
+            // Aggregate subquery of the related records, passed as a bound parameter like the count below.
+            const sub = relatedQuery(query, node.relationship, node.modify);
+            const column = `${sub.tableRefFor(sub.modelClass())}.${node.column}`;
+            query.whereRaw(`(?) ${node.operator} ?`, [sub.clearSelect()[node.aggregate](column), node.value]);
+        }
         else if (node.kind === 'relationCount') {
             // Count subquery passed as a bound parameter (Objection does not accept it as a `where` column).
             query.whereRaw(`(?) ${node.operator} ?`, [relatedQuery(query, node.relationship, node.modify).count(), node.value]);
         }
+        else if (node.kind === 'custom') {
+            query.where((inner) => { node.apply(inner); });
+        }
         else if (node.kind === 'related') {
             const sub = relatedQuery(query, node.relationship, node.modify);
             if (node.keys !== null) {
@@ -764,7 +886,7 @@ export class RuleBuilder extends Builder {
         const columns = filter.getConstraintPickerColumns();
         this.label(tr('form.rules.label'))
             .blocks(() => [
-            ...filter.getConstraints().map((constraint) => Block.make(constraint.name).label(constraint.getLabel()).icon(constraint.getIcon())
+            ...filter.getConstraints().map((constraint) => Block.make(constraint.name).label(constraint.getLabel()).icon(constraint.getIcon()).pickerGroup(constraint.getPickerGroup())
                 .defaultData(() => constraint.getDefaultData())
                 .schema(({ builder, itemKey, data }) => [new RuleRow(builder, itemKey, constraint, data)])),
             Block.make(OR).label(tr('form.or_groups.block.label')).icon('m-slash')
@@ -773,19 +895,24 @@ export class RuleBuilder extends Builder {
         ])
             .addActionLabel(tr('actions.add_rule.label')).addActionIcon('c-plus').addActionAlignment('start')
             .labelBetweenItems(tr('item_separators.and')).blockHeaders(false).addBetweenAction(false).storedAsList(false).cloneable().generateUuidUsing(shortKey)
-            .blockPickerColumns(columns).blockPickerWidth(columns === 2 ? 'md' : columns === 3 ? '2xl' : null)
-            .extraClass('fi-fo-builder-not-contained').maxItems(MAX_RULES);
+            .blockPickerColumns(columns).blockPickerWidth(filter.getConstraintPickerWidth() ?? (columns === 2 ? 'md' : columns === 3 ? '2xl' : null))
+            .extraClass('fi-fo-builder-not-contained').maxItems(filter.getMaxRules());
     }
     /** The "OR" block is neither offered nor accepted beyond the maximum depth; nothing is offered once the rule limit is reached. */
     getBlockPickerBlocks() {
         if (this.isAtRuleLimit())
             return [];
-        return this.getBlocks().filter((block) => block.name !== OR || this.depth < MAX_NESTING_DEPTH);
+        return this.getBlocks().filter((block) => block.name !== OR || this.depth < this.filter.getMaxNestingDepth());
     }
-    getBlock(name) { return name === OR && this.depth >= MAX_NESTING_DEPTH ? undefined : super.getBlock(name); }
+    getBlock(name) { return name === OR && this.depth >= this.filter.getMaxNestingDepth() ? undefined : super.getBlock(name); }
     canAdd() { return !this.isAtRuleLimit(); }
     /** Counts rules across the whole tree ("OR" blocks excluded), read from the host's deferred filter state. */
-    isAtRuleLimit() { return this.filter.countRules(this.livewire.tableDeferredFilters?.[this.filter.name]) >= MAX_RULES; }
+    isAtRuleLimit() {
+        const livewire = this.livewire;
+        // Live filters (`deferFilters(false)`) edit the applied state directly.
+        const state = livewire.getTable?.().hasDeferredFilters?.() === false ? livewire.tableFilters : livewire.tableDeferredFilters;
+        return this.filter.countRules(state?.[this.filter.name]) >= this.filter.getMaxRules();
+    }
     /** Component action without modal (also used by "OR" groups). */
     makeAction(name, handler) { return this.getActions()[0].constructor.make(name).action(({ arguments: args }) => handler(args)); }
 }
@@ -796,8 +923,18 @@ export class QueryBuilder {
     _constraints = [];
     _pickerColumns = null;
     _model = null;
+    _maxRules = MAX_RULES;
+    _maxNestingDepth = MAX_NESTING_DEPTH;
     static make() { return configured(new QueryBuilder()); }
-    constraints(constraints) {
+    /** Maximum number of rules (at most `MAX_RULES`, 100). Extra rules sent by the browser are dropped. */
+    maxRules(count) { this._maxRules = Math.min(MAX_RULES, Math.max(1, Math.floor(count))); return this; }
+    getMaxRules() { return this._maxRules; }
+    /** Maximum nesting depth of "or" groups: 1 forbids them (at most `MAX_NESTING_DEPTH`, 3). */
+    maxNestingDepth(depth) { this._maxNestingDepth = Math.min(MAX_NESTING_DEPTH, Math.max(1, Math.floor(depth))); return this; }
+    getMaxNestingDepth() { return this._maxNestingDepth; }
+    /** Constraints, or `{ 'Group label': [constraints] }` to group them in the constraint picker. */
+    constraints(list) {
+        const constraints = Array.isArray(list) ? list : Object.entries(list).flatMap(([group, items]) => items.map((constraint) => constraint.pickerGroup(group)));
         if (new Set(constraints.map((c) => c.name)).size !== constraints.length)
             throw new Error('QueryBuilder: two constraints have the same name.');
         this._constraints = constraints;
@@ -840,13 +977,17 @@ export class QueryBuilder {
     constraintPickerColumns(columns = 2) { this._pickerColumns = columns; return this; }
     getConstraints() { return this._constraints; }
     getConstraintPickerColumns() { return this._pickerColumns; }
+    _pickerWidth = null;
+    /** Width of the constraint picker dropdown: `xs` to `7xl` (wider by default with 2 or 3 columns). */
+    constraintPickerWidth(width) { this._pickerWidth = width !== null && /^(xs|sm|md|lg|xl|[2-7]xl)$/.test(width) ? width : null; return this; }
+    getConstraintPickerWidth() { return this._pickerWidth; }
     getLabel() { return tr('label'); }
     getDefaultState() { return { rules: {} }; }
     getFormDefinition() { return { placeholder: '', options: [] }; }
     /** The filter spans the full width of the filters form. */
     getColumnSpan() { return { default: 'full' }; }
     getFormComponents() { return [new RuleBuilder('rules', this).label(this.getLabel()).hiddenLabel()]; }
-    sanitizeState(state) { return { rules: sanitizeRules(this._constraints, isObject(state) ? state.rules : null) }; }
+    sanitizeState(state) { return { rules: sanitizeRules(this._constraints, isObject(state) ? state.rules : null, 1, { rules: this._maxRules }, this._maxNestingDepth) }; }
     countRules(state) {
         const count = (rules) => Object.values(rules).reduce((total, rule) => total + (rule.type === OR ? Object.values(rule.data.groups).reduce((sum, group) => sum + count(group.rules), 0) : 1), 0);
         return count(this.sanitizeState(state).rules);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/tables",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "Interactive tables for Navette admin panels.",
   "license": "MIT",
   "type": "module",
@@ -38,11 +38,11 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/support": "1.0.0-beta.2",
-    "@navette-js/database": "1.0.0-beta.2",
-    "@navette-js/actions": "1.0.0-beta.2",
-    "@navette-js/forms": "1.0.0-beta.2",
-    "@navette-js/schemas": "1.0.0-beta.2"
+    "@navette-js/support": "1.0.0-beta.4",
+    "@navette-js/database": "1.0.0-beta.4",
+    "@navette-js/actions": "1.0.0-beta.4",
+    "@navette-js/forms": "1.0.0-beta.4",
+    "@navette-js/schemas": "1.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public",

package/views/filters.ejs

@@ -0,0 +1,44 @@
+<%# Filters panel: heading, reset link (header or footer), form, and the apply button of deferred filters. %>
+<% const resetButton = (extra) => `<button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="${cls(extra)}" data-table-filter-action="reset" wire:click="resetTableFiltersForm">${loadingIndicator(attrs({ 'wire:loading.delay.default': '', 'wire:target': 'resetTableFiltersForm' }))}`; %>
+<div <%- attributes %>>
+    <div class="fi-ta-filters-header">
+        <h2 class="fi-ta-filters-heading">
+            <%= t('filament-tables::table.filters.heading') %>
+        </h2>
+        <% if (resetPosition === 'header' && !filterActions.reset.hidden) { %>
+
+        <div>
+            <% if (filterActions.reset.customized) { %><%- filterActionHtml(filterActions.reset, 'type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" data-table-filter-action="reset" wire:click="resetTableFiltersForm"') %><% } else { %>
+            <%- resetButton(['fi-ac-link-action', 'fi-link', 'fi-size-md', ...dangerLinkClasses]) %>
+                <span class="fi-link-label">
+                    <%= t('filament-tables::table.filters.actions.reset.label') %>
+                </span>
+            </button>
+            <% } %>
+        </div>
+        <% } %>
+    </div>
+
+    <%- form %>
+    <% const showApply = deferred && !filterActions.apply.hidden, showFooterReset = resetPosition === 'footer' && !filterActions.reset.hidden; %>
+    <% if (showApply || showFooterReset) { %>
+
+    <div class="fi-ta-filters-actions-ctn">
+        <% if (showApply && filterActions.apply.customized) { %>
+        <%- filterActionHtml(filterActions.apply, 'type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" data-table-filter-action="apply" wire:click="applyTableFilters"' + (closeModal ? ' x-on:click="' + e("$dispatch('close-modal', { id: " + js(closeModal) + ' })') + '"' : '')) %>
+        <% } else if (showApply) { %>
+        <button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="<%- cls(['fi-ac-btn-action', 'fi-btn', 'fi-size-md', ...primaryButtonClasses]) %>" data-table-filter-action="apply" wire:click="applyTableFilters"<% if (closeModal) { %> x-on:click="$dispatch('close-modal', { id: <%= js(closeModal) %> })"<% } %>>
+            <%- loadingIndicator(attrs({ 'wire:loading.delay.default': '', 'wire:target': 'applyTableFilters' })) %>
+            <%= t('filament-tables::table.filters.actions.apply.label') %>
+        </button>
+        <% } %>
+        <% if (showFooterReset && filterActions.reset.customized) { %>
+        <%- filterActionHtml(filterActions.reset, 'type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" data-table-filter-action="reset" wire:click="resetTableFiltersForm"') %>
+        <% } else if (showFooterReset) { %>
+        <%- resetButton(['fi-ac-btn-action', 'fi-btn', 'fi-size-md', ...grayButtonClasses]) %>
+            <%= t('filament-tables::table.filters.actions.reset.label') %>
+        </button>
+        <% } %>
+    </div>
+    <% } %>
+</div>