@alaarab/ogrid-vue 2.1.3 → 2.1.5

package/dist/esm/composables/useFillHandle.js

@@ -1,205 +0,0 @@
-import { shallowRef, watch, isRef, onUnmounted } from 'vue';
-import { normalizeSelectionRange, applyFillValues } from '@alaarab/ogrid-core';
-const DRAG_ATTR = 'data-drag-range';
-/**
- * Manages Excel-style fill handle drag-to-fill for cell ranges.
- */
-export function useFillHandle(params) {
-    const { items, visibleCols, editable, onCellValueChanged, selectionRange, setSelectionRange, setActiveCell, wrapperRef, beginBatch, endBatch, visibleRange, } = params;
-    const getColOffset = () => isRef(params.colOffset) ? params.colOffset.value : params.colOffset;
-    const fillDrag = shallowRef(null);
-    let fillDragEnd = { endRow: 0, endCol: 0 };
-    let rafId = 0;
-    let liveFillRange = null;
-    let moveListener = null;
-    let upListener = null;
-    const setFillDrag = (value) => {
-        fillDrag.value = value;
-    };
-    const cleanup = () => {
-        if (moveListener) {
-            window.removeEventListener('mousemove', moveListener, true);
-            moveListener = null;
-        }
-        if (upListener) {
-            window.removeEventListener('mouseup', upListener, true);
-            upListener = null;
-        }
-        if (rafId) {
-            cancelAnimationFrame(rafId);
-            rafId = 0;
-        }
-    };
-    watch(fillDrag, (drag, _oldDrag, onCleanup) => {
-        // Guard early before setting up any state
-        if (!drag || editable.value === false || !onCellValueChanged.value || !wrapperRef.value) {
-            // Still cleanup if transitioning from active to inactive
-            cleanup();
-            return;
-        }
-        fillDragEnd = { endRow: drag.startRow, endCol: drag.startCol };
-        liveFillRange = null;
-        /** Set of currently drag-marked HTMLElements — avoids O(n) full DOM scan on clear. */
-        const markedCells = new Set();
-        /** Cell lookup index built on drag start — O(1) lookups per frame. */
-        let fillCellIndex = null;
-        const buildFillCellIndex = () => {
-            const wrapper = wrapperRef.value;
-            if (!wrapper)
-                return;
-            fillCellIndex = new Map();
-            const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
-            for (let i = 0; i < cells.length; i++) {
-                const el = cells[i];
-                const r = el.getAttribute('data-row-index') ?? '';
-                const c = el.getAttribute('data-col-index') ?? '';
-                fillCellIndex.set(`${r},${c}`, el);
-            }
-        };
-        // Build the index once at fill drag start
-        buildFillCellIndex();
-        const applyDragAttrs = (range) => {
-            const wrapper = wrapperRef.value;
-            if (!wrapper)
-                return;
-            const minR = Math.min(range.startRow, range.endRow);
-            const maxR = Math.max(range.startRow, range.endRow);
-            const minC = Math.min(range.startCol, range.endCol);
-            const maxC = Math.max(range.startCol, range.endCol);
-            const colOff = getColOffset();
-            // Un-mark cells no longer in range
-            for (const el of markedCells) {
-                const r = parseInt(el.getAttribute('data-row-index') ?? '', 10);
-                const c = parseInt(el.getAttribute('data-col-index') ?? '', 10) - colOff;
-                if (!(r >= minR && r <= maxR && c >= minC && c <= maxC)) {
-                    el.removeAttribute(DRAG_ATTR);
-                    markedCells.delete(el);
-                }
-            }
-            // Look up only cells in the new range — O(range size) via Map lookup
-            for (let r = minR; r <= maxR; r++) {
-                for (let c = minC; c <= maxC; c++) {
-                    const key = `${r},${c + colOff}`;
-                    let el = fillCellIndex?.get(key);
-                    // Handle virtual scroll recycling — if element is stale, rebuild index once
-                    if (el && !el.isConnected) {
-                        buildFillCellIndex();
-                        el = fillCellIndex?.get(key);
-                    }
-                    if (el) {
-                        if (!el.hasAttribute(DRAG_ATTR))
-                            el.setAttribute(DRAG_ATTR, '');
-                        markedCells.add(el);
-                    }
-                }
-            }
-        };
-        const clearDragAttrs = () => {
-            for (const el of markedCells) {
-                el.removeAttribute(DRAG_ATTR);
-            }
-            markedCells.clear();
-            fillCellIndex = null;
-        };
-        let lastFillMousePos = null;
-        const resolveRange = (cx, cy) => {
-            const target = document.elementFromPoint(cx, cy);
-            const cell = target?.closest?.('[data-row-index][data-col-index]');
-            if (!cell || !wrapperRef.value?.contains(cell))
-                return null;
-            const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
-            const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
-            const colOffset = getColOffset();
-            if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset)
-                return null;
-            const dataCol = c - colOffset;
-            return normalizeSelectionRange({
-                startRow: drag.startRow,
-                startCol: drag.startCol,
-                endRow: r,
-                endCol: dataCol,
-            });
-        };
-        moveListener = (e) => {
-            lastFillMousePos = { cx: e.clientX, cy: e.clientY };
-            if (rafId)
-                cancelAnimationFrame(rafId);
-            rafId = requestAnimationFrame(() => {
-                rafId = 0;
-                if (!lastFillMousePos)
-                    return;
-                const newRange = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (!newRange)
-                    return;
-                const prev = liveFillRange;
-                if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol && prev.endRow === newRange.endRow && prev.endCol === newRange.endCol)
-                    return;
-                liveFillRange = newRange;
-                fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
-                applyDragAttrs(newRange);
-            });
-        };
-        upListener = () => {
-            if (rafId) {
-                cancelAnimationFrame(rafId);
-                rafId = 0;
-            }
-            if (lastFillMousePos) {
-                const flushed = resolveRange(lastFillMousePos.cx, lastFillMousePos.cy);
-                if (flushed) {
-                    liveFillRange = flushed;
-                    fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
-                }
-            }
-            clearDragAttrs();
-            const end = fillDragEnd;
-            const norm = normalizeSelectionRange({
-                startRow: drag.startRow,
-                startCol: drag.startCol,
-                endRow: end.endRow,
-                endCol: end.endCol,
-            });
-            // Clamp fill range to visible + overscan when virtual scrolling is active
-            const vr = visibleRange?.value;
-            if (vr) {
-                norm.startRow = Math.max(norm.startRow, vr.startIndex);
-                norm.endRow = Math.min(norm.endRow, vr.endIndex);
-            }
-            setSelectionRange(norm);
-            setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + getColOffset() });
-            const currentItems = items.value;
-            const currentCols = visibleCols.value;
-            const callback = onCellValueChanged.value;
-            if (callback) {
-                const fillEvents = applyFillValues(norm, drag.startRow, drag.startCol, currentItems, currentCols);
-                if (fillEvents.length > 0) {
-                    beginBatch?.();
-                    for (const evt of fillEvents)
-                        callback(evt);
-                    endBatch?.();
-                }
-            }
-            fillDrag.value = null;
-            liveFillRange = null;
-            cleanup();
-        };
-        window.addEventListener('mousemove', moveListener, true);
-        window.addEventListener('mouseup', upListener, true);
-        // Register cleanup via onCleanup — Vue calls this BEFORE next watch run
-        // and on unmount. Compatible with Vue 3.3+ (unlike return-value cleanup
-        // which requires Vue 3.5+).
-        onCleanup(() => {
-            cleanup();
-        });
-    });
-    onUnmounted(() => cleanup());
-    const handleFillHandleMouseDown = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const range = selectionRange.value;
-        if (!range)
-            return;
-        fillDrag.value = { startRow: range.startRow, startCol: range.startCol };
-    };
-    return { fillDrag, setFillDrag, handleFillHandleMouseDown };
-}

