@jungherz-de/notionkit-elements 1.7.0 → 1.9.0

package/dist/components/nk-peek.js

@@ -0,0 +1,122 @@
+import { NkElement } from './base.js';
+import { d as deepActiveElement, l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-BNAChOXO.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+
+// <nk-peek id="peek" label="Database Table-View">
+//   <nk-btn slot="actions" variant="topbar" aria-label="Open as page"><svg …></svg></nk-btn>
+//   <nk-page-title>🗃️ Database Table-View</nk-page-title>
+//   <nk-props>…</nk-props>
+//   <div class="nk-prose">…</div>
+//   <nk-comments>…</nk-comments>
+// </nk-peek>
+// → <div class="nk-peek-backdrop open"><aside class="nk-peek" role="dialog">
+//     <div class="pk-bar"><button class="nk-topbar-btn">»</button>…actions…</div>
+//     <div class="pk-body">…</div></aside></div>
+//
+// Notion's side peek (NotionKit 1.8.0): a row beside the table, which stays
+// usable – no scrim, nothing inert. show() slides it in and moves focus to
+// it; », Escape and a click elsewhere on the page close it, and Escape and »
+// hand focus back. A click that calls show() again – on another row – only
+// swaps the content, and clicks inside other overlays (a menu opened from
+// the peek) leave it open. Below 860px it is a bottom sheet over a dimmed
+// page; there it is modal: the page is inert and scroll-locked, the dimmed
+// page takes the tap that closes it. Put it directly under <body>.
+const CLOSE_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 17 5-5-5-5M13 17l5-5-5-5"/></svg>';
+const OVERLAYS = new Set(['nk-menu', 'nk-pop', 'nk-modal', 'nk-sheet', 'nk-cmdk', 'nk-toast']);
+const OVERLAY_CLASSES = ['nk-pop', 'nk-modal-backdrop', 'nk-sheet-backdrop', 'nk-cmdk-backdrop'];
+const phone = () => matchMedia('(max-width: 860px)').matches;
+
+class NkPeek extends NkElement {
+  static get observedAttributes() { return ['open', 'label', 'close-label']; }
+
+  render() {
+    this._backdrop = this.createElement('div', ['nk-peek-backdrop']);
+    this._box = this.createElement('aside', ['nk-peek'], { role: 'dialog', tabindex: '-1' });
+    const bar = this.createElement('div', ['pk-bar']);
+    this._close = this.createElement('button', ['nk-topbar-btn'], { type: 'button' });
+    this._close.innerHTML = CLOSE_ICON;
+    bar.append(this._close, this.createElement('slot', [], { name: 'actions' }));
+    const body = this.createElement('div', ['pk-body']);
+    body.appendChild(document.createElement('slot'));
+    this._box.append(bar, body);
+    this._backdrop.appendChild(this._box);
+    this._wrapper.appendChild(this._backdrop);
+    this._syncLabels();
+    this._syncOpen();
+  }
+
+  _syncLabels() {
+    const label = this.getAttribute('label');
+    if (label) this._box.setAttribute('aria-label', label); else this._box.removeAttribute('aria-label');
+    this._close.setAttribute('aria-label', this.getAttribute('close-label') || 'Close');
+  }
+
+  _syncOpen() {
+    const open = this.getBoolAttr('open');
+    this._backdrop.classList.toggle('open', open);
+    if (open === this._wasOpen) return;
+    this._wasOpen = open;
+    if (open) {
+      this._returnFocus = deepActiveElement();
+      if (phone()) {
+        this._modal = true;
+        this._box.setAttribute('aria-modal', 'true');
+        lockScroll();
+        this._undoInert = inertOutside(this);
+      }
+      requestAnimationFrame(() => this._box.focus({ preventScroll: true }));
+    } else {
+      if (this._modal) { this._modal = false; this._box.removeAttribute('aria-modal'); unlockScroll(); this._undoInert?.(); this._undoInert = null; }
+      const active = deepActiveElement();
+      const inside = active && (this.contains(active) || this._shadow.contains(active) || active === document.body);
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (inside && back?.isConnected && typeof back.focus === 'function') back.focus({ preventScroll: true });
+    }
+  }
+
+  setupEvents() {
+    this._onClose = () => this.close();
+    this._onBackdrop = (e) => { if (e.target === this._backdrop) this.close(); };
+    this._onKey = (e) => { if (e.key === 'Escape' && this.getBoolAttr('open')) this.close(); };
+    // Bubble phase, after the page's own handlers: a click that showed the
+    // peek again (another row) must not close it.
+    this._onOutside = (e) => {
+      if (!this.getBoolAttr('open') || this._shownAt >= e.timeStamp) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      if (path.some(n => n.nodeType === 1 && (OVERLAYS.has(n.localName) || OVERLAY_CLASSES.some(c => n.classList.contains(c))))) return;
+      this.close();
+    };
+    this._close.addEventListener('click', this._onClose);
+    this._backdrop.addEventListener('click', this._onBackdrop);
+    document.addEventListener('keydown', this._onKey);
+    document.addEventListener('click', this._onOutside);
+  }
+
+  teardownEvents() {
+    this._close?.removeEventListener('click', this._onClose);
+    this._backdrop?.removeEventListener('click', this._onBackdrop);
+    document.removeEventListener('keydown', this._onKey);
+    document.removeEventListener('click', this._onOutside);
+    if (this._modal) { this._modal = false; unlockScroll(); this._undoInert?.(); this._undoInert = null; }
+    this._wasOpen = false;
+  }
+
+  onAttributeChanged(name) {
+    if (name !== 'open') { this._syncLabels(); return; }
+    this._syncOpen();
+    this.emit('nk-toggle', { open: this.getBoolAttr('open') });
+  }
+
+  show() { this._shownAt = performance.now(); this.setBoolAttr('open', true); }
+  close() { this.setBoolAttr('open', false); }
+  toggle() { this.getBoolAttr('open') ? this.close() : this.show(); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { v ? this.show() : this.close(); }
+}
+
+customElements.define('nk-peek', NkPeek);
+
+export { NkPeek };

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

@@ -7,8 +7,10 @@ import './shared/avatar-BiqCaHOt.js';
 // `wrap` lets cell text break (`.nk-table.wrap`), like Notion's "wrap column".
 // Standalone: view.columns = […]; view.rows = […];  Inside <nk-database> the
 // database pushes `data`. → <div class="nk-table-wrap"><table class="nk-table">…</table><div class="nk-new-row">＋ New page</div></div>
-// Cells are plain markup from renderPropertyCell(); rows fire nk-select,
-// checkboxes nk-change, headers nk-action { action: 'sort' } (and sort locally
+// Cells are plain markup from renderPropertyCell(); rows fire nk-select
+// { 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' }.
 class NkTableView extends NkElement {
   static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'new-row', 'new-row-label', 'sortable', 'sort-key', 'sort-dir', 'wrap']; }
@@ -76,7 +78,11 @@ class NkTableView extends NkElement {
       }
       if (e.target.closest('input[type=checkbox], a')) return;
       const tr = e.target.closest('tr[data-id]');
-      if (tr) { const row = this._rowById(tr.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+      if (!tr) return;
+      // Which cell: `key` names its column, `cell` is there to anchor an editor to.
+      const cell = e.target.closest('td');
+      const row = this._rowById(tr.dataset.id);
+      this.emit('nk-select', { row, id: row?.id, value: row?.id, key: cell ? this._columns[cell.cellIndex]?.key : undefined, cell });
     };
     this._onChange = (e) => {
       const input = e.target;

package/dist/components/shared/dates-a32DcW1l.js

@@ -0,0 +1,67 @@
+// Calendar days for nk-calendar and nk-calendar-view: local days as
+// 'YYYY-MM-DD', no library. Weeks are ISO weeks (Monday-based, the week with
+// the year's first Thursday); the first weekday comes from the locale.
+const pad = n => String(n).padStart(2, '0');
+
+const isoOf = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+
+/** 'YYYY-MM-DD[THH:MM]', 'D.M.YYYY', a Date or { start } → a local Date at midnight, or null. */
+function parseDay(v) {
+  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : new Date(v.getFullYear(), v.getMonth(), v.getDate());
+  if (v && typeof v === 'object') return v.start ? parseDay(v.start) : null;
+  const s = String(v ?? '').trim();
+  let m = s.match(/^(\d{4})-(\d{2})-(\d{2})/);
+  if (m) return new Date(+m[1], +m[2] - 1, +m[3]);
+  m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+  return m ? new Date(+m[3], +m[2] - 1, +m[1]) : null;
+}
+
+function isoWeek(d) {
+  const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+  t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
+  return Math.ceil(((t - Date.UTC(t.getUTCFullYear(), 0, 1)) / 864e5 + 1) / 7);
+}
+
+/** The page's language unless the element names one. */
+const resolveLocale = attr => attr || document.documentElement.lang || navigator.language || 'en';
+
+/** 0 = Sunday … 6 = Saturday, from Intl.Locale's week info; Monday where the browser cannot say. */
+function firstWeekday(locale) {
+  try {
+    const l = new Intl.Locale(locale), info = l.getWeekInfo?.() ?? l.weekInfo;
+    if (info?.firstDay) return info.firstDay % 7;
+  } catch { /* an unknown tag */ }
+  return 1;
+}
+
+/** Short weekday names from `weekStart` on; `length` cuts them (2 → "Mo"). */
+function weekdayNames(locale, weekStart, length = 0) {
+  const f = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  // 7 June 2026 is a Sunday, so 7 + n is weekday n.
+  return Array.from({ length: 7 }, (_, i) => {
+    const name = f.format(new Date(2026, 5, 7 + ((weekStart + i) % 7))).replace('.', '');
+    return length ? name.slice(0, length) : name;
+  });
+}
+
+/** A month from its week start: `first`, `day(i)` for the i-th cell, the `rows` it needs. */
+function monthGrid(month, weekStart) {
+  const [y, m] = month.split('-').map(Number), first = new Date(y, m - 1, 1), offset = (first.getDay() - weekStart + 7) % 7;
+  return { m, first, day: i => new Date(y, m - 1, 1 - offset + i), rows: Math.ceil((offset + new Date(y, m, 0).getDate()) / 7) };
+}
+
+function stepMonth(month, n) {
+  const [y, m] = month.split('-').map(Number);
+  return isoOf(new Date(y, m - 1 + n, 1)).slice(0, 7);
+}
+
+/** "KW" for German, "W" elsewhere – the head of the week column. */
+const weekLabel = locale => (/^de\b/i.test(locale) ? 'KW' : 'W');
+
+const CHEVRONS = {
+  prev: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>',
+  next: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>',
+};
+
+export { CHEVRONS as C, weekdayNames as a, isoWeek as b, addDays as c, firstWeekday as f, isoOf as i, monthGrid as m, parseDay as p, resolveLocale as r, stepMonth as s, weekLabel as w };

package/dist/components/shared/floating-B8CwbXnV.js

@@ -0,0 +1,22 @@
+// Placement for elements that float over the page – <nk-menu floating>,
+// <nk-calendar floating>: the host is a fixed box put under its anchor.
+
+/** The border box of an element, or of the first descendant with one (display: contents hosts). */
+function boxOf(el) {
+  if (el.getClientRects().length) return el.getBoundingClientRect();
+  for (const child of [...(el.shadowRoot?.children ?? []), ...el.children]) {
+    const r = boxOf(child);
+    if (r.width || r.height) return r;
+  }
+  return el.getBoundingClientRect();
+}
+
+/** Puts `host` 6px under `anchor`, right edges aligned – left edges with align="start". */
+function placeUnder(host, anchor, align) {
+  const r = boxOf(anchor);
+  host.style.top = `${r.bottom + 6}px`;
+  if (align === 'start') { host.style.left = `${r.left}px`; host.style.right = ''; }
+  else { host.style.right = `${Math.max(8, innerWidth - r.right)}px`; host.style.left = ''; }
+}
+
+export { placeUnder as p };