@jungherz-de/notionkit-elements 1.12.0 → 1.14.0

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

@@ -0,0 +1,114 @@
+import { NkElement } from './base.js';
+import { r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import '@jungherz-de/notionkit/notionkit-styles.js';
+import './shared/avatar-CzPZN3uP.js';
+
+// <nk-gallery-view name="gallery" label="🖼 Gallery" meta-keys="status,due" new-row></nk-gallery-view>
+// The fifth database view (NotionKit 1.14.0): the rows as cards with a
+// picture on top, in a grid that fills the row – Notion's gallery, for a
+// course catalog or a reading list. `cover-key` names the row field with the
+// picture's URL (default: cover); a row without one shows the cover
+// gradient, and `no-cover` leaves the pictures out. `size` small | medium |
+// large sets the card size, `fit` shows a picture whole instead of cropped.
+// Cards show the title column and the `meta-keys` (default: select and date
+// columns). Standalone: view.columns = […]; view.rows = […]. Inside
+// <nk-database> the database pushes the data. A card fires nk-select
+// { row, id, value } on a click, Enter or Space, like a row of the table;
+// the add card nk-action { action: 'new-row' }.
+// → <div class="nk-gallery" role="list"><div class="nk-card" role="listitem" tabindex="0">
+//     <div class="nk-cover"><img src="…" alt=""></div><div class="card-title">🧭 …</div><div class="card-meta">…</div></div>
+//     <div class="nk-new-row">＋ New page</div></div>
+const SIZES = ['small', 'large'];
+
+class NkGalleryView extends NkElement {
+  static get observedAttributes() { return ['name', 'label', 'badge', 'count', 'cover-key', 'no-cover', 'size', 'fit', 'title-key', 'meta-keys', 'new-row', 'new-row-label']; }
+
+  render() {
+    this._grid = this.createElement('div', ['nk-gallery'], { role: 'list' });
+    this._wrapper.appendChild(this._grid);
+    this._columns ??= []; this._rows ??= [];
+    this._render();
+    this.closest('nk-database')?.requestSync?.();
+  }
+
+  _titleColumn() {
+    const key = this.getAttribute('title-key');
+    return this._columns.find(c => c.key === key) || this._columns.find(c => c.title) || this._columns[0] || null;
+  }
+  _metaColumns() {
+    const keys = (this.getAttribute('meta-keys') || '').split(',').map(s => s.trim()).filter(Boolean);
+    if (keys.length) return keys.map(k => this._columns.find(c => c.key === k)).filter(Boolean);
+    return this._columns.filter(c => c.type === 'select' || c.type === 'date');
+  }
+
+  _render() {
+    if (!this._grid) return;
+    const size = this.getAttribute('size');
+    this._grid.className = ['nk-gallery', SIZES.includes(size) && size, this.getBoolAttr('fit') && 'fit'].filter(Boolean).join(' ');
+    const title = this._titleColumn(), meta = this._metaColumns();
+    const coverKey = this.getAttribute('cover-key') || 'cover', covers = !this.getBoolAttr('no-cover');
+    this._grid.replaceChildren();
+    for (const row of this._rows) {
+      const card = this.createElement('div', ['nk-card'], { role: 'listitem', tabindex: '0', 'data-id': row.id ?? '' });
+      if (covers) {
+        const cover = this.createElement('div', ['nk-cover']);
+        if (row[coverKey]) cover.appendChild(this.createElement('img', [], { src: row[coverKey], alt: '' }));
+        card.appendChild(cover);
+      }
+      const t = this.createElement('div', ['card-title']);
+      t.textContent = `${row.icon ? row.icon + ' ' : ''}${title ? row[title.key] ?? '' : ''}`;
+      const m = this.createElement('div', ['card-meta']);
+      for (const c of meta) {
+        const v = row[c.key];
+        if (v === undefined || v === null || v === '') continue;
+        const s = document.createElement('span');
+        if (c.type === 'progress') s.textContent = `▰ ${v}%`;
+        else if (c.type === 'date') s.textContent = `📅 ${v}`;
+        else s.appendChild(renderPropertyCell(c, v, row));
+        m.appendChild(s);
+      }
+      card.append(t, m);
+      this._grid.appendChild(card);
+    }
+    if (this.getBoolAttr('new-row')) {
+      const add = this.createElement('div', ['nk-new-row'], { role: 'button', tabindex: '0', 'data-add': '' });
+      add.textContent = this.getAttribute('new-row-label') || '＋ New page';
+      this._grid.appendChild(add);
+    }
+  }
+
+  setupEvents() {
+    this._onClick = (e) => {
+      if (e.target.closest('[data-add]')) { this.emit('nk-action', { action: 'new-row' }); return; }
+      const card = e.target.closest('.nk-card');
+      if (card) { const row = this._rowById(card.dataset.id); this.emit('nk-select', { row, id: row?.id, value: row?.id }); }
+    };
+    this._onKey = (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      if (e.target.matches?.('.nk-card, [data-add]')) { e.preventDefault(); e.target.click(); }
+    };
+    this._grid.addEventListener('click', this._onClick);
+    this._grid.addEventListener('keydown', this._onKey);
+  }
+
+  teardownEvents() {
+    this._grid?.removeEventListener('click', this._onClick);
+    this._grid?.removeEventListener('keydown', this._onKey);
+  }
+
+  _rowById(id) { return this._rows.find(r => String(r.id) === String(id)); }
+  onAttributeChanged() { this._render(); }
+
+  get name() { return this.getAttribute('name') || 'gallery'; }
+  get columns() { return this._columns; }
+  set columns(v) { this._columns = Array.isArray(v) ? v : []; this._render(); }
+  get rows() { return this._rows; }
+  set rows(v) { this._rows = Array.isArray(v) ? v : []; this._render(); }
+  set data({ columns, rows }) { this.setData(columns, rows); }
+  setData(columns, rows) { this._columns = columns || []; this._rows = rows || []; this._render(); }
+  refresh() { this._render(); }
+}
+
+customElements.define('nk-gallery-view', NkGalleryView);
+
+export { NkGalleryView };

package/dist/components/nk-page-cover.js

@@ -6,6 +6,8 @@ import '@jungherz-de/notionkit/notionkit-styles.js';
 // → <div class="nk-cover"><img src="cover.jpg" alt=""></div>: the picture fills
 // the band, cropped rather than stretched; `position` moves the crop, as
 // Notion's "Reposition" does. The gradient stays underneath while it loads.
+// The band is as tall as the token --nk-cover-height (200px), which reaches
+// the shadow root: style="--nk-cover-height: 30vh" sets one cover.
 class NkPageCover extends NkElement {
   static get observedAttributes() { return ['src', 'position']; }
 

package/dist/components/nk-page.js

@@ -21,9 +21,9 @@ class NkPage extends NkElement {
   render() {
     this._page = this.createElement('div', ['nk-page']);
     this._icon = this.createElement('div', ['nk-page-icon'], { role: 'button', title: 'Change icon' });
-    const iconSlot = this.createElement('slot', [], { name: 'icon' });
-    iconSlot.appendChild(this._icon);
-    this._page.appendChild(iconSlot);
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._iconSlot.appendChild(this._icon);
+    this._page.appendChild(this._iconSlot);
     this._page.appendChild(document.createElement('slot'));
     this._cover = this.createElement('div', ['nk-cover']);
     this._coverSlot = this.createElement('slot', [], { name: 'cover' });
@@ -49,11 +49,14 @@ class NkPage extends NkElement {
     if (this._icon.textContent !== icon) this._icon.textContent = icon;
     this._icon.style.display = icon ? '' : 'none';
     this._cover.style.display = this.getBoolAttr('cover') ? '' : 'none';
-    // `covered` is the stylesheet's twin of `.nk-cover + .nk-page`: the icon
-    // overlaps the cover and the page drops its top padding. Without a cover
-    // (attribute or a slotted nk-page-cover) the icon sits in the padding.
-    const slotted = this._coverSlot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim());
-    this._page.classList.toggle('covered', this.getBoolAttr('cover') || slotted);
+    // `covered` is the stylesheet's twin of `.nk-cover + .nk-page` with an
+    // icon: the icon overlaps the cover and the page drops its top padding.
+    // Without a cover (attribute or a slotted nk-page-cover) the icon sits in
+    // the padding; without an icon (attribute or slot="icon") the page keeps
+    // it, so the title never touches the cover (NotionKit 1.13.0).
+    const filled = slot => slot.assignedNodes().some(n => n.nodeType === Node.ELEMENT_NODE || n.data.trim());
+    const covered = this.getBoolAttr('cover') || filled(this._coverSlot), iconed = !!icon || filled(this._iconSlot);
+    this._page.classList.toggle('covered', covered && iconed);
     this._page.classList.toggle('full', this.getBoolAttr('full'));
     this._page.classList.toggle('small', this.getBoolAttr('small'));
   }
@@ -63,10 +66,15 @@ class NkPage extends NkElement {
     this._onCover = () => this._sync();
     this._icon.addEventListener('click', this._onIcon);
     this._coverSlot.addEventListener('slotchange', this._onCover);
+    this._iconSlot.addEventListener('slotchange', this._onCover);
     this._sync();
   }
 
-  teardownEvents() { this._icon?.removeEventListener('click', this._onIcon); this._coverSlot?.removeEventListener('slotchange', this._onCover); }
+  teardownEvents() {
+    this._icon?.removeEventListener('click', this._onIcon);
+    this._coverSlot?.removeEventListener('slotchange', this._onCover);
+    this._iconSlot?.removeEventListener('slotchange', this._onCover);
+  }
 
   onAttributeChanged(name) {
     if (name === 'narrow') this._build();