package/dist/esm/composables/useFilterOptions.js

@@ -1,39 +0,0 @@
-import { ref, watch, computed } from 'vue';
-/**
- * Load filter options for the given fields from a data source.
- */
-export function useFilterOptions(dataSource, fields) {
-    const filterOptions = ref({});
-    const loadingOptions = ref({});
-    const fieldsKey = computed(() => [...fields.value].sort().join(','));
-    const load = async () => {
-        const ds = dataSource.value;
-        const currentFields = fields.value;
-        const fetcher = 'fetchFilterOptions' in ds && typeof ds.fetchFilterOptions === 'function'
-            ? ds.fetchFilterOptions.bind(ds)
-            : undefined;
-        if (!fetcher) {
-            filterOptions.value = {};
-            loadingOptions.value = {};
-            return;
-        }
-        const loading = {};
-        currentFields.forEach((f) => { loading[f] = true; });
-        loadingOptions.value = loading;
-        const results = {};
-        await Promise.all(currentFields.map(async (field) => {
-            try {
-                results[field] = await fetcher(field);
-            }
-            catch {
-                results[field] = [];
-            }
-        }));
-        filterOptions.value = results;
-        loadingOptions.value = {};
-    };
-    watch([dataSource, fieldsKey], () => {
-        load().catch(() => { });
-    }, { immediate: true });
-    return { filterOptions, loadingOptions };
-}

