@ornery/ui-grid-vanilla 0.1.10 → 1.0.1

package/src/icons.ts

@@ -0,0 +1,88 @@
+/**
+ * Icon registry for the vanilla grid element.
+ *
+ * The grid draws its own sort / group / tree / expand / pin / pagination
+ * icons via inline SVGs. Consumers can override any individual icon by
+ * passing an `iconOverrides` map in GridOptions or by writing to the
+ * element's `controlIcons` property at runtime. This module owns the
+ * icon registry class plus the SVG markup helpers so the element file
+ * doesn't have to.
+ */
+
+import { iconMarkup } from './templates';
+
+export type UiGridControlIconKey =
+  | 'sortNone'
+  | 'sortAsc'
+  | 'sortDesc'
+  | 'group'
+  | 'groupExpanded'
+  | 'groupCollapsed'
+  | 'treeExpanded'
+  | 'treeCollapsed'
+  | 'expandExpanded'
+  | 'expandCollapsed'
+  | 'pin'
+  | 'pinLeft'
+  | 'pinRight'
+  | 'paginationPrev'
+  | 'paginationNext';
+
+export interface UiGridIconDefinition {
+  viewBox?: string;
+  path: string;
+}
+
+export type UiGridIconOverrides = Partial<Record<UiGridControlIconKey, UiGridIconDefinition>>;
+
+export const DEFAULT_ICONS: Record<UiGridControlIconKey, UiGridIconDefinition> = {
+  sortNone: { path: 'M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z' },
+  sortAsc: { path: 'M12 5l-6 6h4v8h4v-8h4z' },
+  sortDesc: { path: 'M12 19l6-6h-4V5h-4v8H6z' },
+  group: { path: 'M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z' },
+  groupExpanded: { path: 'M7 10l5 5 5-5z' },
+  groupCollapsed: { path: 'M10 7l5 5-5 5z' },
+  treeExpanded: { path: 'M7 10l5 5 5-5z' },
+  treeCollapsed: { path: 'M10 7l5 5-5 5z' },
+  expandExpanded: { path: 'M7 10l5 5 5-5z' },
+  expandCollapsed: { path: 'M10 7l5 5-5 5z' },
+  pin: { path: 'M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z' },
+  pinLeft: { path: 'M10 6 4 12l6 6v-4h10v-4H10V6z' },
+  pinRight: { path: 'M14 6v4H4v4h10v4l6-6-6-6z' },
+  paginationPrev: { path: 'M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z' },
+  paginationNext: { path: 'M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z' },
+};
+
+/**
+ * Holds the active set of icons (defaults merged with consumer overrides)
+ * and renders the inline SVG markup for each one. A single instance lives
+ * on the element.
+ */
+export class IconRegistry {
+  private overrides: UiGridIconOverrides = {};
+  private resolved: Record<UiGridControlIconKey, UiGridIconDefinition> = { ...DEFAULT_ICONS };
+
+  getOverrides(): UiGridIconOverrides {
+    return { ...this.overrides };
+  }
+
+  setOverrides(value: UiGridIconOverrides): void {
+    this.overrides = value ?? {};
+    this.resolved = { ...DEFAULT_ICONS, ...this.overrides };
+  }
+
+  resolve(key: UiGridControlIconKey): UiGridIconDefinition {
+    return this.resolved[key];
+  }
+
+  /** Render the SVG markup for a control icon (sort, group, pin, …). */
+  renderControlIcon(key: UiGridControlIconKey): string {
+    return this.renderIconWithClass('control-icon', key);
+  }
+
+  /** Render the SVG markup with an arbitrary wrapper class. */
+  renderIconWithClass(svgClass: string, key: UiGridControlIconKey): string {
+    const icon = this.resolve(key);
+    return iconMarkup(svgClass, icon.viewBox ?? '0 0 24 24', icon.path);
+  }
+}

package/src/importer.test.ts

