@johly/bits-ui 2.18.1

package/dist/bits/filter/filter.svelte.js

@@ -0,0 +1,206 @@
+import { Context } from "runed";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { createColumns } from "./columns.js";
+import { filterOperations } from "./operations.js";
+import { isColumnOptionArray, isColumnOptionMap, isMinMaxTuple } from "./helpers.js";
+export const filterAttrs = createBitsAttrs({
+    component: "filter",
+    parts: [
+        "provider",
+        "root",
+        "trigger",
+        "menu",
+        "menu-content",
+        "menu-input",
+        "menu-empty",
+        "menu-caret",
+        "menu-checkbox-indicator",
+        "menu-count",
+        "menu-icon",
+        "menu-shortcut",
+        "date-editor",
+        "date-fields",
+        "date-field",
+        "date-label",
+        "date-field-input",
+        "date-segment",
+        "date-calendar",
+        "date-calendar-header",
+        "date-calendar-nav",
+        "date-calendar-heading",
+        "date-calendar-heading-button",
+        "date-calendar-grid",
+        "date-calendar-head-cell",
+        "date-calendar-cell",
+        "date-calendar-day",
+        "date-calendar-mode-panel",
+        "date-calendar-mode-option",
+        "date-clear",
+        "list",
+        "list-mobile-container",
+        "item",
+        "subject",
+        "subject-icon",
+        "operator",
+        "value",
+        "value-display",
+        "value-icon",
+        "value-editor",
+        "remove",
+        "actions",
+    ],
+});
+const FilterContext = new Context("Filter.Provider");
+const FilterItemContext = new Context("Filter.Item");
+export function setFilterContext(value) {
+    return FilterContext.set(value);
+}
+export function useFilterContext() {
+    return FilterContext.get();
+}
+export function setFilterItemContext(value) {
+    return FilterItemContext.set(value);
+}
+export function useFilterItemContext() {
+    return FilterItemContext.getOr(null);
+}
+export function useFilterColumn(columnId) {
+    return useFilterContext().columns.find((col) => col.id === columnId);
+}
+export function useFilterActions() {
+    return useFilterContext().actions;
+}
+export function useFilterStrategy() {
+    return useFilterContext().strategy;
+}
+export function useFilterLocale() {
+    return useFilterContext().locale;
+}
+export function useFilterEntityName() {
+    return useFilterContext().entityName;
+}
+export function useFilterVariant() {
+    return useFilterContext().variant;
+}
+export function useDataTableFilters({ strategy, data, columnsConfig, defaultFilters, filters: externalFilters, onFiltersChange, options, faceted, entityName, }) {
+    let internalFilters = $state(defaultFilters ?? []);
+    if ((externalFilters !== undefined && !onFiltersChange) ||
+        (externalFilters === undefined && onFiltersChange)) {
+        throw new Error("If using controlled state, specify both filters and onFiltersChange.");
+    }
+    const isControlled = externalFilters !== undefined && onFiltersChange !== undefined;
+    const filters = $derived(isControlled ? (externalFilters ?? []) : internalFilters);
+    const columns = $derived.by(() => {
+        const enhancedConfigs = columnsConfig.map((config) => {
+            let final = config;
+            if (options && (config.type === "option" || config.type === "multiOption")) {
+                const optionsInput = options[config.id];
+                if (optionsInput && isColumnOptionArray(optionsInput)) {
+                    final = { ...final, options: optionsInput };
+                }
+            }
+            if ((config.type === "option" || config.type === "multiOption") && faceted) {
+                const facetedOptionsInput = faceted[config.id];
+                if (facetedOptionsInput && isColumnOptionMap(facetedOptionsInput)) {
+                    final = { ...final, facetedOptions: facetedOptionsInput };
+                }
+            }
+            if (config.type === "number" && faceted) {
+                const minMaxTuple = faceted[config.id];
+                if (minMaxTuple && isMinMaxTuple(minMaxTuple, "number")) {
+                    final = { ...final, min: minMaxTuple[0], max: minMaxTuple[1] };
+                }
+            }
+            if (config.type === "bigint" && faceted) {
+                const minMaxTuple = faceted[config.id];
+                if (minMaxTuple && isMinMaxTuple(minMaxTuple, "bigint")) {
+                    final = { ...final, min: minMaxTuple[0], max: minMaxTuple[1] };
+                }
+            }
+            return final;
+        });
+        return createColumns(data, enhancedConfigs, strategy);
+    });
+    function emitFiltersChange(prev, next, context) {
+        if (!onFiltersChange)
+            return;
+        if (onFiltersChange.length <= 1) {
+            onFiltersChange(next);
+            return;
+        }
+        onFiltersChange(prev, next, context);
+    }
+    function setFilters(nextFilters, context) {
+        const prevFilters = filters;
+        const resolvedNextFilters = typeof nextFilters === "function" ? nextFilters(prevFilters) : nextFilters;
+        if (isControlled) {
+            emitFiltersChange(prevFilters, resolvedNextFilters, context);
+        }
+        else {
+            internalFilters = resolvedNextFilters;
+        }
+    }
+    const actions = {
+        addFilterValue(column, values, context) {
+            setFilters((prev) => filterOperations.addFilterValue(prev, column, values), context);
+        },
+        removeFilterValue(column, value, context) {
+            setFilters((prev) => filterOperations.removeFilterValue(prev, column, value), context);
+        },
+        setFilterValue(column, values, context) {
+            setFilters((prev) => filterOperations.setFilterValue(prev, column, values), context);
+        },
+        setFilterOperator(columnId, operator, context) {
+            setFilters((prev) => filterOperations.setFilterOperator(prev, columnId, operator), context);
+        },
+        removeFilter(columnId, context) {
+            setFilters((prev) => filterOperations.removeFilter(prev, columnId), context);
+        },
+        removeAllFilters(context) {
+            setFilters((prev) => filterOperations.removeAllFilters(prev), context);
+        },
+        batch(callback, context) {
+            setFilters((prevFilters) => {
+                let transactionFilters = prevFilters;
+                const batchActions = {
+                    addFilterValue(column, values) {
+                        transactionFilters = filterOperations.addFilterValue(transactionFilters, column, values);
+                    },
+                    removeFilterValue(column, value) {
+                        transactionFilters = filterOperations.removeFilterValue(transactionFilters, column, value);
+                    },
+                    setFilterValue(column, values) {
+                        transactionFilters = filterOperations.setFilterValue(transactionFilters, column, values);
+                    },
+                    setFilterOperator(columnId, operator) {
+                        transactionFilters = filterOperations.setFilterOperator(transactionFilters, columnId, operator);
+                    },
+                    removeFilter(columnId) {
+                        transactionFilters = filterOperations.removeFilter(transactionFilters, columnId);
+                    },
+                    removeAllFilters() {
+                        transactionFilters = filterOperations.removeAllFilters(transactionFilters);
+                    },
+                };
+                callback(batchActions);
+                return transactionFilters;
+            }, context);
+        },
+    };
+    return {
+        get columns() {
+            return columns;
+        },
+        get filters() {
+            return filters;
+        },
+        actions,
+        strategy,
+        entityName,
+    };
+}
+export function createTypedDataTableFilters() {
+    return function useTypedDataTableFilters(options) {
+        return useDataTableFilters(options);
+    };
+}

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

