@alaarab/ogrid-vue 2.0.2

package/dist/esm/components/SideBar.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/composables/index.js

@@ -0,0 +1,27 @@
+// Main orchestration composables
+export { useOGrid } from './useOGrid';
+export { useDataGridState } from './useDataGridState';
+// Feature composables
+export { useActiveCell } from './useActiveCell';
+export { useCellEditing } from './useCellEditing';
+export { useCellSelection } from './useCellSelection';
+export { useClipboard } from './useClipboard';
+export { useRowSelection } from './useRowSelection';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useFillHandle } from './useFillHandle';
+export { useUndoRedo } from './useUndoRedo';
+export { useContextMenu } from './useContextMenu';
+export { useColumnResize } from './useColumnResize';
+export { useFilterOptions } from './useFilterOptions';
+export { useDebounce, useDebouncedCallback } from './useDebounce';
+export { useTableLayout } from './useTableLayout';
+// Headless state composables
+export { useColumnHeaderFilterState } from './useColumnHeaderFilterState';
+export { useTextFilterState } from './useTextFilterState';
+export { useMultiSelectFilterState } from './useMultiSelectFilterState';
+export { usePeopleFilterState } from './usePeopleFilterState';
+export { useDateFilterState } from './useDateFilterState';
+export { useColumnChooserState } from './useColumnChooserState';
+export { useInlineCellEditorState } from './useInlineCellEditorState';
+export { useRichSelectState } from './useRichSelectState';
+export { useSideBarState } from './useSideBarState';

package/dist/esm/composables/useActiveCell.js

@@ -0,0 +1,58 @@
+import { ref, watch, nextTick } from 'vue';
+/**
+ * Tracks the active cell for keyboard navigation.
+ * When wrapperRef and editingCell are provided, scrolls the active cell into view when it changes (and not editing).
+ */
+export function useActiveCell(wrapperRef, editingCell) {
+    const activeCell = ref(null);
+    // Deduplicating setter — skips update when the cell coordinates haven't actually changed.
+    const setActiveCell = (cell) => {
+        const prev = activeCell.value;
+        if (prev === cell)
+            return;
+        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
+            return;
+        activeCell.value = cell;
+    };
+    // Scroll active cell into view when it changes (equivalent to useLayoutEffect)
+    watch([activeCell, () => editingCell?.value], () => {
+        if (activeCell.value == null ||
+            !wrapperRef?.value ||
+            editingCell?.value != null)
+            return;
+        // Use nextTick to ensure DOM is updated before scrolling
+        void nextTick(() => {
+            const wrapper = wrapperRef.value;
+            if (!wrapper || !activeCell.value)
+                return;
+            const { rowIndex, columnIndex } = activeCell.value;
+            const selector = `[data-row-index="${rowIndex}"][data-col-index="${columnIndex}"]`;
+            const cell = wrapper.querySelector(selector);
+            if (cell) {
+                const thead = wrapper.querySelector('thead');
+                const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
+                const wrapperRect = wrapper.getBoundingClientRect();
+                const cellRect = cell.getBoundingClientRect();
+                // Vertical scroll (account for sticky thead)
+                const visibleTop = wrapperRect.top + headerHeight;
+                if (cellRect.top < visibleTop) {
+                    wrapper.scrollTop -= visibleTop - cellRect.top;
+                }
+                else if (cellRect.bottom > wrapperRect.bottom) {
+                    wrapper.scrollTop += cellRect.bottom - wrapperRect.bottom;
+                }
+                // Horizontal scroll
+                if (cellRect.left < wrapperRect.left) {
+                    wrapper.scrollLeft -= wrapperRect.left - cellRect.left;
+                }
+                else if (cellRect.right > wrapperRect.right) {
+                    wrapper.scrollLeft += cellRect.right - wrapperRect.right;
+                }
+                if (document.activeElement !== cell && typeof cell.focus === 'function') {
+                    cell.focus({ preventScroll: true });
+                }
+            }
+        });
+    }, { flush: 'post' });
+    return { activeCell, setActiveCell };
+}

package/dist/esm/composables/useCellEditing.js