@@ -0,0 +1,147 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import {
+  mountVanillaUiGrid,
+  type GridOptions,
+  type UiGridApi,
+  type VanillaUiGridElement,
+} from './index';
+
+/**
+ * Integration tests for the importer. Ports the behaviour from
+ * ui.grid.importer onto the vanilla grid: the element owns the file
+ * picker + FileReader; the controller owns the pure parse / dispatch
+ * pipeline. Consumers wire `importerDataAddCallback` to receive the
+ * parsed rows.
+ */
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+const TAG = 'ui-grid-element-vanilla-importer-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const data: Row[] = [];
+  const options: GridOptions = {
+    id: 'importer-grid',
+    data,
+    columnDefs: [
+      { name: 'id', field: 'id' },
+      { name: 'name', displayName: 'Full Name' },
+      { name: 'status' },
+    ],
+    enableImporter: true,
+    rowIdentity: (entity) => String((entity as Row).id),
+    onRegisterApi: (api) => {
+      capturedApi = api as UiGridApi;
+    },
+    ...overrides,
+  };
+  Object.defineProperty(options, '__api', { enumerable: false, get: () => capturedApi });
+  return options;
+}
+
+function getApi(options: GridOptions): UiGridApi {
+  const api = (options as unknown as { __api: UiGridApi | undefined }).__api;
+  if (!api) throw new Error('Grid API was never registered');
+  return api;
+}
+
+async function mountGrid(options: GridOptions): Promise<{
+  grid: VanillaUiGridElement;
+  shadow: ShadowRoot;
+}> {
+  const target = document.getElementById('app')!;
+  const grid = await mountVanillaUiGrid(target, options, undefined, TAG);
+  const shadow = await waitFor(() => grid.shadowRoot);
+  return { grid, shadow };
+}
+
+describe('vanilla grid importer', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  it('parses a CSV string + invokes importerDataAddCallback', async () => {
+    const importerDataAddCallback = vi.fn();
+    const options = baseOptions({ importerDataAddCallback });
+    await mountGrid(options);
+    const api = getApi(options);
+    api.importer.importText('id,Full Name,status\n1,Alpha,Active\n2,Beta,Pilot', 'csv');
+    expect(importerDataAddCallback).toHaveBeenCalledTimes(1);
+    const [newObjects] = importerDataAddCallback.mock.calls[0]!;
+    expect(newObjects).toEqual([
+      { id: '1', name: 'Alpha', status: 'Active' },
+      { id: '2', name: 'Beta', status: 'Pilot' },
+    ]);
+  });
+
+  it('parses a JSON string when type is "json"', async () => {
+    const importerDataAddCallback = vi.fn();
+    const options = baseOptions({ importerDataAddCallback });
+    await mountGrid(options);
+    const api = getApi(options);
+    api.importer.importText('[{"id":"1","name":"Alpha"}]', 'json');
+    expect(importerDataAddCallback).toHaveBeenCalledTimes(1);
+    const [objects] = importerDataAddCallback.mock.calls[0]!;
+    expect(objects).toEqual([{ id: '1', name: 'Alpha' }]);
+  });
+
+  it('auto-detects JSON vs CSV when no type is passed', async () => {
+    const importerDataAddCallback = vi.fn();
+    const options = baseOptions({ importerDataAddCallback });
+    await mountGrid(options);
+    const api = getApi(options);
+    api.importer.importText('[{"id":"j"}]');
+    api.importer.importText('id\nc');
+    expect(importerDataAddCallback).toHaveBeenCalledTimes(2);
+    expect(importerDataAddCallback.mock.calls[0]![0]).toEqual([{ id: 'j' }]);
+    expect(importerDataAddCallback.mock.calls[1]![0]).toEqual([{ id: 'c' }]);
+  });
+
+  it('raises the errorCallback when CSV headers produce no objects', async () => {
+    const importerDataAddCallback = vi.fn();
+    const importerErrorCallback = vi.fn();
+    const options = baseOptions({ importerDataAddCallback, importerErrorCallback });
+    await mountGrid(options);
+    const api = getApi(options);
+    // Header-only CSV — no data rows, so objects will be empty.
+    api.importer.importText('id,name', 'csv');
+    expect(importerDataAddCallback).not.toHaveBeenCalled();
+    expect(importerErrorCallback).toHaveBeenCalledWith(
+      'importer.noObjects',
+      expect.any(String),
+      'id,name',
+    );
+  });
+
+  it('appends to options.data when no importerDataAddCallback is set', async () => {
+    const options = baseOptions(); // no callback
+    await mountGrid(options);
+    const api = getApi(options);
+    api.importer.importText('id,name\n1,Alpha', 'csv');
+    expect(api.core.getVisibleRows().length).toBe(1);
+    expect(api.core.getVisibleRows()[0]!.entity).toMatchObject({ id: '1', name: 'Alpha' });
+  });
+});