@@ -0,0 +1,16 @@
+import type { Column, ColumnOption } from "./types.js";
+export declare function getColumn<TData>(columns: Column<TData>[], id: string): Column<TData>;
+export declare function createNumberFilterValue(values: number[] | undefined): number[];
+export declare function createBigIntFilterValue(values: bigint[] | undefined): bigint[];
+export declare function createDateFilterValue(values: [Date, Date] | [Date] | [] | undefined): Date[];
+export declare function createDateRange(values: [Date, Date]): Date[];
+export declare function createNumberRange(values: number[] | undefined): number[];
+export declare function createBigIntRange(values: bigint[] | undefined): bigint[];
+export declare function isColumnOption(value: unknown): value is ColumnOption;
+export declare function isColumnOptionArray(value: unknown): value is ColumnOption[];
+export declare function isStringArray(value: unknown): value is string[];
+export declare function isColumnOptionMap(value: unknown): value is Map<string, number>;
+export declare function isMinMaxTuple<T extends number | bigint>(value: unknown, kind: "number" | "bigint"): value is [T, T];
+export declare function getValidNumber(value: any): number | undefined;
+export declare function isValidNumber(value: any): value is number;
+export declare function getValidBigInt(value: any): bigint | undefined;

package/dist/bits/filter/helpers.js