package/dist/esm/composables/useInlineCellEditorState.js

@@ -1,42 +0,0 @@
-import { ref } from 'vue';
-/**
- * Returns localValue/setLocalValue, handleKeyDown, handleBlur, commit, cancel.
- */
-export function useInlineCellEditorState(params) {
-    const { value, editorType, onCommit, onCancel } = params;
-    const localValue = ref(value !== null && value !== undefined ? String(value) : '');
-    const setLocalValue = (v) => {
-        localValue.value = v;
-    };
-    const commit = (v) => {
-        onCommit(v);
-    };
-    const cancel = () => {
-        onCancel();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            e.stopPropagation();
-            cancel();
-        }
-        if (e.key === 'Enter' && editorType === 'text') {
-            e.preventDefault();
-            e.stopPropagation();
-            commit(localValue.value);
-        }
-    };
-    const handleBlur = () => {
-        if (editorType === 'text') {
-            commit(localValue.value);
-        }
-    };
-    return {
-        localValue,
-        setLocalValue,
-        handleKeyDown,
-        handleBlur,
-        commit,
-        cancel,
-    };
-}

package/dist/esm/composables/useKeyboardNavigation.js

@@ -1,232 +0,0 @@
-import { isRef } from 'vue';
-import { getCellValue, computeTabNavigation, computeArrowNavigation, applyCellDeletion } from '@alaarab/ogrid-core';
-import { useLatestRef } from './useLatestRef';
-/**
- * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
- */
-export function useKeyboardNavigation(params) {
-    // Store latest params in a ref so handleGridKeyDown is a stable callback
-    const paramsRef = useLatestRef(params);
-    const handleGridKeyDown = (e) => {
-        const { data, state, handlers, features } = paramsRef.value;
-        const items = data.items.value;
-        const visibleCols = data.visibleCols.value;
-        const { getRowId } = data;
-        const colOffset = isRef(data.colOffset) ? data.colOffset.value : data.colOffset;
-        const hasCheckboxCol = data.hasCheckboxCol.value;
-        const visibleColumnCount = data.visibleColumnCount.value;
-        const activeCell = state.activeCell.value;
-        const selectionRange = state.selectionRange.value;
-        const editingCell = state.editingCell.value;
-        const selectedRowIds = state.selectedRowIds.value;
-        const { setActiveCell, setSelectionRange, setEditingCell, handleRowCheckboxChange, handleCopy, handleCut, handlePaste, setContextMenu, onUndo, onRedo, clearClipboardRanges } = handlers;
-        const editable = features.editable.value;
-        const onCellValueChanged = features.onCellValueChanged.value;
-        const rowSelection = features.rowSelection.value;
-        const wrapperRef = features.wrapperRef;
-        const scrollToRow = features.scrollToRow;
-        const maxRowIndex = items.length - 1;
-        const maxColIndex = visibleColumnCount - 1 + colOffset;
-        if (items.length === 0)
-            return;
-        if (activeCell === null) {
-            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'].includes(e.key)) {
-                setActiveCell({ rowIndex: 0, columnIndex: colOffset });
-                e.preventDefault();
-            }
-            return;
-        }
-        const { rowIndex, columnIndex } = activeCell;
-        const dataColIndex = columnIndex - colOffset;
-        const shift = e.shiftKey;
-        const isEmptyAt = (r, c) => {
-            if (r < 0 || r >= items.length || c < 0 || c >= visibleCols.length)
-                return true;
-            const v = getCellValue(items[r], visibleCols[c]);
-            return v == null || v === '';
-        };
-        switch (e.key) {
-            case 'c':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell != null)
-                        break;
-                    e.preventDefault();
-                    handleCopy();
-                }
-                break;
-            case 'x':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell != null)
-                        break;
-                    e.preventDefault();
-                    handleCut();
-                }
-                break;
-            case 'v':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell != null)
-                        break;
-                    e.preventDefault();
-                    void handlePaste();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp':
-            case 'ArrowRight':
-            case 'ArrowLeft': {
-                e.preventDefault();
-                const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
-                    direction: e.key,
-                    rowIndex, columnIndex, dataColIndex, colOffset,
-                    maxRowIndex, maxColIndex,
-                    visibleColCount: visibleCols.length,
-                    isCtrl: e.ctrlKey || e.metaKey,
-                    isShift: shift,
-                    selectionRange,
-                    isEmptyAt,
-                });
-                setSelectionRange(newRange);
-                setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
-                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                    scrollToRow?.(newRowIndex, 'center');
-                }
-                break;
-            }
-            case 'Tab': {
-                e.preventDefault();
-                const { rowIndex: newRowTab, columnIndex: newColTab } = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
-                const newDataColTab = newColTab - colOffset;
-                setSelectionRange({ startRow: newRowTab, startCol: newDataColTab, endRow: newRowTab, endCol: newDataColTab });
-                setActiveCell({ rowIndex: newRowTab, columnIndex: newColTab });
-                break;
-            }
-            case 'Home': {
-                e.preventDefault();
-                const newRowHome = e.ctrlKey ? 0 : rowIndex;
-                setSelectionRange({ startRow: newRowHome, startCol: 0, endRow: newRowHome, endCol: 0 });
-                setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                const newRowEnd = e.ctrlKey ? maxRowIndex : rowIndex;
-                setSelectionRange({ startRow: newRowEnd, startCol: visibleColumnCount - 1, endRow: newRowEnd, endCol: visibleColumnCount - 1 });
-                setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
-                break;
-            }
-            case 'Enter':
-            case 'F2': {
-                e.preventDefault();
-                if (dataColIndex >= 0 && dataColIndex < visibleCols.length) {
-                    const col = visibleCols[dataColIndex];
-                    const item = items[rowIndex];
-                    if (item && col) {
-                        const colEditable = col.editable === true ||
-                            (typeof col.editable === 'function' && col.editable(item));
-                        if (editable !== false && colEditable && onCellValueChanged != null) {
-                            setEditingCell({ rowId: getRowId(item), columnId: col.columnId });
-                        }
-                    }
-                }
-                break;
-            }
-            case 'Escape':
-                e.preventDefault();
-                if (editingCell != null) {
-                    setEditingCell(null);
-                }
-                else {
-                    clearClipboardRanges?.();
-                    setActiveCell(null);
-                    setSelectionRange(null);
-                }
-                break;
-            case ' ':
-                if (rowSelection !== 'none' && columnIndex === 0 && hasCheckboxCol) {
-                    e.preventDefault();
-                    const item = items[rowIndex];
-                    if (item) {
-                        const id = getRowId(item);
-                        const isSelected = selectedRowIds.has(id);
-                        handleRowCheckboxChange(id, !isSelected, rowIndex, e.shiftKey);
-                    }
-                }
-                break;
-            case 'z':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell == null) {
-                        if (e.shiftKey && onRedo) {
-                            e.preventDefault();
-                            onRedo();
-                        }
-                        else if (!e.shiftKey && onUndo) {
-                            e.preventDefault();
-                            onUndo();
-                        }
-                    }
-                }
-                break;
-            case 'y':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell == null && onRedo) {
-                        e.preventDefault();
-                        onRedo();
-                    }
-                }
-                break;
-            case 'a':
-                if (e.ctrlKey || e.metaKey) {
-                    if (editingCell != null)
-                        break;
-                    e.preventDefault();
-                    if (items.length > 0 && visibleColumnCount > 0) {
-                        setSelectionRange({ startRow: 0, startCol: 0, endRow: items.length - 1, endCol: visibleColumnCount - 1 });
-                        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
-                    }
-                }
-                break;
-            case 'Delete':
-            case 'Backspace': {
-                if (editingCell != null)
-                    break;
-                if (editable === false)
-                    break;
-                if (onCellValueChanged == null)
-                    break;
-                const range = selectionRange ??
-                    (activeCell != null
-                        ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset }
-                        : null);
-                if (range == null)
-                    break;
-                e.preventDefault();
-                const deleteEvents = applyCellDeletion(range, items, visibleCols);
-                for (const evt of deleteEvents)
-                    onCellValueChanged(evt);
-                break;
-            }
-            case 'F10':
-                if (e.shiftKey) {
-                    e.preventDefault();
-                    if (activeCell != null && wrapperRef.value) {
-                        const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
-                        const cell = wrapperRef.value.querySelector(sel);
-                        if (cell) {
-                            const rect = cell.getBoundingClientRect();
-                            setContextMenu({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
-                        }
-                        else {
-                            setContextMenu({ x: 100, y: 100 });
-                        }
-                    }
-                    else {
-                        setContextMenu({ x: 100, y: 100 });
-                    }
-                }
-                break;
-            default:
-                break;
-        }
-    };
-    return { handleGridKeyDown };
-}

