@alaarab/ogrid-vue 2.0.2

package/dist/esm/composables/useColumnHeaderFilterState.js

@@ -0,0 +1,186 @@
+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;
+    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;
+    };
+    const isFilterOpenGetter = () => isFilterOpen.value;
+    // Compose sub-hooks
+    const textFilterState = useTextFilterState({
+        textValue: params.textValue,
+        onTextChange: params.onTextChange,
+        isFilterOpen: isFilterOpenGetter,
+    });
+    const multiSelectFilterState = useMultiSelectFilterState({
+        selectedValues: params.selectedValues,
+        onFilterChange: params.onFilterChange,
+        options: params.options,
+        isFilterOpen: isFilterOpenGetter,
+    });
+    const peopleFilterState = usePeopleFilterState({
+        selectedUser: params.selectedUser,
+        onUserChange: params.onUserChange,
+        peopleSearch: params.peopleSearch,
+        isFilterOpen: isFilterOpenGetter,
+        filterType,
+    });
+    const dateFilterState = useDateFilterState({
+        dateValue: params.dateValue,
+        onDateChange: params.onDateChange,
+        isFilterOpen: isFilterOpenGetter,
+    });
+    // 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(() => 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/useColumnResize.js

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+/**
+ * Manages context menu position state for right-click menus.
+ */
+export function useContextMenu() {
+    const contextMenuPosition = ref(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,
+    };
+}

package/dist/esm/composables/useDataGridState.js

