@ornery/ui-grid-vanilla 0.1.10 → 1.0.1

package/src/utils/cell-class.ts

@@ -0,0 +1,70 @@
+/**
+ * Class-name builders for header / body cells. Shared between the initial
+ * markup builder and the patch path so both code paths produce identical
+ * output.
+ */
+
+export function bodyCellClass(
+  isOdd: boolean,
+  align: string,
+  isPinned: boolean,
+  isPinnedLeftLast: boolean,
+  isPinnedRightFirst: boolean,
+  isFocused: boolean,
+  isEditing: boolean,
+  isRowSelected: boolean,
+  isRowFocused: boolean,
+  isRowDirty: boolean,
+  isRowSaving: boolean,
+  isRowError: boolean,
+  isCellInvalid: boolean,
+): string {
+  let cls = 'body-cell ui-grid-cell';
+  if (isOdd) cls += ' body-cell-odd';
+  if (align === 'center') cls += ' align-center';
+  else if (align === 'end') cls += ' align-end';
+  if (isPinned) cls += ' is-pinned';
+  if (isPinnedLeftLast) cls += ' is-pinned-left-last';
+  if (isPinnedRightFirst) cls += ' is-pinned-right-first';
+  if (isFocused) cls += ' cell-focused';
+  if (isEditing) cls += ' cell-editing';
+  // Matches the old ui.grid.selection directive's ng-class output. Row-level
+  // state shows on every cell so selection stripes work across the whole row.
+  if (isRowSelected) cls += ' ui-grid-row-selected';
+  if (isRowFocused) cls += ' ui-grid-row-focused';
+  // Row-edit — matches the old `ui.grid.rowEdit` uiGridViewport directive's
+  // ng-class output. Repeated per-cell so the full-row stripe works.
+  if (isRowDirty) cls += ' ui-grid-row-dirty';
+  if (isRowSaving) cls += ' ui-grid-row-saving';
+  if (isRowError) cls += ' ui-grid-row-error';
+  // Validate — paints the invalid-cell badge + background when a validator
+  // has flagged this cell. Ports the `.invalid` class from ui.grid.validate.
+  if (isCellInvalid) cls += ' ui-grid-cell-invalid';
+  return cls;
+}
+
+export function headerCellClass(
+  isSortActive: boolean,
+  isPinned: boolean,
+  isPinnedLeftLast: boolean,
+  isPinnedRightFirst: boolean,
+  isPinMenuOpen: boolean,
+  isDragTarget: boolean,
+  isDragging: boolean,
+): string {
+  let cls = 'header-cell';
+  if (isSortActive) cls += ' is-active';
+  if (isPinned) cls += ' is-pinned';
+  if (isPinnedLeftLast) cls += ' is-pinned-left-last';
+  if (isPinnedRightFirst) cls += ' is-pinned-right-first';
+  if (isPinMenuOpen) cls += ' is-pin-menu-open';
+  if (isDragTarget) cls += ' is-drag-target';
+  if (isDragging) cls += ' is-dragging';
+  return cls;
+}
+
+export function cssEscape(value: string): string {
+  return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+    ? CSS.escape(value)
+    : value.replace(/([\\".#:[\](){}+~> ])/g, '\\$1');
+}

package/src/utils/display-items.ts

@@ -0,0 +1,15 @@
+import type { DisplayItem, GridRow, GroupItem } from '@ornery/ui-grid-core';
+
+/** Narrow a DisplayItem to a GroupItem. The grid pipeline's DisplayItem
+ * union already guarantees the `kind === 'group'` case; this helper keeps
+ * the cast in one place. */
+export function asGroupItem(item: DisplayItem): GroupItem {
+  return item as GroupItem;
+}
+
+/** Type guard for row items with the `row: GridRow` payload attached. */
+export function isRowItem(
+  item: DisplayItem,
+): item is DisplayItem & { kind: 'row'; row: GridRow } {
+  return item.kind === 'row';
+}

package/src/utils/dom.ts

@@ -0,0 +1,64 @@
+/**
+ * DOM + HTML utility helpers shared across the element's render / patch paths.
+ *
+ * `utils/*` modules may only depend on package-level imports — never on any
+ * other file in `src/`. Anything else risks forming an import cycle through
+ * the element root.
+ */
+
+export function escapeHtml(value: unknown): string {
+  const text = String(value ?? '');
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function setAttr(el: HTMLElement, name: string, value: string): void {
+  if (el.getAttribute(name) !== value) {
+    el.setAttribute(name, value);
+  }
+}
+
+export function setClass(el: HTMLElement, value: string): void {
+  if (el.className !== value) {
+    el.className = value;
+  }
+}
+
+export function setStyle(el: HTMLElement, value: string): void {
+  const current = el.getAttribute('style');
+  if (value) {
+    if (current !== value) el.setAttribute('style', value);
+  } else if (current !== null) {
+    el.removeAttribute('style');
+  }
+}
+
+/**
+ * Parse a fragment of HTML and return its first element child. Returns null
+ * when the markup is empty or contains only non-element nodes.
+ */
+export function createFromMarkup(html: string): HTMLElement | null {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = html;
+  return wrapper.firstElementChild as HTMLElement | null;
+}
+
+/**
+ * Swap an element inside a container, preserving the container's other
+ * children. Appends when there is no existing element.
+ */
+export function swapBodyChild(
+  container: HTMLElement,
+  current: HTMLElement | null,
+  next: HTMLElement,
+): void {
+  if (current) {
+    container.replaceChild(next, current);
+  } else {
+    container.appendChild(next);
+  }
+}

package/src/validate.test.ts

@@ -0,0 +1,170 @@
+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';
+
+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-validate-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const data: Row[] = [
+    { id: 'r1', name: 'Alpha' },
+    { id: 'r2', name: '' },
+    { id: 'r3', name: 'Gamma' },
+  ];
+  const options: GridOptions = {
+    id: 'validate-grid',
+    data,
+    columnDefs: [
+      { name: 'id' },
+      {
+        name: 'name',
+        displayName: 'Name',
+        enableCellEdit: true,
+        validators: { required: true, minLength: 3 },
+      },
+    ],
+    enableCellEdit: 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);
+  await waitFor(() => shadow.querySelector('.body-cell[data-row="r1"]'));
+  return { grid, shadow };
+}
+
+describe('vanilla grid validate', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  it('runValidators flips the cell invalid + raises validationFailed', async () => {
+    const options = baseOptions();
+    await mountGrid(options);
+    const api = getApi(options);
+    const handler = vi.fn();
+    api.validate.on.validationFailed(handler);
+
+    const col = options.columnDefs.find((c) => c.name === 'name')!;
+    await api.validate.runValidators(options.data[0] as Record<string, unknown>, col, '', 'Alpha');
+
+    expect(api.validate.isInvalid(options.data[0] as Record<string, unknown>, col)).toBe(true);
+    expect(handler).toHaveBeenCalled();
+    const errors = api.validate.getErrorMessages(
+      options.data[0] as Record<string, unknown>,
+      col,
+    );
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('getFormattedErrors returns an HTML block with the error label prefix', async () => {
+    const options = baseOptions();
+    await mountGrid(options);
+    const api = getApi(options);
+    const col = options.columnDefs.find((c) => c.name === 'name')!;
+    await api.validate.runValidators(options.data[0] as Record<string, unknown>, col, '', 'Alpha');
+    const html = api.validate.getFormattedErrors(options.data[0] as Record<string, unknown>, col);
+    expect(html).toContain('<p><b>');
+    expect(html).toContain('<br/>');
+  });
+
+  it('getInvalidRows sweeps the full data and returns every offending entity', async () => {
+    const options = baseOptions();
+    await mountGrid(options);
+    const api = getApi(options);
+    const invalid = await api.validate.getInvalidRows();
+    // Row r2 has name="" which fails both `required` and `minLength`.
+    expect(invalid.length).toBe(1);
+    expect(invalid[0]!).toBe(options.data[1]!);
+  });
+
+  it('renders the invalid class on cells whose value currently fails', async () => {
+    const options = baseOptions();
+    const { shadow } = await mountGrid(options);
+    const api = getApi(options);
+    const col = options.columnDefs.find((c) => c.name === 'name')!;
+    // Programmatically flip row 1 invalid via runValidators; the rendered
+    // cell should gain `.ui-grid-cell-invalid` on the next refresh.
+    await api.validate.runValidators(options.data[0] as Record<string, unknown>, col, '', 'Alpha');
+    api.core.refresh();
+    await waitFor(() =>
+      shadow.querySelector('.body-cell[data-row="r1"][data-column="name"].ui-grid-cell-invalid'),
+    );
+  });
+
+  it('registers a custom validator via setValidator', async () => {
+    const options = baseOptions({
+      columnDefs: [
+        { name: 'id' },
+        {
+          name: 'name',
+          enableCellEdit: true,
+          validators: { noSpaces: true },
+        },
+      ],
+    });
+    await mountGrid(options);
+    const api = getApi(options);
+    api.validate.setValidator(
+      'noSpaces',
+      () => (_oldValue, newValue) => !/\s/.test(String(newValue ?? '')),
+      () => 'Spaces not allowed',
+    );
+    const col = options.columnDefs.find((c) => c.name === 'name')!;
+    await api.validate.runValidators(
+      options.data[0] as Record<string, unknown>,
+      col,
+      'has space',
+      'Alpha',
+    );
+    expect(api.validate.isInvalid(options.data[0] as Record<string, unknown>, col)).toBe(true);
+    expect(
+      api.validate.getErrorMessages(options.data[0] as Record<string, unknown>, col),
+    ).toEqual(['Spaces not allowed']);
+  });
+});

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+import { scssInlineEsbuild } from './scss-plugin';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm', 'cjs'],
+  dts: true,
+  tsconfig: './tsconfig.json',
+  esbuildPlugins: [scssInlineEsbuild()],
+});

package/vite.config.ts

@@ -1,13 +1,22 @@
 import path from 'path';
 import { defineConfig } from 'vite';
+import { scssInlinePlugin } from './scss-plugin';
 
 export default defineConfig({
   root: path.resolve(__dirname, 'demo'),
+  plugins: [scssInlinePlugin()],
   resolve: {
     alias: {
       '@ornery/ui-grid-core': path.resolve(__dirname, '../ui-grid-core/src/index.ts'),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        loadPaths: [path.resolve(__dirname, 'node_modules')],
+      },
+    },
+  },
   optimizeDeps: {
     exclude: ['@ornery/ui-grid-core'],
   },
@@ -18,6 +27,6 @@ export default defineConfig({
   },
   test: {
     dir: path.resolve(__dirname, 'src'),
-    environment: 'jsdom',
+    environment: 'happy-dom',
   },
 });