@jungherz-de/notionkit-elements 1.13.0 → 1.15.0

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

@@ -0,0 +1,115 @@
+import { NkElement } from './base.js';
+import { a as textOf, f as formatDate, 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-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 ? textOf(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 = `📅 ${formatDate(c, 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-list-view.js

@@ -1,7 +1,8 @@
 import { NkElement } from './base.js';
-import { r as renderPropertyCell } from './shared/property-cell-DKvv6TIG.js';
+import { a as textOf, f as formatDate, 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-list-view name="list" label="☰ List" meta-keys="due,status" new-row></nk-list-view>
 // The third database view: one line per row – icon and title, the `meta-keys`
@@ -45,12 +46,12 @@ class NkListView extends NkElement {
       icon.textContent = row.icon || '';
       if (!row.icon) icon.style.display = 'none';
       const t = this.createElement('span', ['l-title']);
-      t.textContent = title ? String(row[title.key] ?? '') : '';
+      t.textContent = title ? textOf(row[title.key]) : '';
       const m = this.createElement('span', ['l-meta']);
       for (const c of meta) {
         const v = row[c.key];
         if (v === undefined || v === null || v === '') continue;
-        m.appendChild(c.type === 'date' || c.type === 'text' || !c.type ? document.createTextNode(String(v)) : renderPropertyCell(c, v, row));
+        m.appendChild(c.type === 'date' ? document.createTextNode(formatDate(c, v)) : c.type === 'text' || !c.type ? document.createTextNode(textOf(v)) : renderPropertyCell(c, v, row));
       }
       item.append(icon, t, m);
       this._list.appendChild(item);

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/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 };