@jungherz-de/notionkit-elements 1.11.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/notionkit-elements",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Vanilla JavaScript Web Components wrapping the NotionKit CSS foundation – <nk-*> custom elements with Shadow DOM, automatic theme sync and native form participation.",
   "license": "MIT",
   "author": "Jungherz GmbH <info@jungherz.com> (https://www.jungherz.com)",
@@ -62,10 +62,10 @@
     "dark-mode"
   ],
   "peerDependencies": {
-    "@jungherz-de/notionkit": ">=1.11.0"
+    "@jungherz-de/notionkit": ">=1.12.0"
   },
   "devDependencies": {
-    "@jungherz-de/notionkit": "^1.11.1",
+    "@jungherz-de/notionkit": "^1.12.0",
     "@playwright/test": "^1.50.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",

package/src/components/data/nk-table-view.js

@@ -9,7 +9,10 @@ import { renderPropertyCell, compareBy } from '../../util/property-cell.js';
 // { row, id, key, cell } – `key` and `cell` say which cell was hit, to open
 // an editor there, like the date picker under a due date – checkboxes
 // nk-change, headers nk-action { action: 'sort' } (and sort locally
-// with `sortable`), the add row nk-action { action: 'new-row' }.
+// with `sortable`), the add row nk-action { action: 'new-row' }. A column of
+// type 'actions' (NotionKit 1.12.0) sets buttons in each row; a click on one
+// fires nk-action { action, row, id, anchor } instead of selecting the row,
+// and its header sorts nothing.
 class NkTableView extends NkElement {
   static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir', 'wrap']; }
 
@@ -39,9 +42,10 @@ class NkTableView extends NkElement {
     this._table.classList.toggle('wrap', this.getBoolAttr('wrap'));
     const tr = document.createElement('tr');
     for (const col of this._columns) {
-      const th = this.createElement('th', [], { 'data-key': col.key, scope: 'col' });
+      const actions = col.type === 'actions';
+      const th = this.createElement('th', actions ? ['actions'] : [], actions ? { scope: 'col' } : { 'data-key': col.key, scope: 'col' });
       if (col.icon) { const i = this.createElement('span', ['th-icon']); i.textContent = col.icon; th.appendChild(i); }
-      th.appendChild(document.createTextNode(col.label ?? col.key));
+      th.appendChild(document.createTextNode(col.label ?? (actions ? '' : col.key)));
       if (col.key === this.getAttribute('sort-key')) th.appendChild(document.createTextNode(this.getAttribute('sort-dir') === 'desc' ? ' ↓' : ' ↑'));
       if (col.width) th.style.width = col.width;
       tr.appendChild(th);
@@ -74,6 +78,12 @@ class NkTableView extends NkElement {
         if (ok && this.getBoolAttr('sortable')) { this.setAttribute('sort-key', key); this.setAttribute('sort-dir', dir); }
         return;
       }
+      const act = e.target.closest('button[data-action]');
+      if (act) {
+        const row = this._rowById(act.closest('tr[data-id]')?.dataset.id);
+        if (!act.disabled) this.emit('nk-action', { action: act.dataset.action, row, id: row?.id, anchor: act });
+        return;
+      }
       if (e.target.closest('input[type=checkbox], a')) return;
       const tr = e.target.closest('tr[data-id]');
       if (!tr) return;

package/src/components/page/nk-panel.js

@@ -4,9 +4,13 @@ import { NkElement } from '../../base.js';
 // <nk-panel href="/roadmap" cover="covers/aurora.svg" icon="🚀" title="Roadmap"><p>2 min ago</p></nk-panel>
 // → <a class="nk-panel" href="/roadmap"><div class="nk-cover"><img src="…" alt=""></div>
 //      <div class="nk-page-icon">🚀</div><h3>Roadmap</h3>…</a>
+// <nk-panel title="Contacts database"><nk-tag slot="end" color="green">Connected</nk-tag>…</nk-panel>
+// → … <div class="p-head"><h3>Contacts database</h3><span class="p-end">…</span></div>
 // `cover` without a value draws the token gradient, with one a picture; `icon`
 // overlaps the cover as on a page – a page tile, as on Notion's Home. With
 // `href` the panel is a link. `title` is the heading, never a tooltip.
+// slot="end" (NotionKit 1.12.0) sits at the right edge of the title – a state
+// as a tag, a button – and moves under it where both do not fit.
 class NkPanel extends NkElement {
   static get observedAttributes() { return ['title', 'icon', 'cover', 'href', 'target']; }
 
@@ -15,6 +19,11 @@ class NkPanel extends NkElement {
     this._img = this.createElement('img', [], { alt: '' });
     this._icon = this.createElement('div', ['nk-page-icon']);
     this._heading = document.createElement('h3');
+    this._endSlot = this.createElement('slot', [], { name: 'end' });
+    this._end = this.createElement('span', ['p-end']);
+    this._end.appendChild(this._endSlot);
+    this._head = this.createElement('div', ['p-head']);
+    this._head.append(this._heading, this._end);
     this._slot = document.createElement('slot');
     this.takeTitle();
     this._build();
@@ -23,7 +32,7 @@ class NkPanel extends NkElement {
   _build() {
     const href = this.getAttribute('href');
     const box = this.createElement(href ? 'a' : 'div', ['nk-panel']);
-    box.append(this._cover, this._icon, this._heading, this._slot);
+    box.append(this._cover, this._icon, this._head, this._slot);
     this._wrapper.replaceChildren(box);
     this._box = box;
     this._sync();
@@ -39,10 +48,23 @@ class NkPanel extends NkElement {
     const icon = this.getAttribute('icon');
     this._icon.textContent = icon || '';
     this._icon.style.display = icon ? '' : 'none';
-    this._heading.textContent = this._titleText || '';
-    this._heading.style.display = this._titleText ? '' : 'none';
+    const title = this._titleText || '';
+    if (this._heading.textContent !== title) this._heading.textContent = title;
+    this._heading.style.display = title ? '' : 'none';
+    // The end and the whole head leave the layout when they are empty, so a
+    // title alone lays out as it always did.
+    const end = this._endSlot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.textContent.trim());
+    this._end.style.display = end ? '' : 'none';
+    this._head.style.display = title || end ? '' : 'none';
   }
 
+  setupEvents() {
+    this._onEnd = () => this._sync();
+    this._endSlot.addEventListener('slotchange', this._onEnd);
+  }
+
+  teardownEvents() { this._endSlot?.removeEventListener('slotchange', this._onEnd); }
+
   onAttributeChanged(name, _old, value) {
     if (name === 'title' && !this.takeTitle(value)) return;
     if (name === 'href' && (value === null) !== (this._box.localName === 'div')) { this._build(); return; }

package/src/components/page/nk-panels.js

@@ -3,13 +3,22 @@ import { NkElement } from '../../base.js';
 // <nk-panels><nk-panel …></nk-panel><nk-panel …></nk-panel></nk-panels>
 // → <div class="nk-panels">…</div>: columns of at least 200px that share the
 // row and fall to one on a phone. The <nk-panel> hosts are display: contents,
-// so each .nk-panel is a cell of this grid.
+// so each .nk-panel is a cell of this grid. `flush` (NotionKit 1.12.0) drops
+// the grid's outer margin.
 class NkPanels extends NkElement {
+  static get observedAttributes() { return ['flush']; }
+
   render() {
-    const grid = this.createElement('div', ['nk-panels']);
-    grid.appendChild(document.createElement('slot'));
-    this._wrapper.appendChild(grid);
+    this._grid = this.createElement('div', ['nk-panels']);
+    this._grid.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._grid);
+    this.onAttributeChanged();
   }
+
+  onAttributeChanged() { this._grid?.classList.toggle('flush', this.getBoolAttr('flush')); }
+
+  get flush() { return this.getBoolAttr('flush'); }
+  set flush(v) { this.setBoolAttr('flush', v); }
 }
 
 customElements.define('nk-panels', NkPanels);

package/src/components/page/nk-prop.js

@@ -5,9 +5,11 @@ import { NkElement } from '../../base.js';
 // The value is the element's content – tags, an avatar and a name, a date, a
 // <nk-progress wide>. slot="icon" replaces the icon glyph. A click on the
 // name or the value fires nk-action { action: 'name' | 'value', label }, the
-// moment Notion opens the property's editor.
+// moment Notion opens the property's editor. `text` (NotionKit 1.12.0) lets a
+// value that is text – an address, a model name with a tag – flow as text
+// instead of setting its parts one under the other.
 class NkProp extends NkElement {
-  static get observedAttributes() { return ['label', 'icon']; }
+  static get observedAttributes() { return ['label', 'icon', 'text']; }
 
   render() {
     this._row = this.createElement('div', ['nk-prop']);
@@ -29,6 +31,7 @@ class NkProp extends NkElement {
     this._icon.textContent = icon || '';
     this._icon.style.display = icon ? '' : 'none';
     this._label.data = this.getAttribute('label') || '';
+    this._value.classList.toggle('text', this.getBoolAttr('text'));
   }
 
   setupEvents() {
@@ -46,6 +49,8 @@ class NkProp extends NkElement {
   set label(v) { this.setAttribute('label', v); }
   get icon() { return this.getAttribute('icon'); }
   set icon(v) { v == null ? this.removeAttribute('icon') : this.setAttribute('icon', v); }
+  get text() { return this.getBoolAttr('text'); }
+  set text(v) { this.setBoolAttr('text', v); }
 }
 
 customElements.define('nk-prop', NkProp);

package/src/components/page/nk-props.js

@@ -6,13 +6,22 @@ import { NkElement } from '../../base.js';
 // </nk-props>
 // → <dl class="nk-props">…</dl> – the properties under a page title. The rows
 // are <nk-prop> hosts with display: contents, so each .nk-prop is a row of
-// this list.
+// this list. `flush` (NotionKit 1.12.0) drops the outer margin meant for the
+// flow under a title – for a list inside a panel or a flex column.
 class NkProps extends NkElement {
+  static get observedAttributes() { return ['flush']; }
+
   render() {
-    const list = this.createElement('dl', ['nk-props']);
-    list.appendChild(document.createElement('slot'));
-    this._wrapper.appendChild(list);
+    this._list = this.createElement('dl', ['nk-props']);
+    this._list.appendChild(document.createElement('slot'));
+    this._wrapper.appendChild(this._list);
+    this.onAttributeChanged();
   }
+
+  onAttributeChanged() { this._list?.classList.toggle('flush', this.getBoolAttr('flush')); }
+
+  get flush() { return this.getBoolAttr('flush'); }
+  set flush(v) { this.setBoolAttr('flush', v); }
 }
 
 customElements.define('nk-props', NkProps);

package/src/components/page/nk-steps.js

@@ -10,9 +10,15 @@ import { NkElement } from '../../base.js';
 // A setup in a few steps (NotionKit 1.7.0). `current` counts from 1; the
 // steps before it are done, one past the last marks all of them done. The
 // `steps` attribute is a comma-separated list; the property also takes
-// { label, desc } objects for a line under the label.
+// { label, desc, state, value } objects for a line under the label and a
+// state of its own – 'done', 'skipped' or 'open' (NotionKit 1.12.0) – for a
+// wizard that lets a step be skipped while a later one is done.
+// `selectable` makes each label a button: a click or Enter fires
+// nk-select { index, value, step } – index counts from 1, like `current` –
+// and, unless cancelled, makes that step current. `horizontal` sets the
+// steps in one row above a wizard.
 class NkSteps extends NkElement {
-  static get observedAttributes() { return ['steps', 'current', 'label']; }
+  static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
 
   render() {
     this._list = this.createElement('ol', ['nk-steps']);
@@ -25,32 +31,67 @@ class NkSteps extends NkElement {
     return (this.getAttribute('steps') || '').split(',').map(s => s.trim()).filter(Boolean);
   }
 
+  _step(i) {
+    const step = this._items()[i];
+    return typeof step === 'object' && step ? step : step === undefined ? undefined : { label: String(step) };
+  }
+
   _sync() {
     const label = this.getAttribute('label');
     if (label) this._list.setAttribute('aria-label', label); else this._list.removeAttribute('aria-label');
-    const current = this.current;
-    this._list.replaceChildren(...this._items().map((step, i) => {
-      const n = i + 1, { label: text, desc } = typeof step === 'object' && step ? step : { label: String(step) };
-      const li = this.createElement('li', ['nk-step']);
-      li.classList.toggle('done', n < current);
+    this._list.classList.toggle('horizontal', this.getBoolAttr('horizontal'));
+    const current = this.current, selectable = this.getBoolAttr('selectable');
+    // Rebuilding drops the focused label; the new one at that place takes it back.
+    const focused = this.shadowRoot?.activeElement?.closest?.('li')?.dataset.index;
+    this._list.replaceChildren(...this._items().map((_, i) => {
+      const n = i + 1, { label: text, desc, state } = this._step(i);
+      // A state of its own wins; without one, the steps before `current` are done.
+      const done = state ? state === 'done' : n < current, skipped = state === 'skipped';
+      const li = this.createElement('li', ['nk-step'], { 'data-index': String(n) });
+      li.classList.toggle('done', done);
+      li.classList.toggle('skipped', skipped);
       li.classList.toggle('current', n === current);
       if (n === current) li.setAttribute('aria-current', 'step');
       const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
-      mark.textContent = n < current ? '✓' : String(n);
-      const body = document.createElement('span');
+      mark.textContent = done ? '✓' : skipped ? '–' : String(n);
+      const body = selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
       body.textContent = text ?? '';
       if (desc) { const d = this.createElement('span', ['st-desc']); d.textContent = desc; body.appendChild(d); }
       li.append(mark, body);
       return li;
     }));
+    if (focused) this._list.querySelector(`li[data-index="${focused}"] .st-label`)?.focus();
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (!this.getBoolAttr('selectable')) return;
+      const li = e.target.closest?.('li.nk-step');
+      if (li && this._list.contains(li)) this.select(Number(li.dataset.index));
+    };
+    this._list.addEventListener('click', this._onClick);
   }
 
+  teardownEvents() { this._list?.removeEventListener('click', this._onClick); }
   onAttributeChanged() { this._sync(); }
 
+  /** Jumps to step `index` (from 1): fires nk-select { index, value, step } and, unless cancelled, makes it current. */
+  select(index) {
+    const step = this._step(index - 1);
+    if (!step) return false;
+    const ok = this.emit('nk-select', { index, value: step.value ?? step.label, step });
+    if (ok) this.current = index;
+    return ok;
+  }
+
   get steps() { return this._items(); }
   set steps(v) { this._steps = Array.isArray(v) ? v : null; if (this._list) this._sync(); }
   get current() { const n = parseInt(this.getAttribute('current'), 10); return Number.isFinite(n) ? n : 1; }
   set current(v) { this.setAttribute('current', String(v)); }
+  get selectable() { return this.getBoolAttr('selectable'); }
+  set selectable(v) { this.setBoolAttr('selectable', v); }
+  get horizontal() { return this.getBoolAttr('horizontal'); }
+  set horizontal(v) { this.setBoolAttr('horizontal', v); }
   /** Moves on to the next step; returns the new current step. */
   next() { this.current = Math.min(this.current + 1, this._items().length + 1); return this.current; }
 }

package/src/components/page/nk-tabs.js

@@ -1,4 +1,5 @@
 import { NkElement } from '../../base.js';
+import { boxOf } from '../../util/floating.js';
 
 // <nk-tabs value="notes">
 //   <nk-tab value="notes">📝 Notes</nk-tab>
@@ -9,10 +10,13 @@ import { NkElement } from '../../base.js';
 // → <div class="nk-tabs" role="tablist">…</div> + the panels below it.
 // The tabs keep one tab active and hide every panel whose data-tab does not
 // match `value` (through the hidden attribute – the panels stay yours).
+// `scroll` (NotionKit 1.12.0) keeps many tabs in one row that scrolls
+// sideways and holds the active tab in view – after the first layout, on
+// every change and when the row's width changes – as <nk-segmented scroll>.
 const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
 
 class NkTabs extends NkElement {
-  static get observedAttributes() { return ['value']; }
+  static get observedAttributes() { return ['value', 'scroll']; }
 
   render() {
     this._strip = this.createElement('div', ['nk-tabs'], { role: 'tablist' });
@@ -40,6 +44,20 @@ class NkTabs extends NkElement {
     }
     for (const panel of this.panels) panel.hidden = panel.dataset.tab !== value;
     this._value = value;
+    this._strip.classList.toggle('scroll', this.getBoolAttr('scroll'));
+    this._reveal(this._revealed ? 'smooth' : 'instant');
+  }
+
+  /** Scrolls the row the least distance that shows the active tab whole. */
+  _reveal(behavior) {
+    if (!this.getBoolAttr('scroll') || !this._strip?.clientWidth) return;
+    const tab = this.tabs.find(t => t.hasAttribute('active'));
+    if (!tab) return;
+    const row = this._strip.getBoundingClientRect(), r = boxOf(tab), pad = 8;
+    const delta = r.left < row.left ? r.left - row.left - pad : r.right > row.right ? r.right - row.right + pad : 0;
+    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (delta) this._strip.scrollBy({ left: delta, behavior: smooth ? 'smooth' : 'instant' });
+    this._revealed = true;
   }
 
   setupEvents() {
@@ -58,6 +76,8 @@ class NkTabs extends NkElement {
     this._tabSlot.addEventListener('slotchange', this._onSlot);
     this._panelSlot.addEventListener('slotchange', this._onSlot);
     this.addEventListener('keydown', this._onKey);
+    this._resize = new ResizeObserver(() => this._reveal('instant'));
+    this._resize.observe(this._strip);
     this._sync();
   }
 
@@ -65,6 +85,7 @@ class NkTabs extends NkElement {
     this._tabSlot?.removeEventListener('slotchange', this._onSlot);
     this._panelSlot?.removeEventListener('slotchange', this._onSlot);
     this.removeEventListener('keydown', this._onKey);
+    this._resize?.disconnect();
   }
 
   onAttributeChanged() {
@@ -75,6 +96,8 @@ class NkTabs extends NkElement {
 
   get value() { return this._value ?? this.getAttribute('value'); }
   set value(v) { this.setAttribute('value', v); }
+  get scroll() { return this.getBoolAttr('scroll'); }
+  set scroll(v) { this.setBoolAttr('scroll', v); }
 }
 
 customElements.define('nk-tabs', NkTabs);

package/src/util/property-cell.js

@@ -4,7 +4,12 @@
 // be styled. Exported for consumers who render tables themselves.
 //
 // column: { key, label, type, icon, options: [{ value, label, color }], title }
-// types: text | select | multi-select | date | person | checkbox | url | number | progress
+// types: text | select | multi-select | date | person | checkbox | url | number | progress | actions
+// url: a string is an address outside, opened in a new tab; { href, label,
+// target } a link of your own – to another page of the app, with its text.
+// actions: buttons for the row from column.actions [{ action, label, icon,
+// danger, disabled, tooltip }]; the row's value – action names or objects –
+// picks which of them it shows, all of them without one.
 import { paintAvatar, initialsOf } from './avatar.js';
 
 const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
@@ -23,6 +28,7 @@ export function tagFor(column, value) {
 
 export function renderPropertyCell(column, value, row = {}) {
   const type = column.type || 'text';
+  if (type === 'actions') return actions(column, value);
   if (value === undefined || value === null || value === '') {
     if (type === 'checkbox') return checkbox(column, false, row);
     if (type === 'progress') return progress(0);
@@ -47,7 +53,14 @@ export function renderPropertyCell(column, value, row = {}) {
       return cell;
     }
     case 'checkbox': return checkbox(column, !!value, row);
-    case 'url': { const a = el('a', null, String(value).replace(/^https?:\/\//, '')); a.href = String(value); a.target = '_blank'; a.rel = 'noopener'; return a; }
+    case 'url': {
+      const link = typeof value === 'object' ? value : { href: String(value), label: String(value).replace(/^https?:\/\//, ''), target: '_blank' };
+      const a = el('a', null, link.label ?? link.href);
+      a.href = link.href ?? '';
+      if (link.target) a.target = link.target;
+      if (link.target === '_blank') a.rel = 'noopener';
+      return a;
+    }
     // column.locale / column.format: Intl.NumberFormat locale and options, e.g. { minimumFractionDigits: 1 }.
     case 'number': return el('span', null, typeof value === 'number' ? value.toLocaleString(column.locale, column.format) : String(value));
     case 'progress': return progress(Number(value) || 0);
@@ -63,6 +76,22 @@ export function renderPropertyCell(column, value, row = {}) {
   }
 }
 
+function actions(column, value) {
+  const all = column.actions || [];
+  const list = value == null ? all
+    : (Array.isArray(value) ? value : [value]).map(v => typeof v === 'string' ? all.find(a => a.action === v) ?? { action: v, label: v } : v);
+  const wrap = el('span', 'row-actions');
+  for (const a of list) {
+    const b = el('button', `nk-btn ${a.danger ? 'danger' : 'secondary'} small`, [a.icon, a.label ?? a.action].filter(Boolean).join(' '));
+    b.type = 'button';
+    b.dataset.action = a.action;
+    b.disabled = !!a.disabled;
+    if (a.tooltip) b.dataset.tooltip = a.tooltip;
+    wrap.appendChild(b);
+  }
+  return wrap;
+}
+
 function checkbox(column, checked, row) {
   const label = el('label', 'nk-check');
   const input = el('input');