@ornery/ui-grid-vanilla 0.1.10 → 1.0.0

package/src/components/grid-filter-cell/grid-filter-cell.ts

@@ -0,0 +1,121 @@
+import { renderFilterCell } from './grid-filter-cell.template';
+
+/**
+ * `<ui-grid-filter-cell>` — Column filter input element.
+ *
+ * An autonomous custom element that renders a filter input for a single grid column.
+ * Uses shadow DOM with scoped styles via `adoptedStyleSheets`.
+ *
+ * **Rendering pattern:** the template is mounted once in `connectedCallback` via
+ * `renderFilterCell()`. Attribute updates patch the existing input in place
+ * (value, placeholder, disabled) so the filter input never loses focus on re-renders.
+ *
+ * **CSS architecture:** Styles are scoped to the shadow DOM via `grid-filter-cell.scss`.
+ * CSS custom properties (`--ui-grid-*`) inherit from the parent grid's shadow tree.
+ *
+ * **Pinning:** The host element receives pinning classes (`is-pinned`, `is-pinned-left-last`,
+ * `is-pinned-right-first`) which are styled by the parent grid's CSS since the host element
+ * itself lives in the grid's shadow tree.
+ */
+export class UIGridFilterCell extends HTMLElement {
+  static readonly TAG = 'ui-grid-filter-cell';
+
+  columnName = '';
+  value = '';
+  placeholder = '';
+
+  private mounted = false;
+  private inputEl: HTMLInputElement | null = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes(): string[] {
+    return ['data-column', 'data-value', 'data-placeholder', 'data-disabled',
+            'data-pinned', 'data-pinned-left-last', 'data-pinned-right-first',
+            'data-sticky-style'];
+  }
+
+  connectedCallback(): void {
+    if (!this.mounted) {
+      this.columnName = this.getAttribute('data-column') ?? '';
+      this.value = this.getAttribute('data-value') ?? '';
+      this.placeholder = this.getAttribute('data-placeholder') ?? '';
+      renderFilterCell(this, this.shadowRoot!);
+      this.inputEl = this.shadowRoot!.querySelector('input');
+      this.mounted = true;
+    }
+    this.sync();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.mounted) {
+      this.sync();
+    }
+  }
+
+  private sync(): void {
+    const columnName = this.getAttribute('data-column') ?? '';
+    const value = this.getAttribute('data-value') ?? '';
+    const placeholder = this.getAttribute('data-placeholder') ?? '';
+    const disabled = this.getAttribute('data-disabled') === 'true';
+    const isPinned = this.getAttribute('data-pinned') === 'true';
+    const isPinnedLeftLast = this.getAttribute('data-pinned-left-last') === 'true';
+    const isPinnedRightFirst = this.getAttribute('data-pinned-right-first') === 'true';
+    const stickyStyle = this.getAttribute('data-sticky-style') ?? '';
+
+    this.columnName = columnName;
+    this.value = value;
+    this.placeholder = placeholder;
+
+    const nextClass = [
+      'filter-cell',
+      isPinned ? 'is-pinned' : '',
+      isPinnedLeftLast ? 'is-pinned-left-last' : '',
+      isPinnedRightFirst ? 'is-pinned-right-first' : '',
+    ].filter(Boolean).join(' ');
+    if (this.className !== nextClass) {
+      this.className = nextClass;
+    }
+
+    if (stickyStyle) {
+      if (this.getAttribute('style') !== stickyStyle) {
+        this.setAttribute('style', stickyStyle);
+      }
+    } else if (this.hasAttribute('style')) {
+      this.removeAttribute('style');
+    }
+
+    const input = this.inputEl;
+    if (input) {
+      if (input.dataset['column'] !== columnName) {
+        input.dataset['column'] = columnName;
+      }
+      if (input.placeholder !== placeholder) {
+        input.placeholder = placeholder;
+      }
+      // Only overwrite value when the input is not focused and the parent carries
+      // a different value — skipping this during typing preserves caret position.
+      const inputFocused = this.shadowRoot?.activeElement === input;
+      if (!inputFocused && input.value !== value) {
+        input.value = value;
+      }
+      if (input.disabled !== disabled) {
+        input.disabled = disabled;
+      }
+      // Non-filterable columns hide the input entirely — matching the old
+      // grid's empty ui-grid-filter-container behaviour. `display: none` is
+      // CSS-only (no DOM detach) so focus / value preservation still work
+      // when a column flips filterable on.
+      input.style.display = disabled ? 'none' : '';
+    }
+  }
+
+  static define(tagName = UIGridFilterCell.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridFilterCell);
+    }
+  }
+}

