@alaarab/ogrid-vue 2.1.2 → 2.1.4

package/dist/esm/composables/useColumnHeaderFilterState.js

@@ -1,189 +0,0 @@
-import { ref, computed, watch, onUnmounted } from 'vue';
-import { useTextFilterState } from './useTextFilterState';
-import { useMultiSelectFilterState } from './useMultiSelectFilterState';
-import { usePeopleFilterState } from './usePeopleFilterState';
-import { useDateFilterState } from './useDateFilterState';
-const EMPTY_OPTIONS = [];
-export function useColumnHeaderFilterState(params) {
-    const { filterType, onSort, } = params;
-    // Access params.selectedValues as a getter so hasActiveFilter tracks the reactive prop
-    // (when params is Vue's reactive props object, this is reactive; plain objects are snapshots)
-    const safeSelectedValues = () => params.selectedValues ?? EMPTY_OPTIONS;
-    // Shared state
-    const headerRef = ref(null);
-    const popoverRef = ref(null);
-    const isFilterOpen = ref(false);
-    const popoverPosition = ref(null);
-    const setFilterOpen = (open) => {
-        isFilterOpen.value = open;
-    };
-    // Compose sub-hooks — pass the ref directly so Vue's reactivity system
-    // can properly track dependencies (instead of a getter function wrapper)
-    const textFilterState = useTextFilterState({
-        textValue: params.textValue,
-        onTextChange: params.onTextChange,
-        isFilterOpen,
-    });
-    const multiSelectFilterState = useMultiSelectFilterState({
-        selectedValues: params.selectedValues,
-        onFilterChange: params.onFilterChange,
-        options: params.options,
-        isFilterOpen,
-    });
-    const peopleFilterState = usePeopleFilterState({
-        selectedUser: params.selectedUser,
-        onUserChange: params.onUserChange,
-        peopleSearch: params.peopleSearch,
-        isFilterOpen,
-        filterType,
-    });
-    const dateFilterState = useDateFilterState({
-        dateValue: params.dateValue,
-        onDateChange: params.onDateChange,
-        isFilterOpen,
-    });
-    // Close popover resets position
-    watch(isFilterOpen, (open) => {
-        if (!open) {
-            popoverPosition.value = null;
-        }
-    });
-    // Click outside and Escape to close
-    let clickOutsideHandler = null;
-    let keyDownHandler = null;
-    let clickOutsideTimeout;
-    const setupListeners = () => {
-        cleanupListeners();
-        clickOutsideHandler = (e) => {
-            const target = e.target;
-            if (popoverRef.value && !popoverRef.value.contains(target) &&
-                headerRef.value && !headerRef.value.contains(target)) {
-                isFilterOpen.value = false;
-            }
-        };
-        keyDownHandler = (e) => {
-            if (e.key === 'Escape' || e.key === 'Esc') {
-                e.preventDefault();
-                e.stopPropagation();
-                isFilterOpen.value = false;
-            }
-        };
-        clickOutsideTimeout = setTimeout(() => { if (clickOutsideHandler)
-            document.addEventListener('mousedown', clickOutsideHandler); }, 0);
-        document.addEventListener('keydown', keyDownHandler, true);
-    };
-    const cleanupListeners = () => {
-        if (clickOutsideTimeout)
-            clearTimeout(clickOutsideTimeout);
-        if (clickOutsideHandler)
-            document.removeEventListener('mousedown', clickOutsideHandler);
-        if (keyDownHandler)
-            document.removeEventListener('keydown', keyDownHandler, true);
-        clickOutsideHandler = null;
-        keyDownHandler = null;
-    };
-    watch(isFilterOpen, (open) => {
-        if (open)
-            setupListeners();
-        else
-            cleanupListeners();
-    });
-    onUnmounted(() => cleanupListeners());
-    // Shared handlers
-    const handleFilterIconClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (!isFilterOpen.value && headerRef.value) {
-            const rect = headerRef.value.getBoundingClientRect();
-            popoverPosition.value = { top: rect.bottom + 4, left: rect.left };
-        }
-        isFilterOpen.value = !isFilterOpen.value;
-    };
-    const handleSortClick = (e) => {
-        e.stopPropagation();
-        onSort?.();
-    };
-    const handleApplyMultiSelect = () => {
-        multiSelectFilterState.handleApplyMultiSelect();
-        isFilterOpen.value = false;
-    };
-    const handleTextApply = () => {
-        textFilterState.handleTextApply();
-        isFilterOpen.value = false;
-    };
-    const handleUserSelect = (user) => {
-        peopleFilterState.handleUserSelect(user);
-        isFilterOpen.value = false;
-    };
-    const handleClearUser = () => {
-        peopleFilterState.handleClearUser();
-        isFilterOpen.value = false;
-    };
-    const handleDateApply = () => {
-        dateFilterState.handleDateApply();
-        isFilterOpen.value = false;
-    };
-    const handlePopoverClick = (e) => e.stopPropagation();
-    const handleInputFocus = (e) => e.stopPropagation();
-    const handleInputMouseDown = (e) => e.stopPropagation();
-    const handleInputClick = (e) => e.stopPropagation();
-    const handleInputKeyDown = (e) => {
-        if (e.key !== 'Escape' && e.key !== 'Esc')
-            e.stopPropagation();
-    };
-    const hasActiveFilter = computed(() => {
-        if (filterType === 'multiSelect')
-            return safeSelectedValues().length > 0;
-        if (filterType === 'text')
-            return !!(params.textValue ?? '').trim();
-        if (filterType === 'people')
-            return !!params.selectedUser;
-        if (filterType === 'date')
-            return !!(params.dateValue?.from || params.dateValue?.to);
-        return false;
-    });
-    return {
-        headerRef,
-        popoverRef,
-        peopleInputRef: peopleFilterState.peopleInputRef,
-        isFilterOpen,
-        setFilterOpen,
-        tempSelected: multiSelectFilterState.tempSelected,
-        setTempSelected: multiSelectFilterState.setTempSelected,
-        tempTextValue: textFilterState.tempTextValue,
-        setTempTextValue: textFilterState.setTempTextValue,
-        searchText: multiSelectFilterState.searchText,
-        setSearchText: multiSelectFilterState.setSearchText,
-        debouncedSearchText: multiSelectFilterState.debouncedSearchText,
-        filteredOptions: multiSelectFilterState.filteredOptions,
-        peopleSuggestions: peopleFilterState.peopleSuggestions,
-        isPeopleLoading: peopleFilterState.isPeopleLoading,
-        peopleSearchText: peopleFilterState.peopleSearchText,
-        setPeopleSearchText: peopleFilterState.setPeopleSearchText,
-        tempDateFrom: dateFilterState.tempDateFrom,
-        setTempDateFrom: dateFilterState.setTempDateFrom,
-        tempDateTo: dateFilterState.tempDateTo,
-        setTempDateTo: dateFilterState.setTempDateTo,
-        hasActiveFilter,
-        popoverPosition,
-        handlers: {
-            handleFilterIconClick,
-            handleApplyMultiSelect,
-            handleTextApply,
-            handleTextClear: textFilterState.handleTextClear,
-            handleUserSelect,
-            handleClearUser,
-            handleCheckboxChange: multiSelectFilterState.handleCheckboxChange,
-            handleSelectAll: multiSelectFilterState.handleSelectAll,
-            handleClearSelection: multiSelectFilterState.handleClearSelection,
-            handlePopoverClick,
-            handleInputFocus,
-            handleInputMouseDown,
-            handleInputClick,
-            handleInputKeyDown,
-            handleDateApply,
-            handleDateClear: dateFilterState.handleDateClear,
-            handleSortClick,
-        },
-    };
-}