@@ -0,0 +1,132 @@
+export function getColumn(columns, id) {
+    const column = columns.find((c) => c.id === id);
+    if (!column)
+        throw new Error(`Column with id ${id} not found`);
+    return column;
+}
+export function createNumberFilterValue(values) {
+    if (!values || values.length === 0 || values[0] === undefined)
+        return [];
+    if (values.length === 1)
+        return [values[0]];
+    if (values.length === 2)
+        return createNumberRange(values);
+    return [values[0], values[1]];
+}
+export function createBigIntFilterValue(values) {
+    if (!values || values.length === 0 || values[0] === undefined)
+        return [];
+    if (values.length === 1)
+        return [values[0]];
+    if (values.length === 2)
+        return createBigIntRange(values);
+    throw new Error("Cannot create bigint filter value from more than 2 values");
+}
+export function createDateFilterValue(values) {
+    if (!values || values.length === 0)
+        return [];
+    if (values.length === 1)
+        return [values[0]];
+    if (values.length === 2)
+        return createDateRange(values);
+    throw new Error("Cannot create date filter value from more than 2 values");
+}
+export function createDateRange(values) {
+    const [a, b] = values;
+    if (isSameCalendarDate(a, b))
+        return [a];
+    return a.getTime() <= b.getTime() ? [a, b] : [b, a];
+}
+function isSameCalendarDate(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+export function createNumberRange(values) {
+    let a = 0;
+    let b = 0;
+    if (!values || values.length === 0)
+        return [a, b];
+    if (values.length === 1) {
+        a = values[0];
+    }
+    else {
+        a = values[0];
+        b = values[1];
+    }
+    return a < b ? [a, b] : [b, a];
+}
+export function createBigIntRange(values) {
+    let a = 0n;
+    let b = 0n;
+    if (!values || values.length === 0)
+        return [a, b];
+    if (values.length === 1) {
+        a = values[0];
+    }
+    else {
+        a = values[0];
+        b = values[1];
+    }
+    return a < b ? [a, b] : [b, a];
+}
+export function isColumnOption(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "value" in value &&
+        "label" in value &&
+        typeof value.value === "string" &&
+        typeof value.label === "string");
+}
+export function isColumnOptionArray(value) {
+    return Array.isArray(value) && value.every(isColumnOption);
+}
+export function isStringArray(value) {
+    return Array.isArray(value) && value.every((v) => typeof v === "string");
+}
+export function isColumnOptionMap(value) {
+    if (!(value instanceof Map))
+        return false;
+    for (const key of value.keys()) {
+        if (typeof key !== "string")
+            return false;
+    }
+    for (const val of value.values()) {
+        if (typeof val !== "number")
+            return false;
+    }
+    return true;
+}
+export function isMinMaxTuple(value, kind) {
+    return (Array.isArray(value) &&
+        value.length === 2 &&
+        typeof value[0] === kind &&
+        typeof value[1] === kind);
+}
+export function getValidNumber(value) {
+    if (value === null || value === undefined)
+        return undefined;
+    if (typeof value !== "number")
+        return undefined;
+    if (Number.isNaN(value))
+        return undefined;
+    return value;
+}
+export function isValidNumber(value) {
+    return typeof value === "number" && !Number.isNaN(value);
+}
+export function getValidBigInt(value) {
+    if (value === null || value === undefined)
+        return undefined;
+    if (typeof value === "bigint")
+        return value;
+    if (typeof value === "string" || typeof value === "number") {
+        try {
+            return BigInt(value);
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return undefined;
+}

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

@@ -0,0 +1,2 @@
+import type { Locale } from "./types.js";
+export declare function t(key: string, locale?: Locale): string;

package/dist/bits/filter/i18n.js

@@ -0,0 +1,110 @@
+const en = {
+    clear: "Clear",
+    search: "Search...",
+    noresults: "No results.",
+    operators: "Operators",
+    filter: "Filter",
+    and: "and",
+    single: "Single",
+    range: "Range",
+    value: "Value",
+    min: "Min",
+    max: "Max",
+    "filters.option.is": "is",
+    "filters.option.isNot": "is not",
+    "filters.option.isAnyOf": "is any of",
+    "filters.option.isNoneOf": "is none of",
+    "filters.multiOption.include": "includes",
+    "filters.multiOption.exclude": "excludes",
+    "filters.multiOption.includeAnyOf": "includes any of",
+    "filters.multiOption.excludeAllOf": "excludes all of",
+    "filters.multiOption.includeAllOf": "includes all of",
+    "filters.multiOption.excludeIfAnyOf": "excludes if any of",
+    "filters.multiOption.excludeIfAll": "excludes if all of",
+    "filters.date.is": "is",
+    "filters.date.isNot": "is not",
+    "filters.date.isBefore": "is before",
+    "filters.date.isOnOrAfter": "is on or after",
+    "filters.date.isAfter": "is after",
+    "filters.date.isOnOrBefore": "is on or before",
+    "filters.date.isBetween": "is between",
+    "filters.date.isNotBetween": "is not between",
+    "filters.text.contains": "contains",
+    "filters.text.doesNotContain": "does not contain",
+    "filters.number.is": "is",
+    "filters.number.isNot": "is not",
+    "filters.number.greaterThan": "greater than",
+    "filters.number.greaterThanOrEqual": "greater than or equal",
+    "filters.number.lessThan": "less than",
+    "filters.number.lessThanOrEqual": "less than or equal",
+    "filters.number.isBetween": "is between",
+    "filters.number.isNotBetween": "is not between",
+    "filters.boolean.is": "is",
+    "filters.boolean.isNot": "is not",
+};
+const translations = {
+    en,
+    fr: {
+        ...en,
+        clear: "Effacer",
+        search: "Rechercher...",
+        noresults: "Aucun résultat.",
+        filter: "Filtrer",
+        and: "et",
+        single: "Unique",
+        range: "Intervalle",
+        value: "Valeur",
+        "filters.text.contains": "contient",
+        "filters.text.doesNotContain": "ne contient pas",
+    },
+    nl: {
+        ...en,
+        clear: "Wissen",
+        search: "Zoeken...",
+        noresults: "Geen resultaten gevonden.",
+        and: "en",
+        range: "Reeks",
+        value: "Waarde",
+        "filters.text.contains": "bevat",
+        "filters.text.doesNotContain": "bevat niet",
+    },
+    zh_CN: {
+        ...en,
+        clear: "清除",
+        search: "搜索...",
+        noresults: "没有结果。",
+        filter: "筛选器",
+        and: "并且",
+        single: "单一值",
+        range: "区间",
+        value: "值",
+        min: "最小值",
+        max: "最大值",
+    },
+    zh_TW: {
+        ...en,
+        clear: "清除",
+        search: "搜尋...",
+        noresults: "沒有結果。",
+        filter: "篩選器",
+        and: "並且",
+        single: "單一值",
+        range: "區間",
+        value: "值",
+        min: "最小值",
+        max: "最大值",
+    },
+    de: {
+        ...en,
+        clear: "Löschen",
+        search: "Suchen...",
+        noresults: "Keine Ergebnisse.",
+        and: "und",
+        single: "Einzel",
+        range: "Bereich",
+        value: "Wert",
+    },
+};
+export function t(key, locale = "en") {
+    return translations[locale]?.[key] ?? translations.en[key] ?? key;
+}

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

@@ -0,0 +1,11 @@
+export * as Filter from "./exports.js";
+export { createColumns } from "./columns.js";
+export { filterFns } from "./filter-fns.js";
+export { createTypedDataTableFilters, filterAttrs, useDataTableFilters, useFilterActions, useFilterColumn, useFilterContext, useFilterEntityName, useFilterItemContext, useFilterLocale, useFilterStrategy, useFilterVariant, } from "./filter.svelte.js";
+export { createBigIntRange, createDateRange, createNumberRange, getColumn, } from "./helpers.js";
+export { DEFAULT_OPERATORS, booleanFilterOperators, dateFilterOperators, determineNewOperator, filterTypeOperatorDetails, multiOptionFilterOperators, numberFilterOperators, optionFilterOperators, textFilterOperators, } from "./operators.js";
+export { filterOperations } from "./operations.js";
+export { convertDuration, formatNumberWithUnit, parseNumberInput, } from "./units.js";
+export { t } from "./i18n.js";
+export { isBigIntColumn, isBigIntFilter, isBooleanColumn, isBooleanFilter, isColumnType, isDateColumn, isDateFilter, isFilterType, isMultiOptionColumn, isMultiOptionFilter, isNumberColumn, isNumberFilter, isNumericColumn, isNumericFilter, isOptionBasedColumn, isOptionBasedFilter, isOptionColumn, isOptionFilter, isTextColumn, isTextFilter, } from "./type-guards.js";
+export type * from "./types.js";

package/dist/bits/filter/index.js

@@ -0,0 +1,10 @@
+export * as Filter from "./exports.js";
+export { createColumns } from "./columns.js";
+export { filterFns } from "./filter-fns.js";
+export { createTypedDataTableFilters, filterAttrs, useDataTableFilters, useFilterActions, useFilterColumn, useFilterContext, useFilterEntityName, useFilterItemContext, useFilterLocale, useFilterStrategy, useFilterVariant, } from "./filter.svelte.js";
+export { createBigIntRange, createDateRange, createNumberRange, getColumn, } from "./helpers.js";
+export { DEFAULT_OPERATORS, booleanFilterOperators, dateFilterOperators, determineNewOperator, filterTypeOperatorDetails, multiOptionFilterOperators, numberFilterOperators, optionFilterOperators, textFilterOperators, } from "./operators.js";
+export { filterOperations } from "./operations.js";
+export { convertDuration, formatNumberWithUnit, parseNumberInput, } from "./units.js";
+export { t } from "./i18n.js";
+export { isBigIntColumn, isBigIntFilter, isBooleanColumn, isBooleanFilter, isColumnType, isDateColumn, isDateFilter, isFilterType, isMultiOptionColumn, isMultiOptionFilter, isNumberColumn, isNumberFilter, isNumericColumn, isNumericFilter, isOptionBasedColumn, isOptionBasedFilter, isOptionColumn, isOptionFilter, isTextColumn, isTextFilter, } from "./type-guards.js";

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

@@ -0,0 +1,12 @@
+export declare function memo<T1, TResult>(getDeps: () => readonly [T1], compute: (deps: readonly [T1]) => TResult, options: {
+    key: string;
+}): () => TResult;
+export declare function memo<T1, T2, TResult>(getDeps: () => readonly [T1, T2], compute: (deps: readonly [T1, T2]) => TResult, options: {
+    key: string;
+}): () => TResult;
+export declare function memo<T1, T2, T3, TResult>(getDeps: () => readonly [T1, T2, T3], compute: (deps: readonly [T1, T2, T3]) => TResult, options: {
+    key: string;
+}): () => TResult;
+export declare function memo<TDeps extends readonly any[], TResult>(getDeps: () => TDeps, compute: (deps: TDeps) => TResult, options: {
+    key: string;
+}): () => TResult;

package/dist/bits/filter/memo.js

@@ -0,0 +1,23 @@
+export function memo(getDeps, compute, _options) {
+    let prevDeps;
+    let cachedResult;
+    return () => {
+        const deps = getDeps();
+        if (!prevDeps || !shallowEqual(prevDeps, deps)) {
+            cachedResult = compute(deps);
+            prevDeps = deps;
+        }
+        return cachedResult;
+    };
+}
+function shallowEqual(arr1, arr2) {
+    if (arr1 === arr2)
+        return true;
+    if (arr1.length !== arr2.length)
+        return false;
+    for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i])
+            return false;
+    }
+    return true;
+}

