@adia-ai/web-components 0.0.16 → 0.0.18

package/components/table-toolbar/table-toolbar.js

@@ -0,0 +1,565 @@
+/**
+ * <table-toolbar-ui for="emps" text="All Employees" count="32"></table-toolbar-ui>
+ *
+ * Companion / header bar for a sibling table-ui. Renders:
+ *   • title + optional count badge
+ *   • filter / sort / columns popover buttons
+ *   • search input
+ *   • optional [slot="actions"] trailing region
+ *
+ * [for] resolution mirrors chart-legend-ui — the toolbar mounts an element by
+ * id, then dispatches state changes against it. When [for] is absent, falls
+ * back to the first table-ui sibling under the same parent.
+ *
+ * Popovers use the platform Popover API + core/anchor.js, the same primitives
+ * that menu-ui / popover-ui / toolbar-ui already use in this package.
+ *
+ * State flow:
+ *   search        → table.search       (string property)
+ *   filters       → table.setFilter()  (per-key)
+ *   sort          → simulated click on table's [data-sort-key] header
+ *   column hidden → table.columns =    (clone with hidden flag flipped)
+ */
+
+import { AdiaElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
+
+const SEARCH_DEBOUNCE = 200;
+
+class AdiaTableToolbar extends AdiaElement {
+  static properties = {
+    for:         { type: String,  default: '',         reflect: true },
+    text:        { type: String,  default: '',         reflect: false },
+    count:       { type: String,  default: '',         reflect: false },
+    filterable:  { type: Boolean, default: true,       reflect: true },
+    sortable:    { type: Boolean, default: true,       reflect: true },
+    columns:     { type: Boolean, default: true,       reflect: true },
+    searchable:  { type: Boolean, default: true,       reflect: true },
+    placeholder: { type: String,  default: 'Search...', reflect: false },
+    variant:     { type: String,  default: 'default',  reflect: true },
+  };
+
+  static template = () => null;
+
+  #target = null;
+  #targetListeners = [];
+  #searchTimer = null;
+  #activePopover = null;       // { btn, panel, cleanup }
+  #docListenersBound = false;
+
+  // ── Lifecycle ────────────────────────────────────────────────────────────
+
+  connected() {
+    this.setAttribute('role', 'toolbar');
+    this.#stamp();
+    this.#resolveTarget();
+    this.#syncFromTarget();
+  }
+
+  disconnected() {
+    clearTimeout(this.#searchTimer);
+    this.#searchTimer = null;
+    this.#closePopover();
+    this.#detachTarget();
+  }
+
+  render() {
+    // [for] / count / text changes come through here.
+    this.#resolveTarget();
+    this.#syncFromTarget();
+    this.#updateTitle();
+  }
+
+  // ── Target resolution ────────────────────────────────────────────────────
+
+  #resolveTarget() {
+    const next = this.#findTarget();
+    if (next === this.#target) return;
+    this.#detachTarget();
+    if (!next) return;
+    this.#target = next;
+
+    const onSort = () => this.#refreshSortPanel();
+    const onFilter = () => this.#refreshFilterPanel();
+    next.addEventListener('sort', onSort);
+    next.addEventListener('filter-change', onFilter);
+    this.#targetListeners.push(['sort', onSort], ['filter-change', onFilter]);
+  }
+
+  #findTarget() {
+    if (this.for) {
+      const root = this.getRootNode?.();
+      const byId = root?.getElementById?.(this.for) || document.getElementById(this.for);
+      if (byId && byId.tagName?.toLowerCase() === 'table-ui') return byId;
+      return null;
+    }
+    // Fallback — first sibling table-ui in the same parent.
+    const parent = this.parentElement;
+    if (!parent) return null;
+    return parent.querySelector(':scope table-ui') || null;
+  }
+
+  #detachTarget() {
+    if (this.#target) {
+      for (const [evt, fn] of this.#targetListeners) {
+        this.#target.removeEventListener(evt, fn);
+      }
+    }
+    this.#targetListeners = [];
+    this.#target = null;
+  }
+
+  // ── DOM stamp ────────────────────────────────────────────────────────────
+
+  #stamp() {
+    if (this.querySelector(':scope > [data-toolbar]')) return;
+
+    const root = document.createElement('div');
+    root.setAttribute('data-toolbar', '');
+
+    // Title cluster
+    const title = document.createElement('div');
+    title.setAttribute('data-title', '');
+
+    const heading = document.createElement('span');
+    heading.setAttribute('data-heading', '');
+    title.appendChild(heading);
+
+    const badge = document.createElement('badge-ui');
+    badge.setAttribute('data-count-badge', '');
+    badge.setAttribute('size', 'sm');
+    badge.setAttribute('variant', 'muted');
+    badge.hidden = true;
+    title.appendChild(badge);
+
+    // Controls cluster
+    const controls = document.createElement('div');
+    controls.setAttribute('data-controls', '');
+    controls.appendChild(this.#mkButton('filter', 'Filter', 'funnel-simple'));
+    controls.appendChild(this.#mkButton('sort', 'Sort', 'arrows-down-up'));
+    controls.appendChild(this.#mkButton('columns', 'Columns', 'columns'));
+
+    // Search
+    const search = document.createElement('input-ui');
+    search.setAttribute('data-search', '');
+    search.setAttribute('type', 'search');
+    search.setAttribute('prefix', 'magnifying-glass');
+    search.setAttribute('placeholder', this.placeholder);
+    search.addEventListener('input', this.#onSearchInput);
+
+    // Actions slot passthrough — we move any pre-existing [slot="actions"] children here
+    const actionsSlot = document.createElement('div');
+    actionsSlot.setAttribute('data-actions', '');
+    for (const node of [...this.children]) {
+      if (node === root) continue;
+      if (node.getAttribute?.('slot') === 'actions') {
+        actionsSlot.appendChild(node);
+      }
+    }
+
+    root.appendChild(title);
+    root.appendChild(controls);
+    root.appendChild(search);
+    root.appendChild(actionsSlot);
+
+    this.appendChild(root);
+    this.#updateTitle();
+    this.#updateControlVisibility();
+  }
+
+  #mkPopoverAction(label, onClick) {
+    const btn = document.createElement('button-ui');
+    btn.setAttribute('data-popover-action', '');
+    btn.setAttribute('text', label);
+    btn.setAttribute('variant', 'ghost');
+    btn.setAttribute('size', 'sm');
+    btn.setAttribute('stretch', '');
+    btn.addEventListener('click', onClick);
+    return btn;
+  }
+
+  #mkButton(kind, label, icon) {
+    const btn = document.createElement('button-ui');
+    btn.setAttribute('data-toolbar-btn', kind);
+    btn.setAttribute('icon', icon);
+    btn.setAttribute('text', label);
+    btn.setAttribute('variant', 'outline');
+    btn.setAttribute('size', 'sm');
+    btn.setAttribute('aria-haspopup', 'menu');
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.#togglePopover(kind, btn);
+    });
+    return btn;
+  }
+
+  #updateTitle() {
+    const heading = this.querySelector(':scope [data-heading]');
+    if (!heading) return;
+    if (this.text) {
+      heading.textContent = this.text;
+      heading.hidden = false;
+    } else if (heading.textContent.trim()) {
+      heading.hidden = false;
+    } else {
+      heading.hidden = true;
+    }
+
+    const badge = this.querySelector(':scope [data-count-badge]');
+    if (!badge) return;
+    const explicit = this.count?.toString().trim();
+    const fallback = this.#target?.data?.length;
+    const value = explicit || (Number.isFinite(fallback) ? String(fallback) : '');
+    if (value) {
+      badge.setAttribute('text', value);
+      badge.hidden = false;
+    } else {
+      badge.hidden = true;
+    }
+  }
+
+  #updateControlVisibility() {
+    const root = this.querySelector(':scope > [data-toolbar]');
+    if (!root) return;
+
+    const setHidden = (sel, hidden) => {
+      const el = root.querySelector(sel);
+      if (el) el.hidden = hidden;
+    };
+
+    setHidden('[data-toolbar-btn="filter"]',  !this.filterable);
+    setHidden('[data-toolbar-btn="sort"]',    !this.sortable);
+    setHidden('[data-toolbar-btn="columns"]', !this.columns);
+    setHidden('[data-search]',                !this.searchable);
+  }
+
+  // Re-run on attribute changes for boolean flags.
+  attributeChanged(name) {
+    if (['filterable', 'sortable', 'columns', 'searchable'].includes(name)) {
+      this.#updateControlVisibility();
+    }
+    if (name === 'placeholder') {
+      const search = this.querySelector(':scope [data-search]');
+      search?.setAttribute('placeholder', this.placeholder);
+    }
+  }
+
+  // ── Search ───────────────────────────────────────────────────────────────
+
+  #onSearchInput = (e) => {
+    const value = e.target?.value ?? '';
+    clearTimeout(this.#searchTimer);
+    this.#searchTimer = setTimeout(() => {
+      if (this.#target) this.#target.search = value;
+      this.dispatchEvent(new CustomEvent('search', {
+        bubbles: true,
+        detail: { value },
+      }));
+    }, SEARCH_DEBOUNCE);
+  };
+
+  // ── Sync from target (initial paint) ─────────────────────────────────────
+
+  #syncFromTarget() {
+    if (!this.#target) return;
+    const search = this.querySelector(':scope [data-search]');
+    if (search && this.#target.search) {
+      search.value = this.#target.search;
+    }
+    this.#updateTitle();
+  }
+
+  // ── Popovers ─────────────────────────────────────────────────────────────
+
+  #togglePopover(kind, btn) {
+    if (this.#activePopover?.kind === kind) {
+      this.#closePopover();
+      return;
+    }
+    this.#closePopover();
+
+    const panel = document.createElement('div');
+    panel.setAttribute('data-toolbar-popover', kind);
+    panel.setAttribute('popover', 'manual');
+    panel.setAttribute('role', 'menu');
+
+    if (kind === 'filter')  this.#fillFilterPanel(panel);
+    if (kind === 'sort')    this.#fillSortPanel(panel);
+    if (kind === 'columns') this.#fillColumnsPanel(panel);
+
+    document.body.appendChild(panel);
+
+    try { panel.showPopover(); } catch { /* popover API unavailable */ }
+    const cleanup = anchorPopover(btn, panel, { placement: 'bottom-start', gap: 4 });
+
+    this.#activePopover = { kind, btn, panel, cleanup };
+
+    if (!this.#docListenersBound) {
+      this.#docListenersBound = true;
+      requestAnimationFrame(() => {
+        document.addEventListener('pointerdown', this.#onDocDown, true);
+        document.addEventListener('keydown', this.#onDocKey, true);
+      });
+    }
+  }
+
+  #closePopover() {
+    const ap = this.#activePopover;
+    if (!ap) return;
+    ap.cleanup?.();
+    if (ap.panel?.matches?.(':popover-open')) {
+      try { ap.panel.hidePopover(); } catch { /* noop */ }
+    }
+    ap.panel?.remove();
+    this.#activePopover = null;
+    if (this.#docListenersBound) {
+      this.#docListenersBound = false;
+      document.removeEventListener('pointerdown', this.#onDocDown, true);
+      document.removeEventListener('keydown', this.#onDocKey, true);
+    }
+  }
+
+  #onDocDown = (e) => {
+    const ap = this.#activePopover;
+    if (!ap) return;
+    if (ap.btn.contains(e.target)) return;
+    if (ap.panel.contains(e.target)) return;
+    this.#closePopover();
+  };
+
+  #onDocKey = (e) => {
+    if (e.key !== 'Escape') return;
+    e.stopPropagation();
+    this.#closePopover();
+    this.#activePopover?.btn?.focus?.({ preventScroll: true });
+  };
+
+  // ── Filter panel ─────────────────────────────────────────────────────────
+
+  #fillFilterPanel(panel) {
+    const target = this.#target;
+    if (!target?.columns?.length) {
+      panel.appendChild(emptyHint('No filterable columns'));
+      return;
+    }
+    const filters = target.filters || {};
+
+    const head = document.createElement('div');
+    head.setAttribute('data-popover-head', '');
+    head.textContent = 'Filter rows';
+    panel.appendChild(head);
+
+    const list = document.createElement('div');
+    list.setAttribute('data-popover-list', '');
+
+    for (const col of target.columns) {
+      if (col.hidden) continue;
+      const row = document.createElement('label');
+      row.setAttribute('data-filter-row', '');
+
+      const labelEl = document.createElement('span');
+      labelEl.setAttribute('data-filter-label', '');
+      labelEl.textContent = col.label || col.key;
+      row.appendChild(labelEl);
+
+      const input = document.createElement('input-ui');
+      input.setAttribute('type', 'text');
+      input.setAttribute('size', 'sm');
+      input.setAttribute('data-filter-input', '');
+      input.setAttribute('placeholder', '—');
+      input.value = filters[col.key]?.value ?? '';
+      input.addEventListener('input', () => {
+        const v = input.value;
+        if (v) target.setFilter(col.key, v, 'contains');
+        else target.setFilter(col.key, null);
+        this.dispatchEvent(new CustomEvent('filter-change', {
+          bubbles: true,
+          detail: { filters: target.filters },
+        }));
+      });
+      row.appendChild(input);
+      list.appendChild(row);
+    }
+
+    panel.appendChild(list);
+
+    if (Object.keys(filters).length) {
+      const clear = this.#mkPopoverAction('Clear all filters', () => {
+        target.clearFilters();
+        this.dispatchEvent(new CustomEvent('filter-change', {
+          bubbles: true,
+          detail: { filters: {} },
+        }));
+        this.#refreshFilterPanel();
+      });
+      panel.appendChild(clear);
+    }
+  }
+
+  #refreshFilterPanel() {
+    const ap = this.#activePopover;
+    if (!ap || ap.kind !== 'filter') return;
+    ap.panel.replaceChildren();
+    this.#fillFilterPanel(ap.panel);
+  }
+
+  // ── Sort panel ───────────────────────────────────────────────────────────
+
+  #fillSortPanel(panel) {
+    const target = this.#target;
+    if (!target?.columns?.length) {
+      panel.appendChild(emptyHint('No sortable columns'));
+      return;
+    }
+
+    const head = document.createElement('div');
+    head.setAttribute('data-popover-head', '');
+    head.textContent = 'Sort by';
+    panel.appendChild(head);
+
+    const sortState = target.sortState || [];
+    const dirByKey = new Map(sortState.map((s) => [s.key, s.dir]));
+
+    const list = document.createElement('div');
+    list.setAttribute('data-popover-list', '');
+
+    for (const col of target.columns) {
+      if (col.hidden) continue;
+      if (col.sortable === false) continue;
+
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.setAttribute('data-sort-row', '');
+      row.dataset.key = col.key;
+
+      const labelEl = document.createElement('span');
+      labelEl.setAttribute('data-sort-label', '');
+      labelEl.textContent = col.label || col.key;
+      row.appendChild(labelEl);
+
+      const dir = dirByKey.get(col.key);
+      const indicator = document.createElement('icon-ui');
+      indicator.setAttribute('data-sort-indicator', '');
+      indicator.setAttribute('size', 'xs');
+      indicator.setAttribute('name', dir === 'asc' ? 'arrow-up' : dir === 'desc' ? 'arrow-down' : 'caret-up-down');
+      if (dir) row.dataset.active = dir;
+      row.appendChild(indicator);
+
+      row.addEventListener('click', (e) => {
+        // Multi-sort with shift: forward to the table by simulating a header click
+        // (the table already owns the asc / desc / clear cycle). Falls back to no-op
+        // when the table is not present — same defensive shape as chart-legend's
+        // [for] target check.
+        const headerCell = target.querySelector(`:scope > [data-header] [data-sort-key="${col.key}"]`);
+        if (!headerCell) return;
+        const evt = new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: e.shiftKey });
+        headerCell.dispatchEvent(evt);
+        this.dispatchEvent(new CustomEvent('sort-change', {
+          bubbles: true,
+          detail: { sortState: target.sortState },
+        }));
+        this.#refreshSortPanel();
+      });
+
+      list.appendChild(row);
+    }
+
+    panel.appendChild(list);
+
+    if (sortState.length) {
+      const clear = this.#mkPopoverAction('Clear sort', () => {
+        // Simulate cycle-through clicks until empty — but the table only stores
+        // one sort entry per key, and a non-shift click on an already-active key
+        // cycles to the opposite dir before clearing. Cleanest: clone columns and
+        // clear via a microtask using clicks on each active key until empty.
+        for (const s of [...sortState]) {
+          const headerCell = target.querySelector(`:scope > [data-header] [data-sort-key="${s.key}"]`);
+          if (!headerCell) continue;
+          // Two clicks toggle through asc → desc → clear when single-sort. With
+          // multi-sort entries we shift-click to remove individually.
+          const fire = (shift) => headerCell.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, shiftKey: shift }));
+          if (sortState.length > 1) {
+            // Shift-clicking through default→opposite→remove.
+            fire(true); fire(true);
+          } else {
+            // Single-sort: click twice non-shift to cycle through both dirs and clear.
+            fire(false); fire(false);
+          }
+        }
+        this.dispatchEvent(new CustomEvent('sort-change', {
+          bubbles: true,
+          detail: { sortState: target.sortState },
+        }));
+        this.#refreshSortPanel();
+      });
+      panel.appendChild(clear);
+    }
+  }
+
+  #refreshSortPanel() {
+    const ap = this.#activePopover;
+    if (!ap || ap.kind !== 'sort') return;
+    ap.panel.replaceChildren();
+    this.#fillSortPanel(ap.panel);
+  }
+
+  // ── Columns panel ────────────────────────────────────────────────────────
+
+  #fillColumnsPanel(panel) {
+    const target = this.#target;
+    if (!target?.columns?.length) {
+      panel.appendChild(emptyHint('No columns'));
+      return;
+    }
+
+    const head = document.createElement('div');
+    head.setAttribute('data-popover-head', '');
+    head.textContent = 'Visible columns';
+    panel.appendChild(head);
+
+    const list = document.createElement('div');
+    list.setAttribute('data-popover-list', '');
+
+    for (const col of target.columns) {
+      const row = document.createElement('label');
+      row.setAttribute('data-columns-row', '');
+
+      const check = document.createElement('check-ui');
+      if (!col.hidden) check.setAttribute('checked', '');
+      check.dataset.key = col.key;
+      check.addEventListener('change', () => {
+        const next = target.columns.map((c) => (
+          c.key === col.key ? { ...c, hidden: !check.hasAttribute('checked') } : { ...c }
+        ));
+        target.columns = next;
+        this.dispatchEvent(new CustomEvent('columns-change', {
+          bubbles: true,
+          detail: { hiddenColumns: next.filter((c) => c.hidden).map((c) => c.key) },
+        }));
+      });
+      row.appendChild(check);
+
+      const labelEl = document.createElement('span');
+      labelEl.setAttribute('data-columns-label', '');
+      labelEl.textContent = col.label || col.key;
+      row.appendChild(labelEl);
+
+      list.appendChild(row);
+    }
+
+    panel.appendChild(list);
+  }
+}
+
+function emptyHint(text) {
+  const el = document.createElement('text-ui');
+  el.setAttribute('data-popover-empty', '');
+  el.setAttribute('color', 'subtle');
+  el.setAttribute('variant', 'caption');
+  el.textContent = text;
+  return el;
+}
+
+customElements.define('table-toolbar-ui', AdiaTableToolbar);
+
+export { AdiaTableToolbar };