@affino/datagrid-vue 0.3.2 → 0.3.4

package/dist/composables/useTableFilters.js

@@ -1,723 +0,0 @@
-import { computed, nextTick, reactive, ref, shallowRef, watch } from "vue";
-import { serializeFilterValue, formatFilterLabel, toNumberValue, toDateValue, } from "../../core/utils/validators";
-function getColumnByKey(columns, key) {
-    return columns.find(col => col.key === key);
-}
-/**
- * Provides filter-menu state, option generation, and predicate application for UiTable.
- */
-export function useTableFilters({ rows, localColumns, emitFilterChange, getSuspendedRows }) {
-    const columnFilters = ref({});
-    const filtersState = ref({});
-    const filterMenuState = reactive({
-        columnKey: null,
-        search: "",
-        selectedKeys: [],
-    });
-    const activeMenuClose = ref(null);
-    const filterMenuSearchRef = ref(null);
-    const selectionInitialized = ref(false);
-    const defaultAllSelected = ref(true);
-    /**
-     * Resolves static or dynamic filter options declared on the column.
-     */
-    function getColumnOptions(column, row) {
-        if (!column?.options)
-            return [];
-        try {
-            const resolved = typeof column.options === "function" ? column.options(row) ?? [] : column.options ?? [];
-            return Array.isArray(resolved) ? resolved : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    /**
-     * Finds the human-friendly label for a raw option value if one is available.
-     */
-    function resolveOptionLabel(column, row, raw) {
-        if (!column)
-            return null;
-        const options = getColumnOptions(column, row);
-        if (!options.length)
-            return null;
-        const rawKey = serializeFilterValue(raw);
-        const match = options.find(option => serializeFilterValue(option.value) === rawKey);
-        return match?.label ?? null;
-    }
-    const sourceEntries = computed(() => rows().map((row, originalIndex) => ({ row, originalIndex })));
-    const columnOptionsCache = shallowRef(new Map());
-    const activeMenuOptionsRef = shallowRef([]);
-    const activeMenuOptions = computed(() => activeMenuOptionsRef.value);
-    const activeMenuSelectedSet = computed(() => {
-        if (defaultAllSelected.value) {
-            return new Set(activeMenuOptionsRef.value.map(option => option.key));
-        }
-        return new Set(filterMenuState.selectedKeys);
-    });
-    const visibleMenuOptions = computed(() => activeMenuOptionsRef.value);
-    const isSelectAllChecked = computed(() => {
-        const options = visibleMenuOptions.value;
-        if (!options.length)
-            return false;
-        if (defaultAllSelected.value)
-            return true;
-        return options.every(option => activeMenuSelectedSet.value.has(option.key));
-    });
-    const isSelectAllIndeterminate = computed(() => {
-        const options = visibleMenuOptions.value;
-        if (!options.length)
-            return false;
-        if (defaultAllSelected.value)
-            return false;
-        let selectedCount = 0;
-        for (const option of options) {
-            if (activeMenuSelectedSet.value.has(option.key)) {
-                selectedCount += 1;
-            }
-        }
-        return selectedCount > 0 && selectedCount < options.length;
-    });
-    function collectColumnOptions(columnKey) {
-        const column = getColumnByKey(localColumns.value, columnKey);
-        if (!column || column.isSystem)
-            return [];
-        const entries = applyFilters(sourceEntries.value, columnKey);
-        const seen = new Map();
-        for (const entry of entries) {
-            const raw = entry.row?.[columnKey];
-            const key = serializeFilterValue(raw);
-            if (seen.has(key))
-                continue;
-            const labelFromOptions = resolveOptionLabel(column, entry.row, raw);
-            seen.set(key, {
-                key,
-                raw,
-                label: labelFromOptions ?? formatFilterLabel(raw),
-            });
-        }
-        const options = Array.from(seen.values());
-        options.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
-        return options;
-    }
-    function getAllOptionsForColumn(columnKey) {
-        const cache = columnOptionsCache.value;
-        if (!cache.has(columnKey)) {
-            cache.set(columnKey, collectColumnOptions(columnKey));
-        }
-        return cache.get(columnKey) ?? [];
-    }
-    function clearCachedOptions(columnKey) {
-        if (columnKey) {
-            columnOptionsCache.value.delete(columnKey);
-            if (filterMenuState.columnKey === columnKey) {
-                activeMenuOptionsRef.value = [];
-            }
-            return;
-        }
-        columnOptionsCache.value = new Map();
-        activeMenuOptionsRef.value = [];
-    }
-    function initializeSelection(columnKey, options) {
-        const applied = columnFilters.value[columnKey];
-        if (applied && applied.length) {
-            const available = new Set(options.map(option => option.key));
-            const normalized = applied.filter(key => available.has(key));
-            filterMenuState.selectedKeys = normalized.length ? [...normalized] : [...applied];
-            defaultAllSelected.value = false;
-        }
-        else {
-            filterMenuState.selectedKeys = [];
-            defaultAllSelected.value = true;
-        }
-    }
-    async function loadActiveMenuOptions(search, overrideOptions) {
-        const columnKey = filterMenuState.columnKey;
-        filterMenuState.search = search;
-        if (!columnKey) {
-            activeMenuOptionsRef.value = [];
-            return [];
-        }
-        await nextTick();
-        const allOptions = overrideOptions ?? getAllOptionsForColumn(columnKey);
-        if (overrideOptions) {
-            columnOptionsCache.value.set(columnKey, overrideOptions);
-        }
-        if (!allOptions.length) {
-            activeMenuOptionsRef.value = [];
-            return [];
-        }
-        if (!selectionInitialized.value) {
-            initializeSelection(columnKey, allOptions);
-            selectionInitialized.value = true;
-        }
-        const normalized = search.trim().toLowerCase();
-        const nextOptions = normalized
-            ? allOptions.filter(option => option.label.toLowerCase().includes(normalized))
-            : allOptions.slice();
-        activeMenuOptionsRef.value = nextOptions;
-        return nextOptions;
-    }
-    watch(sourceEntries, () => {
-        clearCachedOptions();
-        selectionInitialized.value = false;
-    });
-    watch(() => [columnFilters.value, filtersState.value], () => {
-        clearCachedOptions(filterMenuState.columnKey);
-        selectionInitialized.value = false;
-    }, { deep: true });
-    /**
-     * Returns true when the column uses checkbox-driven set filters.
-     */
-    function isSetFilterColumn(columnKey) {
-        if (!columnKey)
-            return false;
-        const column = localColumns.value.find(col => col.key === columnKey);
-        if (column?.isSystem)
-            return false;
-        const type = column?.filterType ?? "set";
-        return type === "set";
-    }
-    function isRowSuspended(columnKey, entry, suspendedMap) {
-        const suspended = suspendedMap ?? getSuspendedRows?.();
-        if (!suspended?.size)
-            return false;
-        const originalIndex = entry.originalIndex;
-        if (typeof originalIndex !== "number")
-            return false;
-        const set = suspended.get(columnKey);
-        return Boolean(set?.has(originalIndex));
-    }
-    /**
-     * Applies both set-filter and advanced-filter predicates to visible rows.
-     */
-    function applyFilters(entries, skipColumnKey) {
-        const suspended = getSuspendedRows?.();
-        const setFiltered = entries.filter(entry => {
-            for (const key of Object.keys(columnFilters.value)) {
-                if (skipColumnKey && key === skipColumnKey)
-                    continue;
-                const allowed = columnFilters.value[key];
-                if (!allowed)
-                    continue;
-                const valueKey = serializeFilterValue(entry.row?.[key]);
-                if (!allowed.includes(valueKey)) {
-                    if (isRowSuspended(key, entry, suspended)) {
-                        continue;
-                    }
-                    return false;
-                }
-            }
-            return true;
-        });
-        return applyAdvancedFilters(setFiltered, skipColumnKey, suspended);
-    }
-    /**
-     * Notifies listeners about the latest set-filter selections.
-     */
-    function emitFilters() {
-        const payload = {};
-        for (const [key, value] of Object.entries(columnFilters.value)) {
-            payload[key] = Array.isArray(value) ? [...value] : [];
-        }
-        emitFilterChange(payload);
-    }
-    /**
-     * Invokes the stored close handler without clearing columnKey directly.
-     */
-    function closeActiveMenu() {
-        const closeFn = activeMenuClose.value;
-        activeMenuClose.value = null;
-        closeFn?.();
-        // Do not clear filterMenuState.columnKey here so the caller can manage it.
-    }
-    /**
-     * Opens a filter menu for the specified column and stores its close handler.
-     */
-    function onColumnMenuOpen(columnKey, closeFn) {
-        if (filterMenuState.columnKey && filterMenuState.columnKey !== columnKey) {
-            activeMenuClose.value?.();
-        }
-        activeMenuClose.value = closeFn;
-        filterMenuState.columnKey = columnKey;
-        // Load options immediately when menu opens
-        loadActiveMenuOptions("");
-    }
-    /**
-     * Clears menu state when the given column finishes closing its popover.
-     */
-    function onColumnMenuClose(columnKey) {
-        if (filterMenuState.columnKey === columnKey) {
-            filterMenuState.columnKey = null; // Reset filter state only here
-        }
-        activeMenuClose.value = null;
-    }
-    /**
-     * Commits the pending menu selections into columnFilters and emits an update.
-     */
-    function confirmFilterSelection() {
-        if (!filterMenuState.columnKey)
-            return;
-        const columnKey = filterMenuState.columnKey;
-        const allOptions = getAllOptionsForColumn(columnKey);
-        const visibleOptions = visibleMenuOptions.value;
-        const allKeys = allOptions.map(option => option.key);
-        const availableSet = new Set(allKeys);
-        const searchActive = Boolean(filterMenuState.search.trim());
-        let uniqueSelected;
-        if (defaultAllSelected.value) {
-            // Preserve explicit selections even when the default-all flag is still true.
-            uniqueSelected = filterMenuState.selectedKeys.length
-                ? Array.from(new Set(filterMenuState.selectedKeys))
-                : [...allKeys];
-        }
-        else {
-            uniqueSelected = Array.from(new Set(filterMenuState.selectedKeys));
-        }
-        const visibleKeys = visibleOptions.map(option => option.key);
-        if (searchActive && (defaultAllSelected.value || uniqueSelected.length === allKeys.length)) {
-            uniqueSelected = visibleKeys;
-        }
-        const normalizedSelection = uniqueSelected.filter(key => availableSet.has(key));
-        if (normalizedSelection.length) {
-            uniqueSelected = normalizedSelection;
-        }
-        const nextFilters = { ...columnFilters.value };
-        const selectingAllOptions = !searchActive &&
-            uniqueSelected.length === allKeys.length &&
-            defaultAllSelected.value &&
-            filterMenuState.selectedKeys.length === 0;
-        if (selectingAllOptions) {
-            delete nextFilters[columnKey];
-            defaultAllSelected.value = true;
-            filterMenuState.selectedKeys = [];
-        }
-        else {
-            nextFilters[columnKey] = uniqueSelected;
-            defaultAllSelected.value = false;
-            filterMenuState.selectedKeys = [...uniqueSelected];
-        }
-        columnFilters.value = nextFilters;
-        emitFilters();
-    }
-    /**
-     * No-op placeholder; the popover itself restores selection state on cancel.
-     */
-    function cancelFilterSelection() {
-        // State cleanup handled when the popover reports it closed.
-    }
-    /**
-     * Removes stored filters for the provided column key and emits the change.
-     */
-    function clearFilterForColumn(columnKey) {
-        if (columnFilters.value[columnKey] !== undefined) {
-            const next = { ...columnFilters.value };
-            delete next[columnKey];
-            columnFilters.value = next;
-            if (filterMenuState.columnKey === columnKey) {
-                defaultAllSelected.value = true;
-                filterMenuState.selectedKeys = [];
-            }
-            emitFilters();
-        }
-    }
-    /**
-     * Selects or clears every option in the visible set-filter list.
-     */
-    function toggleSelectAll(checked) {
-        if (!filterMenuState.columnKey)
-            return;
-        if (!isSetFilterColumn(filterMenuState.columnKey))
-            return;
-        if (checked) {
-            defaultAllSelected.value = true;
-            filterMenuState.selectedKeys = [];
-            return;
-        }
-        defaultAllSelected.value = false;
-        filterMenuState.selectedKeys = [];
-    }
-    /**
-     * Toggles a single option key within the current set-filter selection.
-     */
-    function toggleFilterOption(optionKey) {
-        if (!isSetFilterColumn(filterMenuState.columnKey))
-            return;
-        const columnKey = filterMenuState.columnKey;
-        if (!columnKey)
-            return;
-        const allOptions = getAllOptionsForColumn(columnKey);
-        const fullSet = new Set(allOptions.map(option => option.key));
-        const workingSet = defaultAllSelected.value ? new Set(fullSet) : new Set(filterMenuState.selectedKeys);
-        if (workingSet.has(optionKey)) {
-            workingSet.delete(optionKey);
-        }
-        else {
-            workingSet.add(optionKey);
-        }
-        if (workingSet.size === fullSet.size && fullSet.size > 0) {
-            defaultAllSelected.value = true;
-            filterMenuState.selectedKeys = [];
-        }
-        else {
-            defaultAllSelected.value = false;
-            filterMenuState.selectedKeys = Array.from(workingSet);
-        }
-    }
-    /**
-     * Updates the selection when the "select all" checkbox toggles.
-     */
-    function onSelectAllChange(event) {
-        const target = event.target;
-        toggleSelectAll(Boolean(target?.checked));
-    }
-    /**
-     * Stores a reference to the menu search input for focus management.
-     */
-    function setFilterMenuSearchRef(element) {
-        if (!element) {
-            filterMenuSearchRef.value = null;
-            return;
-        }
-        if (element instanceof HTMLInputElement) {
-            filterMenuSearchRef.value = element;
-            return;
-        }
-        if (element instanceof Element) {
-            const input = element.querySelector("input");
-            filterMenuSearchRef.value = input ?? null;
-            return;
-        }
-        const instanceEl = element.$el;
-        if (!instanceEl) {
-            filterMenuSearchRef.value = null;
-            return;
-        }
-        if (instanceEl instanceof HTMLInputElement) {
-            filterMenuSearchRef.value = instanceEl;
-            return;
-        }
-        const nested = instanceEl.querySelector("input");
-        filterMenuSearchRef.value = nested ?? null;
-    }
-    /**
-     * Evaluates a text clause against the candidate value.
-     */
-    function evaluateTextClause(clause, candidate) {
-        if (!clause || !clause.operator)
-            return true;
-        const candidateValue = candidate == null ? "" : String(candidate).toLowerCase();
-        const target = clause.value == null ? "" : String(clause.value).toLowerCase();
-        if (!target && clause.operator !== "equals")
-            return true;
-        switch (clause.operator) {
-            case "contains":
-                return candidateValue.includes(target);
-            case "startsWith":
-                return candidateValue.startsWith(target);
-            case "endsWith":
-                return candidateValue.endsWith(target);
-            case "equals":
-                return candidateValue === target;
-            default:
-                return true;
-        }
-    }
-    /**
-     * Evaluates a numeric clause, coercing values via toNumberValue.
-     */
-    function evaluateNumericClause(clause, candidate) {
-        if (!clause || !clause.operator)
-            return true;
-        const candidateValue = toNumberValue(candidate);
-        if (candidateValue === null)
-            return false;
-        const primary = toNumberValue(clause.value);
-        const secondary = toNumberValue(clause.value2);
-        switch (clause.operator) {
-            case "equals":
-                return primary === null ? true : candidateValue === primary;
-            case ">":
-                return primary === null ? true : candidateValue > primary;
-            case "<":
-                return primary === null ? true : candidateValue < primary;
-            case ">=":
-                return primary === null ? true : candidateValue >= primary;
-            case "<=":
-                return primary === null ? true : candidateValue <= primary;
-            case "between":
-                if (primary === null && secondary === null)
-                    return true;
-                if (primary === null)
-                    return candidateValue <= (secondary ?? candidateValue);
-                if (secondary === null)
-                    return candidateValue >= primary;
-                return candidateValue >= primary && candidateValue <= secondary;
-            default:
-                return true;
-        }
-    }
-    /**
-     * Evaluates a date clause, handling range comparisons.
-     */
-    function evaluateDateClause(clause, candidate) {
-        if (!clause || !clause.operator)
-            return true;
-        const candidateValue = toDateValue(candidate);
-        if (candidateValue === null)
-            return false;
-        const primary = toDateValue(clause.value);
-        const secondary = toDateValue(clause.value2);
-        switch (clause.operator) {
-            case "equals":
-                return primary === null ? true : candidateValue === primary;
-            case ">":
-                return primary === null ? true : candidateValue > primary;
-            case "<":
-                return primary === null ? true : candidateValue < primary;
-            case ">=":
-                return primary === null ? true : candidateValue >= primary;
-            case "<=":
-                return primary === null ? true : candidateValue <= primary;
-            case "between":
-                if (primary === null && secondary === null)
-                    return true;
-                if (primary === null)
-                    return candidateValue <= (secondary ?? candidateValue);
-                if (secondary === null)
-                    return candidateValue >= primary;
-                return candidateValue >= primary && candidateValue <= secondary;
-            default:
-                return true;
-        }
-    }
-    /**
-     * Applies the appropriate evaluator for an advanced filter condition.
-     */
-    function evaluateAdvancedCondition(condition, value) {
-        if (!condition || !condition.clauses?.length)
-            return true;
-        let accumulated = null;
-        for (const clause of condition.clauses) {
-            let clauseResult = true;
-            switch (condition.type) {
-                case "text":
-                    clauseResult = evaluateTextClause(clause, value);
-                    break;
-                case "number":
-                    clauseResult = evaluateNumericClause(clause, value);
-                    break;
-                case "date":
-                    clauseResult = evaluateDateClause(clause, value);
-                    break;
-                default:
-                    clauseResult = true;
-            }
-            if (accumulated === null) {
-                accumulated = clauseResult;
-                continue;
-            }
-            const join = clause.join ?? "and";
-            accumulated = join === "or" ? accumulated || clauseResult : accumulated && clauseResult;
-        }
-        return accumulated ?? true;
-    }
-    function resolveAdvancedCandidateValue(condition, column, row, key) {
-        if (!condition)
-            return row?.[key];
-        const rawValue = row?.[key];
-        if (condition.type === "text" && column) {
-            const label = resolveOptionLabel(column, row, rawValue);
-            if (label !== null && label !== undefined) {
-                return label;
-            }
-        }
-        return rawValue;
-    }
-    /**
-     * Applies advanced filter conditions defined per column to the dataset.
-     */
-    function applyAdvancedFilters(entries, skipColumnKey, suspendedRows) {
-        const suspended = suspendedRows ?? getSuspendedRows?.();
-        const keys = Object.keys(filtersState.value);
-        if (!keys.length)
-            return entries;
-        return entries.filter(entry => {
-            for (const key of keys) {
-                if (skipColumnKey && key === skipColumnKey)
-                    continue;
-                if (isRowSuspended(key, entry, suspended)) {
-                    continue;
-                }
-                const condition = filtersState.value[key];
-                const column = getColumnByKey(localColumns.value, key);
-                const candidate = resolveAdvancedCandidateValue(condition, column, entry.row, key);
-                if (!evaluateAdvancedCondition(condition, candidate)) {
-                    return false;
-                }
-            }
-            return true;
-        });
-    }
-    function setAdvancedFilter(columnKey, condition) {
-        const next = { ...filtersState.value };
-        if (!condition || !condition.clauses.length) {
-            delete next[columnKey];
-        }
-        else {
-            next[columnKey] = {
-                type: condition.type,
-                clauses: condition.clauses.map(clause => ({ ...clause })),
-            };
-        }
-        filtersState.value = next;
-        emitFilters();
-    }
-    function getAdvancedFilter(columnKey) {
-        const existing = filtersState.value[columnKey];
-        if (!existing)
-            return null;
-        return {
-            type: existing.type,
-            clauses: existing.clauses ? existing.clauses.map(clause => ({ ...clause })) : [],
-        };
-    }
-    function clearAdvancedFilter(columnKey) {
-        if (!filtersState.value[columnKey])
-            return;
-        const next = { ...filtersState.value };
-        delete next[columnKey];
-        filtersState.value = next;
-        emitFilters();
-    }
-    function resetAllFilters() {
-        closeActiveMenu();
-        columnFilters.value = {};
-        filtersState.value = {};
-        filterMenuState.columnKey = null;
-        filterMenuState.selectedKeys = [];
-        filterMenuState.search = "";
-        activeMenuOptionsRef.value = [];
-        filterMenuSearchRef.value = null;
-        selectionInitialized.value = false;
-        defaultAllSelected.value = true;
-        clearCachedOptions();
-        emitFilters();
-    }
-    function isFilterActiveForColumn(columnKey) {
-        const column = localColumns.value.find(col => col.key === columnKey);
-        if (column?.isSystem)
-            return false;
-        if (filtersState.value[columnKey]?.clauses?.length)
-            return true;
-        const applied = columnFilters.value[columnKey];
-        if (!applied)
-            return false;
-        const total = getAllOptionsForColumn(columnKey).length;
-        if (total === 0)
-            return applied.length > 0;
-        return applied.length !== total;
-    }
-    watch(() => filterMenuState.columnKey, columnKey => {
-        activeMenuOptionsRef.value = [];
-        selectionInitialized.value = false;
-        if (columnKey && isSetFilterColumn(columnKey)) {
-            const applied = columnFilters.value[columnKey];
-            if (applied && applied.length) {
-                filterMenuState.selectedKeys = [...applied];
-                defaultAllSelected.value = false;
-            }
-            else {
-                filterMenuState.selectedKeys = [];
-                defaultAllSelected.value = true;
-            }
-            filterMenuState.search = "";
-            nextTick(() => filterMenuSearchRef.value?.focus());
-        }
-        else {
-            filterMenuState.search = "";
-            filterMenuState.selectedKeys = [];
-            defaultAllSelected.value = true;
-            filterMenuSearchRef.value = null;
-        }
-    });
-    function cloneColumnFiltersState(source) {
-        const next = {};
-        for (const [key, values] of Object.entries(source ?? {})) {
-            if (!Array.isArray(values) || !values.length)
-                continue;
-            next[key] = values.map(value => String(value));
-        }
-        return next;
-    }
-    function cloneAdvancedFiltersState(source) {
-        const next = {};
-        for (const [key, condition] of Object.entries(source ?? {})) {
-            if (!condition)
-                continue;
-            const clauses = Array.isArray(condition.clauses)
-                ? condition.clauses.map(clause => ({ ...clause }))
-                : [];
-            if (!clauses.length) {
-                continue;
-            }
-            next[key] = {
-                type: condition.type,
-                clauses,
-            };
-        }
-        return next;
-    }
-    function getFilterStateSnapshot() {
-        return {
-            columnFilters: cloneColumnFiltersState(columnFilters.value),
-            advancedFilters: cloneAdvancedFiltersState(filtersState.value),
-        };
-    }
-    function setFilterStateSnapshot(snapshot) {
-        if (!snapshot) {
-            resetAllFilters();
-            return;
-        }
-        const nextColumnFilters = cloneColumnFiltersState(snapshot.columnFilters ?? {});
-        const nextAdvancedFilters = cloneAdvancedFiltersState(snapshot.advancedFilters ?? {});
-        columnFilters.value = nextColumnFilters;
-        filtersState.value = nextAdvancedFilters;
-        filterMenuState.columnKey = null;
-        filterMenuState.selectedKeys = [];
-        filterMenuState.search = "";
-        selectionInitialized.value = false;
-        defaultAllSelected.value = Object.keys(nextColumnFilters).length === 0;
-        clearCachedOptions();
-        emitFilters();
-    }
-    return {
-        columnFilters,
-        filtersState,
-        filterMenuState,
-        activeMenuOptions,
-        activeMenuSelectedSet,
-        isSelectAllChecked,
-        isSelectAllIndeterminate,
-        isFilterActiveForColumn,
-        onColumnMenuOpen,
-        onColumnMenuClose,
-        confirmFilterSelection,
-        cancelFilterSelection,
-        clearFilterForColumn,
-        toggleSelectAll,
-        toggleFilterOption,
-        onSelectAllChange,
-        setFilterMenuSearchRef,
-        closeActiveMenu,
-        loadActiveMenuOptions,
-        applyFilters,
-        applyAdvancedFilters,
-        setAdvancedFilter,
-        getAdvancedFilter,
-        clearAdvancedFilter,
-        resetAllFilters,
-        getFilterStateSnapshot,
-        setFilterStateSnapshot,
-    };
-}