package/dist/bits/filter/menu-nodes.d.ts

@@ -0,0 +1,73 @@
+import type { CheckboxItemDef, ItemDef, NodeDef, RadioGroupDef, SubmenuDef } from "../menu-data/types.js";
+import type { Column, ColumnDataType, ColumnOptionExtended, DataTableFilterActions, DurationUnit, FilterModel, FilterStrategy, Locale, NumberFilterOperator, TextFilterOperator } from "./types.js";
+export interface TextFilterItemData {
+    operator: TextFilterOperator;
+    values: string[];
+}
+export interface NumberFilterItemData {
+    operator: NumberFilterOperator;
+    values: number[];
+    isRange: boolean;
+    displayUnit?: DurationUnit;
+}
+export type FilterMenuNodeMeta = {
+    kind: "column";
+    column: Column<unknown>;
+    editor?: ColumnDataType;
+    inputPlaceholder?: string;
+} | {
+    kind: "option";
+    option: ColumnOptionExtended;
+    column: Column<unknown, "option" | "multiOption">;
+} | {
+    kind: "text";
+    data: TextFilterItemData;
+} | {
+    kind: "number";
+    data: NumberFilterItemData;
+} | {
+    kind: "operator";
+    label: string;
+    shortcut?: string;
+} | {
+    kind: "boolean";
+    column: Column<unknown, "boolean">;
+};
+export type FilterNodeDef = NodeDef<FilterMenuNodeMeta>;
+export type FilterItemDef = ItemDef<FilterMenuNodeMeta>;
+export type FilterCheckboxItemDef = CheckboxItemDef<FilterMenuNodeMeta>;
+export type FilterSubmenuDef = SubmenuDef<FilterMenuNodeMeta>;
+export declare function createTextFilterItems<TData>({ query, column, actions, }: {
+    query: string;
+    column: Column<TData, "text">;
+    actions: DataTableFilterActions;
+}): FilterItemDef[];
+export declare function createNumberFilterItems<TData>({ query, column, actions, baseUnit, }: {
+    query: string;
+    column: Column<TData, "number">;
+    actions: DataTableFilterActions;
+    baseUnit?: DurationUnit;
+}): FilterItemDef[];
+export declare function createOptionMenu<TData>({ column, actions, filter, }: {
+    column: Column<TData, "option">;
+    actions: DataTableFilterActions;
+    filter?: FilterModel<"option">;
+}): FilterCheckboxItemDef[];
+export declare function createMultiOptionMenu<TData>({ column, actions, filter, }: {
+    column: Column<TData, "multiOption">;
+    actions: DataTableFilterActions;
+    filter?: FilterModel<"multiOption">;
+}): FilterCheckboxItemDef[];
+export declare function createOperatorNodes<TData, TType extends ColumnDataType>({ filter, column, actions, locale, }: {
+    filter: FilterModel<TType>;
+    column: Column<TData, TType>;
+    actions: DataTableFilterActions;
+    locale: Locale;
+}): Array<RadioGroupDef<FilterMenuNodeMeta>>;
+export declare function createColumnNodes<TData>({ columns, filters, actions, locale, strategy, }: {
+    columns: Column<TData>[];
+    filters: FilterModel[];
+    actions: DataTableFilterActions;
+    locale: Locale;
+    strategy: FilterStrategy;
+}): FilterNodeDef[];