@jungherz-de/notionkit-elements 1.0.0 → 1.1.0

package/dist/components/nk-tab-bar-item.js

@@ -0,0 +1,83 @@
+import { N as NkElement } from './shared/base-BavgHsS-.js';
+
+// <nk-tab-bar-item icon="📥" value="inbox" active>Inbox</nk-tab-bar-item>
+// → <button class="nk-tab-bar-item active" type="button">
+//     <span class="icon">📥</span><span class="label">Inbox</span></button>
+//
+// One destination of <nk-tab-bar>. A click emits nk-select (cancelable);
+// inside a bar it then moves the bar's `value`, standalone it sets its own
+// `active`. With `href` it navigates afterwards, with `drawer` it opens the
+// nearest <nk-sidebar> as a drawer instead of becoming active – the usual
+// fifth item ("More"). The icon is an attribute or a `slot="icon"` node.
+class NkTabBarItem extends NkElement {
+  static get observedAttributes() { return ['icon', 'label', 'value', 'href', 'active', 'disabled', 'drawer']; }
+
+  render() {
+    this._btn = this.createElement('button', ['nk-tab-bar-item'], { type: 'button' });
+    this._iconSlot = this.createElement('slot', [], { name: 'icon' });
+    this._icon = this.createElement('span', ['icon'], { 'aria-hidden': 'true' });
+    this._iconSlot.appendChild(this._icon);
+    this._label = this.createElement('span', ['label']);
+    this._labelSlot = document.createElement('slot');
+    this._labelText = document.createTextNode('');
+    this._labelSlot.appendChild(this._labelText);
+    this._label.appendChild(this._labelSlot);
+    this._btn.append(this._iconSlot, this._label);
+    this._wrapper.appendChild(this._btn);
+    this._sync();
+  }
+
+  _sync() {
+    this._icon.textContent = this.getAttribute('icon') ?? '';
+    this._labelText.data = this.getAttribute('label') ?? '';
+    const active = this.getBoolAttr('active');
+    this._btn.classList.toggle('active', active);
+    active ? this._btn.setAttribute('aria-current', 'page') : this._btn.removeAttribute('aria-current');
+    this._btn.disabled = this.getBoolAttr('disabled');
+    const href = this.getAttribute('href');
+    href ? this._btn.setAttribute('data-href', href) : this._btn.removeAttribute('data-href');
+  }
+
+  setupEvents() {
+    this._onClick = () => this.select();
+    this._btn.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._btn?.removeEventListener('click', this._onClick);
+  }
+
+  select() {
+    if (this.getBoolAttr('disabled')) return;
+    const href = this.getAttribute('href');
+    const ok = this.emit('nk-select', { value: this.value, label: this.label, href, item: this, drawer: this.getBoolAttr('drawer') });
+    if (!ok) return;
+    if (this.getBoolAttr('drawer')) {
+      const sidebar = this.closest('nk-app')?.querySelector('nk-sidebar') ?? document.querySelector('nk-sidebar');
+      sidebar?.toggle?.();
+      return;
+    }
+    const bar = this.closest('nk-tab-bar');
+    if (bar) bar.value = this.value;
+    else this.setBoolAttr('active', true);
+    if (href) location.assign(href);
+  }
+
+  onAttributeChanged() { this._sync(); }
+  focus(o) { this._btn?.focus(o); }
+
+  get value() { return this.getAttribute('value') ?? this.label; }
+  set value(v) { this.setAttribute('value', v); }
+  get label() { return this.getAttribute('label') ?? this.textContent.trim(); }
+  set label(v) { this.setAttribute('label', v); }
+  get active() { return this.getBoolAttr('active'); }
+  set active(v) { this.setBoolAttr('active', v); }
+  get disabled() { return this.getBoolAttr('disabled'); }
+  set disabled(v) { this.setBoolAttr('disabled', v); }
+  get drawer() { return this.getBoolAttr('drawer'); }
+  set drawer(v) { this.setBoolAttr('drawer', v); }
+}
+
+customElements.define('nk-tab-bar-item', NkTabBarItem);
+
+export { NkTabBarItem };

package/dist/components/nk-tab-bar.js

