@stonecrop/atable 0.14.0 → 0.16.0

package/dist/stores/table.js

@@ -1,795 +0,0 @@
-import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
-import { generateHash } from '../utils';
-/**
- * Create a table store
- * @param initData - Initial data for the table store
- * @returns table store instance
- * @public
- */
-export const createTableStore = (initData) => {
-    const id = initData.id || generateHash();
-    const createStore = defineStore(`table-${id}`, () => {
-        const createDisplayObject = () => {
-            const defaultDisplay = [Object.assign({}, { rowModified: false })];
-            // TODO: (typing) is this type correct for the parent set?
-            const parents = new Set();
-            for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
-                const row = rows.value[rowIndex];
-                if (row.parent !== null && row.parent !== undefined) {
-                    parents.add(row.parent);
-                }
-            }
-            // Helper function to check if a row has gantt data
-            const hasGanttData = (rowIndex) => {
-                return rows.value[rowIndex]?.gantt !== undefined;
-            };
-            // Helper function to check if any descendant has gantt data
-            const hasGanttDescendant = (rowIndex) => {
-                for (let i = 0; i < rows.value.length; i++) {
-                    if (rows.value[i].parent === rowIndex) {
-                        if (hasGanttData(i) || hasGanttDescendant(i)) {
-                            return true;
-                        }
-                    }
-                }
-                return false;
-            };
-            // Helper function to determine if children should be open based on expansion mode
-            const shouldChildrenBeOpen = (rowIndex) => {
-                const currentConfig = config.value;
-                const expansionMode = currentConfig.view === 'tree' || currentConfig.view === 'tree-gantt'
-                    ? currentConfig.defaultTreeExpansion
-                    : undefined;
-                if (!expansionMode)
-                    return true; // Default behavior - start expanded (leaf mode)
-                switch (expansionMode) {
-                    case 'root':
-                        return false; // Only root nodes are visible, all children start collapsed
-                    case 'branch':
-                        // Only expand if this node leads to gantt nodes OR if this node itself has gantt data AND has gantt children
-                        return hasGanttDescendant(rowIndex);
-                    case 'leaf':
-                        return true; // All nodes should be expanded
-                    default:
-                        return true; // Default to expanded if unknown mode
-                }
-            };
-            for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
-                const row = rows.value[rowIndex];
-                const isRootNode = row.parent === null || row.parent === undefined;
-                const isParentNode = parents.has(rowIndex);
-                defaultDisplay[rowIndex] = {
-                    childrenOpen: shouldChildrenBeOpen(rowIndex),
-                    expanded: false,
-                    indent: row.indent || 0,
-                    isParent: isParentNode,
-                    isRoot: isRootNode,
-                    rowModified: false,
-                    open: isRootNode, // This will be recalculated later for non-root nodes
-                    parent: row.parent,
-                };
-            }
-            return defaultDisplay;
-        };
-        // state
-        const columns = ref(initData.columns);
-        const rows = ref(initData.rows);
-        const config = ref(initData.config || {});
-        // Track row modifications and expand states separately from the computed display
-        const rowModifications = ref({});
-        const rowExpandStates = ref({});
-        const table = computed(() => {
-            const table = {};
-            for (const [colIndex, column] of columns.value.entries()) {
-                for (const [rowIndex, row] of rows.value.entries()) {
-                    table[`${colIndex}:${rowIndex}`] = row[column.name];
-                }
-            }
-            return table;
-        });
-        const display = computed({
-            get: () => {
-                const baseDisplay = createDisplayObject();
-                // Apply persistent modifications and expand states
-                for (let i = 0; i < baseDisplay.length; i++) {
-                    if (rowModifications.value[i]) {
-                        baseDisplay[i].rowModified = rowModifications.value[i];
-                    }
-                    if (rowExpandStates.value[i]) {
-                        if (rowExpandStates.value[i].childrenOpen !== undefined) {
-                            baseDisplay[i].childrenOpen = rowExpandStates.value[i].childrenOpen;
-                        }
-                        if (rowExpandStates.value[i].expanded !== undefined) {
-                            baseDisplay[i].expanded = rowExpandStates.value[i].expanded;
-                        }
-                    }
-                }
-                // Calculate 'open' property for tree view based on parent's childrenOpen state
-                if (isTreeView.value) {
-                    // Helper function to check if all ancestors are open
-                    const isNodeOpen = (rowIndex, display) => {
-                        const row = display[rowIndex];
-                        if (row.isRoot) {
-                            return true; // Root nodes are always open
-                        }
-                        if (row.parent === null || row.parent === undefined) {
-                            return true;
-                        }
-                        const parentIndex = row.parent;
-                        if (parentIndex < 0 || parentIndex >= display.length) {
-                            return false;
-                        }
-                        const parent = display[parentIndex];
-                        // Node is open if parent's children are open AND parent itself is open
-                        return (parent.childrenOpen || false) && isNodeOpen(parentIndex, display);
-                    };
-                    for (let i = 0; i < baseDisplay.length; i++) {
-                        const row = baseDisplay[i];
-                        if (!row.isRoot) {
-                            baseDisplay[i].open = isNodeOpen(i, baseDisplay);
-                        }
-                    }
-                }
-                return baseDisplay;
-            },
-            set: (newDisplay) => {
-                // Only update if the new display is different from the current one; also avoids recursive updates
-                if (JSON.stringify(newDisplay) !== JSON.stringify(display.value)) {
-                    display.value = newDisplay;
-                }
-            },
-        });
-        const modal = ref(initData.modal || { visible: false });
-        const updates = ref({});
-        const ganttBars = ref([]);
-        const connectionHandles = ref([]);
-        const connectionPaths = ref([]);
-        const sortState = ref({
-            column: null,
-            direction: null,
-        });
-        const filterState = ref({});
-        // getters
-        const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned));
-        const isGanttView = computed(() => config.value.view === 'gantt' || config.value.view === 'tree-gantt');
-        const isTreeView = computed(() => config.value.view === 'tree' || config.value.view === 'tree-gantt');
-        const isDependencyGraphEnabled = computed(() => {
-            const currentConfig = config.value;
-            return currentConfig.view === 'gantt' || currentConfig.view === 'tree-gantt'
-                ? currentConfig.dependencyGraph !== false
-                : true;
-        });
-        const numberedRowWidth = computed(() => {
-            const indent = Math.ceil(rows.value.length / 100 + 1);
-            return `${indent}ch`;
-        });
-        const zeroColumn = computed(() => config.value.view ? ['list', 'tree', 'tree-gantt', 'list-expansion'].includes(config.value.view) : false);
-        const filteredRows = computed(() => {
-            let filtered = rows.value.map((row, originalIndex) => ({
-                ...row,
-                originalIndex,
-            }));
-            // Apply filters
-            Object.entries(filterState.value).forEach(([colIndexStr, filter]) => {
-                const colIndex = parseInt(colIndexStr);
-                const column = columns.value[colIndex];
-                if (!column)
-                    return;
-                // Skip if filter has no value (except for dateRange and checkbox which can have different value structures)
-                const hasFilterValue = filter.value ||
-                    filter.startValue ||
-                    filter.endValue ||
-                    (column.filterType === 'checkbox' && filter.value !== undefined);
-                if (!hasFilterValue)
-                    return;
-                filtered = filtered.filter(row => {
-                    const cellValue = row[column.name];
-                    return applyFilter(cellValue, filter, column);
-                });
-            });
-            // Apply sorting if active
-            if (sortState.value.column !== null && sortState.value.direction) {
-                const column = columns.value[sortState.value.column];
-                const direction = sortState.value.direction;
-                filtered.sort((a, b) => {
-                    let aVal = a[column.name];
-                    let bVal = b[column.name];
-                    if (aVal === null || aVal === undefined)
-                        aVal = '';
-                    if (bVal === null || bVal === undefined)
-                        bVal = '';
-                    const aNum = Number(aVal);
-                    const bNum = Number(bVal);
-                    const isNumeric = !isNaN(aNum) && !isNaN(bNum) && aVal !== '' && bVal !== '';
-                    if (isNumeric) {
-                        return direction === 'asc' ? aNum - bNum : bNum - aNum;
-                    }
-                    else {
-                        const aStr = String(aVal).toLowerCase();
-                        const bStr = String(bVal).toLowerCase();
-                        return direction === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
-                    }
-                });
-            }
-            return filtered;
-        });
-        // actions
-        const getCellData = (colIndex, rowIndex) => table.value[`${colIndex}:${rowIndex}`];
-        const setCellData = (colIndex, rowIndex, value) => {
-            const index = `${colIndex}:${rowIndex}`;
-            const col = columns.value[colIndex];
-            if (table.value[index] !== value) {
-                rowModifications.value[rowIndex] = true;
-            }
-            table.value[index] = value;
-            // Create a new row object to ensure reactivity
-            rows.value[rowIndex] = {
-                ...rows.value[rowIndex],
-                [col.name]: value,
-            };
-        };
-        const updateRows = (newRows) => {
-            rows.value = newRows;
-        };
-        const setCellText = (colIndex, rowIndex, value) => {
-            const index = `${colIndex}:${rowIndex}`;
-            if (table.value[index] !== value) {
-                rowModifications.value[rowIndex] = true;
-                updates.value[index] = value;
-            }
-        };
-        const getHeaderCellStyle = (column) => {
-            const isLastCol = columns.value.indexOf(column) === columns.value.length - 1;
-            // if the table is full width, the last column should not be resizable;
-            // ref: https://github.com/agritheory/stonecrop/pull/196#issuecomment-2503762641
-            const isResizable = config.value.fullWidth ? column.resizable && !isLastCol : column.resizable;
-            return {
-                width: column.width || '40ch',
-                textAlign: column.align || 'center',
-                ...(isResizable && {
-                    resize: 'horizontal',
-                    overflow: 'hidden',
-                    whiteSpace: 'nowrap',
-                }),
-            };
-        };
-        const resizeColumn = (colIndex, newWidth) => {
-            if (colIndex < 0 || colIndex >= columns.value.length)
-                return;
-            const minWidth = 40;
-            const finalWidth = Math.max(newWidth, minWidth);
-            columns.value[colIndex] = {
-                ...columns.value[colIndex],
-                width: `${finalWidth}px`,
-            };
-        };
-        const isRowGantt = (rowIndex) => {
-            const row = rows.value[rowIndex];
-            return isGanttView.value && row.gantt !== undefined;
-        };
-        const isRowVisible = (rowIndex) => {
-            return !isTreeView.value || display.value[rowIndex].isRoot || display.value[rowIndex].open;
-        };
-        const getRowExpandSymbol = (rowIndex) => {
-            if (!isTreeView.value && config.value.view !== 'list-expansion') {
-                return '';
-            }
-            if (isTreeView.value && (display.value[rowIndex].isRoot || display.value[rowIndex].isParent)) {
-                return display.value[rowIndex].childrenOpen ? '▼' : '►';
-            }
-            if (config.value.view === 'list-expansion') {
-                return display.value[rowIndex].expanded ? '▼' : '►';
-            }
-            return '';
-        };
-        const toggleRowExpand = (rowIndex) => {
-            if (isTreeView.value) {
-                const currentState = rowExpandStates.value[rowIndex] || {};
-                const currentChildrenOpen = currentState.childrenOpen ?? display.value[rowIndex].childrenOpen;
-                const newChildrenOpen = !currentChildrenOpen;
-                rowExpandStates.value[rowIndex] = {
-                    ...currentState,
-                    childrenOpen: newChildrenOpen,
-                };
-                // If we're closing, recursively close all descendant nodes
-                if (!newChildrenOpen) {
-                    closeDescendants(rowIndex);
-                }
-            }
-            else if (config.value.view === 'list-expansion') {
-                const currentState = rowExpandStates.value[rowIndex] || {};
-                const currentExpanded = currentState.expanded ?? display.value[rowIndex].expanded;
-                rowExpandStates.value[rowIndex] = {
-                    ...currentState,
-                    expanded: !currentExpanded,
-                };
-            }
-        };
-        const closeDescendants = (parentRowIndex) => {
-            for (let index = 0; index < rows.value.length; index++) {
-                if (display.value[index].parent === parentRowIndex) {
-                    const childState = rowExpandStates.value[index] || {};
-                    rowExpandStates.value[index] = {
-                        ...childState,
-                        childrenOpen: false,
-                    };
-                    // Recursively close this child's descendants
-                    closeDescendants(index);
-                }
-            }
-        };
-        const getCellDisplayValue = (colIndex, rowIndex) => {
-            const cellData = getCellData(colIndex, rowIndex);
-            return getFormattedValue(colIndex, rowIndex, cellData);
-        };
-        const getFormattedValue = (colIndex, rowIndex, value) => {
-            const column = columns.value[colIndex];
-            const row = rows.value[rowIndex];
-            const format = column.format;
-            if (!format) {
-                return value;
-            }
-            if (typeof format === 'function') {
-                return format(value, { table: table.value, row, column });
-            }
-            else if (typeof format === 'string') {
-                // parse format function from string
-                // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
-                const formatFn = Function(`"use strict";return (${format})`)();
-                return formatFn(value, { table: table.value, row, column });
-            }
-            return value;
-        };
-        const closeModal = (event) => {
-            if (!(event.target instanceof Node)) {
-                // if the target is not a node, it's probably a custom click event to Document or Window
-                // err on the side of closing the modal in that case
-                if (modal.value.visible)
-                    modal.value.visible = false;
-            }
-            else if (!modal.value.parent?.contains(event.target)) {
-                if (modal.value.visible)
-                    modal.value.visible = false;
-            }
-        };
-        const getIndent = (colIndex, indentLevel) => {
-            if (indentLevel && colIndex === 0 && indentLevel > 0) {
-                return `${indentLevel}ch`;
-            }
-            else {
-                return 'inherit';
-            }
-        };
-        const updateGanttBar = (event) => {
-            // update the local gantt bar cache
-            const ganttBar = rows.value[event.rowIndex]?.gantt;
-            if (ganttBar) {
-                if (event.type === 'resize') {
-                    if (event.edge === 'start') {
-                        ganttBar.startIndex = event.newStart;
-                        ganttBar.endIndex = event.end;
-                        ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
-                    }
-                    else if (event.edge === 'end') {
-                        ganttBar.startIndex = event.start;
-                        ganttBar.endIndex = event.newEnd;
-                        ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
-                    }
-                }
-                else if (event.type === 'bar') {
-                    ganttBar.startIndex = event.newStart;
-                    ganttBar.endIndex = event.newEnd;
-                    ganttBar.colspan = ganttBar.endIndex - ganttBar.startIndex;
-                }
-            }
-        };
-        const registerGanttBar = (barInfo) => {
-            const existingIndex = ganttBars.value.findIndex(bar => bar.id === barInfo.id);
-            if (existingIndex >= 0) {
-                // @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
-                ganttBars.value[existingIndex] = barInfo;
-            }
-            else {
-                // @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
-                ganttBars.value.push(barInfo);
-            }
-        };
-        const unregisterGanttBar = (barId) => {
-            const index = ganttBars.value.findIndex(bar => bar.id === barId);
-            if (index >= 0) {
-                ganttBars.value.splice(index, 1);
-            }
-        };
-        const registerConnectionHandle = (handleInfo) => {
-            const existingIndex = connectionHandles.value.findIndex(handle => handle.id === handleInfo.id);
-            if (existingIndex >= 0) {
-                // @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
-                connectionHandles.value[existingIndex] = handleInfo;
-            }
-            else {
-                // @ts-expect-error TODO: for some reason, the IDE is expecting an unref'd value
-                connectionHandles.value.push(handleInfo);
-            }
-        };
-        const unregisterConnectionHandle = (handleId) => {
-            const index = connectionHandles.value.findIndex(handle => handle.id === handleId);
-            if (index >= 0) {
-                connectionHandles.value.splice(index, 1);
-            }
-        };
-        const createConnection = (fromHandleId, toHandleId, options) => {
-            const fromHandle = connectionHandles.value.find(h => h.id === fromHandleId);
-            const toHandle = connectionHandles.value.find(h => h.id === toHandleId);
-            if (!fromHandle || !toHandle) {
-                // eslint-disable-next-line no-console
-                console.warn('Cannot create connection: handle not found');
-                return null;
-            }
-            const connection = {
-                id: `connection-${fromHandleId}-${toHandleId}`,
-                from: {
-                    barId: fromHandle.barId,
-                    side: fromHandle.side,
-                },
-                to: {
-                    barId: toHandle.barId,
-                    side: toHandle.side,
-                },
-                style: options?.style,
-                label: options?.label,
-            };
-            connectionPaths.value.push(connection);
-            return connection;
-        };
-        const deleteConnection = (connectionId) => {
-            const index = connectionPaths.value.findIndex(conn => conn.id === connectionId);
-            if (index >= 0) {
-                connectionPaths.value.splice(index, 1);
-                return true;
-            }
-            return false;
-        };
-        const getConnectionsForBar = (barId) => {
-            return connectionPaths.value.filter(conn => conn.from.barId === barId || conn.to.barId === barId);
-        };
-        const getHandlesForBar = (barId) => {
-            return connectionHandles.value.filter(handle => handle.barId === barId);
-        };
-        const sortByColumn = (colIndex) => {
-            const column = columns.value[colIndex];
-            if (column.sortable === false)
-                return;
-            let newDirection;
-            if (sortState.value.column === colIndex) {
-                if (sortState.value.direction === 'asc') {
-                    newDirection = 'desc';
-                }
-                else {
-                    newDirection = 'asc';
-                }
-            }
-            else {
-                newDirection = 'asc';
-            }
-            sortState.value.column = colIndex;
-            sortState.value.direction = newDirection;
-            // Note: The actual sorting is now handled in the filteredRows computed property
-            // This ensures that sorting works on filtered data without modifying the original rows
-        };
-        const applyFilter = (cellValue, filter, column) => {
-            const filterType = column.filterType || 'text';
-            const value = filter.value;
-            if (!value && filterType !== 'dateRange' && filterType !== 'checkbox')
-                return true;
-            switch (filterType) {
-                case 'text': {
-                    // Handle objects with nested properties
-                    let searchableText = '';
-                    if (typeof cellValue === 'object' && cellValue !== null) {
-                        // If it's an object, search in all string values
-                        searchableText = Object.values(cellValue).join(' ');
-                    }
-                    else {
-                        searchableText = String(cellValue || '');
-                    }
-                    return searchableText.toLowerCase().includes(String(value).toLowerCase());
-                }
-                case 'number': {
-                    const numValue = Number(cellValue);
-                    const filterNum = Number(value);
-                    return !isNaN(numValue) && !isNaN(filterNum) && numValue === filterNum;
-                }
-                case 'select':
-                    return cellValue === value;
-                case 'checkbox':
-                    // For checkbox filter, if checked (true), show only truthy values
-                    // If unchecked (false/undefined), show all values
-                    if (value === true) {
-                        return !!cellValue;
-                    }
-                    return true;
-                case 'date': {
-                    // Handle both timestamp numbers and date strings
-                    let cellDate;
-                    if (typeof cellValue === 'number') {
-                        // Apply the same year transformation as in the format function
-                        const originalDate = new Date(cellValue);
-                        const currentYear = new Date().getFullYear();
-                        cellDate = new Date(currentYear, originalDate.getMonth(), originalDate.getDate());
-                    }
-                    else {
-                        cellDate = new Date(String(cellValue));
-                    }
-                    const filterDate = new Date(String(value));
-                    return cellDate.toDateString() === filterDate.toDateString();
-                }
-                case 'dateRange': {
-                    const startValue = filter.startValue;
-                    const endValue = filter.endValue;
-                    if (!startValue && !endValue)
-                        return true;
-                    // Handle both timestamp numbers and date strings
-                    let cellDateRange;
-                    if (typeof cellValue === 'number') {
-                        // Apply the same year transformation as in the format function
-                        const originalDate = new Date(cellValue);
-                        const currentYear = new Date().getFullYear();
-                        cellDateRange = new Date(currentYear, originalDate.getMonth(), originalDate.getDate());
-                    }
-                    else {
-                        cellDateRange = new Date(String(cellValue));
-                    }
-                    if (startValue && cellDateRange < new Date(String(startValue)))
-                        return false;
-                    if (endValue && cellDateRange > new Date(String(endValue)))
-                        return false;
-                    return true;
-                }
-                default:
-                    return true;
-            }
-        };
-        const setFilter = (colIndex, filter) => {
-            if (!filter.value && !filter.startValue && !filter.endValue) {
-                // Remove filter if empty
-                delete filterState.value[colIndex];
-            }
-            else {
-                filterState.value[colIndex] = filter;
-            }
-        };
-        const clearFilter = (colIndex) => {
-            delete filterState.value[colIndex];
-        };
-        // Row action methods
-        /**
-         * Add a new row to the table.
-         * @param rowData - Optional partial row data to initialize the new row with
-         * @param position - Where to insert the row: 'start', 'end', or a specific index
-         * @returns The index of the newly added row
-         */
-        const addRow = (rowData, position = 'end') => {
-            // Create a new row with default empty values for each column
-            const newRow = {};
-            for (const column of columns.value) {
-                newRow[column.name] = '';
-            }
-            // Merge in any provided row data
-            if (rowData) {
-                Object.assign(newRow, rowData);
-            }
-            let insertIndex;
-            if (position === 'start') {
-                insertIndex = 0;
-                rows.value.unshift(newRow);
-            }
-            else if (position === 'end') {
-                insertIndex = rows.value.length;
-                rows.value.push(newRow);
-            }
-            else {
-                insertIndex = Math.max(0, Math.min(position, rows.value.length));
-                rows.value.splice(insertIndex, 0, newRow);
-            }
-            return insertIndex;
-        };
-        /**
-         * Delete a row from the table.
-         * @param rowIndex - The index of the row to delete
-         * @returns The deleted row, or null if the index was invalid
-         */
-        const deleteRow = (rowIndex) => {
-            if (rowIndex < 0 || rowIndex >= rows.value.length) {
-                return null;
-            }
-            const [deletedRow] = rows.value.splice(rowIndex, 1);
-            // Clean up row modifications tracking for the deleted row
-            delete rowModifications.value[rowIndex];
-            delete rowExpandStates.value[rowIndex];
-            // Shift modification/expand state indices for rows after the deleted one
-            const newModifications = {};
-            const newExpandStates = {};
-            for (const [key, value] of Object.entries(rowModifications.value)) {
-                const idx = parseInt(key);
-                if (idx > rowIndex) {
-                    newModifications[idx - 1] = value;
-                }
-                else {
-                    newModifications[idx] = value;
-                }
-            }
-            for (const [key, value] of Object.entries(rowExpandStates.value)) {
-                const idx = parseInt(key);
-                if (idx > rowIndex) {
-                    newExpandStates[idx - 1] = value;
-                }
-                else {
-                    newExpandStates[idx] = value;
-                }
-            }
-            rowModifications.value = newModifications;
-            rowExpandStates.value = newExpandStates;
-            return deletedRow;
-        };
-        /**
-         * Duplicate a row in the table.
-         * @param rowIndex - The index of the row to duplicate
-         * @returns The index of the new duplicated row, or -1 if the index was invalid
-         */
-        const duplicateRow = (rowIndex) => {
-            if (rowIndex < 0 || rowIndex >= rows.value.length) {
-                return -1;
-            }
-            // Deep clone the row data
-            const originalRow = rows.value[rowIndex];
-            const duplicatedRow = JSON.parse(JSON.stringify(originalRow));
-            // Insert the duplicated row after the original
-            const newIndex = rowIndex + 1;
-            rows.value.splice(newIndex, 0, duplicatedRow);
-            return newIndex;
-        };
-        /**
-         * Insert a new row above the specified row.
-         * @param rowIndex - The index of the row to insert above
-         * @param rowData - Optional partial row data to initialize the new row with
-         * @returns The index of the newly inserted row
-         */
-        const insertRowAbove = (rowIndex, rowData) => {
-            const insertIndex = Math.max(0, rowIndex);
-            return addRow(rowData, insertIndex);
-        };
-        /**
-         * Insert a new row below the specified row.
-         * @param rowIndex - The index of the row to insert below
-         * @param rowData - Optional partial row data to initialize the new row with
-         * @returns The index of the newly inserted row
-         */
-        const insertRowBelow = (rowIndex, rowData) => {
-            const insertIndex = Math.min(rowIndex + 1, rows.value.length);
-            return addRow(rowData, insertIndex);
-        };
-        /**
-         * Move a row from one position to another.
-         * @param fromIndex - The current index of the row to move
-         * @param toIndex - The target index to move the row to
-         * @returns true if the move was successful, false otherwise
-         */
-        const moveRow = (fromIndex, toIndex) => {
-            // Validate indices
-            if (fromIndex < 0 ||
-                fromIndex >= rows.value.length ||
-                toIndex < 0 ||
-                toIndex >= rows.value.length ||
-                fromIndex === toIndex) {
-                return false;
-            }
-            // Remove the row from its current position
-            const [movedRow] = rows.value.splice(fromIndex, 1);
-            // Insert at the new position
-            rows.value.splice(toIndex, 0, movedRow);
-            // Update row modification and expand state indices
-            const newModifications = {};
-            const newExpandStates = {};
-            for (const [key, value] of Object.entries(rowModifications.value)) {
-                const idx = parseInt(key);
-                let newIdx = idx;
-                if (idx === fromIndex) {
-                    // The moved row
-                    newIdx = toIndex;
-                }
-                else if (fromIndex < toIndex) {
-                    // Moving down: rows between fromIndex and toIndex shift up
-                    if (idx > fromIndex && idx <= toIndex) {
-                        newIdx = idx - 1;
-                    }
-                }
-                else {
-                    // Moving up: rows between toIndex and fromIndex shift down
-                    if (idx >= toIndex && idx < fromIndex) {
-                        newIdx = idx + 1;
-                    }
-                }
-                newModifications[newIdx] = value;
-            }
-            for (const [key, value] of Object.entries(rowExpandStates.value)) {
-                const idx = parseInt(key);
-                let newIdx = idx;
-                if (idx === fromIndex) {
-                    newIdx = toIndex;
-                }
-                else if (fromIndex < toIndex) {
-                    if (idx > fromIndex && idx <= toIndex) {
-                        newIdx = idx - 1;
-                    }
-                }
-                else {
-                    if (idx >= toIndex && idx < fromIndex) {
-                        newIdx = idx + 1;
-                    }
-                }
-                newExpandStates[newIdx] = value;
-            }
-            rowModifications.value = newModifications;
-            rowExpandStates.value = newExpandStates;
-            return true;
-        };
-        return {
-            // state
-            columns,
-            config,
-            connectionHandles,
-            connectionPaths,
-            display,
-            filterState,
-            ganttBars,
-            modal,
-            rows,
-            sortState,
-            table,
-            updates,
-            // getters
-            filteredRows,
-            hasPinnedColumns,
-            isGanttView,
-            isTreeView,
-            isDependencyGraphEnabled,
-            numberedRowWidth,
-            zeroColumn,
-            // actions
-            addRow,
-            clearFilter,
-            closeModal,
-            createConnection,
-            deleteConnection,
-            deleteRow,
-            duplicateRow,
-            getCellData,
-            getCellDisplayValue,
-            getConnectionsForBar,
-            getFormattedValue,
-            getHandlesForBar,
-            getHeaderCellStyle,
-            getIndent,
-            getRowExpandSymbol,
-            insertRowAbove,
-            insertRowBelow,
-            isRowGantt,
-            isRowVisible,
-            moveRow,
-            registerConnectionHandle,
-            registerGanttBar,
-            resizeColumn,
-            setCellData,
-            setCellText,
-            setFilter,
-            sortByColumn,
-            toggleRowExpand,
-            unregisterConnectionHandle,
-            unregisterGanttBar,
-            updateGanttBar,
-            updateRows,
-        };
-    });
-    return createStore();
-};