@jungherz-de/notionkit-elements 1.11.1 → 1.12.0

package/dist/components/nk-panels.js

@@ -4,13 +4,22 @@ import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-prop.js

@@ -6,9 +6,11 @@ import '@jungherz-de/notionkit/notionkit-styles.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']);
@@ -30,6 +32,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() {
@@ -47,6 +50,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/dist/components/nk-props.js

@@ -7,13 +7,22 @@ import '@jungherz-de/notionkit/notionkit-styles.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/dist/components/nk-steps.js

@@ -11,9 +11,15 @@ import '@jungherz-de/notionkit/notionkit-styles.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']);
@@ -26,32 +32,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/dist/components/nk-table-view.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Cddz5n2O.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
 
@@ -11,7 +11,10 @@ import './shared/avatar-CzPZN3uP.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']; }
 
@@ -41,9 +44,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);
@@ -76,6 +80,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/dist/components/nk-tabs.js

@@ -1,4 +1,5 @@
 import { NkElement } from './base.js';
+import { b as boxOf } from './shared/floating-DOK73b_D.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tabs value="notes">
@@ -10,10 +11,13 @@ import '@jungherz-de/notionkit/notionkit-styles.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' });
@@ -41,6 +45,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() {
@@ -59,6 +77,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();
   }
 
@@ -66,6 +86,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() {
@@ -76,6 +97,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/dist/components/nk-tooltip.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { a as placeNear } from './shared/floating-CtqV6MBj.js';
+import { a as placeNear } from './shared/floating-DOK73b_D.js';
 import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 

package/dist/components/shared/{floating-CtqV6MBj.js → floating-DOK73b_D.js}

@@ -63,4 +63,4 @@ function placeUnder(host, anchor, align) {
   else { host.style.right = `${f.right - Math.min(r.right, innerWidth - edge)}px`; host.style.left = 'auto'; }
 }
 
-export { placeNear as a, placeUnder as p };
+export { placeNear as a, boxOf as b, placeUnder as p };

package/dist/components/shared/{property-cell-Cddz5n2O.js → property-cell-DKvv6TIG.js}

@@ -6,7 +6,12 @@ import { i as initialsOf, p as paintAvatar } from './avatar-CzPZN3uP.js';
 // 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.
 
 const el = (tag, cls, text) => { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; };
 const COLORS = ['gray', 'brown', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red'];
@@ -24,6 +29,7 @@ function tagFor(column, value) {
 
 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);
@@ -48,7 +54,14 @@ 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);
@@ -64,6 +77,22 @@ 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');