@@ -0,0 +1,20 @@
+import { ref } from 'vue';
+/**
+ * Manages cell editing state: which cell is being edited and its pending value.
+ */
+export function useCellEditing() {
+    const editingCell = ref(null);
+    const pendingEditorValue = ref(undefined);
+    const setEditingCell = (cell) => {
+        editingCell.value = cell;
+    };
+    const setPendingEditorValue = (value) => {
+        pendingEditorValue.value = value;
+    };
+    return {
+        editingCell,
+        setEditingCell,
+        pendingEditorValue,
+        setPendingEditorValue,
+    };
+}

package/dist/esm/composables/useCellSelection.js

@@ -0,0 +1,281 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+import { normalizeSelectionRange } from '../types';
+/** Compares two selection ranges by value. */
+function rangesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.startRow === b.startRow && a.endRow === b.endRow &&
+        a.startCol === b.startCol && a.endCol === b.endCol;
+}
+/** DOM attribute name used for drag-range highlighting (bypasses Vue). */
+const DRAG_ATTR = 'data-drag-range';
+/** Auto-scroll config */
+const AUTO_SCROLL_EDGE = 40;
+const AUTO_SCROLL_MIN_SPEED = 2;
+const AUTO_SCROLL_MAX_SPEED = 20;
+const AUTO_SCROLL_INTERVAL = 16;
+function autoScrollSpeed(distance) {
+    const t = Math.min(distance / AUTO_SCROLL_EDGE, 1);
+    return AUTO_SCROLL_MIN_SPEED + t * (AUTO_SCROLL_MAX_SPEED - AUTO_SCROLL_MIN_SPEED);
+}
+/**
+ * Manages cell selection range with drag-to-select and select-all support.
+ */
+export function useCellSelection(params) {
+    const { colOffset, rowCount, visibleColCount, setActiveCell, wrapperRef } = params;
+    const selectionRange = ref(null);
+    const isDragging = ref(false);
+    let isDraggingInternal = false;
+    let dragMoved = false;
+    let dragStart = null;
+    let rafId = 0;
+    let liveDragRange = null;
+    let autoScrollInterval = null;
+    let lastMousePos = null;
+    const setSelectionRange = (next) => {
+        if (rangesEqual(selectionRange.value, next))
+            return;
+        selectionRange.value = next;
+    };
+    const handleCellMouseDown = (e, rowIndex, globalColIndex) => {
+        if (e.button !== 0)
+            return;
+        if (globalColIndex < colOffset)
+            return;
+        e.preventDefault();
+        const dataColIndex = globalColIndex - colOffset;
+        const currentRange = selectionRange.value;
+        if (e.shiftKey && currentRange != null) {
+            setSelectionRange(normalizeSelectionRange({
+                startRow: currentRange.startRow,
+                startCol: currentRange.startCol,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            }));
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        }
+        else {
+            dragStart = { row: rowIndex, col: dataColIndex };
+            dragMoved = false;
+            const initial = {
+                startRow: rowIndex,
+                startCol: dataColIndex,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            };
+            setSelectionRange(initial);
+            liveDragRange = initial;
+            setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            isDraggingInternal = true;
+        }
+    };
+    const handleSelectAllCells = () => {
+        if (rowCount.value === 0 || visibleColCount.value === 0)
+            return;
+        setSelectionRange({
+            startRow: 0,
+            startCol: 0,
+            endRow: rowCount.value - 1,
+            endCol: visibleColCount.value - 1,
+        });
+        setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+    };
+    // --- Window mouse move/up for drag selection ---
+    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 cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+        for (let i = 0; i < cells.length; i++) {
+            const el = cells[i];
+            const r = parseInt(el.getAttribute('data-row-index'), 10);
+            const c = parseInt(el.getAttribute('data-col-index'), 10) - colOffset;
+            const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+            if (inRange) {
+                if (!el.hasAttribute(DRAG_ATTR))
+                    el.setAttribute(DRAG_ATTR, '');
+            }
+            else {
+                if (el.hasAttribute(DRAG_ATTR))
+                    el.removeAttribute(DRAG_ATTR);
+            }
+        }
+    };
+    const clearDragAttrs = () => {
+        const wrapper = wrapperRef.value;
+        if (!wrapper)
+            return;
+        const marked = wrapper.querySelectorAll(`[${DRAG_ATTR}]`);
+        for (let i = 0; i < marked.length; i++)
+            marked[i].removeAttribute(DRAG_ATTR);
+    };
+    const resolveRange = (cx, cy) => {
+        if (!dragStart)
+            return null;
+        const target = document.elementFromPoint(cx, cy);
+        const cell = target?.closest?.('[data-row-index][data-col-index]');
+        if (!cell)
+            return null;
+        const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+        const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+        if (Number.isNaN(r) || Number.isNaN(c) || c < colOffset)
+            return null;
+        const dataCol = c - colOffset;
+        return normalizeSelectionRange({
+            startRow: dragStart.row,
+            startCol: dragStart.col,
+            endRow: r,
+            endCol: dataCol,
+        });
+    };
+    const stopAutoScroll = () => {
+        if (autoScrollInterval) {
+            clearInterval(autoScrollInterval);
+            autoScrollInterval = null;
+        }
+    };
+    const updateAutoScroll = () => {
+        const wrapper = wrapperRef.value;
+        if (!wrapper || !lastMousePos || !isDraggingInternal) {
+            stopAutoScroll();
+            return;
+        }
+        const rect = wrapper.getBoundingClientRect();
+        let dx = 0;
+        let dy = 0;
+        if (lastMousePos.cy < rect.top + AUTO_SCROLL_EDGE) {
+            dy = -autoScrollSpeed(rect.top + AUTO_SCROLL_EDGE - lastMousePos.cy);
+        }
+        else if (lastMousePos.cy > rect.bottom - AUTO_SCROLL_EDGE) {
+            dy = autoScrollSpeed(lastMousePos.cy - (rect.bottom - AUTO_SCROLL_EDGE));
+        }
+        if (lastMousePos.cx < rect.left + AUTO_SCROLL_EDGE) {
+            dx = -autoScrollSpeed(rect.left + AUTO_SCROLL_EDGE - lastMousePos.cx);
+        }
+        else if (lastMousePos.cx > rect.right - AUTO_SCROLL_EDGE) {
+            dx = autoScrollSpeed(lastMousePos.cx - (rect.right - AUTO_SCROLL_EDGE));
+        }
+        if (dx === 0 && dy === 0) {
+            stopAutoScroll();
+            return;
+        }
+        if (!autoScrollInterval) {
+            autoScrollInterval = setInterval(() => {
+                const w = wrapperRef.value;
+                const p = lastMousePos;
+                if (!w || !p || !isDraggingInternal) {
+                    stopAutoScroll();
+                    return;
+                }
+                const r = w.getBoundingClientRect();
+                let sdx = 0;
+                let sdy = 0;
+                if (p.cy < r.top + AUTO_SCROLL_EDGE)
+                    sdy = -autoScrollSpeed(r.top + AUTO_SCROLL_EDGE - p.cy);
+                else if (p.cy > r.bottom - AUTO_SCROLL_EDGE)
+                    sdy = autoScrollSpeed(p.cy - (r.bottom - AUTO_SCROLL_EDGE));
+                if (p.cx < r.left + AUTO_SCROLL_EDGE)
+                    sdx = -autoScrollSpeed(r.left + AUTO_SCROLL_EDGE - p.cx);
+                else if (p.cx > r.right - AUTO_SCROLL_EDGE)
+                    sdx = autoScrollSpeed(p.cx - (r.right - AUTO_SCROLL_EDGE));
+                if (sdx === 0 && sdy === 0) {
+                    stopAutoScroll();
+                    return;
+                }
+                w.scrollTop += sdy;
+                w.scrollLeft += sdx;
+                const newRange = resolveRange(p.cx, p.cy);
+                if (newRange) {
+                    liveDragRange = newRange;
+                    applyDragAttrs(newRange);
+                }
+            }, AUTO_SCROLL_INTERVAL);
+        }
+    };
+    const onMove = (e) => {
+        if (!isDraggingInternal || !dragStart)
+            return;
+        if (!dragMoved) {
+            dragMoved = true;
+            isDragging.value = true;
+        }
+        lastMousePos = { cx: e.clientX, cy: e.clientY };
+        updateAutoScroll();
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+            rafId = 0;
+            if (!lastMousePos)
+                return;
+            const newRange = resolveRange(lastMousePos.cx, lastMousePos.cy);
+            if (!newRange)
+                return;
+            const prev = liveDragRange;
+            if (prev &&
+                prev.startRow === newRange.startRow &&
+                prev.startCol === newRange.startCol &&
+                prev.endRow === newRange.endRow &&
+                prev.endCol === newRange.endCol) {
+                return;
+            }
+            liveDragRange = newRange;
+            applyDragAttrs(newRange);
+        });
+    };
+    const onUp = () => {
+        if (!isDraggingInternal)
+            return;
+        stopAutoScroll();
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+        }
+        isDraggingInternal = false;
+        const wasDrag = dragMoved;
+        if (wasDrag) {
+            if (lastMousePos) {
+                const flushed = resolveRange(lastMousePos.cx, lastMousePos.cy);
+                if (flushed)
+                    liveDragRange = flushed;
+            }
+            const finalRange = liveDragRange;
+            if (finalRange) {
+                setSelectionRange(finalRange);
+                setActiveCell({
+                    rowIndex: finalRange.endRow,
+                    columnIndex: finalRange.endCol + colOffset,
+                });
+            }
+        }
+        clearDragAttrs();
+        liveDragRange = null;
+        lastMousePos = null;
+        dragStart = null;
+        if (wasDrag)
+            isDragging.value = false;
+    };
+    onMounted(() => {
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('mousemove', onMove, true);
+        window.removeEventListener('mouseup', onUp, true);
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        stopAutoScroll();
+    });
+    return {
+        selectionRange,
+        setSelectionRange,
+        handleCellMouseDown,
+        handleSelectAllCells,
+        isDragging,
+    };
+}

