@astronox/core 0.1.0

package/src/patterns/Table/tableFilterController.ts

@@ -0,0 +1,206 @@
+import {
+  clearCombobox,
+  getComboboxValues,
+  type ComboboxChangeDetail,
+} from '../Combobox/comboboxController';
+import { resetTableSort } from './tableSortController';
+
+type FilterValues = Readonly<Record<string, readonly string[]>>;
+
+type CachedFilterValues = {
+  values: FilterValues;
+  normalizedSearch: readonly string[];
+};
+
+const initializedAttribute = 'data-table-filters-initialized';
+const noop = (): void => undefined;
+
+export function initTableFilters(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const table = root.querySelector<HTMLElement>('[data-table-filter-table]');
+  const search = root.querySelector<HTMLInputElement>(
+    '[data-table-filter-search]',
+  );
+  const fields = Array.from(
+    root.querySelectorAll<HTMLElement>('[data-table-filter-field]'),
+  );
+  const reset = root.querySelector<HTMLButtonElement>(
+    '[data-table-filter-reset]',
+  );
+
+  if (!table || (!search && fields.length === 0)) return noop;
+
+  root.setAttribute(initializedAttribute, 'true');
+  const locale = document.documentElement.lang || undefined;
+  const normalize = (value: string): string =>
+    value
+      .normalize('NFD')
+      .replace(/\p{Diacritic}/gu, '')
+      .toLocaleLowerCase(locale);
+  const selections = new Map<string, string>();
+  const filterValuesCache = new WeakMap<HTMLElement, CachedFilterValues>();
+  const rows: HTMLElement[] = [];
+  let scheduledFrame: number | null = null;
+
+  const registerRows = (candidates: readonly HTMLElement[]): void => {
+    for (const row of candidates) {
+      if (filterValuesCache.has(row)) continue;
+      const values = parseFilterValues(row.dataset.tableFilterValues);
+      filterValuesCache.set(row, {
+        values,
+        normalizedSearch: (values.search ?? []).map(normalize),
+      });
+      rows.push(row);
+    }
+  };
+
+  const isLoadingAllRows = (): boolean => {
+    const pagination = table.querySelector<HTMLElement>(
+      '[data-table-pagination]',
+    );
+    const state = pagination?.dataset.tableProgressiveState;
+    return Boolean(
+      pagination &&
+      !pagination.hidden &&
+      state !== 'complete' &&
+      state !== 'error',
+    );
+  };
+
+  const updateEmptyState = (visibleRows: number, active: boolean): void => {
+    const empty = table.querySelector<HTMLElement>('[data-table-filter-empty]');
+    if (!empty) return;
+    empty.hidden = !active || visibleRows > 0 || isLoadingAllRows();
+  };
+
+  const applyFilters = (): void => {
+    const query = normalize(search?.value.trim() ?? '');
+    const activeSelections = [...selections.entries()].filter(
+      ([, value]) => value.length > 0,
+    );
+    const active = query.length > 0 || activeSelections.length > 0;
+    let visibleRows = 0;
+
+    for (const row of rows) {
+      const cached = filterValuesCache.get(row);
+      if (!cached) continue;
+      const matchesSearch =
+        query.length === 0 ||
+        cached.normalizedSearch.some((value) => value.includes(query));
+      const matchesSelections = activeSelections.every(
+        ([field, selectedValue]) =>
+          (cached.values[field] ?? []).includes(selectedValue),
+      );
+      const visible = matchesSearch && matchesSelections;
+
+      if (row.hidden !== !visible) row.hidden = !visible;
+      if (visible) visibleRows += 1;
+    }
+
+    updateEmptyState(visibleRows, active);
+    if (active && isLoadingAllRows()) {
+      table.dispatchEvent(new CustomEvent('table:load-all', { bubbles: true }));
+    }
+  };
+
+  const scheduleFilters = (): void => {
+    if (scheduledFrame !== null) return;
+    scheduledFrame = window.requestAnimationFrame(() => {
+      scheduledFrame = null;
+      applyFilters();
+    });
+  };
+
+  const handleSearch = (): void => {
+    scheduleFilters();
+  };
+
+  const handleComboboxChange = (event: Event): void => {
+    const customEvent = event as CustomEvent<ComboboxChangeDetail>;
+    const target = event.target;
+    if (
+      !(target instanceof HTMLElement) ||
+      customEvent.detail?.mode !== 'options'
+    ) {
+      return;
+    }
+
+    const field = target.dataset.tableFilterField;
+    if (!field) return;
+    selections.set(field, customEvent.detail.values[0] ?? '');
+    scheduleFilters();
+  };
+
+  const handleRowsAppended = (event: Event): void => {
+    const detail = (event as CustomEvent<{ rows?: readonly HTMLElement[] }>)
+      .detail;
+    registerRows(detail?.rows ?? []);
+    scheduleFilters();
+  };
+
+  const handleProgressiveComplete = (): void => {
+    scheduleFilters();
+  };
+
+  const handleReset = (): void => {
+    if (search) search.value = '';
+    for (const field of fields) {
+      clearCombobox(field, { emit: false });
+    }
+    selections.clear();
+    resetTableSort(table);
+    scheduleFilters();
+  };
+
+  for (const field of fields) {
+    const fieldName = field.dataset.tableFilterField;
+    const selectedValue = getComboboxValues(field)[0];
+    if (fieldName && selectedValue) selections.set(fieldName, selectedValue);
+  }
+  registerRows(
+    Array.from(
+      table.querySelectorAll<HTMLElement>(
+        '[data-table-row][data-table-filter-values]',
+      ),
+    ),
+  );
+  applyFilters();
+  search?.addEventListener('input', handleSearch);
+  root.addEventListener('combobox:change', handleComboboxChange);
+  table.addEventListener('table:rows-appended', handleRowsAppended);
+  table.addEventListener(
+    'table:progressive-complete',
+    handleProgressiveComplete,
+  );
+  reset?.addEventListener('click', handleReset);
+
+  return () => {
+    if (scheduledFrame !== null) {
+      window.cancelAnimationFrame(scheduledFrame);
+      scheduledFrame = null;
+    }
+    search?.removeEventListener('input', handleSearch);
+    root.removeEventListener('combobox:change', handleComboboxChange);
+    table.removeEventListener('table:rows-appended', handleRowsAppended);
+    table.removeEventListener(
+      'table:progressive-complete',
+      handleProgressiveComplete,
+    );
+    reset?.removeEventListener('click', handleReset);
+    for (const row of rows) row.hidden = false;
+    updateEmptyState(0, false);
+    root.removeAttribute(initializedAttribute);
+  };
+}
+
+function parseFilterValues(value: string | undefined): FilterValues {
+  if (!value) return {};
+
+  try {
+    const parsed = JSON.parse(value);
+    return parsed && typeof parsed === 'object' ? (parsed as FilterValues) : {};
+  } catch {
+    return {};
+  }
+}