package/src/components/grid-filter-cell/index.ts

@@ -0,0 +1 @@
+export { UIGridFilterCell } from './grid-filter-cell';

package/src/components/grid-group-row/grid-group-row.scss

@@ -0,0 +1,24 @@
+// Group row shadow-scoped styles — composed entirely from core mixins.
+@use "@ornery/ui-grid-core/src/lib/styles/group-row" as gr;
+@use "@ornery/ui-grid-core/src/lib/styles/utilities" as util;
+
+:host {
+  @include gr.host-shadow;
+}
+
+span,
+small {
+  @include gr.muted-text;
+}
+
+.toggle-icon {
+  @include gr.toggle-icon;
+}
+
+.group-disclosure-icon {
+  @include gr.disclosure-icon;
+}
+
+.sr-only {
+  @include util.sr-only;
+}

package/src/components/grid-group-row/grid-group-row.template.ts

@@ -0,0 +1,23 @@
+import css from './grid-group-row.scss';
+import { adoptStyles } from '../../adopt-styles';
+
+const STYLE_KEY = {};
+
+interface GroupRowContext {
+  iconViewBox: string;
+  iconPath: string;
+  disclosureLabel: string;
+  field: string;
+  label: string;
+  count: string;
+  rowsSuffix: string;
+}
+
+export function renderGroupRow(ctx: GroupRowContext, shadowRoot: ShadowRoot): void {
+  adoptStyles(shadowRoot, css, STYLE_KEY);
+  shadowRoot.innerHTML =
+    `<svg class="toggle-icon group-disclosure-icon" viewBox="${ctx.iconViewBox}" aria-hidden="true" focusable="false"><path d="${ctx.iconPath}"></path></svg>` +
+    `<span class="sr-only">${ctx.disclosureLabel}</span>` +
+    `<strong>${ctx.field}: ${ctx.label}</strong>` +
+    `<span>${ctx.count} ${ctx.rowsSuffix}</span>`;
+}

package/src/components/grid-group-row/grid-group-row.ts