package/dist/esm/composables/useLatestRef.js

@@ -1,27 +0,0 @@
-import { customRef, isRef, unref } from 'vue';
-/**
- * Returns a ref that always holds the latest value.
- * Useful for capturing volatile state in stable callbacks
- * without adding the value to reactive dependencies.
- *
- * Similar to React's useLatestRef, but uses Vue's customRef for synchronous updates.
- * The returned ref does NOT trigger reactivity when read - it's a "silent" ref
- * that always returns the current value without tracking dependencies.
- */
-export function useLatestRef(source) {
-    let value = unref(source);
-    return customRef((track, trigger) => ({
-        get() {
-            // Update value from source on every read (if source is a ref)
-            if (isRef(source)) {
-                value = source.value;
-            }
-            // Don't call track() - we don't want to add this to reactive dependencies
-            return value;
-        },
-        set(newValue) {
-            value = newValue;
-            trigger(); // Still allow setting and triggering if needed
-        },
-    }));
-}

package/dist/esm/composables/useMultiSelectFilterState.js

@@ -1,59 +0,0 @@
-import { ref, computed, watch } from 'vue';
-import { useDebounce } from './useDebounce';
-const SEARCH_DEBOUNCE_MS = 150;
-const EMPTY_OPTIONS = [];
-export function useMultiSelectFilterState(params) {
-    const { onFilterChange } = params;
-    const tempSelected = ref(new Set(params.selectedValues ?? EMPTY_OPTIONS));
-    const searchText = ref('');
-    const debouncedSearchText = useDebounce(searchText, SEARCH_DEBOUNCE_MS);
-    // Sync temp state when popover opens
-    watch(params.isFilterOpen, (open) => {
-        if (open) {
-            tempSelected.value = new Set(params.selectedValues ?? EMPTY_OPTIONS);
-            searchText.value = '';
-        }
-    });
-    const filteredOptions = computed(() => {
-        const safeOptions = params.options ?? EMPTY_OPTIONS;
-        if (!debouncedSearchText.value.trim())
-            return safeOptions;
-        const searchLower = debouncedSearchText.value.toLowerCase().trim();
-        return safeOptions.filter((opt) => opt.toLowerCase().includes(searchLower));
-    });
-    const setTempSelected = (v) => {
-        tempSelected.value = v;
-    };
-    const setSearchText = (v) => {
-        searchText.value = v;
-    };
-    const handleCheckboxChange = (option, checked) => {
-        const next = new Set(tempSelected.value);
-        if (checked)
-            next.add(option);
-        else
-            next.delete(option);
-        tempSelected.value = next;
-    };
-    const handleSelectAll = () => {
-        tempSelected.value = new Set(filteredOptions.value);
-    };
-    const handleClearSelection = () => {
-        tempSelected.value = new Set();
-    };
-    const handleApplyMultiSelect = () => {
-        onFilterChange?.(Array.from(tempSelected.value));
-    };
-    return {
-        tempSelected,
-        setTempSelected,
-        searchText,
-        setSearchText,
-        debouncedSearchText,
-        filteredOptions,
-        handleCheckboxChange,
-        handleSelectAll,
-        handleClearSelection,
-        handleApplyMultiSelect,
-    };
-}