@jungherz-de/notionkit-elements 1.16.0 → 1.17.0

package/dist/components/nk-steps.js

@@ -18,6 +18,12 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // 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.
+// A step with `href` (1.17.0) shows its label as a link, <a class="st-label">,
+// with or without `selectable` – to open a chapter in a new tab or copy its
+// address. A plain click, or Enter, fires the same nk-select; cancelling it
+// keeps the browser from following the link, for a router of your own. A
+// middle click or one with Cmd, Ctrl, Shift or Alt fires nothing and does
+// what a link does.
 class NkSteps extends NkElement {
   static get observedAttributes() { return ['steps', 'current', 'label', 'selectable', 'horizontal']; }
 
@@ -45,7 +51,7 @@ class NkSteps extends NkElement {
     // 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);
+      const n = i + 1, { label: text, desc, state, href } = 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) });
@@ -55,7 +61,8 @@ class NkSteps extends NkElement {
       if (n === current) li.setAttribute('aria-current', 'step');
       const mark = this.createElement('span', ['st-mark'], { 'aria-hidden': 'true' });
       mark.textContent = done ? '✓' : skipped ? '–' : String(n);
-      const body = selectable ? this.createElement('button', ['st-label'], { type: 'button' }) : document.createElement('span');
+      const body = href != null && href !== '' ? this.createElement('a', ['st-label'], { href: String(href) })
+        : 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);
@@ -66,9 +73,18 @@ class NkSteps extends NkElement {
 
   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));
+      if (!li || !this._list.contains(li)) return;
+      const link = li.querySelector('a.st-label');
+      if (link) {
+        // The link contract: a plain left click is a selection, any other
+        // one the browser's. The mark beside the link counts as the link.
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (!link.contains(e.target)) { link.click(); return; }
+        if (!this.select(Number(li.dataset.index))) e.preventDefault();
+        return;
+      }
+      if (this.getBoolAttr('selectable')) this.select(Number(li.dataset.index));
     };
     this._list.addEventListener('click', this._onClick);
   }

package/dist/components/nk-synced.js

@@ -15,8 +15,9 @@ class NkSynced extends NkElement {
     this._sync();
   }
 
-  _sync() { this._badge.textContent = this.getAttribute('badge') ?? '⟳ synced'; }
+  _sync() { this._badge.textContent = this.getAttribute('badge') ?? this.str('synced'); }
   onAttributeChanged() { this._sync(); }
+  onStringsChanged() { this._sync(); }
 
   get badge() { return this.getAttribute('badge'); }
   set badge(v) { this.setAttribute('badge', v); }

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-BSVcETss.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DcsfnUNF.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
 import './shared/dates-a32DcW1l.js';
@@ -66,7 +66,7 @@ class NkTableView extends NkElement {
       }
       this._tbody.appendChild(r);
     }
-    this._newRow.textContent = this.getAttribute('new-row-label') || '＋ New page';
+    this._newRow.textContent = this.getAttribute('new-row-label') || this.str('newPage');
     this._newRow.style.display = this.getBoolAttr('new-row') ? '' : 'none';
   }
 