package/dist/esm/composables/useColumnHeaderMenuState.js

@@ -1,113 +0,0 @@
-import { ref, computed } from 'vue';
-import { measureColumnContentWidth } from '@alaarab/ogrid-core';
-/**
- * Manages state for the column header menu (pin/unpin, sort, autosize actions).
- * Tracks which column's menu is open, anchor element, and action handlers.
- */
-export function useColumnHeaderMenuState(params) {
-    const { columns, pinnedColumns, onPinColumn, onUnpinColumn, onSort, onColumnResized, onAutosizeColumn, sortBy, sortDirection, } = params;
-    const isOpen = ref(false);
-    const openForColumn = ref(null);
-    const anchorElement = ref(null);
-    const open = (columnId, anchorEl) => {
-        openForColumn.value = columnId;
-        anchorElement.value = anchorEl;
-        isOpen.value = true;
-    };
-    const close = () => {
-        isOpen.value = false;
-        openForColumn.value = null;
-        anchorElement.value = null;
-    };
-    const currentColumn = computed(() => openForColumn.value ? columns.value.find((c) => c.columnId === openForColumn.value) : undefined);
-    const currentPinState = computed(() => openForColumn.value ? pinnedColumns.value[openForColumn.value] : undefined);
-    const canPinLeft = computed(() => currentPinState.value !== 'left');
-    const canPinRight = computed(() => currentPinState.value !== 'right');
-    const canUnpin = computed(() => !!currentPinState.value);
-    const currentSort = computed(() => {
-        if (!openForColumn.value || !sortBy?.value || sortBy.value !== openForColumn.value) {
-            return null;
-        }
-        return sortDirection?.value ?? null;
-    });
-    const isSortable = computed(() => {
-        const col = currentColumn.value;
-        return col?.sortable !== false;
-    });
-    // All columns are resizable by default (no per-column resizable flag in core)
-    const isResizable = ref(true);
-    const handlePinLeft = () => {
-        if (openForColumn.value && canPinLeft.value) {
-            onPinColumn(openForColumn.value, 'left');
-            close();
-        }
-    };
-    const handlePinRight = () => {
-        if (openForColumn.value && canPinRight.value) {
-            onPinColumn(openForColumn.value, 'right');
-            close();
-        }
-    };
-    const handleUnpin = () => {
-        if (openForColumn.value && canUnpin.value) {
-            onUnpinColumn(openForColumn.value);
-            close();
-        }
-    };
-    const handleSortAsc = () => {
-        if (openForColumn.value && onSort) {
-            onSort(openForColumn.value, 'asc');
-            close();
-        }
-    };
-    const handleSortDesc = () => {
-        if (openForColumn.value && onSort) {
-            onSort(openForColumn.value, 'desc');
-            close();
-        }
-    };
-    const handleClearSort = () => {
-        if (openForColumn.value && onSort) {
-            onSort(openForColumn.value, null);
-            close();
-        }
-    };
-    const handleAutosizeThis = () => {
-        const resizer = onAutosizeColumn ?? onColumnResized;
-        if (!openForColumn.value || !resizer || !isResizable.value)
-            return;
-        const col = currentColumn.value;
-        resizer(openForColumn.value, measureColumnContentWidth(openForColumn.value, col?.minWidth));
-        close();
-    };
-    const handleAutosizeAll = () => {
-        const resizer = onAutosizeColumn ?? onColumnResized;
-        if (!resizer)
-            return;
-        columns.value.forEach((col) => {
-            resizer(col.columnId, measureColumnContentWidth(col.columnId, col.minWidth));
-        });
-        close();
-    };
-    return {
-        isOpen,
-        openForColumn,
-        anchorElement,
-        open,
-        close,
-        handlePinLeft,
-        handlePinRight,
-        handleUnpin,
-        handleSortAsc,
-        handleSortDesc,
-        handleClearSort,
-        handleAutosizeThis,
-        handleAutosizeAll,
-        canPinLeft,
-        canPinRight,
-        canUnpin,
-        currentSort,
-        isSortable,
-        isResizable,
-    };
-}