@@ -0,0 +1,94 @@
+import { renderGroupRow } from './grid-group-row.template';
+
+/**
+ * `<ui-grid-group-row>` — Group disclosure row element.
+ *
+ * An autonomous custom element that renders a group header row with a disclosure
+ * toggle icon, group field/label, and row count. Uses shadow DOM with scoped styles
+ * via `adoptedStyleSheets`.
+ *
+ * **Rendering pattern:** instance properties are populated from data attributes,
+ * then `renderGroupRow(this, shadowRoot)` writes the markup into the shadow root.
+ *
+ * **CSS architecture:** Styles are scoped to the shadow DOM via `grid-group-row.scss`.
+ * CSS custom properties (`--ui-grid-*`) inherit from the parent grid's shadow tree.
+ *
+ * **Event delegation:** The host element carries `data-action="toggle-group"` and
+ * `data-group` attributes so the parent grid's click handler can identify it without
+ * piercing the shadow boundary.
+ *
+ * @example
+ * ```html
+ * <ui-grid-group-row
+ *   data-action="toggle-group"
+ *   data-group="category:Fruit"
+ *   data-collapsed="false"
+ *   data-field="category"
+ *   data-label="Fruit"
+ *   data-count="5"
+ *   data-depth="0"
+ *   data-icon-path="M7 10l5 5 5-5z">
+ * </ui-grid-group-row>
+ * ```
+ */
+export class UIGridGroupRow extends HTMLElement {
+  static readonly TAG = 'ui-grid-group-row';
+
+  /** The grouping field name (e.g. "category"). */
+  field = '';
+  /** The group value label (e.g. "Fruit"). */
+  label = '';
+  /** Number of rows in this group. */
+  count = '0';
+  /** Accessibility label for the disclosure toggle. */
+  disclosureLabel = '';
+  /** SVG path data for the disclosure icon. */
+  iconPath = '';
+  /** SVG viewBox for the disclosure icon. */
+  iconViewBox = '0 0 24 24';
+  /** Suffix text after the count (e.g. "items"). */
+  rowsSuffix = '';
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes(): string[] {
+    return ['data-group', 'data-collapsed', 'data-field', 'data-label',
+            'data-count', 'data-depth', 'data-disclosure-label',
+            'data-icon-path', 'data-icon-view-box', 'data-rows-suffix'];
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  private render(): void {
+    const depth = parseInt(this.getAttribute('data-depth') ?? '0', 10);
+    this.field = this.getAttribute('data-field') ?? '';
+    this.label = this.getAttribute('data-label') ?? '';
+    this.count = this.getAttribute('data-count') ?? '0';
+    this.disclosureLabel = this.getAttribute('data-disclosure-label') ?? '';
+    this.iconPath = this.getAttribute('data-icon-path') ?? '';
+    this.iconViewBox = this.getAttribute('data-icon-view-box') ?? '0 0 24 24';
+    this.rowsSuffix = this.getAttribute('data-rows-suffix') ?? '';
+
+    this.className = 'group-row ui-grid-row ui-grid-group-row';
+    this.setAttribute('style', `grid-column: 1 / -1; padding-inline-start:${depth * 20 + 10}px`);
+
+    renderGroupRow(this, this.shadowRoot!);
+  }
+
+  static define(tagName = UIGridGroupRow.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridGroupRow);
+    }
+  }
+}

package/src/components/grid-group-row/index.ts

@@ -0,0 +1 @@
+export { UIGridGroupRow } from './grid-group-row';

package/src/components/grid-header-cell/grid-header-cell.ts

@@ -0,0 +1,17 @@
+/**
+ * `<ui-grid-header-cell>` — Column header cell element.
+ *
+ * An empty custom element. Same performance rationale as `<ui-grid-body-cell>`:
+ * the grid shell pre-computes `class`, `style`, `draggable`, and all `data-*`
+ * attributes into the emitted HTML string. No per-element lifecycle callback
+ * runs during parse — the parent is the single writer.
+ */
+export class UIGridHeaderCell extends HTMLElement {
+  static readonly TAG = 'ui-grid-header-cell';
+
+  static define(tagName = UIGridHeaderCell.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridHeaderCell);
+    }
+  }
+}

package/src/components/grid-header-cell/index.ts

@@ -0,0 +1 @@
+export { UIGridHeaderCell } from './grid-header-cell';

package/src/components/grid-pagination/grid-pagination.scss

@@ -0,0 +1,39 @@
+// Pagination shadow-scoped styles — composed entirely from core mixins.
+@use "@ornery/ui-grid-core/src/lib/styles/pagination" as pg;
+@use "@ornery/ui-grid-core/src/lib/styles/utilities" as util;
+
+:host {
+  @include pg.host-shadow;
+}
+
+p {
+  @include pg.range-text;
+}
+
+.pagination-controls {
+  @include pg.controls;
+}
+
+.pagination-button {
+  @include pg.button-shadow;
+}
+
+.pagination-button:disabled {
+  @include pg.button-disabled;
+}
+
+.pagination-icon {
+  @include pg.icon;
+}
+
+.pagination-size {
+  @include pg.size-label;
+}
+
+.pagination-size select {
+  @include pg.size-select-shadow;
+}
+
+.sr-only {
+  @include util.sr-only;
+}