package/dist/esm/composables/useClipboard.js

@@ -0,0 +1,147 @@
+import { ref } from 'vue';
+import { getCellValue, parseValue, normalizeSelectionRange } from '@alaarab/ogrid-core';
+/**
+ * Manages copy, cut, and paste operations for cell ranges with TSV clipboard format.
+ */
+export function useClipboard(params) {
+    const { items, visibleCols, colOffset, selectionRange, activeCell, editable, onCellValueChanged, beginBatch, endBatch, } = params;
+    let cutRangeInternal = null;
+    const cutRange = ref(null);
+    const copyRange = ref(null);
+    let internalClipboard = null;
+    const getEffectiveRange = () => {
+        const sel = selectionRange.value;
+        const ac = activeCell.value;
+        return sel ?? (ac != null
+            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset }
+            : null);
+    };
+    const handleCopy = () => {
+        const range = getEffectiveRange();
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const currentItems = items.value;
+        const currentCols = visibleCols.value;
+        const rows = [];
+        for (let r = norm.startRow; r <= norm.endRow; r++) {
+            const cells = [];
+            for (let c = norm.startCol; c <= norm.endCol; c++) {
+                if (r >= currentItems.length || c >= currentCols.length)
+                    break;
+                const item = currentItems[r];
+                const col = currentCols[c];
+                const raw = getCellValue(item, col);
+                const val = col.valueFormatter ? col.valueFormatter(raw, item) : raw;
+                cells.push(val != null && val !== '' ? String(val).replace(/\t/g, ' ').replace(/\n/g, ' ') : '');
+            }
+            rows.push(cells.join('\t'));
+        }
+        const tsv = rows.join('\r\n');
+        internalClipboard = tsv;
+        copyRange.value = norm;
+        void navigator.clipboard.writeText(tsv).catch(() => { });
+    };
+    const handleCut = () => {
+        if (editable.value === false)
+            return;
+        const range = getEffectiveRange();
+        if (range == null || onCellValueChanged.value == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        cutRangeInternal = norm;
+        cutRange.value = norm;
+        copyRange.value = null;
+        handleCopy();
+        copyRange.value = null;
+    };
+    const handlePaste = async () => {
+        if (editable.value === false)
+            return;
+        const callback = onCellValueChanged.value;
+        if (callback == null)
+            return;
+        let text;
+        try {
+            text = await navigator.clipboard.readText();
+        }
+        catch {
+            text = '';
+        }
+        if (!text.trim() && internalClipboard != null) {
+            text = internalClipboard;
+        }
+        if (!text.trim())
+            return;
+        const norm = getEffectiveRange();
+        const anchorRow = norm ? norm.startRow : 0;
+        const anchorCol = norm ? norm.startCol : 0;
+        const currentItems = items.value;
+        const currentCols = visibleCols.value;
+        const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
+        beginBatch?.();
+        for (let r = 0; r < lines.length; r++) {
+            const cells = lines[r].split('\t');
+            for (let c = 0; c < cells.length; c++) {
+                const targetRow = anchorRow + r;
+                const targetCol = anchorCol + c;
+                if (targetRow >= currentItems.length || targetCol >= currentCols.length)
+                    continue;
+                const item = currentItems[targetRow];
+                const col = currentCols[targetCol];
+                const colEditable = col.editable === true ||
+                    (typeof col.editable === 'function' && col.editable(item));
+                if (!colEditable)
+                    continue;
+                const rawValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                const result = parseValue(rawValue, oldValue, item, col);
+                if (!result.valid)
+                    continue;
+                callback({
+                    item,
+                    columnId: col.columnId,
+                    oldValue,
+                    newValue: result.value,
+                    rowIndex: targetRow,
+                });
+            }
+        }
+        if (cutRangeInternal) {
+            const cut = cutRangeInternal;
+            for (let r = cut.startRow; r <= cut.endRow; r++) {
+                for (let c = cut.startCol; c <= cut.endCol; c++) {
+                    if (r >= currentItems.length || c >= currentCols.length)
+                        continue;
+                    const item = currentItems[r];
+                    const col = currentCols[c];
+                    const colEditable = col.editable === true ||
+                        (typeof col.editable === 'function' && col.editable(item));
+                    if (!colEditable)
+                        continue;
+                    const oldValue = getCellValue(item, col);
+                    const result = parseValue('', oldValue, item, col);
+                    if (!result.valid)
+                        continue;
+                    callback({
+                        item,
+                        columnId: col.columnId,
+                        oldValue,
+                        newValue: result.value,
+                        rowIndex: r,
+                    });
+                }
+            }
+            cutRangeInternal = null;
+            cutRange.value = null;
+        }
+        endBatch?.();
+        copyRange.value = null;
+    };
+    const clearClipboardRanges = () => {
+        copyRange.value = null;
+        cutRange.value = null;
+        cutRangeInternal = null;
+    };
+    return { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges };
+}

