@stonecrop/atable 0.6.1 → 0.6.3

package/dist/icons/stonecrop-ui-icon-delete.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path d="M32,64C14.35,64,0,49.65,0,32S14.35,0,32,0s32,14.35,32,32-14.35,32-32,32ZM32,4c-15.44,0-28,12.56-28,28s12.56,28,28,28,28-12.56,28-28S47.44,4,32,4Z" style="fill: #000; stroke-width: 0px;"/>
+  <polygon points="46.84 19.99 44.01 17.16 32 29.17 19.99 17.16 17.16 19.99 29.17 32 17.16 44.01 19.99 46.84 32 34.83 44.01 46.84 46.84 44.01 34.83 32 46.84 19.99" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/dist/icons/stonecrop-ui-icon-duplicate.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.67 70.67">
+  <path d="M68.67,16.67h-14.67V2c0-1.1-.9-2-2-2H2C.9,0,0,.9,0,2v50c0,1.1.9,2,2,2h14.67v14.67c0,1.1.9,2,2,2h50c1.1,0,2-.9,2-2V18.67c0-1.1-.9-2-2-2ZM4,4h46v46H4V4ZM66.67,66.67H20.67v-12.67h31.33c1.1,0,2-.9,2-2v-31.33h12.67v46Z" style="fill: #000; stroke-width: 0px;"/>
+  <polygon points="41 25 29 25 29 13 25 13 25 25 13 25 13 29 25 29 25 41 29 41 29 29 41 29 41 25" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/dist/icons/stonecrop-ui-icon-insert-above.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.6 61.51">
+  <rect y="43.84" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+  <rect y="22.17" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+  <g>
+    <polygon points="70.6 2.5 68.63 2.5 68.63 2 68.14 2 68.14 0 70.6 0 70.6 2.5" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M65.28,2h-2.86V0h2.86v2ZM59.57,2h-2.86V0h2.86v2ZM53.86,2h-2.86V0h2.86v2ZM48.15,2h-2.86V0h2.86v2ZM42.44,2h-2.86V0h2.86v2ZM36.73,2h-2.86V0h2.86v2ZM31.02,2h-2.86V0h2.86v2ZM25.31,2h-2.86V0h2.86v2ZM19.6,2h-2.86V0h2.86v2ZM13.89,2h-2.86V0h2.86v2ZM8.18,2h-2.86V0h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="1.97 2.5 0 2.5 0 0 2.47 0 2.47 2 1.97 2 1.97 2.5" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M1.97,13.43H0v-2.73h1.97v2.73ZM1.97,7.97H0v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="2.47 18.67 0 18.67 0 16.17 1.97 16.17 1.97 16.67 2.47 16.67 2.47 18.67" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M65.28,18.67h-2.86v-2h2.86v2ZM59.57,18.67h-2.86v-2h2.86v2ZM53.86,18.67h-2.86v-2h2.86v2ZM48.15,18.67h-2.86v-2h2.86v2ZM42.44,18.67h-2.86v-2h2.86v2ZM36.73,18.67h-2.86v-2h2.86v2ZM31.02,18.67h-2.86v-2h2.86v2ZM25.31,18.67h-2.86v-2h2.86v2ZM19.6,18.67h-2.86v-2h2.86v2ZM13.89,18.67h-2.86v-2h2.86v2ZM8.18,18.67h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="70.6 18.67 68.14 18.67 68.14 16.67 68.63 16.67 68.63 16.17 70.6 16.17 70.6 18.67" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M70.6,13.43h-1.97v-2.73h1.97v2.73ZM70.6,7.97h-1.97v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+  </g>
+</svg>