package/dist/esm/composables/useColumnPinning.js

@@ -1,64 +0,0 @@
-import { ref, computed } from 'vue';
-/**
- * Manages column pinning state (left/right sticky positioning).
- * Supports controlled and uncontrolled modes.
- * Initializes from column.pinned definitions and pinnedColumns prop.
- */
-export function useColumnPinning(params) {
-    const { columns, pinnedColumns: controlledPinnedColumns, onColumnPinned } = params;
-    // Initialize internal state from column.pinned definitions (only on mount)
-    const initialPinnedColumns = {};
-    for (const col of columns.value) {
-        if (col.pinned) {
-            initialPinnedColumns[col.columnId] = col.pinned;
-        }
-    }
-    const internalPinnedColumns = ref(initialPinnedColumns);
-    // Use controlled state if provided, otherwise internal
-    const pinnedColumns = computed(() => controlledPinnedColumns?.value ?? internalPinnedColumns.value);
-    const pinColumn = (columnId, side) => {
-        const next = { ...pinnedColumns.value, [columnId]: side };
-        internalPinnedColumns.value = next;
-        onColumnPinned?.(columnId, side);
-    };
-    const unpinColumn = (columnId) => {
-        const { [columnId]: _removed, ...next } = pinnedColumns.value;
-        void _removed;
-        internalPinnedColumns.value = next;
-        onColumnPinned?.(columnId, null);
-    };
-    const isPinned = (columnId) => {
-        return pinnedColumns.value[columnId];
-    };
-    const computeLeftOffsets = (visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) => {
-        const offsets = {};
-        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
-        for (const col of visibleCols) {
-            if (pinnedColumns.value[col.columnId] === 'left') {
-                offsets[col.columnId] = left;
-                left += columnWidths[col.columnId] ?? defaultWidth;
-            }
-        }
-        return offsets;
-    };
-    const computeRightOffsets = (visibleCols, columnWidths, defaultWidth) => {
-        const offsets = {};
-        let right = 0;
-        for (let i = visibleCols.length - 1; i >= 0; i--) {
-            const col = visibleCols[i];
-            if (pinnedColumns.value[col.columnId] === 'right') {
-                offsets[col.columnId] = right;
-                right += columnWidths[col.columnId] ?? defaultWidth;
-            }
-        }
-        return offsets;
-    };
-    return {
-        pinnedColumns,
-        pinColumn,
-        unpinColumn,
-        isPinned,
-        computeLeftOffsets,
-        computeRightOffsets,
-    };
-}