package/src/components/grid-pagination/grid-pagination.template.ts

@@ -0,0 +1,40 @@
+import css from './grid-pagination.scss';
+import { adoptStyles } from '../../adopt-styles';
+
+const STYLE_KEY = {};
+
+interface PaginationContext {
+  rangeLabel: string;
+  prevLabel: string;
+  prevIconViewBox: string;
+  prevIconPath: string;
+  pageLabel: string;
+  currentPage: string;
+  ofLabel: string;
+  totalPages: string;
+  nextLabel: string;
+  nextIconViewBox: string;
+  nextIconPath: string;
+  rowsLabel: string;
+}
+
+export function renderPagination(ctx: PaginationContext, shadowRoot: ShadowRoot): void {
+  adoptStyles(shadowRoot, css, STYLE_KEY);
+  shadowRoot.innerHTML =
+    `<p>${ctx.rangeLabel}</p>` +
+    `<div class="pagination-controls">` +
+      `<button type="button" class="pagination-button" data-action="page-prev" aria-label="${ctx.prevLabel}">` +
+        `<svg class="pagination-icon" viewBox="${ctx.prevIconViewBox}" aria-hidden="true" focusable="false"><path d="${ctx.prevIconPath}"></path></svg>` +
+        `<span class="sr-only">${ctx.prevLabel}</span>` +
+      `</button>` +
+      `<span>${ctx.pageLabel} ${ctx.currentPage} ${ctx.ofLabel} ${ctx.totalPages}</span>` +
+      `<button type="button" class="pagination-button" data-action="page-next" aria-label="${ctx.nextLabel}">` +
+        `<svg class="pagination-icon" viewBox="${ctx.nextIconViewBox}" aria-hidden="true" focusable="false"><path d="${ctx.nextIconPath}"></path></svg>` +
+        `<span class="sr-only">${ctx.nextLabel}</span>` +
+      `</button>` +
+      `<label class="pagination-size">` +
+        `<span class="sr-only">${ctx.rowsLabel}</span>` +
+        `<select class="page-size" data-role="page-size"></select>` +
+      `</label>` +
+    `</div>`;
+}

package/src/components/grid-pagination/grid-pagination.ts