@@ -0,0 +1,308 @@
+import { ref, computed } from 'vue';
+import { flattenColumns, getDataGridStatusBarConfig, parseValue, computeAggregations } from '@alaarab/ogrid-core';
+import { useRowSelection } from './useRowSelection';
+import { useCellEditing } from './useCellEditing';
+import { useActiveCell } from './useActiveCell';
+import { useCellSelection } from './useCellSelection';
+import { useContextMenu } from './useContextMenu';
+import { useClipboard } from './useClipboard';
+import { useKeyboardNavigation } from './useKeyboardNavigation';
+import { useFillHandle } from './useFillHandle';
+import { useUndoRedo } from './useUndoRedo';
+import { useTableLayout } from './useTableLayout';
+// Stable no-op handlers
+const NOOP = () => { };
+const NOOP_ASYNC = async () => { };
+const NOOP_MOUSE = (_e, _r, _c) => { };
+const NOOP_KEY = (_e) => { };
+const NOOP_CTX = (_e) => { };
+/**
+ * Single orchestration composable for DataGridTable. Takes grid props and wrapper ref,
+ * returns all derived state and handlers so UI packages can be thin view layers.
+ */
+export function useDataGridState(params) {
+    const { props, wrapperRef } = params;
+    const items = computed(() => props.value.items);
+    const columnsProp = computed(() => props.value.columns);
+    const getRowId = computed(() => props.value.getRowId).value; // getRowId is stable
+    const visibleColumnsProp = computed(() => props.value.visibleColumns);
+    const columnOrderProp = computed(() => props.value.columnOrder);
+    const rowSelectionProp = computed(() => props.value.rowSelection ?? 'none');
+    const controlledSelectedRows = computed(() => props.value.selectedRows);
+    const onSelectionChangeProp = computed(() => props.value.onSelectionChange);
+    const statusBarProp = computed(() => props.value.statusBar);
+    const emptyStateProp = computed(() => props.value.emptyState);
+    const editableProp = computed(() => props.value.editable);
+    const cellSelectionPropRaw = computed(() => props.value.cellSelection);
+    const cellSelection = computed(() => cellSelectionPropRaw.value !== false);
+    const onCellValueChangedProp = computed(() => props.value.onCellValueChanged);
+    const initialColumnWidths = computed(() => props.value.initialColumnWidths);
+    const onColumnResizedProp = computed(() => props.value.onColumnResized);
+    const pinnedColumnsProp = computed(() => props.value.pinnedColumns);
+    const onCellErrorProp = computed(() => props.value.onCellError);
+    // Undo/redo wrapping
+    const undoRedo = useUndoRedo({ onCellValueChanged: onCellValueChangedProp.value });
+    const onCellValueChanged = computed(() => undoRedo.onCellValueChanged);
+    const flatColumnsRaw = computed(() => flattenColumns(columnsProp.value));
+    const flatColumns = computed(() => {
+        const pinned = pinnedColumnsProp.value;
+        if (!pinned || Object.keys(pinned).length === 0)
+            return flatColumnsRaw.value;
+        return flatColumnsRaw.value.map((col) => {
+            const override = pinned[col.columnId];
+            if (override && col.pinned !== override)
+                return { ...col, pinned: override };
+            return col;
+        });
+    });
+    const visibleCols = computed(() => {
+        const vis = visibleColumnsProp.value;
+        const order = columnOrderProp.value;
+        const filtered = vis ? flatColumns.value.filter((c) => vis.has(c.columnId)) : flatColumns.value;
+        if (!order?.length)
+            return filtered;
+        return [...filtered].sort((a, b) => {
+            const ia = order.indexOf(a.columnId);
+            const ib = order.indexOf(b.columnId);
+            if (ia === -1 && ib === -1)
+                return 0;
+            if (ia === -1)
+                return 1;
+            if (ib === -1)
+                return -1;
+            return ia - ib;
+        });
+    });
+    const visibleColumnCount = computed(() => visibleCols.value.length);
+    const hasCheckboxCol = computed(() => rowSelectionProp.value === 'multiple');
+    const totalColCount = computed(() => visibleColumnCount.value + (hasCheckboxCol.value ? 1 : 0));
+    const colOffset = computed(() => hasCheckboxCol.value ? 1 : 0).value; // stable once computed
+    const rowIndexByRowId = computed(() => {
+        const m = new Map();
+        items.value.forEach((item, idx) => m.set(getRowId(item), idx));
+        return m;
+    });
+    const rowSelectionResult = useRowSelection({
+        items,
+        getRowId,
+        rowSelection: rowSelectionProp,
+        controlledSelectedRows,
+        onSelectionChange: onSelectionChangeProp.value,
+    });
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue } = useCellEditing();
+    const { activeCell, setActiveCell } = useActiveCell(wrapperRef, editingCell);
+    const rowCount = computed(() => items.value.length);
+    const visColCount = computed(() => visibleCols.value.length);
+    const { selectionRange, setSelectionRange, handleCellMouseDown: handleCellMouseDownBase, handleSelectAllCells, isDragging, } = useCellSelection({
+        colOffset,
+        rowCount,
+        visibleColCount: visColCount,
+        setActiveCell,
+        wrapperRef,
+    });
+    const { contextMenuPosition, setContextMenuPosition, handleCellContextMenu, closeContextMenu } = useContextMenu();
+    const { handleCopy, handleCut, handlePaste, cutRange, copyRange, clearClipboardRanges } = useClipboard({
+        items,
+        visibleCols,
+        colOffset,
+        selectionRange,
+        activeCell,
+        editable: editableProp,
+        onCellValueChanged,
+        beginBatch: undoRedo.beginBatch,
+        endBatch: undoRedo.endBatch,
+    });
+    const handleCellMouseDown = (e, rowIndex, globalColIndex) => {
+        if (e.button !== 0)
+            return;
+        wrapperRef.value?.focus({ preventScroll: true });
+        clearClipboardRanges();
+        handleCellMouseDownBase(e, rowIndex, globalColIndex);
+    };
+    const { handleGridKeyDown } = useKeyboardNavigation({
+        data: { items, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, getRowId },
+        state: { activeCell, selectionRange, editingCell, selectedRowIds: rowSelectionResult.selectedRowIds },
+        handlers: {
+            setActiveCell, setSelectionRange, setEditingCell,
+            handleRowCheckboxChange: rowSelectionResult.handleRowCheckboxChange,
+            handleCopy, handleCut, handlePaste,
+            setContextMenu: setContextMenuPosition,
+            onUndo: undoRedo.undo,
+            onRedo: undoRedo.redo,
+            clearClipboardRanges,
+        },
+        features: {
+            editable: editableProp,
+            onCellValueChanged,
+            rowSelection: rowSelectionProp,
+            wrapperRef,
+        },
+    });
+    const { handleFillHandleMouseDown } = useFillHandle({
+        items,
+        visibleCols,
+        editable: editableProp,
+        onCellValueChanged,
+        selectionRange,
+        setSelectionRange,
+        setActiveCell,
+        colOffset,
+        wrapperRef,
+        beginBatch: undoRedo.beginBatch,
+        endBatch: undoRedo.endBatch,
+    });
+    const { containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides, } = useTableLayout({
+        wrapperRef,
+        visibleCols,
+        flatColumns,
+        hasCheckboxCol,
+        initialColumnWidths: initialColumnWidths.value,
+        onColumnResized: onColumnResizedProp.value,
+    });
+    const aggregation = computed(() => computeAggregations(items.value, visibleCols.value, cellSelection.value ? selectionRange.value : null));
+    const statusBarConfig = computed(() => {
+        const base = getDataGridStatusBarConfig(statusBarProp.value, items.value.length, rowSelectionResult.selectedRowIds.value.size);
+        if (!base)
+            return null;
+        return { ...base, aggregation: aggregation.value ?? undefined };
+    });
+    const showEmptyInGrid = computed(() => items.value.length === 0 && !!emptyStateProp.value && !props.value.isLoading);
+    const hasCellSelection = computed(() => selectionRange.value != null || activeCell.value != null);
+    // --- View-model inputs ---
+    const headerFilterInput = computed(() => ({
+        sortBy: props.value.sortBy,
+        sortDirection: props.value.sortDirection,
+        onColumnSort: props.value.onColumnSort,
+        filters: props.value.filters,
+        onFilterChange: props.value.onFilterChange,
+        filterOptions: props.value.filterOptions,
+        loadingFilterOptions: props.value.loadingFilterOptions,
+        peopleSearch: props.value.peopleSearch,
+    }));
+    const cellDescriptorInput = computed(() => ({
+        editingCell: editingCell.value,
+        activeCell: cellSelection.value ? activeCell.value : null,
+        selectionRange: cellSelection.value ? selectionRange.value : null,
+        cutRange: cellSelection.value ? cutRange.value : null,
+        copyRange: cellSelection.value ? copyRange.value : null,
+        colOffset,
+        itemsLength: items.value.length,
+        getRowId,
+        editable: editableProp.value,
+        onCellValueChanged: onCellValueChanged.value,
+        isDragging: cellSelection.value ? isDragging.value : false,
+    }));
+    // --- Cell edit helpers ---
+    const popoverAnchorEl = ref(null);
+    const setPopoverAnchorEl = (el) => {
+        popoverAnchorEl.value = el;
+    };
+    const commitCellEdit = (item, columnId, oldValue, newValue, rowIndex, globalColIndex) => {
+        const col = visibleCols.value.find((c) => c.columnId === columnId);
+        if (col) {
+            const result = parseValue(newValue, oldValue, item, col);
+            if (!result.valid) {
+                setEditingCell(null);
+                setPopoverAnchorEl(null);
+                setPendingEditorValue(undefined);
+                return;
+            }
+            newValue = result.value;
+        }
+        onCellValueChanged.value?.({
+            item,
+            columnId,
+            oldValue,
+            newValue,
+            rowIndex,
+        });
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(undefined);
+        if (rowIndex < items.value.length - 1) {
+            setActiveCell({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
+        }
+    };
+    const cancelPopoverEdit = () => {
+        setEditingCell(null);
+        setPopoverAnchorEl(null);
+        setPendingEditorValue(undefined);
+    };
+    // --- Memoize each sub-object ---
+    const layoutState = computed(() => ({
+        flatColumns: flatColumns.value,
+        visibleCols: visibleCols.value,
+        visibleColumnCount: visibleColumnCount.value,
+        totalColCount: totalColCount.value,
+        colOffset,
+        hasCheckboxCol: hasCheckboxCol.value,
+        rowIndexByRowId: rowIndexByRowId.value,
+        containerWidth: containerWidth.value,
+        minTableWidth: minTableWidth.value,
+        desiredTableWidth: desiredTableWidth.value,
+        columnSizingOverrides: columnSizingOverrides.value,
+        setColumnSizingOverrides,
+        onColumnResized: onColumnResizedProp.value,
+    }));
+    const rowSelectionState = computed(() => ({
+        selectedRowIds: rowSelectionResult.selectedRowIds.value,
+        updateSelection: rowSelectionResult.updateSelection,
+        handleRowCheckboxChange: rowSelectionResult.handleRowCheckboxChange,
+        handleSelectAll: rowSelectionResult.handleSelectAll,
+        allSelected: rowSelectionResult.allSelected.value,
+        someSelected: rowSelectionResult.someSelected.value,
+    }));
+    const editingState = computed(() => ({
+        editingCell: editingCell.value,
+        setEditingCell,
+        pendingEditorValue: pendingEditorValue.value,
+        setPendingEditorValue,
+        commitCellEdit,
+        cancelPopoverEdit,
+        popoverAnchorEl: popoverAnchorEl.value,
+        setPopoverAnchorEl,
+    }));
+    const interactionState = computed(() => ({
+        activeCell: cellSelection.value ? activeCell.value : null,
+        setActiveCell: cellSelection.value ? setActiveCell : NOOP,
+        selectionRange: cellSelection.value ? selectionRange.value : null,
+        setSelectionRange: cellSelection.value ? setSelectionRange : NOOP,
+        handleCellMouseDown: cellSelection.value ? handleCellMouseDown : NOOP_MOUSE,
+        handleSelectAllCells: cellSelection.value ? handleSelectAllCells : NOOP,
+        hasCellSelection: cellSelection.value ? hasCellSelection.value : false,
+        handleGridKeyDown: cellSelection.value ? handleGridKeyDown : NOOP_KEY,
+        handleFillHandleMouseDown: cellSelection.value ? handleFillHandleMouseDown : NOOP,
+        handleCopy: cellSelection.value ? handleCopy : NOOP,
+        handleCut: cellSelection.value ? handleCut : NOOP,
+        handlePaste: cellSelection.value ? handlePaste : NOOP_ASYNC,
+        cutRange: cellSelection.value ? cutRange.value : null,
+        copyRange: cellSelection.value ? copyRange.value : null,
+        clearClipboardRanges: cellSelection.value ? clearClipboardRanges : NOOP,
+        canUndo: undoRedo.canUndo.value,
+        canRedo: undoRedo.canRedo.value,
+        onUndo: undoRedo.undo,
+        onRedo: undoRedo.redo,
+        isDragging: cellSelection.value ? isDragging.value : false,
+    }));
+    const contextMenuState = computed(() => ({
+        menuPosition: cellSelection.value ? contextMenuPosition.value : null,
+        setMenuPosition: cellSelection.value ? setContextMenuPosition : NOOP,
+        handleCellContextMenu: cellSelection.value ? handleCellContextMenu : NOOP_CTX,
+        closeContextMenu: cellSelection.value ? closeContextMenu : NOOP,
+    }));
+    const viewModelsState = computed(() => ({
+        headerFilterInput: headerFilterInput.value,
+        cellDescriptorInput: cellDescriptorInput.value,
+        statusBarConfig: statusBarConfig.value,
+        showEmptyInGrid: showEmptyInGrid.value,
+        onCellError: onCellErrorProp.value,
+    }));
+    return {
+        layout: layoutState,
+        rowSelection: rowSelectionState,
+        editing: editingState,
+        interaction: interactionState,
+        contextMenu: contextMenuState,
+        viewModels: viewModelsState,
+    };
+}

package/dist/esm/composables/useDateFilterState.js

@@ -0,0 +1,36 @@
+import { ref, watch } from 'vue';
+export function useDateFilterState(params) {
+    const { onDateChange } = params;
+    const tempDateFrom = ref(params.dateValue?.from ?? '');
+    const tempDateTo = ref(params.dateValue?.to ?? '');
+    // Sync temp state when popover opens
+    watch(() => params.isFilterOpen(), (open) => {
+        if (open) {
+            tempDateFrom.value = params.dateValue?.from ?? '';
+            tempDateTo.value = params.dateValue?.to ?? '';
+        }
+    });
+    const setTempDateFrom = (v) => {
+        tempDateFrom.value = v;
+    };
+    const setTempDateTo = (v) => {
+        tempDateTo.value = v;
+    };
+    const handleDateApply = () => {
+        const from = tempDateFrom.value || undefined;
+        const to = tempDateTo.value || undefined;
+        onDateChange?.(from || to ? { from, to } : undefined);
+    };
+    const handleDateClear = () => {
+        tempDateFrom.value = '';
+        tempDateTo.value = '';
+    };
+    return {
+        tempDateFrom,
+        setTempDateFrom,
+        tempDateTo,
+        setTempDateTo,
+        handleDateApply,
+        handleDateClear,
+    };
+}

package/dist/esm/composables/useDebounce.js

@@ -0,0 +1,42 @@
+import { ref, watch, onUnmounted } from 'vue';
+/**
+ * Returns a debounced ref that updates after the specified delay when the source value changes.
+ */
+export function useDebounce(value, delayMs) {
+    const debouncedValue = ref(value.value);
+    let timeoutId;
+    watch(value, (newVal) => {
+        if (timeoutId !== undefined)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            debouncedValue.value = newVal;
+        }, delayMs);
+    });
+    onUnmounted(() => {
+        if (timeoutId !== undefined)
+            clearTimeout(timeoutId);
+    });
+    return debouncedValue;
+}
+/**
+ * Returns a stable callback that invokes the given function after the specified delay.
+ * Each new call resets the timer.
+ */
+export function useDebouncedCallback(fn, delayMs) {
+    let timeoutId;
+    // Keep a reference to the latest fn
+    let latestFn = fn;
+    const debounced = ((...args) => {
+        latestFn = fn;
+        if (timeoutId !== undefined)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            latestFn(...args);
+        }, delayMs);
+    });
+    onUnmounted(() => {
+        if (timeoutId !== undefined)
+            clearTimeout(timeoutId);
+    });
+    return debounced;
+}