package/src/patterns/Table/tableHeaderOverflowController.ts

@@ -0,0 +1,105 @@
+const initializedAttribute = 'data-table-header-overflow-initialized';
+const labelSelector = '[data-table-header-overflow-label]';
+const textSelector = '[data-table-header-overflow-text-node]';
+const overflowedAttribute = 'data-table-header-overflowed';
+const overflowTolerance = 0.5;
+const noop = (): void => undefined;
+
+type HeaderLabel = {
+  root: HTMLElement;
+  text: HTMLElement;
+  value: string;
+};
+
+function truncateLabel(label: HeaderLabel): void {
+  const { root, text, value } = label;
+  text.textContent = value;
+  root.removeAttribute(overflowedAttribute);
+
+  if (text.scrollWidth - text.clientWidth <= overflowTolerance) {
+    return;
+  }
+
+  root.setAttribute(overflowedAttribute, '');
+  const characters = Array.from(value);
+  let lowerBound = 0;
+  let upperBound = characters.length;
+
+  while (lowerBound < upperBound) {
+    const candidateLength = Math.ceil((lowerBound + upperBound) / 2);
+    text.textContent = characters
+      .slice(0, candidateLength)
+      .join('')
+      .trimEnd();
+
+    if (text.scrollWidth - text.clientWidth <= overflowTolerance) {
+      lowerBound = candidateLength;
+    } else {
+      upperBound = candidateLength - 1;
+    }
+  }
+
+  text.textContent = characters.slice(0, lowerBound).join('').trimEnd();
+}
+
+export function initTableHeaderOverflow(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return noop;
+  }
+
+  const labels = Array.from(
+    root.querySelectorAll<HTMLElement>(labelSelector),
+  ).flatMap((labelRoot): HeaderLabel[] => {
+    const text = labelRoot.querySelector<HTMLElement>(textSelector);
+    const value = labelRoot.dataset.tableHeaderOverflowText;
+    return text && value !== undefined
+      ? [{ root: labelRoot, text, value }]
+      : [];
+  });
+
+  if (labels.length === 0) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+  let disposed = false;
+  let frame: number | undefined;
+
+  const sync = (): void => {
+    frame = undefined;
+    for (const label of labels) {
+      truncateLabel(label);
+    }
+  };
+
+  const schedule = (): void => {
+    if (disposed || frame !== undefined) {
+      return;
+    }
+    frame = window.requestAnimationFrame(sync);
+  };
+
+  const resizeObserver =
+    'ResizeObserver' in window ? new ResizeObserver(schedule) : null;
+  for (const label of labels) {
+    const cell = label.root.closest<HTMLElement>('.table-header__cell');
+    if (cell) {
+      resizeObserver?.observe(cell);
+    }
+  }
+  schedule();
+  void document.fonts.ready.then(schedule);
+
+  return () => {
+    disposed = true;
+    if (frame !== undefined) {
+      window.cancelAnimationFrame(frame);
+    }
+    resizeObserver?.disconnect();
+    for (const label of labels) {
+      label.text.textContent = label.value;
+      label.root.removeAttribute(overflowedAttribute);
+    }
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/Table/tableLayout.ts

@@ -0,0 +1,113 @@
+import type {
+  TableColumn,
+  TableColumnAlignment,
+  TableColumnRole,
+} from '../../display/contracts';
+
+export type TableLayout = 'default' | 'index';
+export type TableIndexSizing = 'compact' | 'overflow';
+
+const roleAlignments = {
+  ordinal: 'center',
+  media: 'center',
+  primary: 'start',
+  value: 'center',
+  collection: 'start',
+} satisfies Record<TableColumnRole, TableColumnAlignment>;
+
+const compactIndexRoleMinimums = {
+  ordinal: 3.5,
+  media: 5,
+  primary: 8,
+  value: 4.75,
+  collection: 6.25,
+} satisfies Record<TableColumnRole, number>;
+
+const regularIndexRoleMinimums = {
+  ...compactIndexRoleMinimums,
+  value: 7,
+} satisfies Record<TableColumnRole, number>;
+
+export function getTableColumnDensity(
+  columns: readonly TableColumn[],
+): 'compact' | 'regular' {
+  return columns.length >= 7 ? 'compact' : 'regular';
+}
+
+export function getTableColumnTemplate(
+  columns: readonly TableColumn[],
+  layout: TableLayout = 'default',
+  indexSizing: TableIndexSizing = 'compact',
+): string {
+  const indexMinimums = getIndexRoleMinimums(columns);
+
+  return columns
+    .map((column) =>
+      layout === 'index'
+        ? indexSizing === 'overflow'
+          ? 'max-content'
+          : getIndexColumnTrack(column.role, indexMinimums)
+        : getDefaultColumnTrack(column),
+    )
+    .join(' ');
+}
+
+export function getTableMinimumInlineSize(
+  columns: readonly TableColumn[],
+  layout: TableLayout = 'default',
+): string | undefined {
+  if (layout !== 'index') {
+    return undefined;
+  }
+
+  const indexMinimums = getIndexRoleMinimums(columns);
+  const minimum = columns.reduce(
+    (total, column) => total + indexMinimums[column.role],
+    0,
+  );
+  return `${minimum}rem`;
+}
+
+export function getTableColumnAlignment(
+  column: TableColumn,
+): TableColumnAlignment {
+  return column.align ?? roleAlignments[column.role];
+}
+
+export function getTableHeaderAlignment(
+  column: TableColumn,
+): TableColumnAlignment {
+  return column.headerAlign ?? getTableColumnAlignment(column);
+}
+
+function getIndexRoleMinimums(
+  columns: readonly TableColumn[],
+): Record<TableColumnRole, number> {
+  return getTableColumnDensity(columns) === 'compact'
+    ? compactIndexRoleMinimums
+    : regularIndexRoleMinimums;
+}
+
+function getIndexColumnTrack(
+  role: TableColumnRole,
+  minimums: Record<TableColumnRole, number>,
+): string {
+  const minimum = `${minimums[role]}rem`;
+  return role === 'primary' ? `minmax(${minimum}, 1fr)` : minimum;
+}
+
+function getDefaultColumnTrack(column: TableColumn): string {
+  if (column.sizing === 'fill') {
+    return column.wrap
+      ? 'minmax(min-content, 1fr)'
+      : 'minmax(max-content, 1fr)';
+  }
+
+  if (column.role === 'primary') {
+    return column.wrap
+      ? 'minmax(min-content, 1fr)'
+      : 'minmax(max-content, 1fr)';
+  }
+
+  return 'max-content';
+}