@jungherz-de/notionkit-elements 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/dist/components/nk-ai-input-row.js +1 -1
- package/dist/components/nk-ai-msg.js +1 -1
- package/dist/components/nk-ai-thread.js +1 -1
- package/dist/components/nk-app.js +1 -1
- package/dist/components/nk-avatar-group.js +1 -1
- package/dist/components/nk-banner.js +1 -1
- package/dist/components/nk-block-host.js +1 -1
- package/dist/components/nk-board-view.js +1 -1
- package/dist/components/nk-breadcrumb.js +1 -1
- package/dist/components/nk-btn.js +1 -1
- package/dist/components/nk-callout.js +1 -1
- package/dist/components/nk-check.js +1 -1
- package/dist/components/nk-cmdk.js +1 -1
- package/dist/components/nk-code.js +1 -1
- package/dist/components/nk-comment.js +1 -1
- package/dist/components/nk-comments.js +1 -1
- package/dist/components/nk-danger-zone.js +1 -1
- package/dist/components/nk-database.js +1 -1
- package/dist/components/nk-divider.js +1 -1
- package/dist/components/nk-emoji-picker.js +1 -1
- package/dist/components/nk-empty.js +1 -1
- package/dist/components/nk-field.js +1 -1
- package/dist/components/nk-fields.js +1 -1
- package/dist/components/nk-filter-bar.js +1 -1
- package/dist/components/nk-heading.js +1 -1
- package/dist/components/nk-input.js +1 -1
- package/dist/components/nk-kbd.js +1 -1
- package/dist/components/nk-member-list.js +1 -1
- package/dist/components/nk-member-row.js +1 -1
- package/dist/components/nk-mention.js +1 -1
- package/dist/components/nk-menu-item.js +1 -1
- package/dist/components/nk-menu.js +1 -1
- package/dist/components/nk-modal.js +1 -1
- package/dist/components/nk-model-card.js +1 -1
- package/dist/components/nk-page-actions.js +1 -1
- package/dist/components/nk-page-cover.js +1 -1
- package/dist/components/nk-page-title.js +1 -1
- package/dist/components/nk-page.js +1 -1
- package/dist/components/nk-pop.js +1 -1
- package/dist/components/nk-profile-row.js +1 -1
- package/dist/components/nk-progress.js +1 -1
- package/dist/components/nk-quote.js +1 -1
- package/dist/components/nk-radio.js +1 -1
- package/dist/components/nk-section-label.js +1 -1
- package/dist/components/nk-segmented.js +17 -3
- package/dist/components/nk-select.js +1 -1
- package/dist/components/nk-settings-pane.js +1 -1
- package/dist/components/nk-settings-user.js +1 -1
- package/dist/components/nk-sidebar.js +1 -1
- package/dist/components/nk-skeleton.js +1 -1
- package/dist/components/nk-slider.js +1 -1
- package/dist/components/nk-stat.js +1 -1
- package/dist/components/nk-stats.js +1 -1
- package/dist/components/nk-switch.js +1 -1
- package/dist/components/nk-synced.js +1 -1
- package/dist/components/nk-tab-bar-item.js +1 -1
- package/dist/components/nk-tab-bar.js +11 -4
- package/dist/components/nk-tab.js +1 -1
- package/dist/components/nk-table-view.js +1 -1
- package/dist/components/nk-tabs.js +1 -1
- package/dist/components/nk-tag.js +1 -1
- package/dist/components/nk-template-btn.js +1 -1
- package/dist/components/nk-textarea.js +1 -1
- package/dist/components/nk-theme-toggle.js +1 -1
- package/dist/components/nk-toast.js +1 -1
- package/dist/components/nk-todo.js +1 -1
- package/dist/components/nk-toggle.js +1 -1
- package/dist/components/nk-topbar.js +1 -1
- package/dist/components/nk-tree-item.js +1 -1
- package/dist/components/nk-tree.js +1 -1
- package/dist/components/nk-workspace-switcher.js +1 -1
- package/dist/components/shared/base-BpzLmUWl.js +347 -0
- package/dist/notionkit-elements.esm.js +29 -8
- package/dist/notionkit-elements.js +29 -8
- package/dist/notionkit-elements.min.js +1 -1
- package/package.json +3 -3
- package/src/components/page/nk-segmented.js +16 -2
- package/src/components/shell/nk-tab-bar.js +10 -3
- package/dist/components/shared/base-EVtzqKmc.js +0 -347
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<h1 align="center">🧩 NotionKit Elements</h1>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.
|
|
4
|
+
<a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/version-1.3.0-2383e2?style=flat-square" alt="Version"></a>
|
|
5
5
|
<a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-448361?style=flat-square" alt="Vanilla JS"></a>
|
|
6
6
|
<a href="#"><img src="https://img.shields.io/badge/elements-71-529cca?style=flat-square" alt="71 Elements"></a>
|
|
7
7
|
<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-9065b0?style=flat-square" alt="MIT License"></a>
|
|
8
|
-
<a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.
|
|
8
|
+
<a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.3.0-lightgrey?style=flat-square" alt="Changelog"></a>
|
|
9
9
|
<a href="https://www.npmjs.com/package/@jungherz-de/notionkit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fnotionkit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
|
|
10
10
|
</p>
|
|
11
11
|
|
|
@@ -71,8 +71,8 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
|
|
|
71
71
|
<!DOCTYPE html>
|
|
72
72
|
<html lang="en" data-theme="light">
|
|
73
73
|
<head>
|
|
74
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.
|
|
75
|
-
<script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.
|
|
74
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit@1.4.0/notionkit.min.css">
|
|
75
|
+
<script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.3.0/dist/notionkit-elements.min.js"></script>
|
|
76
76
|
</head>
|
|
77
77
|
<body class="nk-body">
|
|
78
78
|
<nk-field label="Display name" desc="Shown next to your comments">
|
|
@@ -93,7 +93,7 @@ import '@jungherz-de/notionkit-elements'; // everyt
|
|
|
93
93
|
import '@jungherz-de/notionkit-elements/components/nk-btn.js'; // or one element (shared code is one extra chunk)
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.
|
|
96
|
+
Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.4.0`; 1.4.0 brings segmented scroll/wrap, the fixed tab bar and the dvh shell, 1.3.x the field layouts and the labelled switch, 1.2.0 the tab bar; 1.4.0 is what the elements are built and tested against) and `class="nk-body"` on `<body>`. The elements ship no visual CSS of their own – every rule comes from the foundation. The bundle injects the design tokens once as `@layer notionkit-defaults`, so any plain `:root { --nk-accent: … }` of yours re-brands every element in both themes.
|
|
97
97
|
|
|
98
98
|
## Elements
|
|
99
99
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-ai-input-row placeholder="Ask Mona something …"></nk-ai-input-row>
|
|
4
4
|
// → <div class="nk-ai-input-row"><span>✨</span><input><button class="nk-ai-send">↑</button></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-ai-msg role="user" name="You" avatar="MK">Summarise the open tasks.</nk-ai-msg>
|
|
4
4
|
// <nk-ai-msg role="assistant" name="Mona" badge="· AI" avatar="✨">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-banner variant="info">ℹ️ <span>Text</span><span slot="action">Open</span></nk-banner>
|
|
4
4
|
// → <div class="nk-banner info">…<span class="b-action">Open</span></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-block-host handle><p>Editable content lives here.</p></nk-block-host>
|
|
4
4
|
// → <div class="nk-block-host"><span class="nk-block-handle">⠿</span>…</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
import { t as tagFor, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
|
|
3
3
|
|
|
4
4
|
// <nk-board-view name="board" label="▤ Board" group-by="status" new-row></nk-board-view>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-btn variant="primary" small>Save</nk-btn> → <button class="nk-btn primary small">
|
|
4
4
|
// <nk-btn href="/docs" variant="secondary">Docs</nk-btn> → <a class="nk-btn secondary">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-check name="mail" value="weekly" checked>Weekly digest</nk-check>
|
|
4
4
|
// → <label class="nk-check"><input type="checkbox"> Weekly digest</label>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
import { l as lockScroll, i as inertOutside, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
|
|
3
3
|
|
|
4
4
|
// Subsequence scoring for the command palette: every query character must
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// Minimal HTML highlighter emitting the .tag / .attr hooks .nk-code styles.
|
|
4
4
|
// Mirrors tools/highlight.mjs in the NotionKit foundation – no third-party
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-comment author="Sara Lindt" time="1 hr ago" avatar="SL" color="#448361">The board view feels close.</nk-comment>
|
|
4
4
|
// → <div class="nk-comment"><span class="mini-avatar">SL</span><div><div class="c-head"><b>Sara Lindt</b> · 1 hr ago</div><div class="c-body">…</div></div></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-empty icon="🗂️" title="No entries yet" desc="Create the first one."><nk-btn variant="primary" small>＋ New</nk-btn></nk-empty>
|
|
4
4
|
// → <div class="nk-empty"><div class="e-icon">🗂️</div><div class="e-title">…</div><div class="e-desc">…</div>…</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-filter-bar search placeholder="Search rows …"></nk-filter-bar>
|
|
4
4
|
// bar.filters = [{ key: 'status', label: 'Status: Done', value: 'done' }];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-heading level="2">Section</nk-heading> → <h2 class="nk-heading">
|
|
4
4
|
// The heading level is real markup (h1–h4), so the outline stays honest.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-input name="title" value="…" placeholder="…" wide></nk-input> → <input class="nk-input wide">
|
|
4
4
|
// Takes part in the surrounding <form> through ElementInternals.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-member-list><nk-member-row …></nk-member-row>…</nk-member-list>
|
|
4
4
|
// → <div class="nk-member-list">…</div>; the last row gets `last` (no border).
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-mention type="person"><span slot="avatar" class="mini-avatar" style="background:#448361">SL</span>Sara Lindt</nk-mention>
|
|
4
4
|
// <nk-mention type="page">📄 Onboarding</nk-mention> <nk-mention type="date">📅 May 20</nk-mention>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-menu-item icon="✏️" shortcut="⌘E" value="rename">Rename</nk-menu-item>
|
|
4
4
|
// <nk-menu-item type="separator"></nk-menu-item> <nk-menu-item type="label">Danger</nk-menu-item>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
import { l as lockScroll, i as inertOutside, f as firstFocusable, u as unlockScroll } from './shared/focus-DXrK9oLe.js';
|
|
3
3
|
|
|
4
4
|
// <nk-modal id="settings">
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-model-card name="model" value="gpt" title="Mona Pro" desc="Best for long documents" selected></nk-model-card>
|
|
4
4
|
// → <div class="nk-model-card selected"><div class="m-radio"></div><div><div class="m-name">…</div><div class="m-desc">…</div></div></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-page-actions><span>👤 Ada</span><span>📅 12 May</span><span>🏷️ <nk-tag color="purple">Design</nk-tag></span></nk-page-actions>
|
|
4
4
|
// → <div class="nk-page-meta">…</div> – the meta row under the title
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-page-title>NotionKit MVP</nk-page-title> → <h1 class="nk-page-title">
|
|
4
4
|
// <nk-page-title editable placeholder="Untitled">…</nk-page-title>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-profile-row avatar="MK"><nk-btn variant="secondary" small>Change photo</nk-btn></nk-profile-row>
|
|
4
4
|
// → <div class="nk-profile-row"><div class="big-avatar">MK</div>…</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-segmented name="range" value="week">
|
|
4
4
|
// <button value="week">Week</button><button value="month">Month</button>
|
|
@@ -9,16 +9,23 @@ import { a as NkFormElement } from './shared/base-EVtzqKmc.js';
|
|
|
9
9
|
const KEYS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
|
|
10
10
|
|
|
11
11
|
class NkSegmented extends NkFormElement {
|
|
12
|
-
static get observedAttributes() { return ['value', 'name', 'disabled']; }
|
|
12
|
+
static get observedAttributes() { return ['value', 'name', 'disabled', 'scroll', 'wrap']; }
|
|
13
13
|
|
|
14
14
|
render() {
|
|
15
15
|
this._box = this.createElement('div', ['nk-segmented'], { role: 'radiogroup' });
|
|
16
16
|
this._slot = document.createElement('slot');
|
|
17
17
|
this._box.appendChild(this._slot);
|
|
18
18
|
this._wrapper.appendChild(this._box);
|
|
19
|
+
this._syncBox();
|
|
19
20
|
this._sync();
|
|
20
21
|
}
|
|
21
22
|
|
|
23
|
+
// `scroll`: one horizontally scrollable row, scrollbar hidden; `wrap`: rows.
|
|
24
|
+
_syncBox() {
|
|
25
|
+
this._box.classList.toggle('scroll', this.getBoolAttr('scroll'));
|
|
26
|
+
this._box.classList.toggle('wrap', this.getBoolAttr('wrap'));
|
|
27
|
+
}
|
|
28
|
+
|
|
22
29
|
get buttons() { return this._slot?.assignedElements().filter(el => el.localName === 'button') ?? []; }
|
|
23
30
|
_valueOf(btn) { return btn.getAttribute('value') ?? btn.textContent.trim(); }
|
|
24
31
|
|
|
@@ -84,7 +91,10 @@ class NkSegmented extends NkFormElement {
|
|
|
84
91
|
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
85
92
|
}
|
|
86
93
|
|
|
87
|
-
onAttributeChanged() {
|
|
94
|
+
onAttributeChanged(name) {
|
|
95
|
+
if (name === 'scroll' || name === 'wrap') { this._syncBox(); return; }
|
|
96
|
+
if (!this._syncing) this._sync();
|
|
97
|
+
}
|
|
88
98
|
resetValue() { if (this._defaultValue !== undefined) this.setAttribute('value', this._defaultValue); }
|
|
89
99
|
onFormDisabled(d) { this._formDisabled = d; this._sync(); }
|
|
90
100
|
|
|
@@ -92,6 +102,10 @@ class NkSegmented extends NkFormElement {
|
|
|
92
102
|
set value(v) { this.setAttribute('value', v); }
|
|
93
103
|
get name() { return this.getAttribute('name'); }
|
|
94
104
|
set name(v) { this.setAttribute('name', v); }
|
|
105
|
+
get scroll() { return this.getBoolAttr('scroll'); }
|
|
106
|
+
set scroll(v) { this.setBoolAttr('scroll', v); }
|
|
107
|
+
get wrap() { return this.getBoolAttr('wrap'); }
|
|
108
|
+
set wrap(v) { this.setBoolAttr('wrap', v); }
|
|
95
109
|
}
|
|
96
110
|
|
|
97
111
|
customElements.define('nk-segmented', NkSegmented);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-settings-pane name="profile" label="My profile" icon="👤" group="Account" title="My profile" active>…</nk-settings-pane>
|
|
4
4
|
// → <section class="nk-settings-pane active"><h2>My profile</h2>…</section>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-settings-user slot="user" name="Marcel Karas" mail="marcel@…" avatar="MK"></nk-settings-user>
|
|
4
4
|
// → <div class="nk-settings-user"><div class="avatar">MK</div><div class="u-text"><div class="name">…</div><div class="mail">…</div></div></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-slider name="size" min="12" max="18" value="14" show-value></nk-slider>
|
|
4
4
|
// → <input type="range" class="nk-slider"> <div class="nk-slider-value">14</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-stat label="Active pages" value="128" delta="▲ 12 this week" trend="up"></nk-stat>
|
|
4
4
|
// → <div class="nk-stat"><div class="s-label">…</div><div class="s-value">…</div><div class="s-delta up">…</div></div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-tab-bar value="inbox">
|
|
4
4
|
// <nk-tab-bar-item icon="🏠" value="home">Home</nk-tab-bar-item>
|
|
@@ -12,16 +12,20 @@ import { N as NkElement } from './shared/base-EVtzqKmc.js';
|
|
|
12
12
|
// page, so it never moves and needs no bottom padding anywhere. The
|
|
13
13
|
// stylesheet hides it above 860px – there the sidebar is the navigation –
|
|
14
14
|
// and shows it below; `always` shows it at every width (previews, phone
|
|
15
|
-
// frames), `
|
|
15
|
+
// frames), `fixed` pins it to the viewport (standalone PWAs) with a spacer
|
|
16
|
+
// holding its place, `floating` makes it a capsule. Exactly one item is `active`; a
|
|
16
17
|
// `drawer` item opens the sidebar instead of becoming active.
|
|
17
18
|
class NkTabBar extends NkElement {
|
|
18
|
-
static get observedAttributes() { return ['value', 'always', 'floating', 'label']; }
|
|
19
|
+
static get observedAttributes() { return ['value', 'always', 'fixed', 'floating', 'label']; }
|
|
19
20
|
|
|
20
21
|
render() {
|
|
21
22
|
this._bar = this.createElement('nav', ['nk-tab-bar']);
|
|
22
23
|
this._slot = document.createElement('slot');
|
|
23
24
|
this._bar.appendChild(this._slot);
|
|
24
|
-
|
|
25
|
+
// With `fixed` the bar leaves the flow; the spacer (styled by the
|
|
26
|
+
// stylesheet, shown only then) keeps its height so the page ends above it.
|
|
27
|
+
this._spacer = this.createElement('div', ['nk-tab-bar-spacer']);
|
|
28
|
+
this._wrapper.append(this._bar, this._spacer);
|
|
25
29
|
this._syncBar();
|
|
26
30
|
this._sync();
|
|
27
31
|
}
|
|
@@ -34,6 +38,7 @@ class NkTabBar extends NkElement {
|
|
|
34
38
|
|
|
35
39
|
_syncBar() {
|
|
36
40
|
this._bar.classList.toggle('always', this.getBoolAttr('always'));
|
|
41
|
+
this._bar.classList.toggle('fixed', this.getBoolAttr('fixed'));
|
|
37
42
|
this._bar.classList.toggle('floating', this.getBoolAttr('floating'));
|
|
38
43
|
const label = this.getAttribute('label');
|
|
39
44
|
label ? this._bar.setAttribute('aria-label', label) : this._bar.removeAttribute('aria-label');
|
|
@@ -74,6 +79,8 @@ class NkTabBar extends NkElement {
|
|
|
74
79
|
set value(v) { this.setAttribute('value', v); }
|
|
75
80
|
get always() { return this.getBoolAttr('always'); }
|
|
76
81
|
set always(v) { this.setBoolAttr('always', v); }
|
|
82
|
+
get fixed() { return this.getBoolAttr('fixed'); }
|
|
83
|
+
set fixed(v) { this.setBoolAttr('fixed', v); }
|
|
77
84
|
get floating() { return this.getBoolAttr('floating'); }
|
|
78
85
|
set floating(v) { this.setBoolAttr('floating', v); }
|
|
79
86
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
import { c as compareBy, r as renderPropertyCell } from './shared/property-cell-Dn91uFkf.js';
|
|
3
3
|
|
|
4
4
|
// <nk-table-view name="table" label="▦ Table" count new-row sortable></nk-table-view>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement } from './shared/base-
|
|
1
|
+
import { N as NkElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-template-btn icon="📅" value="week-plan">Insert week plan</nk-template-btn>
|
|
4
4
|
// → <button class="nk-template-btn">📅 Insert week plan</button>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as NkFormElement } from './shared/base-
|
|
1
|
+
import { a as NkFormElement } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-textarea name="bio" rows="3" wide>Text</nk-textarea> → <textarea class="nk-textarea wide">
|
|
4
4
|
// The initial value is the `value` attribute, or the element's text content.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { N as NkElement, g as getCurrentTheme } from './shared/base-
|
|
1
|
+
import { N as NkElement, g as getCurrentTheme } from './shared/base-BpzLmUWl.js';
|
|
2
2
|
|
|
3
3
|
// <nk-theme-toggle slot="actions"></nk-theme-toggle>
|
|
4
4
|
// → <button class="nk-topbar-btn nk-theme-toggle">🌙</button>
|