package/dist/esm/composables/useColumnReorder.js

@@ -1,110 +0,0 @@
-import { ref, onUnmounted } from 'vue';
-import { calculateDropTarget, reorderColumnArray, getPinStateForColumn, } from '@alaarab/ogrid-core';
-/** Width of the resize handle zone on the right edge of each header cell. */
-const RESIZE_HANDLE_ZONE = 8;
-/** Minimum drag distance (px) before activating reorder to prevent accidental drags on click. */
-const MIN_DRAG_DISTANCE = 5;
-/**
- * Manages column reordering via drag-and-drop on header cells.
- * Uses RAF-throttled mouse tracking and core's calculateDropTarget/reorderColumnArray.
- */
-export function useColumnReorder(params) {
-    const { columnOrder, onColumnOrderChange, tableRef, pinnedColumns } = params;
-    const isDragging = ref(false);
-    const dropIndicatorX = ref(null);
-    let draggedColumnId = null;
-    let draggedPinState = 'unpinned';
-    let rafId = 0;
-    let cleanupFn = null;
-    onUnmounted(() => {
-        cleanupFn?.();
-        cleanupFn = null;
-    });
-    const handleHeaderMouseDown = (columnId, event) => {
-        if (event.button !== 0)
-            return;
-        // Skip if in resize handle zone (right 8px of the header cell)
-        const th = event.target.closest('th');
-        if (th) {
-            const rect = th.getBoundingClientRect();
-            if (event.clientX > rect.right - RESIZE_HANDLE_ZONE)
-                return;
-        }
-        event.preventDefault();
-        const table = tableRef.value;
-        if (!table)
-            return;
-        if (!onColumnOrderChange.value)
-            return;
-        draggedColumnId = columnId;
-        draggedPinState = getPinStateForColumn(columnId, pinnedColumns?.value);
-        dropIndicatorX.value = null;
-        const startX = event.clientX;
-        let hasMoved = false;
-        let latestMouseX = event.clientX;
-        let targetIndex = -1;
-        const prevCursor = document.body.style.cursor;
-        const prevUserSelect = document.body.style.userSelect;
-        document.body.style.cursor = 'grabbing';
-        document.body.style.userSelect = 'none';
-        const onMove = (moveEvent) => {
-            // Require minimum drag distance before activating
-            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < MIN_DRAG_DISTANCE)
-                return;
-            if (!hasMoved) {
-                hasMoved = true;
-                isDragging.value = true;
-            }
-            latestMouseX = moveEvent.clientX;
-            if (!rafId) {
-                rafId = requestAnimationFrame(() => {
-                    rafId = 0;
-                    const tableEl = tableRef.value;
-                    if (!tableEl || !draggedColumnId)
-                        return;
-                    const result = calculateDropTarget({
-                        mouseX: latestMouseX,
-                        columnOrder: columnOrder.value,
-                        draggedColumnId,
-                        draggedPinState,
-                        tableElement: tableEl,
-                        pinnedColumns: pinnedColumns?.value,
-                    });
-                    if (result) {
-                        targetIndex = result.targetIndex;
-                        dropIndicatorX.value = result.indicatorX;
-                    }
-                    else {
-                        dropIndicatorX.value = null;
-                    }
-                });
-            }
-        };
-        const cleanup = () => {
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
-            cleanupFn = null;
-            document.body.style.cursor = prevCursor;
-            document.body.style.userSelect = prevUserSelect;
-            if (rafId) {
-                cancelAnimationFrame(rafId);
-                rafId = 0;
-            }
-        };
-        const onUp = () => {
-            cleanup();
-            if (hasMoved && draggedColumnId && targetIndex >= 0 && onColumnOrderChange.value) {
-                const newOrder = reorderColumnArray(columnOrder.value, draggedColumnId, targetIndex);
-                onColumnOrderChange.value(newOrder);
-            }
-            draggedColumnId = null;
-            isDragging.value = false;
-            dropIndicatorX.value = null;
-            targetIndex = -1;
-        };
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-        cleanupFn = cleanup;
-    };
-    return { isDragging, dropIndicatorX, handleHeaderMouseDown };
-}

