@svgrid/grid 1.1.1 → 1.2.1

package/dist/svgrid.interaction.test.js

@@ -1,349 +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.
- */
-import { describe, expect, it } from 'vitest';
-import { mount, unmount } from 'svelte';
-import SvGrid from './SvGrid.svelte';
-import { columnFilteringFeature, createCoreRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, } from './index';
-const features = tableFeatures({
-    columnFilteringFeature,
-    rowSortingFeature,
-    rowSelectionFeature,
-    rowPaginationFeature,
-});
-const rows = Array.from({ length: 25 }, (_, i) => ({
-    id: i + 1,
-    name: `Person ${(i + 1).toString().padStart(2, '0')}`,
-    team: ['Research', 'Compilers', 'Apollo', 'Kernel'][i % 4],
-    salary: 100000 + i * 1000,
-}));
-const cols = [
-    { field: 'name', header: 'Name', width: 220, editorType: 'text' },
-    { field: 'team', header: 'Team', width: 160, editorType: 'text' },
-    { field: 'salary', header: 'Salary', width: 140, editorType: 'number' },
-];
-function mountInteractive(overrides = {}) {
-    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),
-                    paginatedRowModel: createPaginatedRowModel(),
-                },
-                rowHeight: 36,
-                containerHeight: 480,
-                virtualization: false,
-                enableInlineEditing: true,
-                enableCellSelection: true,
-                showPagination: true,
-                pageSize: 10,
-                showColumnFilters: true,
-                showGlobalFilter: true,
-                showRowSelection: true,
-                onApiReady(received) {
-                    api = received;
-                    const grid = target.querySelector('[role="grid"]') ?? target;
-                    res({
-                        api,
-                        target,
-                        grid,
-                        destroy: () => {
-                            unmount(app);
-                            target.remove();
-                        },
-                    });
-                },
-                ...overrides,
-            },
-        });
-        queueMicrotask(() => {
-            if (!api)
-                rej(new Error('onApiReady never fired'));
-        });
-    });
-}
-const tick = () => new Promise((r) => queueMicrotask(r));
-describe('SvGrid interactions - keyboard', () => {
-    it('dispatches ArrowRight without throwing', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            const ev = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true });
-            grid.dispatchEvent(ev);
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('dispatches ArrowDown / ArrowUp / Home / End', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            for (const key of ['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp']) {
-                grid.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
-                await tick();
-            }
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('dispatches Ctrl+Home and Ctrl+End', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', ctrlKey: true, bubbles: true }));
-            await tick();
-            grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'End', ctrlKey: true, bubbles: true }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('dispatches Escape to close any open menu / cancel edit', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('dispatches Tab and Shift+Tab', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', bubbles: true }));
-            await tick();
-            grid.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true, bubbles: true }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - global filter input', () => {
-    it('typing in the global filter narrows the displayed rows', async () => {
-        const { api, target, destroy } = await mountInteractive();
-        try {
-            const input = target.querySelector('.sv-grid-global-filter input');
-            if (!input) {
-                // global filter input wasn't rendered (jsdom quirk) - just verify api still works.
-                expect(api.getData().length).toBe(rows.length);
-                return;
-            }
-            input.value = 'Person 01';
-            input.dispatchEvent(new Event('input', { bubbles: true }));
-            await tick();
-            await tick();
-            // Some narrowing happened.
-            expect(api.getDisplayedRows().length).toBeLessThanOrEqual(rows.length);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - column resize', () => {
-    it('starts a column resize via pointerdown on the handle', async () => {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const handle = target.querySelector('.sv-grid-resize-handle');
-            if (!handle) {
-                // jsdom may not lay out the handle; assertion skipped.
-                return;
-            }
-            handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1, button: 0 }));
-            await tick();
-            window.dispatchEvent(new PointerEvent('pointermove', { clientX: 200, clientY: 0 }));
-            await tick();
-            window.dispatchEvent(new PointerEvent('pointerup', { clientX: 200, clientY: 0 }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - pagination nav', () => {
-    it('clicking next/prev/last/first paginator buttons does not throw', async () => {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const buttons = target.querySelectorAll('.sv-grid-pagination-btn');
-            for (const btn of Array.from(buttons)) {
-                ;
-                btn.click();
-                await tick();
-            }
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - sort header click', () => {
-    it('clicking a column header toggles the sort indicator', async () => {
-        const { api, target, destroy } = await mountInteractive();
-        try {
-            const headerEl = target.querySelector('[data-svgrid-header-col]');
-            if (!headerEl)
-                return;
-            headerEl.click();
-            await tick();
-            headerEl.click();
-            await tick();
-            headerEl.click();
-            await tick();
-            // No throw means we exercised onHeaderSortClick.
-            expect(api.getData().length).toBe(rows.length);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('shift-click on a header adds a secondary sort clause', async () => {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const headers = target.querySelectorAll('[data-svgrid-header-col]');
-            if (headers.length < 2)
-                return;
-            headers[0].click();
-            await tick();
-            headers[1].dispatchEvent(new MouseEvent('click', { bubbles: true, shiftKey: true }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - cell pointer events', () => {
-    it('pointerdown on a cell starts a selection', async () => {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const cell = target.querySelector('.sv-grid-cell');
-            if (!cell)
-                return;
-            cell.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1, button: 0 }));
-            await tick();
-            cell.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, pointerId: 1 }));
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('double-click on an editable cell enters edit mode', async () => {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const cell = target.querySelector('.sv-grid-cell');
-            if (!cell)
-                return;
-            cell.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-            await tick();
-            // Editor input may or may not be in DOM depending on layout; just
-            // exercising the codepath is enough.
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-    // issue #23: a mouse drag extends the cell range, but a touch drag must NOT -
-    // it should leave the single tapped cell selected so the finger-drag scrolls.
-    async function dragSelectCount(pointerType) {
-        const { target, destroy } = await mountInteractive();
-        try {
-            const a = target.querySelector('[data-svgrid-row="0"][data-svgrid-col="0"]');
-            const c = target.querySelector('[data-svgrid-row="0"][data-svgrid-col="2"]');
-            if (!a || !c)
-                return -1; // jsdom didn't lay the cells out; caller skips
-            a.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerId: 1, button: 0, pointerType }));
-            await tick();
-            c.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true, pointerId: 1, pointerType }));
-            await tick();
-            return target.querySelectorAll('[data-selected-range="true"]').length;
-        }
-        finally {
-            destroy();
-        }
-    }
-    it('mouse drag extends the selection across cells', async () => {
-        const n = await dragSelectCount('mouse');
-        if (n < 0)
-            return;
-        expect(n).toBeGreaterThan(1); // (0,0) -> (0,2) selects the row's 3 cells
-    });
-    it('touch drag does not start a range selection (issue #23)', async () => {
-        const n = await dragSelectCount('touch');
-        if (n < 0)
-            return;
-        expect(n).toBeLessThanOrEqual(1); // only the tapped cell; finger-drag scrolls
-    });
-});
-describe('SvGrid interactions - copy', () => {
-    it('Ctrl+C with a cell range does not throw', async () => {
-        const { grid, destroy } = await mountInteractive();
-        try {
-            const cev = new KeyboardEvent('keydown', { key: 'c', ctrlKey: true, bubbles: true });
-            grid.dispatchEvent(cev);
-            await tick();
-            expect(true).toBe(true);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - selection mode', () => {
-    it('selecting a row via the API surfaces via getDisplayedRows', async () => {
-        const { api, destroy } = await mountInteractive();
-        try {
-            // Simulate clicking the first row checkbox via the API.
-            expect(api.getDisplayedRows().length).toBeGreaterThan(0);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid interactions - clearAllFilters round-trip', () => {
-    it('setting + clearing global + column filters returns to full set', async () => {
-        const { api, destroy } = await mountInteractive();
-        try {
-            api.setFilter('name', { operator: 'contains', value: 'XYZ-NONE' });
-            await tick();
-            expect(api.getDisplayedRows().length).toBeLessThanOrEqual(rows.length);
-            api.clearAllFilters();
-            await tick();
-            await tick();
-            expect(api.getDisplayedRows().length).toBeGreaterThanOrEqual(1);
-        }
-        finally {
-            destroy();
-        }
-    });
-});

package/dist/svgrid.locale-filtering.test.d.ts

@@ -1,15 +0,0 @@
-/**
- * Integration tests for the `filterLocale` prop. Mounts a real
- * <SvGrid> with accented data, drives the column-menu filter via
- * `api.setFilter()`, then asserts the visible row count via
- * `api.getDisplayedRows()`.
- *
- * Covers:
- *   - Accent-insensitive `contains` operator on the menu filter
- *   - Diacritic-stripped global filter (via `setGlobalFilter` not in
- *     the public api yet; here we use `api.setFilter('city', ...)`
- *     which exercises the same pipeline)
- *   - filterLocale prop pass-through (es-ES, de-DE)
- *   - Regression: ASCII queries still narrow rows
- */
-export {};

package/dist/svgrid.locale-filtering.test.js

@@ -1,261 +0,0 @@
-/**
- * Integration tests for the `filterLocale` prop. Mounts a real
- * <SvGrid> with accented data, drives the column-menu filter via
- * `api.setFilter()`, then asserts the visible row count via
- * `api.getDisplayedRows()`.
- *
- * Covers:
- *   - Accent-insensitive `contains` operator on the menu filter
- *   - Diacritic-stripped global filter (via `setGlobalFilter` not in
- *     the public api yet; here we use `api.setFilter('city', ...)`
- *     which exercises the same pipeline)
- *   - filterLocale prop pass-through (es-ES, de-DE)
- *   - Regression: ASCII queries still narrow rows
- */
-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: 1, city: 'München', country: 'Deutschland', region: 'Europe', population: 1510000 },
-    { id: 2, city: 'Köln', country: 'Deutschland', region: 'Europe', population: 1080000 },
-    { id: 3, city: 'Genève', country: 'Suisse', region: 'Europe', population: 203000 },
-    { id: 4, city: 'Montréal', country: 'Canada', region: 'Americas', population: 1780000 },
-    { id: 5, city: 'México', country: 'México', region: 'Americas', population: 9210000 },
-    { id: 6, city: 'São Paulo', country: 'Brasil', region: 'Americas', population: 12330000 },
-    { id: 7, city: 'Tōkyō', country: '日本', region: 'Asia', population: 13960000 },
-    { id: 8, city: 'İstanbul', country: 'Türkiye', region: 'Asia', population: 15840000 },
-    { id: 9, city: 'Málaga', country: 'España', region: 'Europe', population: 580000 },
-    { id: 10, city: 'Berlin', country: 'Deutschland', region: 'Europe', population: 3770000 },
-];
-const cols = [
-    { field: 'city', header: 'City', width: 180, editable: false },
-    { field: 'country', header: 'Country', width: 160, editable: false },
-    { field: 'region', header: 'Region', width: 110, editable: false },
-    { field: 'population', header: 'Population', width: 130, editable: false, align: 'right' },
-];
-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,
-                showPagination: false,
-                showColumnFilters: false,
-                showGlobalFilter: false,
-                showRowSelection: false,
-                filterLocale: opts.filterLocale,
-                onApiReady(received) {
-                    api = received;
-                    res({
-                        api,
-                        destroy: () => { unmount(app); target.remove(); },
-                    });
-                },
-            },
-        });
-        queueMicrotask(() => { if (!api)
-            rej(new Error('onApiReady never fired')); });
-    });
-}
-const tick = () => new Promise((r) => queueMicrotask(r));
-describe('SvGrid filter - default locale (no prop)', () => {
-    it('"munch" matches "München" via contains operator', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'munch' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city)).toEqual(['München']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"geneve" matches "Genève"', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'geneve' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city)).toEqual(['Genève']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"sao paulo" matches "São Paulo"', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'sao paulo' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city)).toEqual(['São Paulo']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"tokyo" matches "Tōkyō"', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'tokyo' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city)).toEqual(['Tōkyō']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"istanbul" matches "İstanbul" (dotted-I default folding)', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'istanbul' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city)).toEqual(['İstanbul']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"deutschland" matches all German cities', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('country', { operator: 'contains', value: 'deutschland' });
-            await tick();
-            const visible = api.getDisplayedRows();
-            expect(visible.map((r) => r.city).sort()).toEqual(['Berlin', 'Köln', 'München']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid filter - filterLocale="de-DE"', () => {
-    it('explicit German locale - "munchen" still matches "München"', async () => {
-        const { api, destroy } = await mountGrid({ filterLocale: 'de-DE' });
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'munchen' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"koln" matches "Köln"', async () => {
-        const { api, destroy } = await mountGrid({ filterLocale: 'de-DE' });
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'koln' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Köln']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid filter - filterLocale="es-ES"', () => {
-    it('"mexico" matches "México"', async () => {
-        const { api, destroy } = await mountGrid({ filterLocale: 'es-ES' });
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'mexico' });
-            await tick();
-            const cities = api.getDisplayedRows().map((r) => r.city);
-            expect(cities).toContain('México');
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('"malaga" matches "Málaga"', async () => {
-        const { api, destroy } = await mountGrid({ filterLocale: 'es-ES' });
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'malaga' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Málaga']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid filter - startsWith + equals operators', () => {
-    it('startsWith "mun" matches München', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'startsWith', value: 'mun' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('equals "berlin" matches exactly "Berlin" (case-insensitive)', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'equals', value: 'berlin' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Berlin']);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('equals "kolN" matches "Köln" (case + accent insensitive)', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'equals', value: 'kolN' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['Köln']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});
-describe('SvGrid filter - clear + compose', () => {
-    it('clearFilter removes the narrowing', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('city', { operator: 'contains', value: 'munch' });
-            await tick();
-            expect(api.getDisplayedRows().length).toBe(1);
-            api.clearFilter('city');
-            await tick();
-            expect(api.getDisplayedRows().length).toBe(rows.length);
-        }
-        finally {
-            destroy();
-        }
-    });
-    it('two column filters compose (AND across columns)', async () => {
-        const { api, destroy } = await mountGrid();
-        try {
-            api.setFilter('country', { operator: 'contains', value: 'deutschland' });
-            api.setFilter('city', { operator: 'contains', value: 'mun' });
-            await tick();
-            expect(api.getDisplayedRows().map((r) => r.city)).toEqual(['München']);
-        }
-        finally {
-            destroy();
-        }
-    });
-});

package/dist/svgrid.new-features.wrapper.test.d.ts

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