package/dist/icons/stonecrop-ui-icon-insert-below.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.6 61.51">
+  <g>
+    <polygon points="70.6 45.34 68.63 45.34 68.63 44.84 68.14 44.84 68.14 42.84 70.6 42.84 70.6 45.34" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M65.28,44.84h-2.86v-2h2.86v2ZM59.57,44.84h-2.86v-2h2.86v2ZM53.86,44.84h-2.86v-2h2.86v2ZM48.15,44.84h-2.86v-2h2.86v2ZM42.44,44.84h-2.86v-2h2.86v2ZM36.73,44.84h-2.86v-2h2.86v2ZM31.02,44.84h-2.86v-2h2.86v2ZM25.31,44.84h-2.86v-2h2.86v2ZM19.6,44.84h-2.86v-2h2.86v2ZM13.89,44.84h-2.86v-2h2.86v2ZM8.18,44.84h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="1.97 45.34 0 45.34 0 42.84 2.47 42.84 2.47 44.84 1.97 44.84 1.97 45.34" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M1.97,56.27H0v-2.73h1.97v2.73ZM1.97,50.81H0v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="2.47 61.51 0 61.51 0 59.01 1.97 59.01 1.97 59.51 2.47 59.51 2.47 61.51" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M65.28,61.51h-2.86v-2h2.86v2ZM59.57,61.51h-2.86v-2h2.86v2ZM53.86,61.51h-2.86v-2h2.86v2ZM48.15,61.51h-2.86v-2h2.86v2ZM42.44,61.51h-2.86v-2h2.86v2ZM36.73,61.51h-2.86v-2h2.86v2ZM31.02,61.51h-2.86v-2h2.86v2ZM25.31,61.51h-2.86v-2h2.86v2ZM19.6,61.51h-2.86v-2h2.86v2ZM13.89,61.51h-2.86v-2h2.86v2ZM8.18,61.51h-2.86v-2h2.86v2Z" style="fill: #000; stroke-width: 0px;"/>
+    <polygon points="70.6 61.51 68.14 61.51 68.14 59.51 68.63 59.51 68.63 59.01 70.6 59.01 70.6 61.51" style="fill: #000; stroke-width: 0px;"/>
+    <path d="M70.6,56.27h-1.97v-2.73h1.97v2.73ZM70.6,50.81h-1.97v-2.73h1.97v2.73Z" style="fill: #000; stroke-width: 0px;"/>
+  </g>
+  <rect y="21.67" width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+  <rect width="70.6" height="17.67" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/dist/icons/stonecrop-ui-icon-move.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.67 70.64">
+  <path d="M70.08,33.9l-9.75-9.75-2.83,2.83,6.33,6.33h-26.51V6.81l6.33,6.33,2.83-2.83L36.75.56c-.75-.75-2.08-.75-2.83,0l-9.75,9.75,2.83,2.83,6.33-6.33v26.5H6.83l6.33-6.33-2.83-2.83L.59,33.9c-.38.38-.59.88-.59,1.41s.21,1.04.59,1.41l9.75,9.75,2.83-2.83-6.33-6.33h26.5v26.51l-6.33-6.33-2.83,2.83,9.75,9.75c.38.38.88.59,1.41.59s1.04-.21,1.41-.59l9.75-9.75-2.83-2.83-6.33,6.33v-26.51h26.51l-6.33,6.33,2.83,2.83,9.75-9.75c.38-.38.59-.88.59-1.41s-.21-1.04-.59-1.41Z" style="fill: #000; stroke-width: 0px;"/>
+</svg>

package/dist/src/index.js

@@ -0,0 +1,27 @@
+import ACell from './components/ACell.vue';
+import AExpansionRow from './components/AExpansionRow.vue';
+import AGanttCell from './components/AGanttCell.vue';
+import ARow from './components/ARow.vue';
+import ATable from './components/ATable.vue';
+import ATableHeader from './components/ATableHeader.vue';
+import ATableLoading from './components/ATableLoading.vue';
+import ATableLoadingBar from './components/ATableLoadingBar.vue';
+import ATableModal from './components/ATableModal.vue';
+export { createTableStore } from './stores/table';
+/**
+ * Install all ATable components
+ * @param app - Vue app instance
+ * @public
+ */
+function install(app /* options */) {
+    app.component('ACell', ACell);
+    app.component('AExpansionRow', AExpansionRow);
+    app.component('AGanttCell', AGanttCell);
+    app.component('ARow', ARow);
+    app.component('ATable', ATable);
+    app.component('ATableHeader', ATableHeader);
+    app.component('ATableLoading', ATableLoading);
+    app.component('ATableLoadingBar', ATableLoadingBar);
+    app.component('ATableModal', ATableModal);
+}
+export { ACell, AExpansionRow, AGanttCell, ARow, ATable, ATableHeader, ATableLoading, ATableLoadingBar, ATableModal, install, };

package/dist/src/stores/table.js