@@ -0,0 +1,83 @@
+import { N as NkElement } from './shared/base-BavgHsS-.js';
+
+// <nk-tab-bar value="inbox">
+//   <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
+//   <nk-tab-bar-item icon="📥" value="inbox">Inbox</nk-tab-bar-item>
+//   <nk-tab-bar-item icon="☰" drawer>More</nk-tab-bar-item>
+// </nk-tab-bar>
+// → <nav class="nk-tab-bar">…</nav>
+//
+// The thumb-reachable twin of the sidebar for phones and installed PWAs. As
+// the last child of <nk-app> it is slotted into .nk-main below the scrolling
+// page, so it never moves and needs no bottom padding anywhere. The
+// stylesheet hides it above 860px – there the sidebar is the navigation –
+// and shows it below; `always` shows it at every width (previews, phone
+// frames), `floating` makes it a capsule. Exactly one item is `active`; a
+// `drawer` item opens the sidebar instead of becoming active.
+class NkTabBar extends NkElement {
+  static get observedAttributes() { return ['value', 'always', 'floating', 'label']; }
+
+  render() {
+    this._bar = this.createElement('nav', ['nk-tab-bar']);
+    this._slot = document.createElement('slot');
+    this._bar.appendChild(this._slot);
+    this._wrapper.appendChild(this._bar);
+    this._syncBar();
+    this._sync();
+  }
+
+  get items() { return [...this.querySelectorAll(':scope > nk-tab-bar-item')]; }
+
+  // Attribute access only: on the first connect the children are in the DOM
+  // but not yet upgraded, so their accessors do not exist.
+  _valueOf(item) { return item.getAttribute('value') ?? item.getAttribute('label') ?? item.textContent.trim(); }
+
+  _syncBar() {
+    this._bar.classList.toggle('always', this.getBoolAttr('always'));
+    this._bar.classList.toggle('floating', this.getBoolAttr('floating'));
+    const label = this.getAttribute('label');
+    label ? this._bar.setAttribute('aria-label', label) : this._bar.removeAttribute('aria-label');
+  }
+
+  _sync() {
+    const items = this.items.filter(i => !i.hasAttribute('drawer'));
+    if (!items.length) return;
+    let value = this.getAttribute('value');
+    if (value === null || !items.some(i => this._valueOf(i) === value)) {
+      const preset = items.find(i => i.hasAttribute('active')) || items[0];
+      value = this._valueOf(preset);
+    }
+    for (const item of items) {
+      if (this._valueOf(item) === value) item.setAttribute('active', ''); else item.removeAttribute('active');
+    }
+    this._value = value;
+  }
+
+  setupEvents() {
+    this._onSlot = () => this._sync();
+    this._slot.addEventListener('slotchange', this._onSlot);
+    this._sync();
+  }
+
+  teardownEvents() {
+    this._slot?.removeEventListener('slotchange', this._onSlot);
+  }
+
+  onAttributeChanged(name) {
+    if (name !== 'value') { this._syncBar(); return; }
+    const before = this._value;
+    this._sync();
+    if (this._value !== before) this.emit('nk-change', { value: this._value });
+  }
+
+  get value() { return this._value ?? this.getAttribute('value'); }
+  set value(v) { this.setAttribute('value', v); }
+  get always() { return this.getBoolAttr('always'); }
+  set always(v) { this.setBoolAttr('always', v); }
+  get floating() { return this.getBoolAttr('floating'); }
+  set floating(v) { this.setBoolAttr('floating', v); }
+}
+
+customElements.define('nk-tab-bar', NkTabBar);
+
+export { NkTabBar };

package/dist/components/nk-tab.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-tab value="notes" active>📝 Notes</nk-tab>  →  <span class="nk-tab active" role="tab">
 class NkTab extends NkElement {

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
 
 // <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>

package/dist/components/nk-tabs.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-tabs value="notes">
 //   <nk-tab value="notes">📝 Notes</nk-tab>

package/dist/components/nk-tag.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-tag color="blue">Text</nk-tag>  —  modifier class .blue becomes color="blue"
 const COLORS = ['blue', 'green', 'orange', 'purple'];

package/dist/components/nk-template-btn.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
 // → <button class="nk-template-btn">📅 Insert week plan</button>

package/dist/components/nk-textarea.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-textarea name="bio" rows="3" wide>Text</nk-textarea>  →  <textarea class="nk-textarea wide">
 // The initial value is the `value` attribute, or the element's text content.
@@ -19,7 +19,7 @@ class NkTextarea extends NkFormElement {
 
   _forward(attr) {
     if (BOOLEANS.includes(attr)) {
-      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr);
+      this._input[attr === 'readonly' ? 'readOnly' : attr] = this.getBoolAttr(attr) || (attr === 'disabled' && !!this._formDisabled);
       return;
     }
     const v = this.getAttribute(attr);

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

@@ -1,4 +1,4 @@
-import { N as NkElement, g as getCurrentTheme } from './shared/base-6gEcoatG.js';
+import { N as NkElement, g as getCurrentTheme } from './shared/base-BavgHsS-.js';
 
 // <nk-theme-toggle slot="actions"></nk-theme-toggle>
 // → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>

package/dist/components/nk-toast.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-toast id="toast"></nk-toast>   …   toast.show('Saved');
 // → <div class="nk-toast show">✓ Saved</div>

package/dist/components/nk-todo.js

@@ -1,4 +1,4 @@
-import { a as NkFormElement } from './shared/base-6gEcoatG.js';
+import { a as NkFormElement } from './shared/base-BavgHsS-.js';
 
 // <nk-todo name="task" value="1" checked>Write the docs</nk-todo>
 // → <label class="nk-todo"><input type="checkbox"><span>Write the docs</span></label>

package/dist/components/nk-toggle.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-toggle label="Details" open>Body…</nk-toggle>
 // → <details class="nk-toggle" open><summary>Details</summary><div class="toggle-body">…</div></details>

package/dist/components/nk-topbar.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-topbar>
 //   <nk-breadcrumb>…</nk-breadcrumb>

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

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-tree-item icon="📊" value="overview" open>
 //   Project overview

package/dist/components/nk-tree.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-tree>
 //   <nk-section-label addable>Favourites</nk-section-label>

package/dist/components/nk-workspace-switcher.js

@@ -1,4 +1,4 @@
-import { N as NkElement } from './shared/base-6gEcoatG.js';
+import { N as NkElement } from './shared/base-BavgHsS-.js';
 
 // <nk-workspace-switcher slot="workspace" name="Acme" avatar="A">
 //   <nk-menu slot="menu">…</nk-menu>