package/src/index.integration.test.ts

@@ -298,11 +298,11 @@ describe('mountVanillaUiGrid integration', () => {
     // Simulate the bridge pattern: augment without losing attribute-derived data.
     grid.options = {
       ...grid.options,
-      viewportHeight: 999,
+      minRowsToShow: 20,
     };
 
     expect((grid.options.data as Array<{ id: string; name: string }>)[0].name).toBe('Gamma');
-    expect(grid.options.viewportHeight).toBe(999);
+    expect(grid.options.minRowsToShow).toBe(20);
   });
 
 });

package/src/index.ts

@@ -18,8 +18,17 @@ export {
   type UiGridControlIconKey,
   type UiGridIconDefinition,
   type UiGridIconOverrides,
+  type FrameworkRenderedSlotsConfig,
+  type FrameworkCellSlot,
+  type FrameworkHeaderSlot,
+  type FrameworkFilterSlot,
+  type FrameworkGroupRowSlot,
+  type FrameworkExpandableRowSlot,
+  type FrameworkEmptyStateSlot,
+  type FrameworkSlotDelta,
 } from './ui-grid-standalone.element';
 
+export { UIGridTemplate } from './components/grid-template';
 export type { GridOptions, UiGridApi } from '@ornery/ui-grid-core';
 
 export interface UiGridRustWebModule {

package/src/infinite-scroll.test.ts

@@ -0,0 +1,220 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import {
+  mountVanillaUiGrid,
+  type GridOptions,
+  type UiGridApi,
+  type VanillaUiGridElement,
+} from './index';
+
+/**
+ * Infinite-scroll integration tests. Ports the behaviours from the old
+ * ui.grid.infiniteScroll module and verifies the vanilla element's
+ * scroll-handler wiring raises the right events and the public API
+ * methods (dataLoaded/resetScroll/saveScrollPercentage/dataRemoved* /
+ * setScrollDirections) flow through the controller state helpers.
+ */
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+const TAG = 'ui-grid-element-vanilla-infinite-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const data: Row[] = Array.from({ length: 200 }, (_, i) => ({
+    id: `r${i}`,
+    name: `Row ${i}`,
+  }));
+  const options: GridOptions = {
+    id: 'infinite-scroll-grid',
+    data,
+    columnDefs: [{ name: 'name', displayName: 'Name' }],
+    enableRowSelection: false,
+    rowIdentity: (entity) => String((entity as Row).id),
+    rowHeight: 20,
+    virtualizationThreshold: 1,
+    onRegisterApi: (api) => {
+      capturedApi = api as UiGridApi;
+    },
+    ...overrides,
+  };
+  Object.defineProperty(options, '__api', { enumerable: false, get: () => capturedApi });
+  return options;
+}
+
+function getApi(options: GridOptions): UiGridApi {
+  const api = (options as unknown as { __api: UiGridApi | undefined }).__api;
+  if (!api) throw new Error('Grid API was never registered');
+  return api;
+}
+
+async function mountGrid(options: GridOptions): Promise<{
+  grid: VanillaUiGridElement;
+  shadow: ShadowRoot;
+}> {
+  const target = document.getElementById('app')!;
+  const grid = await mountVanillaUiGrid(target, options, undefined, TAG);
+  const shadow = await waitFor(() => grid.shadowRoot);
+  await waitFor(() => shadow.querySelector('.grid-table'));
+  return { grid, shadow };
+}
+
+function scrollGrid(shadow: ShadowRoot, top: number): void {
+  const viewport = shadow.querySelector<HTMLElement>('.grid-body-viewport');
+  if (!viewport) throw new Error('grid-body-viewport not rendered');
+  viewport.scrollTop = top;
+  // Patch clientHeight in jsdom so the maybeTriggerInfiniteScroll math
+  // sees a viewport — jsdom otherwise returns 0 for clientHeight.
+  Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 });
+  viewport.dispatchEvent(new Event('scroll', { bubbles: true }));
+}
+
+async function waitFrame(): Promise<void> {
+  // The scroll handler schedules work in rAF. Two rAFs + a micro-yield is
+  // enough to flush the chain in jsdom.
+  await new Promise((r) => requestAnimationFrame(() => r(undefined)));
+  await new Promise((r) => requestAnimationFrame(() => r(undefined)));
+  await new Promise((r) => window.setTimeout(r, 0));
+}
+
+describe('vanilla grid infinite scroll', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  describe('events', () => {
+    it('raises needLoadMoreData when the user scrolls near the bottom', async () => {
+      const options = baseOptions({ infiniteScrollDown: true });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreData(listener);
+      // Scroll near the end — viewport=200/row=20 → 10 rows visible,
+      // threshold=20 (default), total=200 rows → trigger at startIndex>=170.
+      scrollGrid(shadow, 200 * 20);
+      await waitFrame();
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it('raises needLoadMoreDataTop when the user scrolls near the top (scrollUp=true)', async () => {
+      const options = baseOptions({ infiniteScrollUp: true });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      // Start mid-grid.
+      scrollGrid(shadow, 50 * 20);
+      await waitFrame();
+      const listener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreDataTop(listener);
+      // Now scroll back near the top — startIndex ≤ threshold (20) fires top.
+      scrollGrid(shadow, 0);
+      await waitFrame();
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not raise anything when enableInfiniteScroll is false', async () => {
+      const options = baseOptions({
+        enableInfiniteScroll: false,
+        infiniteScrollDown: true,
+      });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreData(listener);
+      scrollGrid(shadow, 200 * 20);
+      await waitFrame();
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('suppresses the event when direction flag is off (default scrollUp=false)', async () => {
+      const options = baseOptions(); // scrollUp defaults to false
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreDataTop(listener);
+      scrollGrid(shadow, 0);
+      await waitFrame();
+      expect(listener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('public API methods', () => {
+    it('dataLoaded clears the loading flag so subsequent scrolls can trigger again', async () => {
+      const options = baseOptions({ infiniteScrollDown: true });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreData(listener);
+      scrollGrid(shadow, 200 * 20);
+      await waitFrame();
+      expect(listener).toHaveBeenCalledTimes(1);
+      // Loading flag is now true; a second near-bottom scroll must NOT
+      // retrigger until dataLoaded resets it.
+      scrollGrid(shadow, 200 * 20 - 40);
+      scrollGrid(shadow, 200 * 20);
+      await waitFrame();
+      expect(listener).toHaveBeenCalledTimes(1);
+      // Reset loading flag — now the next near-bottom scroll fires again.
+      await api.infiniteScroll.dataLoaded(true, true);
+      await waitFrame();
+      scrollGrid(shadow, 200 * 20 - 40);
+      await waitFrame();
+      scrollGrid(shadow, 200 * 20);
+      await waitFrame();
+      expect(listener.mock.calls.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it('setScrollDirections toggles which events fire', async () => {
+      const options = baseOptions({ infiniteScrollUp: true, infiniteScrollDown: true });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const topListener = vi.fn();
+      api.infiniteScroll.on.needLoadMoreDataTop(topListener);
+      api.infiniteScroll.setScrollDirections(false, true);
+      scrollGrid(shadow, 0);
+      await waitFrame();
+      expect(topListener).not.toHaveBeenCalled();
+    });
+
+    it('saveScrollPercentage + dataRemovedTop update state without crashing', async () => {
+      const options = baseOptions();
+      await mountGrid(options);
+      const api = getApi(options);
+      // Should be no-op in jsdom but exercises the code paths.
+      api.infiniteScroll.saveScrollPercentage();
+      api.infiniteScroll.dataRemovedTop(true, true);
+      api.infiniteScroll.dataRemovedBottom(true, true);
+      expect(api.infiniteScroll).toBeDefined();
+    });
+
+    it('resetScroll returns the viewport to the top', async () => {
+      const options = baseOptions({ infiniteScrollUp: true });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      scrollGrid(shadow, 50 * 20);
+      const viewport = shadow.querySelector<HTMLElement>('.grid-body-viewport')!;
+      expect(viewport.scrollTop).toBeGreaterThan(0);
+      api.infiniteScroll.resetScroll(true, true);
+      expect(viewport.scrollTop).toBe(0);
+    });
+  });
+});