@jungherz-de/notionkit-elements 1.14.0 → 1.16.0

package/dist/components/nk-select.js

@@ -9,8 +9,10 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // The light-DOM <option>s are copied into the shadow <select>. A
 // MutationObserver keeps the copy in step when a framework swaps them; the
 // empty string is a valid value; the live selection survives a rebuild. A
-// value set before its option exists – a framework sets properties before
-// children – waits and is applied once the option arrives.
+// value – attribute or property – whose option is not there yet waits and
+// wins over the browser's preselection once the option arrives, unless
+// someone has chosen another option in the meantime; settling on it fires
+// no nk-change.
 class NkSelect extends NkFormElement {
   static get observedAttributes() { return ['value', 'name', 'disabled', 'required', 'compact', 'wide', 'aria-label']; }
   static get observesLightDom() { return true; }
@@ -20,6 +22,7 @@ class NkSelect extends NkFormElement {
     this._forwardAll();
     this._wrapper.appendChild(this._select);
     this._defaultValue = this.getAttribute('value');
+    this._pending = this._defaultValue;
     // Children may not be parsed yet when connectedCallback runs.
     this.projectLightDom();
     requestAnimationFrame(() => this.projectLightDom());
@@ -53,11 +56,11 @@ class NkSelect extends NkFormElement {
     this._select.innerHTML = '';
     for (const node of nodes) this._select.appendChild(node.cloneNode(true));
 
-    // A value that waited for its option first; then the live selection when
-    // it survived; otherwise the value attribute; otherwise the browser
-    // default (first option / `selected`).
-    if (this._pending != null && this._applyValue(this._pending)) this._pending = null;
-    else if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // A value that waits for its option first – it keeps waiting while the
+    // option is missing; else the live selection when it survived; else the
+    // browser default (first option / `selected`).
+    if (this._pending != null) { if (this._applyValue(this._pending)) this._pending = null; }
+    else this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -86,7 +89,8 @@ class NkSelect extends NkFormElement {
   onAttributeChanged(name) {
     if (!this._select) return;
     if (name === 'value') {
-      this._applyValue(this.getAttribute('value'));
+      const value = this.getAttribute('value');
+      this._pending = value === null || this._applyValue(value) ? null : value;
       this._syncFormValue();
       return;
     }
@@ -100,6 +104,7 @@ class NkSelect extends NkFormElement {
   }
 
   resetValue() {
+    this._pending = null;
     if (!this._applyValue(this._defaultValue)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }

package/dist/components/nk-sheet.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sheet id="more" title="More">

package/dist/components/nk-sidebar.js

@@ -1,5 +1,5 @@
 import { NkElement } from './base.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-sidebar slot="sidebar">

package/dist/components/nk-table-view.js

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-BSVcETss.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 import './shared/avatar-CzPZN3uP.js';
+import './shared/dates-a32DcW1l.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable wrap></nk-table-view>
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".

package/dist/components/nk-tooltip.js

@@ -1,6 +1,6 @@
 import { NkElement } from './base.js';
 import { a as placeNear } from './shared/floating-DOK73b_D.js';
-import { d as deepActiveElement } from './shared/focus-BNAChOXO.js';
+import { d as deepActiveElement } from './shared/focus-C4tbSNND.js';
 import '@jungherz-de/notionkit/notionkit-styles.js';
 
 // <nk-tooltip></nk-tooltip>                    one for the page: every [data-tooltip]

package/dist/components/shared/{focus-BNAChOXO.js → focus-C4tbSNND.js}

@@ -15,7 +15,12 @@ function unlockScroll() {
   if (locks > 0 && --locks === 0) document.documentElement.style.overflow = previousOverflow;
 }
 
-/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included); returns the undo. */
+// Floating layers under <body> that open from inside an overlay – a menu, a
+// date picker – and the tooltip and toast stay usable: made inert, a date
+// picker opened from a dialog showed but took no click.
+const LAYERS = 'nk-menu[floating], nk-calendar[floating], nk-tooltip, nk-toast';
+
+/** Makes every sibling along `el`'s ancestor chain inert (shadow hosts included), floating layers aside; returns the undo. */
 function inertOutside(el) {
   const made = [];
   let node = el;
@@ -23,7 +28,7 @@ function inertOutside(el) {
     const parent = node.parentNode instanceof ShadowRoot ? node.parentNode : node.parentNode;
     if (!parent) break;
     for (const sib of parent.children) {
-      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName)) continue;
+      if (sib === node || sib.inert || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(sib.tagName) || sib.matches(LAYERS)) continue;
       sib.inert = true;
       made.push(sib);
     }

package/dist/components/shared/property-cell-BSVcETss.js

@@ -0,0 +1,204 @@
+import { i as initialsOf, p as paintAvatar } from './avatar-CzPZN3uP.js';
+import { r as resolveLocale } from './dates-a32DcW1l.js';
+
+// Polymorphic property renderer for database views. Returns plain DOM built
+// from NotionKit classes – deliberately not a custom element: every cell rule
+// starts with `.nk-table`, so a cell inside its own shadow root would never
+// 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 | 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.
+// 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.
+// 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.
+// Sorting (compareBy) goes by column.sortKey – another field of the row –
+// when there is one, else by a value's `sort`, a date's time, a select's
+// place among its options; empty cells come last in both directions.
+
+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'];
+
+function optionFor(column, value) {
+  const opts = column.options || [];
+  return opts.find(o => o.value === value) || opts.find(o => o.label === value) || null;
+}
+
+function tagFor(column, value) {
+  const opt = optionFor(column, value);
+  const color = opt?.color && COLORS.includes(opt.color) ? opt.color : 'gray';   // Notion's default option colour
+  return el('span', `nk-tag ${color}`, opt?.label ?? String(value));
+}
+
+/** The text of a value: a string as it is, a text, link or person object's text, label or name. */
+const textOf = v => (v && typeof v === 'object' ? v.text ?? v.label ?? v.name ?? '' : String(v ?? ''));
+
+/** The time of a date value in ms: an ISO date – local midnight – or date-time, D.M.YYYY, a Date, a timestamp, a range's start; NaN when it is none. */
+function timeOf(v) {
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === 'number') return v;
+  if (v && typeof v === 'object') return timeOf(v.start);
+  const s = String(v ?? '').trim();
+  let m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  if (m) return new Date(+m[3], +m[2] - 1, +m[1]).getTime();
+  m = s.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (m) return new Date(+m[1], +m[2] - 1, +m[3]).getTime();
+  return /^\d{4}-\d{2}-\d{2}T/.test(s) ? Date.parse(s) : NaN;
+}
+
+/**
+ * A date as its column shows it: as given without column.format; 'short' –
+ * day and month, the year when it is not this one; 'relative' – minutes or
+ * hours ago or ahead within a day, else the short date; or the options of
+ * Intl.DateTimeFormat. A range { start, end } stands as start → end.
+ */
+function formatDate(column, value) {
+  if (value && typeof value === 'object' && !(value instanceof Date)) return [value.start, value.end].filter(Boolean).map(v => formatDate(column, v)).join(' → ');
+  const format = column.format, t = timeOf(value);
+  if (!format || Number.isNaN(t)) return String(value ?? '');
+  const d = new Date(t), locale = column.locale || resolveLocale();
+  if (format === 'relative') {
+    const minutes = Math.round((t - Date.now()) / 60000), rel = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' });
+    if (Math.abs(minutes) < 60) return rel.format(minutes, 'minute');
+    if (Math.abs(minutes) < 24 * 60) return rel.format(Math.round(minutes / 60), 'hour');
+  }
+  if (format === 'short' || format === 'relative') {
+    const year = d.getFullYear() === new Date().getFullYear() ? {} : { year: 'numeric' };
+    return d.toLocaleDateString(locale, { day: '2-digit', month: '2-digit', ...year });
+  }
+  return typeof format === 'object' ? new Intl.DateTimeFormat(locale, format).format(d) : String(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);
+    return el('span', type === 'person' ? 'person-cell' : null, type === 'text' && column.title ? '' : '—');
+  }
+  switch (type) {
+    case 'select': return tagFor(column, value);
+    case 'multi-select': {
+      const wrap = el('span');
+      wrap.style.display = 'inline-flex'; wrap.style.gap = '4px'; wrap.style.flexWrap = 'wrap';
+      for (const v of Array.isArray(value) ? value : String(value).split(',').map(s => s.trim()).filter(Boolean)) wrap.appendChild(tagFor(column, v));
+      return wrap;
+    }
+    case 'date': return el('span', 'date-cell', formatDate(column, value));
+    case 'person': {
+      const cell = el('span', 'person-cell');
+      const p = typeof value === 'string' ? { name: value } : value;
+      // color: one of Notion's nine names, or any CSS background; none – the avatar gradient.
+      const avatar = el('span', 'nk-avatar small', p.initials || p.avatar || initialsOf(p.name));
+      paintAvatar(avatar, p.color);
+      cell.append(avatar, document.createTextNode(' ' + (p.name || '')));
+      return cell;
+    }
+    case 'checkbox': return checkbox(column, !!value, row);
+    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);
+    default: {
+      const o = typeof value === 'object' ? value : { text: value };
+      let t;
+      if (column.title) {
+        t = el('span', 'row-title');
+        if (row.icon) t.append(document.createTextNode(row.icon + ' '));
+        t.append(document.createTextNode(String(o.text ?? '')));
+      } else if (typeof value === 'object') {
+        t = el('span', o.color && COLORS.includes(o.color) ? `td-text ${o.color}` : 'td-text', String(o.text ?? ''));
+      } else return el('span', null, String(value));
+      if (o.tooltip) t.dataset.tooltip = o.tooltip;
+      if (!o.desc) return t;
+      const frag = document.createDocumentFragment();
+      frag.append(t, el('span', 'td-desc', String(o.desc)));
+      return frag;
+    }
+  }
+}
+
+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');
+  input.type = 'checkbox'; input.checked = checked;
+  input.dataset.key = column.key;
+  if (row.id != null) input.dataset.rowId = row.id;
+  label.appendChild(input);
+  return label;
+}
+
+function progress(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)}%`));
+  return frag;
+}
+
+/** 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);
+  return i < 0 ? (column.options || []).length : i;
+}
+
+/** What a column sorts a row by – see the head of this file. */
+function sortValue(column, row) {
+  if (column.sortKey) return row[column.sortKey];
+  const v = row[column.key];
+  if (v === undefined || v === null || v === '') return null;
+  if (typeof v === 'object' && !Array.isArray(v) && 'sort' in v) return v.sort;
+  switch (column.type || 'text') {
+    case 'number': case 'progress': return Number(v);
+    case 'checkbox': return v ? 1 : 0;
+    case 'date': { const t = timeOf(v); return Number.isNaN(t) ? String(v) : t; }
+    case 'select': return rankOf(column, v);
+    case 'multi-select': { const first = (Array.isArray(v) ? v : String(v).split(','))[0]; return first == null ? null : rankOf(column, String(first).trim()); }
+    default: return textOf(v);
+  }
+}
+
+/** Sort comparator for a column; empty cells come last whichever the direction. */
+function compareBy(column, dir = 1) {
+  const empty = v => v === null || v === undefined || v === '' || Number.isNaN(v);
+  return (a, b) => {
+    const x = sortValue(column, a), y = sortValue(column, b);
+    if (empty(x) || empty(y)) return empty(x) === empty(y) ? 0 : empty(x) ? 1 : -1;
+    if (typeof x === 'number' && typeof y === 'number') return (x - y) * dir;
+    return String(x).localeCompare(String(y), undefined, { numeric: true }) * dir;
+  };
+}
+
+export { textOf as a, compareBy as c, formatDate as f, renderPropertyCell as r, tagFor as t };