@alaarab/ogrid-vue 2.1.3 → 2.1.5

package/dist/esm/composables/useSideBarState.js

@@ -1,41 +0,0 @@
-import { ref, computed } from 'vue';
-const DEFAULT_PANELS = ['columns', 'filters'];
-/**
- * Manages side bar panel state: enabled panels, active panel, position, and toggle/close handlers.
- */
-export function useSideBarState(params) {
-    const { config } = params;
-    const isEnabled = config != null && config !== false;
-    const parsed = (() => {
-        if (!isEnabled || config === true) {
-            return { panels: DEFAULT_PANELS, position: 'right', defaultPanel: null };
-        }
-        const def = config;
-        return {
-            panels: def.panels ?? DEFAULT_PANELS,
-            position: def.position ?? 'right',
-            defaultPanel: def.defaultPanel ?? null,
-        };
-    })();
-    const activePanel = ref(parsed.defaultPanel);
-    const setActivePanel = (panel) => {
-        activePanel.value = panel;
-    };
-    const toggle = (panel) => {
-        activePanel.value = activePanel.value === panel ? null : panel;
-    };
-    const close = () => {
-        activePanel.value = null;
-    };
-    const isOpen = computed(() => activePanel.value !== null);
-    return {
-        isEnabled,
-        activePanel,
-        setActivePanel,
-        panels: parsed.panels,
-        position: parsed.position,
-        isOpen,
-        toggle,
-        close,
-    };
-}

package/dist/esm/composables/useTableLayout.js

@@ -1,85 +0,0 @@
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING } from '@alaarab/ogrid-core';
-/**
- * Manages table layout: container width measurement, column sizing overrides,
- * min/desired table width calculations.
- */
-export function useTableLayout(params) {
-    const { wrapperRef, visibleCols, flatColumns, hasCheckboxCol, initialColumnWidths, onColumnResized, } = params;
-    // Container width measurement via ResizeObserver
-    const containerWidth = ref(0);
-    let resizeObserver;
-    const measure = () => {
-        const el = wrapperRef.value;
-        if (!el)
-            return;
-        const rect = el.getBoundingClientRect();
-        const cs = window.getComputedStyle(el);
-        const borderX = (parseFloat(cs.borderLeftWidth || '0') || 0) +
-            (parseFloat(cs.borderRightWidth || '0') || 0);
-        containerWidth.value = Math.max(0, rect.width - borderX);
-    };
-    onMounted(() => {
-        const el = wrapperRef.value;
-        if (el) {
-            if (typeof ResizeObserver !== 'undefined') {
-                resizeObserver = new ResizeObserver(measure);
-                resizeObserver.observe(el);
-            }
-            measure();
-        }
-    });
-    onUnmounted(() => {
-        resizeObserver?.disconnect();
-    });
-    // Column sizing overrides state
-    const columnSizingOverrides = ref((() => {
-        if (!initialColumnWidths)
-            return {};
-        const result = {};
-        for (const [id, width] of Object.entries(initialColumnWidths)) {
-            result[id] = { widthPx: width };
-        }
-        return result;
-    })());
-    const setColumnSizingOverrides = (value) => {
-        columnSizingOverrides.value = value;
-    };
-    // Minimum table width calculation
-    const minTableWidth = computed(() => {
-        const checkboxW = hasCheckboxCol.value ? CHECKBOX_COLUMN_WIDTH : 0;
-        return visibleCols.value.reduce((sum, c) => sum + (c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH) + CELL_PADDING, checkboxW);
-    });
-    // Cleanup effect: remove overrides for columns that no longer exist
-    watch(flatColumns, (cols) => {
-        const colIds = new Set(cols.map((c) => c.columnId));
-        const prev = columnSizingOverrides.value;
-        const keys = Object.keys(prev);
-        const kept = keys.filter((id) => colIds.has(id));
-        if (kept.length < keys.length) {
-            const next = {};
-            for (const id of kept)
-                next[id] = prev[id];
-            columnSizingOverrides.value = next;
-        }
-    });
-    // Desired table width calculation
-    const desiredTableWidth = computed(() => {
-        const checkboxW = hasCheckboxCol.value ? CHECKBOX_COLUMN_WIDTH : 0;
-        return visibleCols.value.reduce((sum, c) => {
-            const override = columnSizingOverrides.value[c.columnId];
-            const w = override
-                ? override.widthPx
-                : (c.idealWidth ?? c.defaultWidth ?? c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH);
-            return sum + Math.max(c.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, w) + CELL_PADDING;
-        }, checkboxW);
-    });
-    return {
-        containerWidth,
-        minTableWidth,
-        desiredTableWidth,
-        columnSizingOverrides,
-        setColumnSizingOverrides,
-        onColumnResized,
-    };
-}

