@jungherz-de/notionkit-elements 1.10.1 → 1.11.1
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/CHANGELOG.md +641 -0
- package/README.md +6 -6
- package/SKILL.md +3748 -0
- package/dist/components/nk-ai-msg.js +6 -4
- package/dist/components/nk-avatar.js +1 -1
- package/dist/components/nk-banner.js +5 -2
- package/dist/components/nk-board-view.js +2 -2
- package/dist/components/nk-calendar.js +2 -2
- package/dist/components/nk-comment.js +1 -1
- package/dist/components/nk-dialog.js +14 -8
- package/dist/components/nk-fields.js +13 -3
- package/dist/components/nk-filter-bar.js +5 -3
- package/dist/components/nk-list-view.js +2 -2
- package/dist/components/nk-member-row.js +1 -1
- package/dist/components/nk-menu.js +2 -2
- package/dist/components/nk-page.js +3 -2
- package/dist/components/nk-select.js +15 -7
- package/dist/components/nk-switch.js +5 -1
- package/dist/components/nk-table-view.js +2 -2
- package/dist/components/nk-tooltip.js +17 -7
- package/dist/components/nk-tree-item.js +10 -4
- package/dist/components/shared/{avatar-BiqCaHOt.js → avatar-CzPZN3uP.js} +2 -2
- package/dist/components/shared/floating-CtqV6MBj.js +66 -0
- package/dist/components/shared/{property-cell-o7N30kAQ.js → property-cell-Cddz5n2O.js} +1 -1
- package/dist/notionkit-elements.esm.js +137 -56
- package/dist/notionkit-elements.js +137 -56
- package/dist/notionkit-elements.min.js +1 -1
- package/package.json +7 -4
- package/src/components/data/nk-ai-msg.js +6 -4
- package/src/components/data/nk-filter-bar.js +5 -3
- package/src/components/forms/nk-calendar.js +1 -1
- package/src/components/forms/nk-fields.js +13 -3
- package/src/components/forms/nk-select.js +15 -7
- package/src/components/forms/nk-switch.js +5 -1
- package/src/components/overlays/nk-dialog.js +14 -8
- package/src/components/overlays/nk-menu.js +1 -1
- package/src/components/overlays/nk-tooltip.js +16 -6
- package/src/components/page/nk-banner.js +5 -2
- package/src/components/page/nk-page.js +3 -2
- package/src/components/shell/nk-tree-item.js +10 -4
- package/src/util/avatar.js +2 -2
- package/src/util/floating.js +39 -10
- package/dist/components/shared/floating-CxHxy-Cb.js +0 -37
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.11.1-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-87-529cca?style=flat-square" alt="87 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.11.1-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
|
|
|
@@ -59,7 +59,7 @@ It is the **app layer** of the NotionKit family – three layers, one design lan
|
|
|
59
59
|
| 🧩 **87 Elements** | Forms with copy field, image picker and date picker, content blocks with bookmarks, app shell & tree with the ☰ drawer and the collapsing sidebar, page shell with properties, panels, avatars and steps, overlays (modal, sheet, dialog, resizable side peek, tooltip, ⌘K palette, menus that float in and become sheets on a phone, popover, emoji picker, toast), database table, board, list & calendar with toolbar and filter pills, comments, AI thread |
|
|
60
60
|
| 🎛️ **Form participation** | Input, textarea, select, switch, check, radio, slider, segmented and model card work natively with `<form>` via `ElementInternals`; radios group across shadow roots |
|
|
61
61
|
| 🌗 **Theme sync** | One observer mirrors `data-theme` on `<html>` into every element |
|
|
62
|
-
| 🪶 **Lightweight** |
|
|
62
|
+
| 🪶 **Lightweight** | 267 KB minified / 53 KB gzipped (IIFE, foundation sheet included), no external dependencies |
|
|
63
63
|
| 📦 **Four bundle shapes** | IIFE, minified IIFE, ESM, and per-component ESM entries on a stable `base.js`, which import NotionKit's sheet instead of carrying a copy |
|
|
64
64
|
| 🤖 **AI-ready** | `SKILL.md` with copy-paste markup, six app skeletons and the rules – an agent given only that file built a working app in the release test |
|
|
65
65
|
|
|
@@ -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.11.1/notionkit.min.css">
|
|
75
|
+
<script src="https://cdn.jsdelivr.net/npm/@jungherz-de/notionkit-elements@1.11.1/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">
|
|
@@ -102,7 +102,7 @@ The per-component files import NotionKit's sheet as `@jungherz-de/notionkit/noti
|
|
|
102
102
|
|
|
103
103
|
Do not mix the full bundle with the per-component files: each brings its own `NkElement`. With the bundle, take `componentsSheet` and `NkElement` from the bundle (`NotionKitElements.componentsSheet` from the `<script>` build).
|
|
104
104
|
|
|
105
|
-
Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.
|
|
105
|
+
Two prerequisites, always: `notionkit.css` on the document (the peer dependency, `>= 1.11.0`; 1.11.0 keeps a floating menu inside an open modal or dialog in place and inside the window and brings the banner's action as a button, fields that share a row and tooltips of several lines, 1.10.1 lets a disabled button show its tooltip, 1.10.0 brings the collapsing sidebar, the resizable side peek, the dialog and the tooltip, 1.9.0 the date picker and the calendar view, 1.8.0 the side peek, the bookmark, the copy field and pictures on the profile row, 1.7.0 the sheet, menus that float in and become sheets on a phone, the sidebar drawer, the database toolbar with filter pills and the steps, 1.7.1 minified files that carry all of it, 1.6.0 page properties, page options, list view, panels, prose and the avatar, 1.5.1 the safe areas, 1.5.0 the Notion-2025 tokens, the nine tag colours and the filled inputs; from 1.5.0 on, Elements and the foundation share one version number – the elements are built and tested against the same release) 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.
|
|
106
106
|
|
|
107
107
|
## Elements
|
|
108
108
|
|