package/dist/esm/composables/useColumnResize.js

@@ -1,73 +0,0 @@
-import { onUnmounted } from 'vue';
-/**
- * Manages column resize drag interactions with RAF-throttled state updates.
- */
-export function useColumnResize(params) {
-    const { columnSizingOverrides, setColumnSizingOverrides, minWidth = 80, defaultWidth = 120, onColumnResized, } = params;
-    let rafId = 0;
-    let cleanupFn = null;
-    onUnmounted(() => {
-        cleanupFn?.();
-        cleanupFn = null;
-    });
-    const handleResizeStart = (e, col) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const startX = e.clientX;
-        const columnId = col.columnId;
-        const thEl = e.currentTarget.parentElement;
-        const startWidth = thEl
-            ? thEl.getBoundingClientRect().width
-            : columnSizingOverrides.value[columnId]?.widthPx
-                ?? col.idealWidth
-                ?? col.defaultWidth
-                ?? defaultWidth;
-        let latestWidth = startWidth;
-        const prevCursor = document.body.style.cursor;
-        const prevUserSelect = document.body.style.userSelect;
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-        const flushWidth = () => {
-            setColumnSizingOverrides({
-                ...columnSizingOverrides.value,
-                [columnId]: { widthPx: latestWidth },
-            });
-        };
-        const onMove = (moveEvent) => {
-            const deltaX = moveEvent.clientX - startX;
-            latestWidth = Math.max(minWidth, startWidth + deltaX);
-            if (!rafId) {
-                rafId = requestAnimationFrame(() => {
-                    rafId = 0;
-                    flushWidth();
-                });
-            }
-        };
-        const cleanup = () => {
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
-            cleanupFn = null;
-            document.body.style.cursor = prevCursor;
-            document.body.style.userSelect = prevUserSelect;
-            if (rafId) {
-                cancelAnimationFrame(rafId);
-                rafId = 0;
-            }
-        };
-        const onUp = () => {
-            cleanup();
-            flushWidth();
-            onColumnResized?.(columnId, latestWidth);
-        };
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-        cleanupFn = cleanup;
-    };
-    const getColumnWidth = (col) => {
-        return columnSizingOverrides.value[col.columnId]?.widthPx
-            ?? col.idealWidth
-            ?? col.defaultWidth
-            ?? defaultWidth;
-    };
-    return { handleResizeStart, getColumnWidth };
-}

package/dist/esm/composables/useContextMenu.js

@@ -1,23 +0,0 @@
-import { shallowRef } from 'vue';
-/**
- * Manages context menu position state for right-click menus.
- */
-export function useContextMenu() {
-    const contextMenuPosition = shallowRef(null);
-    const setContextMenuPosition = (pos) => {
-        contextMenuPosition.value = pos;
-    };
-    const handleCellContextMenu = (e) => {
-        e.preventDefault?.();
-        contextMenuPosition.value = { x: e.clientX, y: e.clientY };
-    };
-    const closeContextMenu = () => {
-        contextMenuPosition.value = null;
-    };
-    return {
-        contextMenuPosition,
-        setContextMenuPosition,
-        handleCellContextMenu,
-        closeContextMenu,
-    };
-}