@@ -116,6 +116,7 @@ class NkTableView extends NkElement {
 
   _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
   onAttributeChanged() { this._render(); }
+  onStringsChanged() { this._render(); }
 
   get name() { return this.getAttribute('name') || 'table'; }
   get columns() { return this._columns; }

package/dist/components/nk-theme-toggle.js

@@ -15,7 +15,7 @@ class NkThemeToggle extends NkElement {
 
   render() {
     this._btn = this.createElement('button', ['nk-topbar-btn', 'nk-theme-toggle'], { type: 'button' });
-    this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    this._syncTitle();
     this._wrapper.appendChild(this._btn);
     const root = document.documentElement;
     let stored = null;
@@ -46,8 +46,11 @@ class NkThemeToggle extends NkElement {
     window.removeEventListener('message', this._onMessage);
   }
 
+  _syncTitle() { this._btn.title = this.getAttribute('title') || this.str('toggleTheme'); }
+  onStringsChanged() { this._syncTitle(); }
+
   onAttributeChanged(name) {
-    if (name === 'title' && this._btn) this._btn.title = this.getAttribute('title') || 'Toggle light / dark';
+    if (name === 'title' && this._btn) this._syncTitle();
   }
 
   /** Sets the theme on <html>, persists it and reports it. */

package/dist/components/nk-tree-item.js

@@ -34,7 +34,7 @@ class NkTreeItem extends NkElement {
     this._labelSlot.appendChild(this._labelText);
     this._label.appendChild(this._labelSlot);
     this._actions = this.createElement('span', ['actions']);
-    for (const [action, glyph, title] of [['add', '＋', 'Add'], ['more', '⋯', 'More']]) {
+    for (const [action, glyph, title] of [['add', '＋', this.str('add')], ['more', '⋯', this.str('more')]]) {
       const b = this.createElement('span', [], { 'data-action': action, role: 'button', title });
       b.textContent = glyph;
       this._actions.appendChild(b);
@@ -120,6 +120,8 @@ class NkTreeItem extends NkElement {
     this._row?.removeEventListener('keydown', this._onKey);
   }
 
+  onStringsChanged() { for (const b of this._actions.children) b.title = this.str(b.dataset.action); }
+
   onAttributeChanged(name) {
     if (name === 'label') this.assignSlots();
     else this._sync();

package/dist/components/shared/{property-cell-BSVcETss.js → property-cell-DcsfnUNF.js}

@@ -16,6 +16,8 @@ import { r as resolveLocale } from './dates-a32DcW1l.js';
 // text: a string, or { text, desc, color, tooltip, sort } – one of Notion's
 // nine text colours for a tone, a quiet second line under it, the whole
 // text in a tooltip (served by <nk-tooltip>), a value to sort by.
+// progress: 0–100, the bar and its percentage as Intl writes it in
+// column.locale, else the page's language ("45 %" in German).
 // date: the value as given, or with column.format ('short', 'relative' or
 // Intl.DateTimeFormat options) and column.locale formatted from an ISO date
 // or date-time, D.M.YYYY, a Date or a timestamp; { start, end } is a range.
@@ -81,7 +83,7 @@ function renderPropertyCell(column, value, row = {}) {
   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);
+    if (type === 'progress') return progress(column, 0);
     return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
   }
   switch (type) {
@@ -113,7 +115,7 @@ function renderPropertyCell(column, value, row = {}) {
     }
     // 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);
+    case 'progress': return progress(column, Number(value) || 0);
     default: {
       const o = typeof value === 'object' ? value : { text: value };
       let t;
@@ -159,15 +161,23 @@ function checkbox(column, checked, row) {
   return label;
 }
 
-function progress(value) {
+function progress(column, value) {
   const frag = document.createDocumentFragment();
   const bar = el('span', 'nk-progress');
   const fill = el('i'); fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
   bar.appendChild(fill);
-  frag.append(bar, el('span', 'nk-progress-label', `${Math.round(value)}%`));
+  frag.append(bar, el('span', 'nk-progress-label', formatPercent(column, value)));
   return frag;
 }
 
+/** A progress value of 0–100 as Intl writes a percentage in column.locale, else the page's language: 45 → "45%", in German "45 %". */
+function formatPercent(column, value) {
+  const n = Number(value) || 0;
+  try {
+    return new Intl.NumberFormat(column.locale || resolveLocale(), { style: 'percent', maximumFractionDigits: 0 }).format(n / 100);
+  } catch { return `${Math.round(n)}%`; }  // a lang Intl does not take
+}
+
 /** A select's place among its options: the order Notion sorts by. */
 function rankOf(column, value) {
   const i = (column.options || []).findIndex(o => o.value === value || o.label === value);
@@ -201,4 +211,4 @@ function compareBy(column, dir = 1) {
   };
 }
 
-export { textOf as a, compareBy as c, formatDate as f, renderPropertyCell as r, tagFor as t };
+export { textOf as a, formatDate as b, compareBy as c, formatPercent as f, renderPropertyCell as r, tagFor as t };