@johly/bits-ui 2.18.1

package/dist/bits/filter/menu-nodes.js

@@ -0,0 +1,265 @@
+import { booleanFilterOperators, dateFilterOperators, multiOptionFilterOperators, numberFilterOperators, optionFilterOperators, textFilterOperators, } from "./operators.js";
+import { parseNumberInput } from "./units.js";
+import { t } from "./i18n.js";
+import { isBooleanColumn, isDateColumn, isMultiOptionColumn, isNumberColumn, isOptionColumn, isTextColumn, } from "./type-guards.js";
+export function createTextFilterItems({ query, column, actions, }) {
+    if (!query.trim())
+        return [];
+    function changeText(value, operator) {
+        actions.batch((tx) => {
+            tx.setFilterValue(column, [String(value)]);
+            tx.setFilterOperator(column.id, operator);
+        });
+    }
+    return [
+        {
+            kind: "item",
+            id: `${column.id}-text-contains-${query}`,
+            label: `contains ${query}`,
+            keywords: [query],
+            onSelect: () => changeText(query, "contains"),
+            meta: { kind: "text", data: { operator: "contains", values: [query] } },
+        },
+        {
+            kind: "item",
+            id: `${column.id}-text-does-not-contain-${query}`,
+            label: `does not contain ${query}`,
+            keywords: [query],
+            onSelect: () => changeText(query, "does not contain"),
+            meta: {
+                kind: "text",
+                data: { operator: "does not contain", values: [query] },
+            },
+        },
+    ];
+}
+const SINGLE_VALUE_OPERATORS = [
+    "is",
+    "is not",
+    "is greater than",
+    "is greater than or equal to",
+    "is less than",
+    "is less than or equal to",
+];
+const RANGE_OPERATORS = ["is between", "is not between"];
+export function createNumberFilterItems({ query, column, actions, baseUnit = "ms", }) {
+    if (!query.trim())
+        return [];
+    const parsed = parseNumberInput(query, baseUnit);
+    if (!parsed)
+        return [];
+    function changeNumber(values, operator) {
+        actions.batch((tx) => {
+            tx.setFilterValue(column, values);
+            tx.setFilterOperator(column.id, operator);
+        });
+    }
+    const displayUnit = baseUnit && baseUnit !== "ms" ? baseUnit : undefined;
+    if (parsed.isRange && parsed.rangeValues) {
+        const [min, max] = parsed.rangeValues;
+        return RANGE_OPERATORS.map((operator) => ({
+            kind: "item",
+            id: `${column.id}-number-${operator.replace(/\s+/g, "-")}-${min}-${max}`,
+            label: `${operator} ${min} and ${max}`,
+            keywords: [query, String(min), String(max)],
+            onSelect: () => changeNumber([min, max], operator),
+            meta: {
+                kind: "number",
+                data: { operator, values: [min, max], isRange: true, displayUnit },
+            },
+        }));
+    }
+    const value = parsed.value;
+    return SINGLE_VALUE_OPERATORS.map((operator) => ({
+        kind: "item",
+        id: `${column.id}-number-${operator.replace(/\s+/g, "-")}-${value}`,
+        label: `${operator} ${value}`,
+        keywords: [query, String(value)],
+        onSelect: () => changeNumber([value], operator),
+        meta: {
+            kind: "number",
+            data: { operator, values: [value], isRange: false, displayUnit },
+        },
+    }));
+}
+function createSelectableMenuInternal({ column, actions, filter, }) {
+    const counts = column.getFacetedUniqueValues();
+    return column.getOptions().map((option) => {
+        const selected = filter?.values.includes(option.value) ?? false;
+        const optionData = {
+            value: option.value,
+            label: option.label,
+            icon: option.icon,
+            count: counts?.get(option.value) ?? option.count ?? 0,
+        };
+        return {
+            kind: "checkbox-item",
+            id: option.value,
+            label: option.label,
+            keywords: [option.value, option.label],
+            checked: selected,
+            onCheckedChange: (checked) => {
+                if (checked) {
+                    actions.addFilterValue(column, [option.value]);
+                }
+                else {
+                    actions.removeFilterValue(column, [option.value]);
+                }
+            },
+            closeOnSelect: false,
+            meta: { kind: "option", option: optionData, column },
+        };
+    });
+}
+export function createOptionMenu({ column, actions, filter, }) {
+    return createSelectableMenuInternal({
+        column: column,
+        actions,
+        filter,
+    });
+}
+export function createMultiOptionMenu({ column, actions, filter, }) {
+    return createSelectableMenuInternal({
+        column: column,
+        actions,
+        filter,
+    });
+}
+function getOperatorRecord(column) {
+    if (isTextColumn(column))
+        return textFilterOperators;
+    if (isOptionColumn(column))
+        return optionFilterOperators;
+    if (isMultiOptionColumn(column))
+        return multiOptionFilterOperators;
+    if (isDateColumn(column))
+        return dateFilterOperators;
+    if (isNumberColumn(column))
+        return numberFilterOperators;
+    if (isBooleanColumn(column))
+        return booleanFilterOperators;
+    return {};
+}
+export function createOperatorNodes({ filter, column, actions, locale, }) {
+    const operators = getOperatorRecord(column);
+    const currentOperator = operators[filter.operator];
+    const relatedOperators = Object.values(operators).filter((operator) => currentOperator && operator.target === currentOperator.target);
+    return [
+        {
+            kind: "radio-group",
+            id: "operators",
+            value: filter.operator,
+            onValueChange: (value) => actions.setFilterOperator(column.id, value),
+            nodes: relatedOperators.map((operator, index) => {
+                const label = t(operator.key, locale);
+                const shortcut = index < 9 ? String(index + 1) : undefined;
+                return {
+                    kind: "item",
+                    id: operator.value,
+                    value: operator.value,
+                    label,
+                    shortcut,
+                    closeOnSelect: true,
+                    meta: { kind: "operator", label, shortcut },
+                };
+            }),
+        },
+    ];
+}
+export function createColumnNodes({ columns, filters, actions, locale, strategy, }) {
+    return columns
+        .filter((column) => !column.hidden)
+        .map((column) => {
+        if (isTextColumn(column)) {
+            return {
+                kind: "submenu",
+                id: column.id,
+                title: column.displayName,
+                label: column.displayName,
+                meta: {
+                    kind: "column",
+                    column: column,
+                    editor: "text",
+                    inputPlaceholder: "Type to filter...",
+                },
+            };
+        }
+        if (isNumberColumn(column)) {
+            const unit = column.meta?.number?.unit;
+            return {
+                kind: "submenu",
+                id: column.id,
+                title: column.displayName,
+                label: column.displayName,
+                meta: {
+                    kind: "column",
+                    column: column,
+                    editor: "number",
+                    inputPlaceholder: unit && unit !== "ms"
+                        ? "Type number or duration (e.g. 1hr, 30min)..."
+                        : "Type a number...",
+                },
+            };
+        }
+        if (isDateColumn(column)) {
+            return {
+                kind: "submenu",
+                id: column.id,
+                title: column.displayName,
+                label: column.displayName,
+                meta: { kind: "column", column: column, editor: "date" },
+            };
+        }
+        if (isBooleanColumn(column)) {
+            return {
+                kind: "item",
+                id: `filter-value-${column.id}`,
+                label: column.displayName,
+                onSelect: () => actions.setFilterValue(column, [false]),
+                meta: { kind: "boolean", column: column },
+            };
+        }
+        if (isOptionColumn(column)) {
+            const filter = filters.find((f) => f.columnId === column.id && f.type === "option");
+            const nodes = createOptionMenu({ column, actions, filter });
+            return {
+                kind: "submenu",
+                id: column.id,
+                title: column.displayName,
+                label: column.displayName,
+                nodes,
+                meta: {
+                    kind: "column",
+                    column: column,
+                    editor: "option",
+                    inputPlaceholder: `Search ${column.displayName.toLowerCase()}...`,
+                },
+            };
+        }
+        if (isMultiOptionColumn(column)) {
+            const filter = filters.find((f) => f.columnId === column.id && f.type === "multiOption");
+            const nodes = createMultiOptionMenu({ column, actions, filter });
+            return {
+                kind: "submenu",
+                id: column.id,
+                title: column.displayName,
+                label: column.displayName,
+                nodes,
+                meta: {
+                    kind: "column",
+                    column: column,
+                    editor: "multiOption",
+                    inputPlaceholder: `Search ${column.displayName.toLowerCase()}...`,
+                },
+            };
+        }
+        void strategy;
+        return {
+            kind: "submenu",
+            id: column.id,
+            title: column.displayName,
+            label: column.displayName,
+            meta: { kind: "column", column: column },
+        };
+    });
+}