package/dist/esm/composables/useColumnChooserState.js

@@ -0,0 +1,77 @@
+import { ref, watch, onUnmounted } from 'vue';
+/**
+ * Returns open/setOpen, handleToggle, handleClose, handleCheckboxChange, handleSelectAll, handleClearAll.
+ */
+export function useColumnChooserState(params) {
+    const { columns, visibleColumns, onVisibilityChange } = params;
+    const open = ref(false);
+    let keyDownHandler = null;
+    const setupEscapeHandler = () => {
+        cleanupEscapeHandler();
+        keyDownHandler = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                open.value = false;
+            }
+        };
+        document.addEventListener('keydown', keyDownHandler, true);
+    };
+    const cleanupEscapeHandler = () => {
+        if (keyDownHandler) {
+            document.removeEventListener('keydown', keyDownHandler, true);
+            keyDownHandler = null;
+        }
+    };
+    watch(open, (isOpen) => {
+        if (isOpen)
+            setupEscapeHandler();
+        else
+            cleanupEscapeHandler();
+    });
+    onUnmounted(() => cleanupEscapeHandler());
+    const setOpen = (value) => {
+        open.value = value;
+    };
+    const handleToggle = () => {
+        open.value = !open.value;
+    };
+    const handleClose = () => {
+        open.value = false;
+    };
+    const handleCheckboxChange = (columnKey) => {
+        return (visible) => {
+            onVisibilityChange(columnKey, visible);
+        };
+    };
+    const handleSelectAll = () => {
+        columns.value.forEach((col) => {
+            if (!visibleColumns.value.has(col.columnId)) {
+                onVisibilityChange(col.columnId, true);
+            }
+        });
+    };
+    const handleClearAll = () => {
+        columns.value.forEach((col) => {
+            if (!col.required && visibleColumns.value.has(col.columnId)) {
+                onVisibilityChange(col.columnId, false);
+            }
+        });
+    };
+    const visibleCount = ref(visibleColumns.value.size);
+    const totalCount = ref(columns.value.length);
+    watch([visibleColumns, columns], () => {
+        visibleCount.value = visibleColumns.value.size;
+        totalCount.value = columns.value.length;
+    }, { immediate: true });
+    return {
+        open,
+        setOpen,
+        handleToggle,
+        handleClose,
+        handleCheckboxChange,
+        handleSelectAll,
+        handleClearAll,
+        visibleCount,
+        totalCount,
+    };
+}