@@ -0,0 +1,403 @@
+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}`, () => {
+        // util functions
+        const createTableObject = () => {
+            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 createDisplayObject = (forceRecalculate = false) => {
+            const defaultDisplay = [Object.assign({}, { rowModified: false })];
+            // Only use provided display on initial load, not on reactive updates
+            if (!forceRecalculate && initData.display) {
+                if ('0:0' in initData.display) {
+                    return initData.display;
+                }
+                // else if ('default' in display) {
+                // 	// TODO: (typing) what is the possible input here for 'default'?
+                // 	defaultDisplay = display.default
+                // }
+            }
+            // 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);
+                }
+            }
+            for (let rowIndex = 0; rowIndex < rows.value.length; rowIndex++) {
+                const row = rows.value[rowIndex];
+                defaultDisplay[rowIndex] = {
+                    childrenOpen: false,
+                    expanded: false,
+                    indent: row.indent || 0,
+                    isParent: parents.has(rowIndex),
+                    isRoot: row.parent === null || row.parent === undefined,
+                    rowModified: false,
+                    open: row.parent === null || row.parent === undefined,
+                    parent: row.parent,
+                };
+            }
+            return defaultDisplay;
+        };
+        // state
+        const columns = ref(initData.columns);
+        const rows = ref(initData.rows);
+        const config = ref(initData.config || {});
+        const table = ref(initData.table || createTableObject());
+        // Track row modifications and expand states separately from the computed display
+        const rowModifications = ref({});
+        const rowExpandStates = ref({});
+        // Use a ref instead of computed to have more control over reactivity
+        const displayData = ref([]);
+        const calculateDisplay = () => {
+            // Always force recalculation when this method is called
+            const baseDisplay = createDisplayObject(true);
+            // 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) {
+                for (let i = 0; i < baseDisplay.length; i++) {
+                    const row = baseDisplay[i];
+                    if (!row.isRoot && row.parent !== null && row.parent !== undefined) {
+                        // Child row is 'open' if its parent's childrenOpen is true
+                        const parentIndex = row.parent;
+                        if (parentIndex >= 0 && parentIndex < baseDisplay.length) {
+                            baseDisplay[i].open = baseDisplay[parentIndex].childrenOpen || false;
+                        }
+                    }
+                }
+            }
+            displayData.value = baseDisplay;
+            return baseDisplay;
+        };
+        const display = computed(() => displayData.value);
+        const modal = ref(initData.modal || { visible: false });
+        const updates = ref({});
+        const ganttBars = ref([]);
+        const connectionHandles = ref([]);
+        const connectionPaths = 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 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);
+        // Initialize display data after all computed properties are defined
+        calculateDisplay();
+        // 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,
+            };
+            // Recalculate display when rows change
+            calculateDisplay();
+        };
+        const updateRows = (newRows) => {
+            rows.value = newRows;
+            calculateDisplay();
+        };
+        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) {
+                    for (let index = 0; index < rows.value.length; index++) {
+                        if (display.value[index].parent === rowIndex) {
+                            const childState = rowExpandStates.value[index] || {};
+                            rowExpandStates.value[index] = {
+                                ...childState,
+                                childrenOpen: false
+                            };
+                            toggleRowExpand(index);
+                        }
+                    }
+                }
+            }
+            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 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
+                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) {
+                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);
+        };
+        return {
+            // state
+            columns,
+            config,
+            connectionHandles,
+            connectionPaths,
+            display,
+            ganttBars,
+            modal,
+            rows,
+            table,
+            updates,
+            // getters
+            hasPinnedColumns,
+            isGanttView,
+            isTreeView,
+            numberedRowWidth,
+            zeroColumn,
+            // actions
+            closeModal,
+            createConnection,
+            deleteConnection,
+            getCellData,
+            getCellDisplayValue,
+            getConnectionsForBar,
+            getFormattedValue,
+            getHandlesForBar,
+            getHeaderCellStyle,
+            getIndent,
+            getRowExpandSymbol,
+            isRowGantt,
+            isRowVisible,
+            registerConnectionHandle,
+            registerGanttBar,
+            resizeColumn,
+            setCellData,
+            setCellText,
+            toggleRowExpand,
+            unregisterConnectionHandle,
+            unregisterGanttBar,
+            updateGanttBar,
+            updateRows,
+        };
+    });
+    return createStore();
+};

package/dist/src/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.52.10"
+      "packageVersion": "7.55.2"
     }
   ]
 }

package/dist/src/utils.js

@@ -0,0 +1,7 @@
+export const isHtmlString = (htmlString) => {
+    const $document = new DOMParser().parseFromString(htmlString, 'text/html');
+    return Array.from($document.body.childNodes).some(node => node.nodeType === 1);
+};
+export const generateHash = (length = 8) => {
+    return Array.from({ length }, () => Math.floor(Math.random() * 16).toString(16)).join('');
+};

package/dist/tests/display.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=display.d.ts.map

package/dist/tests/display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../tests/display.ts"],"names":[],"mappings":""}

package/dist/tests/display.js

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import { createTableStore } from '../src/stores/table';
+describe('Display reactivity fix', () => {
+    const mockColumns = [
+        { name: 'id', label: 'ID' },
+        { name: 'name', label: 'Name' }
+    ];
+    beforeEach(() => {
+        setActivePinia(createPinia());
+    });
+    it('should update display properties when rows change', () => {
+        // Initial data with parent-child relationships
+        const initialRows = [
+            { id: 1, name: 'Parent 1', parent: undefined },
+            { id: 2, name: 'Child 1.1', parent: 0 },
+            { id: 3, name: 'Child 1.2', parent: 0 }
+        ];
+        const store = createTableStore({ columns: mockColumns, rows: initialRows });
+        // Check initial display state
+        expect(store.display[0].isRoot).toBe(true);
+        expect(store.display[0].isParent).toBe(true);
+        expect(store.display[1].isRoot).toBe(false);
+        expect(store.display[1].parent).toBe(0);
+        expect(store.display[2].isRoot).toBe(false);
+        expect(store.display[2].parent).toBe(0);
+        // Change the rows data - modify parent relationships
+        const newRows = [
+            { id: 1, name: 'Parent 1', parent: undefined },
+            { id: 2, name: 'Child 1.1', parent: 0 },
+            { id: 3, name: 'New Root', parent: undefined }, // Changed from child to root
+            { id: 4, name: 'New Child', parent: 2 } // New child of previous child
+        ];
+        // Update rows using the new method
+        store.updateRows(newRows);
+        // Check that display state has been recalculated
+        expect(store.display[0].isRoot).toBe(true);
+        expect(store.display[0].isParent).toBe(true);
+        expect(store.display[1].isRoot).toBe(false);
+        expect(store.display[1].isParent).toBe(false); // No children
+        expect(store.display[1].parent).toBe(0);
+        expect(store.display[2].isRoot).toBe(true); // Now a root
+        expect(store.display[2].isParent).toBe(true); // Has a child (row 3)
+        expect(store.display[2].parent).toBeUndefined(); // No parent
+        expect(store.display[3].isRoot).toBe(false);
+        expect(store.display[3].parent).toBe(2);
+    });
+    it('should preserve row modifications and expand states across data changes', () => {
+        const initialRows = [
+            { id: 1, name: 'Parent 1', parent: undefined },
+            { id: 2, name: 'Child 1.1', parent: 0 }
+        ];
+        const store = createTableStore({ columns: mockColumns, rows: initialRows });
+        // Modify a cell to mark row as modified
+        store.setCellData(1, 0, 'Modified Parent');
+        expect(store.display[0].rowModified).toBe(true);
+        // Toggle row expansion (for tree view)
+        store.toggleRowExpand(0);
+        // Now change the rows data but keep the same structure
+        const newRows = [
+            { id: 1, name: 'Parent 1 Updated', parent: undefined },
+            { id: 2, name: 'Child 1.1 Updated', parent: 0 }
+        ];
+        store.updateRows(newRows);
+        // Row modifications and expand states should be preserved
+        expect(store.display[0].rowModified).toBe(true);
+        // The expansion state should be preserved too
+        expect(store.display[0].childrenOpen).toBeDefined();
+    });
+});

package/dist/themes/default.css

@@ -0,0 +1 @@
+/* old table styles */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -42,8 +42,8 @@
     "@vueuse/core": "^14.0.0",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
-    "@stonecrop/themes": "0.6.1",
-    "@stonecrop/utilities": "0.6.1"
+    "@stonecrop/themes": "0.6.3",
+    "@stonecrop/utilities": "0.6.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.38.0",