@svgrid/grid 1.1.1 → 1.2.1

package/dist/svgrid.column-reorder.test.js

@@ -1,224 +0,0 @@
-/**
- * Component tests for engine-level column reorder. Mount a real
- * <SvGrid> with `enableColumnReorder={true}`, then exercise both
- * surfaces:
- *
- *   - Imperative: api.setColumnOrder() / getColumnOrder() reorders the
- *     DOM and fires onColumnOrderChange.
- *   - User drag: dispatch dragstart / dragover / drop events on header
- *     elements, assert the resulting DOM order matches the drop side.
- *   - Drop indicator: the hovered header gets `is-drag-target-before` /
- *     `is-drag-target-after` while a drag is in flight.
- *   - Headers carry `draggable=true` only when the prop is on.
- *   - Pin groups: reorder within a pin group is honored.
- */
-import { describe, expect, it } from 'vitest';
-import { mount, unmount } from 'svelte';
-import SvGrid from './SvGrid.svelte';
-import { columnFilteringFeature, createCoreRowModel, createFilteredRowModel, createSortedRowModel, rowSortingFeature, sortFns, tableFeatures, } from './index';
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature });
-const rows = [
-    { id: 'P-1', first: 'Ada', last: 'Lovelace', team: 'Research', salary: 145000 },
-    { id: 'P-2', first: 'Linus', last: 'Torvalds', team: 'Kernel', salary: 188000 },
-    { id: 'P-3', first: 'Grace', last: 'Hopper', team: 'Compilers', salary: 152000 },
-];
-const cols = [
-    { field: 'id', header: 'ID', width: 100 },
-    { field: 'first', header: 'First', width: 140 },
-    { field: 'last', header: 'Last', width: 140 },
-    { field: 'team', header: 'Team', width: 160 },
-    { field: 'salary', header: 'Salary', width: 130 },
-];
-function mountGrid(opts = {}) {
-    return new Promise((res, rej) => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        let api = null;
-        const app = mount(SvGrid, {
-            target,
-            props: {
-                data: rows,
-                columns: cols,
-                features,
-                _rowModels: {
-                    coreRowModel: createCoreRowModel(),
-                    filteredRowModel: createFilteredRowModel(),
-                    sortedRowModel: createSortedRowModel(sortFns),
-                },
-                containerHeight: 360,
-                virtualization: false,
-                columnVirtualization: false,
-                enableInlineEditing: false,
-                showPagination: false,
-                showColumnFilters: false,
-                showGlobalFilter: false,
-                showRowSelection: false,
-                enableColumnReorder: opts.enableColumnReorder,
-                columnOrder: opts.columnOrder,
-                onColumnOrderChange: opts.onColumnOrderChange,
-                onApiReady(received) {
-                    api = received;
-                    res({
-                        target,
-                        api,
-                        destroy: () => {
-                            unmount(app);
-                            target.remove();
-                        },
-                    });
-                },
-            },
-        });
-        queueMicrotask(() => { if (!api)
-            rej(new Error('onApiReady never fired')); });
-    });
-}
-const tick = () => new Promise((r) => queueMicrotask(r));
-function headerOrder(target) {
-    const ths = target.querySelectorAll('th[data-svgrid-header-col]');
-    return Array.from(ths).map((th) => th.dataset.svgridHeaderCol ?? '');
-}
-function header(target, id) {
-    // jsdom doesn't ship CSS.escape; our ids are simple alphanumerics so
-    // a plain attribute selector is fine.
-    const el = target.querySelector(`th[data-svgrid-header-col="${id}"]`);
-    if (!el)
-        throw new Error(`header not found: ${id}`);
-    return el;
-}
-describe('SvGrid column reorder - default off', () => {
-    it('does NOT set draggable on headers when the prop is unset', async () => {
-        const { target, destroy } = await mountGrid();
-        try {
-            await tick();
-            const draggables = target.querySelectorAll('th[data-svgrid-header-col][draggable="true"]');
-            expect(draggables.length).toBe(0);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid column reorder - enableColumnReorder=true', () => {
-    it('sets draggable=true on every visible header', async () => {
-        const { target, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            await tick();
-            const ths = target.querySelectorAll('th[data-svgrid-header-col]');
-            expect(ths.length).toBe(cols.length);
-            for (const th of ths) {
-                expect(th.getAttribute('draggable')).toBe('true');
-            }
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('honors the initial columnOrder prop', async () => {
-        const order = ['salary', 'id', 'last', 'first', 'team'];
-        const { target, destroy } = await mountGrid({
-            enableColumnReorder: true,
-            columnOrder: order,
-        });
-        try {
-            await tick();
-            expect(headerOrder(target)).toEqual(order);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid column reorder - imperative api', () => {
-    it('api.getColumnOrder() returns the current visual order', async () => {
-        const { api, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            expect(api.getColumnOrder()).toEqual(['id', 'first', 'last', 'team', 'salary']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('api.setColumnOrder() reorders the DOM headers', async () => {
-        const { target, api, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            api.setColumnOrder(['team', 'id', 'salary', 'first', 'last']);
-            await tick();
-            expect(headerOrder(target)).toEqual(['team', 'id', 'salary', 'first', 'last']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('api.setColumnOrder() fires onColumnOrderChange with the new order', async () => {
-        const events = [];
-        const { api, destroy } = await mountGrid({
-            enableColumnReorder: true,
-            onColumnOrderChange: (order) => events.push([...order]),
-        });
-        try {
-            api.setColumnOrder(['last', 'first', 'id', 'team', 'salary']);
-            await tick();
-            expect(events.length).toBeGreaterThanOrEqual(1);
-            const latest = events[events.length - 1];
-            expect(latest).toEqual(['last', 'first', 'id', 'team', 'salary']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('api.setColumnOrder() with a partial list keeps unlisted columns in their existing relative position', async () => {
-        // Pass only ['salary', 'id']; the other three keep their original
-        // relative order AFTER the listed ones.
-        const { target, api, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            api.setColumnOrder(['salary', 'id']);
-            await tick();
-            const order = headerOrder(target);
-            expect(order[0]).toBe('salary');
-            expect(order[1]).toBe('id');
-            // The remaining columns (first / last / team) should follow,
-            // in their original relative order from `cols`.
-            expect(order.slice(2)).toEqual(['first', 'last', 'team']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid column reorder - drag wiring (DOM)', () => {
-    // Note: jsdom does not ship `DragEvent`, so we can't drive the full
-    // dragstart → dragover → drop pipeline end-to-end here. Real-browser
-    // coverage lives in the Playwright suite. These tests verify that the
-    // wiring IS present in the DOM so a real DragEvent would reach the
-    // grid's reactive state.
-    it('every header has dragstart / dragover / dragleave / drop / dragend listeners attached', async () => {
-        const { target, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            await tick();
-            const ths = target.querySelectorAll('th[data-svgrid-header-col]');
-            expect(ths.length).toBe(cols.length);
-            // Each <th> must be draggable AND have an onclick-equivalent
-            // dispatch chain. We can't easily probe addEventListener
-            // attachments, so use the `draggable` attribute as the proxy -
-            // the grid only sets it when listeners are wired.
-            for (const th of ths) {
-                expect(th.getAttribute('draggable')).toBe('true');
-            }
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('does NOT add the drop-target class before any drag is initiated', async () => {
-        const { target, destroy } = await mountGrid({ enableColumnReorder: true });
-        try {
-            await tick();
-            const drop = target.querySelectorAll('.is-drag-target-before, .is-drag-target-after, .is-dragging');
-            expect(drop.length).toBe(0);
-        }
-        finally {
-            destroy();
-        }
-    });
-});

package/dist/svgrid.comments-autocomplete.test.d.ts

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

package/dist/svgrid.comments-autocomplete.test.js

@@ -1,96 +0,0 @@
-/**
- * Track C: free-text autocomplete cell type + editable cell comments.
- */
-import { describe, expect, it } from 'vitest';
-import { mount, unmount } from 'svelte';
-import SvGrid from './SvGrid.svelte';
-import { createCoreRowModel, tableFeatures } from './index';
-const features = tableFeatures({});
-const rows = [
-    { id: 1, name: 'Ann', city: 'Paris' },
-    { id: 2, name: 'Bo', city: 'Berlin' },
-];
-const tick = () => new Promise((r) => queueMicrotask(r));
-function mountGrid(extraCols, props = {}) {
-    return new Promise((res) => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        const app = mount(SvGrid, {
-            target,
-            props: {
-                data: rows,
-                columns: [{ field: 'name', header: 'Name', width: 160, editorType: 'text' }, ...extraCols],
-                features,
-                _rowModels: { coreRowModel: createCoreRowModel() },
-                rowHeight: 32,
-                containerHeight: 360,
-                virtualization: false,
-                enableInlineEditing: true,
-                enableCellSelection: true,
-                onApiReady(api) {
-                    res({ api, target, destroy: () => { unmount(app); target.remove(); } });
-                },
-                ...props,
-            },
-        });
-    });
-}
-function dataCell(target, col) {
-    return target.querySelectorAll('.sv-grid-cell[data-svgrid-row]')[col];
-}
-describe('autocomplete cell type', () => {
-    it('filters suggestions as you type and commits the picked option', async () => {
-        const { api, target, destroy } = await mountGrid([
-            {
-                field: 'city',
-                header: 'City',
-                width: 200,
-                editorType: 'autocomplete',
-                editorOptions: ['Paris', 'Berlin', 'Boston', 'Brussels'],
-            },
-        ]);
-        await tick();
-        // city is the 2nd column => index 1 in the first row's cells
-        const cell = target.querySelectorAll('.sv-grid-cell[data-svgrid-row="0"]')[1];
-        cell.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-        await tick();
-        const input = target.querySelector('.sv-grid-cell-editor-autocomplete');
-        expect(input).not.toBeNull();
-        input.value = 'B';
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-        await tick();
-        const opts = [...target.querySelectorAll('.sv-grid-autocomplete-option')].map((b) => b.textContent?.trim());
-        // 'B' matches Berlin, Boston, Brussels - not Paris
-        expect(opts).toEqual(['Berlin', 'Boston', 'Brussels']);
-        const berlin = [...target.querySelectorAll('.sv-grid-autocomplete-option')].find((b) => b.textContent?.trim() === 'Boston');
-        berlin.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-        await tick();
-        expect(api.getCellValue(0, 'city')).toBe('Boston');
-        destroy();
-    });
-});
-describe('editable comments', () => {
-    it('adds a comment via the context menu and emits onNoteChange', async () => {
-        const changes = [];
-        const { target, destroy } = await mountGrid([{ field: 'city', header: 'City', width: 200, editorType: 'text' }], { contextMenu: true, editableComments: true, onNoteChange: (e) => changes.push(e) });
-        await tick();
-        const cell = dataCell(target, 0);
-        cell.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }));
-        await tick();
-        const editItem = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find((b) => b.textContent?.trim() === 'Edit comment');
-        expect(editItem).toBeTruthy();
-        editItem.click();
-        await tick();
-        const ta = target.querySelector('.sv-grid-comment-textarea');
-        expect(ta).not.toBeNull();
-        ta.value = 'Needs review';
-        ta.dispatchEvent(new Event('input', { bubbles: true }));
-        await tick();
-        target.querySelector('.sv-grid-comment-save').click();
-        await tick();
-        expect(changes.length).toBe(1);
-        expect(changes[0].note).toBe('Needs review');
-        expect(target.querySelector('.sv-grid-comment-editor')).toBeNull();
-        destroy();
-    });
-});

package/dist/svgrid.context-menu.test.d.ts

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

package/dist/svgrid.context-menu.test.js

@@ -1,102 +0,0 @@
-/**
- * Right-click context menu (Track A). Mounts a grid with `contextMenu`,
- * fires a synthetic `contextmenu` event on a cell, and asserts the menu
- * opens with the expected items and that actions/close work.
- */
-import { describe, expect, it } from 'vitest';
-import { mount, unmount } from 'svelte';
-import SvGrid from './SvGrid.svelte';
-import { createCoreRowModel, createFilteredRowModel, createSortedRowModel, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, } from './index';
-const features = tableFeatures({ rowSortingFeature, rowSelectionFeature });
-const rows = Array.from({ length: 6 }, (_, i) => ({
-    id: i + 1,
-    name: `Person ${i + 1}`,
-    team: ['A', 'B'][i % 2],
-}));
-const cols = [
-    { field: 'name', header: 'Name', width: 200, editorType: 'text' },
-    { field: 'team', header: 'Team', width: 160, editorType: 'text' },
-];
-const tick = () => new Promise((r) => queueMicrotask(r));
-function mountGrid(contextMenu) {
-    return new Promise((res, rej) => {
-        const target = document.createElement('div');
-        document.body.appendChild(target);
-        const app = mount(SvGrid, {
-            target,
-            props: {
-                data: rows,
-                columns: cols,
-                features,
-                _rowModels: {
-                    coreRowModel: createCoreRowModel(),
-                    filteredRowModel: createFilteredRowModel(),
-                    sortedRowModel: createSortedRowModel(sortFns),
-                },
-                rowHeight: 32,
-                containerHeight: 400,
-                virtualization: false,
-                enableCellSelection: true,
-                contextMenu,
-                onApiReady(api) {
-                    res({ api, target, destroy: () => { unmount(app); target.remove(); } });
-                },
-            },
-        });
-        queueMicrotask(() => { if (!target.querySelector('[role="grid"]'))
-            rej(new Error('no grid')); });
-    });
-}
-function rightClickFirstCell(target) {
-    const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]');
-    const r = cell.getBoundingClientRect();
-    cell.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: r.x + 4, clientY: r.y + 4 }));
-    return cell;
-}
-describe('SvGrid context menu', () => {
-    it('opens the default menu on right-click with the built-in items', async () => {
-        const { target, destroy } = await mountGrid(true);
-        await tick();
-        rightClickFirstCell(target);
-        await tick();
-        const menu = target.querySelector('.sv-grid-context-menu');
-        expect(menu).not.toBeNull();
-        const labels = [...menu.querySelectorAll('.sv-grid-menu-item')].map((b) => b.textContent?.trim());
-        expect(labels).toContain('Copy');
-        expect(labels).toContain('Paste');
-        expect(labels).toContain('Remove row');
-        expect(labels).toContain('Remove column');
-        destroy();
-    });
-    it('does not open when contextMenu is omitted (native menu shows)', async () => {
-        const { target, destroy } = await mountGrid(undefined);
-        await tick();
-        const cell = target.querySelector('.sv-grid-cell[data-svgrid-row]');
-        const ev = new MouseEvent('contextmenu', { bubbles: true, cancelable: true });
-        cell.dispatchEvent(ev);
-        await tick();
-        expect(target.querySelector('.sv-grid-context-menu')).toBeNull();
-        expect(ev.defaultPrevented).toBe(false);
-        destroy();
-    });
-    it('renders only the configured custom items and runs the action', async () => {
-        let ran = 0;
-        const items = [
-            'copy',
-            'separator',
-            { key: 'flag', label: 'Flag row', action: () => { ran += 1; } },
-        ];
-        const { target, destroy } = await mountGrid(items);
-        await tick();
-        rightClickFirstCell(target);
-        await tick();
-        const labels = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].map((b) => b.textContent?.trim());
-        expect(labels).toEqual(['Copy', 'Flag row']);
-        const flag = [...target.querySelectorAll('.sv-grid-context-menu .sv-grid-menu-item')].find((b) => b.textContent?.trim() === 'Flag row');
-        flag.click();
-        expect(ran).toBe(1);
-        await tick();
-        expect(target.querySelector('.sv-grid-context-menu')).toBeNull();
-        destroy();
-    });
-});

package/dist/svgrid.features.test.d.ts

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

package/dist/svgrid.features.test.js

@@ -1,129 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { columnFilteringFeature, columnGroupingFeature, createCoreRowModel, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, createSvGrid, rowExpandingFeature, rowSelectionFeature, rowSortingFeature, sortFns, subscribeSvGrid, tableFeatures, } from './index';
-describe('SvGrid features', () => {
-    it('supports sorting and pagination row model pipeline', () => {
-        const _features = tableFeatures({
-            columnFilteringFeature,
-            columnGroupingFeature,
-            rowExpandingFeature,
-            rowSelectionFeature,
-            rowSortingFeature,
-        });
-        const columns = [
-            { field: 'firstName' },
-            { field: 'age' },
-        ];
-        const data = [
-            { firstName: 'John', age: 40, status: 'pending' },
-            { firstName: 'Amy', age: 22, status: 'active' },
-            { firstName: 'Kate', age: 31, status: 'active' },
-        ];
-        const grid = createSvGrid({
-            _features,
-            _rowModels: {
-                coreRowModel: createCoreRowModel(),
-                filteredRowModel: createFilteredRowModel(),
-                sortedRowModel: createSortedRowModel(sortFns),
-                groupedRowModel: createGroupedRowModel(),
-                expandedRowModel: createExpandedRowModel(),
-                paginatedRowModel: createPaginatedRowModel(),
-            },
-            columns,
-            data,
-            state: {
-                columnFilters: [{ id: 'firstName', value: 'a', fn: 'includesString' }],
-                grouping: ['status'],
-                expanded: { group_status_active: true },
-                sorting: [{ id: 'age', desc: false }],
-                pagination: { pageIndex: 0, pageSize: 2 },
-            },
-        });
-        const rows = grid.getRowModel().rows;
-        expect(rows).toHaveLength(1);
-        expect(rows[0]?.id).toContain('group_status_');
-    });
-    it('supports row selection and expansion toggles', () => {
-        const _features = tableFeatures({
-            rowExpandingFeature,
-            rowSelectionFeature,
-        });
-        const columns = [
-            { field: 'firstName' },
-        ];
-        const data = [
-            { firstName: 'Amy', age: 22 },
-        ];
-        const grid = createSvGrid({
-            _features,
-            _rowModels: {
-                coreRowModel: createCoreRowModel(),
-            },
-            columns,
-            data,
-        });
-        const row = grid.getRowModel().rows[0];
-        expect(row).toBeDefined();
-        row?.toggleSelected();
-        row?.toggleExpanded();
-        expect(row?.getIsSelected()).toBe(true);
-        expect(row?.getIsExpanded()).toBe(true);
-    });
-    it('supports selector subscriptions with stable shape', () => {
-        const _features = tableFeatures({ rowSortingFeature });
-        const grid = createSvGrid({
-            _features,
-            _rowModels: {
-                coreRowModel: createCoreRowModel(),
-            },
-            columns: [{ field: 'firstName' }],
-            data: [{ firstName: 'Amy', age: 22 }],
-        });
-        const selected = subscribeSvGrid(grid, (state) => ({
-            sorting: state.sorting,
-            pageIndex: state.pagination?.pageIndex ?? 0,
-        }));
-        expect(selected.current.pageIndex).toBe(0);
-    });
-    it('supports active cell movement primitives', () => {
-        const _features = tableFeatures({ rowSortingFeature });
-        const grid = createSvGrid({
-            _features,
-            _rowModels: { coreRowModel: createCoreRowModel() },
-            columns: [
-                { field: 'firstName' },
-                { field: 'age' },
-            ],
-            data: [
-                { firstName: 'Amy', age: 22 },
-                { firstName: 'John', age: 40 },
-            ],
-        });
-        grid.moveActiveCell({ rowDelta: 1, colDelta: 1 });
-        expect(grid.getState().activeCell.rowIndex).toBe(1);
-        expect(grid.getState().activeCell.colIndex).toBe(1);
-    });
-    it('supports multi-column sorting clauses', () => {
-        const _features = tableFeatures({ rowSortingFeature });
-        const grid = createSvGrid({
-            _features,
-            _rowModels: {
-                coreRowModel: createCoreRowModel(),
-                sortedRowModel: createSortedRowModel(sortFns),
-            },
-            columns: [
-                { field: 'firstName' },
-                { field: 'age', editorType: 'number' },
-            ],
-            data: [
-                { firstName: 'Amy', age: 20 },
-                { firstName: 'Amy', age: 30 },
-                { firstName: 'Bob', age: 10 },
-            ],
-            state: { sorting: [{ id: 'firstName', desc: false }, { id: 'age', desc: true }] },
-        });
-        const rows = grid.getRowModel().rows;
-        expect(rows[0]?.original.firstName).toBe('Amy');
-        expect(rows[0]?.original.age).toBe(30);
-        expect(rows[1]?.original.age).toBe(20);
-    });
-});

package/dist/svgrid.interaction.test.d.ts

@@ -1,9 +0,0 @@
-/**
- * Interaction-driven tests against <SvGrid />. Targeting code paths that
- * only run in response to events: keyboard, pointer, scroll, edit lifecycle.
- *
- * Each test mounts a small grid, fires a synthetic event, awaits a tick,
- * then asserts on the api object's snapshot. The goal is breadth: hit as
- * many branches inside SvGrid.svelte as possible.
- */
-export {};