@@ -0,0 +1,204 @@
+import { renderPagination } from './grid-pagination.template';
+
+/**
+ * `<ui-grid-pagination>` — Pagination controls element.
+ *
+ * Mounts once via `template(this).connect()` in `connectedCallback`; subsequent
+ * attribute changes patch the existing DOM in place (text labels, button disabled
+ * flags, select options). The parent grid re-uses a single `<ui-grid-pagination>`
+ * node and just sets data-attributes on it, so nothing inside ever loses focus.
+ */
+export class UIGridPagination extends HTMLElement {
+  static readonly TAG = 'ui-grid-pagination';
+
+  rangeLabel = '';
+  currentPage = '1';
+  totalPages = '1';
+  pageLabel = '';
+  ofLabel = '';
+  prevLabel = '';
+  nextLabel = '';
+  rowsLabel = '';
+  prevIconPath = '';
+  prevIconViewBox = '0 0 24 24';
+  nextIconPath = '';
+  nextIconViewBox = '0 0 24 24';
+
+  private mounted = false;
+  private rangeEl: HTMLElement | null = null;
+  private pageCounterEl: HTMLElement | null = null;
+  private prevBtn: HTMLButtonElement | null = null;
+  private nextBtn: HTMLButtonElement | null = null;
+  private prevIconPathEl: SVGPathElement | null = null;
+  private nextIconPathEl: SVGPathElement | null = null;
+  private prevLabelSr: HTMLElement | null = null;
+  private nextLabelSr: HTMLElement | null = null;
+  private rowsLabelSr: HTMLElement | null = null;
+  private sizeSelect: HTMLSelectElement | null = null;
+  private lastPageSizesKey = '';
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes(): string[] {
+    return ['data-range-label', 'data-current-page', 'data-total-pages',
+            'data-page-label', 'data-of-label', 'data-prev-label', 'data-next-label',
+            'data-rows-label', 'data-prev-icon-path', 'data-prev-icon-view-box',
+            'data-next-icon-path', 'data-next-icon-view-box',
+            'data-page-sizes', 'data-page-size', 'data-prev-disabled', 'data-next-disabled'];
+  }
+
+  connectedCallback(): void {
+    if (!this.mounted) {
+      this.captureTemplateBindings();
+      renderPagination(this, this.shadowRoot!);
+      this.cacheElements();
+      this.attachSelectListener();
+      this.mounted = true;
+    }
+    this.sync();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.mounted) {
+      this.sync();
+    }
+  }
+
+  private captureTemplateBindings(): void {
+    this.rangeLabel = this.getAttribute('data-range-label') ?? '';
+    this.currentPage = this.getAttribute('data-current-page') ?? '1';
+    this.totalPages = this.getAttribute('data-total-pages') ?? '1';
+    this.pageLabel = this.getAttribute('data-page-label') ?? '';
+    this.ofLabel = this.getAttribute('data-of-label') ?? '';
+    this.prevLabel = this.getAttribute('data-prev-label') ?? '';
+    this.nextLabel = this.getAttribute('data-next-label') ?? '';
+    this.rowsLabel = this.getAttribute('data-rows-label') ?? '';
+    this.prevIconPath = this.getAttribute('data-prev-icon-path') ?? '';
+    this.prevIconViewBox = this.getAttribute('data-prev-icon-view-box') ?? '0 0 24 24';
+    this.nextIconPath = this.getAttribute('data-next-icon-path') ?? '';
+    this.nextIconViewBox = this.getAttribute('data-next-icon-view-box') ?? '0 0 24 24';
+  }
+
+  private cacheElements(): void {
+    const shadow = this.shadowRoot!;
+    this.rangeEl = shadow.querySelector('p');
+    this.prevBtn = shadow.querySelector('[data-action="page-prev"]');
+    this.nextBtn = shadow.querySelector('[data-action="page-next"]');
+    this.pageCounterEl = shadow.querySelector('.pagination-controls > span');
+    this.prevIconPathEl = this.prevBtn?.querySelector('path') ?? null;
+    this.nextIconPathEl = this.nextBtn?.querySelector('path') ?? null;
+    this.prevLabelSr = this.prevBtn?.querySelector('.sr-only') ?? null;
+    this.nextLabelSr = this.nextBtn?.querySelector('.sr-only') ?? null;
+    this.rowsLabelSr = shadow.querySelector('.pagination-size .sr-only');
+    this.sizeSelect = shadow.querySelector('select[data-role="page-size"]');
+  }
+
+  private attachSelectListener(): void {
+    const select = this.sizeSelect;
+    if (!select) return;
+    select.addEventListener('change', () => {
+      this.dispatchEvent(new CustomEvent('grid-page-size', {
+        bubbles: true,
+        composed: true,
+        detail: { pageSize: Number.parseInt(select.value, 10) },
+      }));
+    });
+  }
+
+  private sync(): void {
+    this.className = 'pagination-bar ui-grid-pagination';
+
+    const rangeLabel = this.getAttribute('data-range-label') ?? '';
+    const currentPage = this.getAttribute('data-current-page') ?? '1';
+    const totalPages = this.getAttribute('data-total-pages') ?? '1';
+    const pageLabel = this.getAttribute('data-page-label') ?? '';
+    const ofLabel = this.getAttribute('data-of-label') ?? '';
+    const prevLabel = this.getAttribute('data-prev-label') ?? '';
+    const nextLabel = this.getAttribute('data-next-label') ?? '';
+    const rowsLabel = this.getAttribute('data-rows-label') ?? '';
+    const prevIconPath = this.getAttribute('data-prev-icon-path') ?? '';
+    const prevIconViewBox = this.getAttribute('data-prev-icon-view-box') ?? '0 0 24 24';
+    const nextIconPath = this.getAttribute('data-next-icon-path') ?? '';
+    const nextIconViewBox = this.getAttribute('data-next-icon-view-box') ?? '0 0 24 24';
+    const pageSizesAttr = this.getAttribute('data-page-sizes') ?? '[10,25,50,100]';
+    const pageSize = parseInt(this.getAttribute('data-page-size') ?? '25', 10);
+    const prevDisabled = this.getAttribute('data-prev-disabled') === 'true';
+    const nextDisabled = this.getAttribute('data-next-disabled') === 'true';
+
+    if (this.rangeEl && this.rangeEl.textContent !== rangeLabel) {
+      this.rangeEl.textContent = rangeLabel;
+    }
+
+    if (this.pageCounterEl) {
+      const pageText = `${pageLabel} ${currentPage} ${ofLabel} ${totalPages}`;
+      if (this.pageCounterEl.textContent !== pageText) {
+        this.pageCounterEl.textContent = pageText;
+      }
+    }
+
+    if (this.prevBtn) {
+      if (this.prevBtn.getAttribute('aria-label') !== prevLabel) {
+        this.prevBtn.setAttribute('aria-label', prevLabel);
+      }
+      if (this.prevBtn.disabled !== prevDisabled) {
+        this.prevBtn.disabled = prevDisabled;
+      }
+    }
+    if (this.prevIconPathEl && this.prevIconPathEl.getAttribute('d') !== prevIconPath) {
+      this.prevIconPathEl.setAttribute('d', prevIconPath);
+    }
+    const prevSvg = this.prevBtn?.querySelector('svg');
+    if (prevSvg && prevSvg.getAttribute('viewBox') !== prevIconViewBox) {
+      prevSvg.setAttribute('viewBox', prevIconViewBox);
+    }
+    if (this.prevLabelSr && this.prevLabelSr.textContent !== prevLabel) {
+      this.prevLabelSr.textContent = prevLabel;
+    }
+
+    if (this.nextBtn) {
+      if (this.nextBtn.getAttribute('aria-label') !== nextLabel) {
+        this.nextBtn.setAttribute('aria-label', nextLabel);
+      }
+      if (this.nextBtn.disabled !== nextDisabled) {
+        this.nextBtn.disabled = nextDisabled;
+      }
+    }
+    if (this.nextIconPathEl && this.nextIconPathEl.getAttribute('d') !== nextIconPath) {
+      this.nextIconPathEl.setAttribute('d', nextIconPath);
+    }
+    const nextSvg = this.nextBtn?.querySelector('svg');
+    if (nextSvg && nextSvg.getAttribute('viewBox') !== nextIconViewBox) {
+      nextSvg.setAttribute('viewBox', nextIconViewBox);
+    }
+    if (this.nextLabelSr && this.nextLabelSr.textContent !== nextLabel) {
+      this.nextLabelSr.textContent = nextLabel;
+    }
+
+    if (this.rowsLabelSr && this.rowsLabelSr.textContent !== rowsLabel) {
+      this.rowsLabelSr.textContent = rowsLabel;
+    }
+
+    const select = this.sizeSelect;
+    if (select) {
+      const pageSizesKey = `${pageSizesAttr}|${pageSize}`;
+      if (pageSizesKey !== this.lastPageSizesKey) {
+        const pageSizes = JSON.parse(pageSizesAttr) as number[];
+        select.innerHTML = pageSizes
+          .map((size) => `<option value="${size}" ${size === pageSize ? 'selected' : ''}>${size}</option>`)
+          .join('');
+        this.lastPageSizesKey = pageSizesKey;
+      } else if (select.value !== String(pageSize)) {
+        select.value = String(pageSize);
+      }
+    }
+  }
+
+  static define(tagName = UIGridPagination.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridPagination);
+    }
+  }
+}

package/src/components/grid-pagination/index.ts

@@ -0,0 +1 @@
+export { UIGridPagination } from './grid-pagination';