package/dist/bits/filter/operations.d.ts

@@ -0,0 +1,2 @@
+import type { FilterOperations } from "./types.js";
+export declare const filterOperations: FilterOperations;

package/dist/bits/filter/operations.js

@@ -0,0 +1,106 @@
+import { DEFAULT_OPERATORS, determineNewOperator } from "./operators.js";
+import { addUniq, removeUniq, uniq } from "./array.js";
+import { createBigIntFilterValue, createDateFilterValue, createNumberFilterValue, } from "./helpers.js";
+export const filterOperations = {
+    addFilterValue(filters, column, values) {
+        if (column.type !== "option" && column.type !== "multiOption") {
+            throw new Error("[filter] addFilterValue() is only supported for option columns");
+        }
+        const filter = filters.find((f) => f.columnId === column.id);
+        const isColumnFiltered = filter && filter.values.length > 0;
+        if (!isColumnFiltered) {
+            return [
+                ...filters,
+                {
+                    columnId: column.id,
+                    type: column.type,
+                    operator: values.length > 1
+                        ? DEFAULT_OPERATORS[column.type].multiple
+                        : DEFAULT_OPERATORS[column.type].single,
+                    values,
+                },
+            ];
+        }
+        const oldValues = filter.values;
+        const newValues = addUniq(oldValues, values);
+        const newOperator = determineNewOperator(column.type, oldValues, newValues, filter.operator);
+        if (newValues.length === 0) {
+            return filters.filter((f) => f.columnId !== column.id);
+        }
+        return filters.map((f) => f.columnId === column.id
+            ? {
+                columnId: column.id,
+                type: column.type,
+                operator: newOperator,
+                values: newValues,
+            }
+            : f);
+    },
+    removeFilterValue(filters, column, value) {
+        if (column.type !== "option" && column.type !== "multiOption") {
+            throw new Error("[filter] removeFilterValue() is only supported for option columns");
+        }
+        const filter = filters.find((f) => f.columnId === column.id);
+        const isColumnFiltered = filter && filter.values.length > 0;
+        if (!isColumnFiltered)
+            return filters;
+        const oldValues = filter.values;
+        const newValues = removeUniq(oldValues, value);
+        const newOperator = determineNewOperator(column.type, oldValues, newValues, filter.operator);
+        if (newValues.length === 0) {
+            return filters.filter((f) => f.columnId !== column.id);
+        }
+        return filters.map((f) => f.columnId === column.id
+            ? {
+                columnId: column.id,
+                type: column.type,
+                operator: newOperator,
+                values: newValues,
+            }
+            : f);
+    },
+    setFilterValue(filters, column, values) {
+        const filter = filters.find((f) => f.columnId === column.id);
+        const isColumnFiltered = filter && filter.values.length > 0;
+        const newValues = column.type === "number"
+            ? createNumberFilterValue(values)
+            : column.type === "bigint"
+                ? createBigIntFilterValue(values)
+                : column.type === "date"
+                    ? createDateFilterValue(values)
+                    : uniq(values);
+        if (newValues.length === 0)
+            return filters;
+        if (!isColumnFiltered) {
+            return [
+                ...filters,
+                {
+                    columnId: column.id,
+                    type: column.type,
+                    operator: newValues.length > 1
+                        ? DEFAULT_OPERATORS[column.type].multiple
+                        : DEFAULT_OPERATORS[column.type].single,
+                    values: newValues,
+                },
+            ];
+        }
+        const oldValues = filter.values;
+        const newOperator = determineNewOperator(column.type, oldValues, newValues, filter.operator);
+        const newFilter = {
+            columnId: column.id,
+            type: column.type,
+            operator: newOperator,
+            values: newValues,
+        };
+        return filters.map((f) => (f.columnId === column.id ? newFilter : f));
+    },
+    setFilterOperator(filters, columnId, operator) {
+        return filters.map((f) => (f.columnId === columnId ? { ...f, operator } : f));
+    },
+    removeFilter(filters, columnId) {
+        return filters.filter((f) => f.columnId !== columnId);
+    },
+    removeAllFilters() {
+        return [];
+    },
+};