package/dist/esm/composables/useTextFilterState.js

@@ -1,26 +0,0 @@
-import { ref, watch } from 'vue';
-export function useTextFilterState(params) {
-    const { textValue = '', onTextChange } = params;
-    const tempTextValue = ref(textValue);
-    // Sync temp state when popover opens
-    watch(params.isFilterOpen, (open) => {
-        if (open) {
-            tempTextValue.value = params.textValue ?? '';
-        }
-    });
-    const setTempTextValue = (v) => {
-        tempTextValue.value = v;
-    };
-    const handleTextApply = () => {
-        onTextChange?.(tempTextValue.value.trim());
-    };
-    const handleTextClear = () => {
-        tempTextValue.value = '';
-    };
-    return {
-        tempTextValue,
-        setTempTextValue,
-        handleTextApply,
-        handleTextClear,
-    };
-}

package/dist/esm/composables/useUndoRedo.js

@@ -1,65 +0,0 @@
-import { ref } from 'vue';
-import { UndoRedoStack } from '@alaarab/ogrid-core';
-/**
- * Wraps onCellValueChanged with an undo/redo history stack.
- * Supports batch operations: changes between beginBatch/endBatch are one undo step.
- */
-export function useUndoRedo(params) {
-    const { onCellValueChanged, maxUndoDepth = 100 } = params;
-    const stack = new UndoRedoStack(maxUndoDepth);
-    const canUndo = ref(false);
-    const canRedo = ref(false);
-    const updateFlags = () => {
-        canUndo.value = stack.canUndo;
-        canRedo.value = stack.canRedo;
-    };
-    const wrapped = onCellValueChanged
-        ? (event) => {
-            stack.record(event);
-            if (!stack.isBatching) {
-                updateFlags();
-            }
-            onCellValueChanged(event);
-        }
-        : undefined;
-    const beginBatch = () => {
-        stack.beginBatch();
-    };
-    const endBatch = () => {
-        stack.endBatch();
-        updateFlags();
-    };
-    const undo = () => {
-        if (!onCellValueChanged)
-            return;
-        const lastBatch = stack.undo();
-        if (!lastBatch)
-            return;
-        updateFlags();
-        for (let i = lastBatch.length - 1; i >= 0; i--) {
-            const ev = lastBatch[i];
-            onCellValueChanged({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
-        }
-    };
-    const redo = () => {
-        if (!onCellValueChanged)
-            return;
-        const nextBatch = stack.redo();
-        if (!nextBatch)
-            return;
-        updateFlags();
-        for (const ev of nextBatch) {
-            onCellValueChanged(ev);
-        }
-    };
-    return {
-        onCellValueChanged: wrapped,
-        undo,
-        redo,
-        canUndo,
-        canRedo,
-        beginBatch,
-        endBatch,
-        maxUndoDepth,
-    };
-}

package/dist/esm/composables/useVirtualScroll.js

@@ -1,87 +0,0 @@
-import { ref, computed, watch, onUnmounted } from 'vue';
-import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
-/**
- * Manages virtual scrolling with RAF-throttled scroll handling and ResizeObserver
- * for container height tracking. Uses core's computeVisibleRange for range calculation.
- */
-export function useVirtualScroll(params) {
-    const { totalRows, rowHeight, enabled, overscan = 5 } = params;
-    const containerRef = ref(null);
-    const scrollTop = ref(0);
-    const containerHeight = ref(0);
-    let rafId = 0;
-    let resizeObserver;
-    let prevObservedEl = null;
-    const visibleRange = computed(() => {
-        if (!enabled.value) {
-            return { startIndex: 0, endIndex: totalRows.value - 1, offsetTop: 0, offsetBottom: 0 };
-        }
-        return computeVisibleRange(scrollTop.value, rowHeight, containerHeight.value, totalRows.value, overscan);
-    });
-    const totalHeight = computed(() => {
-        if (!enabled.value)
-            return 0;
-        return computeTotalHeight(totalRows.value, rowHeight);
-    });
-    const onScroll = () => {
-        if (!rafId) {
-            rafId = requestAnimationFrame(() => {
-                rafId = 0;
-                const el = containerRef.value;
-                if (el) {
-                    scrollTop.value = el.scrollTop;
-                }
-            });
-        }
-    };
-    const measure = () => {
-        const el = containerRef.value;
-        if (!el)
-            return;
-        containerHeight.value = el.clientHeight;
-    };
-    // Watch containerRef to attach/detach scroll listener and ResizeObserver.
-    // Track prevObservedEl to avoid re-observing the same element and to
-    // properly disconnect old observers before creating new ones.
-    watch(containerRef, (el) => {
-        if (el === prevObservedEl)
-            return; // skip if same element
-        // Teardown previous element
-        if (prevObservedEl) {
-            prevObservedEl.removeEventListener('scroll', onScroll);
-        }
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            resizeObserver = undefined;
-        }
-        prevObservedEl = el;
-        // Setup new element
-        if (el) {
-            el.addEventListener('scroll', onScroll, { passive: true });
-            if (typeof ResizeObserver !== 'undefined') {
-                resizeObserver = new ResizeObserver(measure);
-                resizeObserver.observe(el);
-            }
-            measure();
-            scrollTop.value = el.scrollTop;
-        }
-    });
-    onUnmounted(() => {
-        const el = containerRef.value;
-        if (el) {
-            el.removeEventListener('scroll', onScroll);
-        }
-        resizeObserver?.disconnect();
-        if (rafId) {
-            cancelAnimationFrame(rafId);
-            rafId = 0;
-        }
-    });
-    const scrollToRow = (index, align = 'start') => {
-        const el = containerRef.value;
-        if (!el)
-            return;
-        el.scrollTop = getScrollTopForRow(index, rowHeight, containerHeight.value, align);
-    };
-    return { containerRef, visibleRange, totalHeight, scrollToRow };
-}

package/dist/esm/types/columnTypes.js

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

package/dist/esm/types/dataGridTypes.js

@@ -1 +0,0 @@
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-core';

package/dist/esm/types/index.js

@@ -1 +0,0 @@
-export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './dataGridTypes';

package/dist/esm/utils/dataGridViewModel.js

@@ -1,23 +0,0 @@
-/**
- * View model helpers for Vue DataGridTable.
- * Pure functions live in @alaarab/ogrid-core. This file re-exports them
- * and adds Vue-specific helpers (getCellInteractionProps uses Vue event naming).
- */
-// Re-export everything from core's dataGridViewModel
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from '@alaarab/ogrid-core';
-export function getCellInteractionProps(descriptor, columnId, handlers) {
-    const base = {
-        'data-row-index': descriptor.rowIndex,
-        'data-col-index': descriptor.globalColIndex,
-        ...(descriptor.isInRange ? { 'data-in-range': 'true' } : {}),
-        tabindex: descriptor.isActive ? 0 : -1,
-        onMousedown: (e) => handlers.handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex),
-        onClick: () => handlers.setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }),
-        onContextmenu: (e) => handlers.handleCellContextMenu(e),
-    };
-    if (descriptor.canEditAny) {
-        base.role = 'button';
-        base.onDblclick = () => handlers.setEditingCell({ rowId: descriptor.rowId, columnId });
-    }
-    return base;
-}

package/dist/esm/utils/index.js

@@ -1 +0,0 @@
-export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';