@thebase/ui 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/CHANGELOG.md +32 -260
- package/LICENSE +1 -1
- package/README.md +98 -93
- package/bin/{create-baseui-app.mjs → create-nodexui-app.mjs} +65 -65
- package/dist/{baseui.apidoc.esm.js → nodexui.apidoc.esm.js} +136 -136
- package/dist/{baseui.apidoc.min.js → nodexui.apidoc.min.js} +137 -137
- package/dist/nodexui.esm.js +58 -0
- package/dist/nodexui.i18n.esm.js +2 -0
- package/dist/nodexui.i18n.min.js +2 -0
- package/dist/nodexui.icons.esm.js +1 -0
- package/dist/{baseui.min.css → nodexui.min.css} +1 -1
- package/dist/nodexui.min.js +77 -0
- package/dist/{baseui.pwa.esm.js → nodexui.pwa.esm.js} +5 -5
- package/dist/{baseui.registry.json → nodexui.registry.json} +162 -162
- package/dist/{baseui.templates.xml → nodexui.templates.xml} +573 -573
- package/dist/{baseui.vite.esm.js → nodexui.vite.esm.js} +6 -6
- package/dist/runtime/mermaid/mermaid.esm.min.mjs +2 -2
- package/dist/runtime/milkdown/milkdown-editor.js +1 -1
- package/dist/runtime/milkdown/milkdown-text-editor.js +1 -1
- package/dist/themes/{baseui-dark.css → nodexui-dark.css} +2 -2
- package/dist/themes/{baseui-light.css → nodexui-light.css} +2 -2
- package/dist/types/analytics.d.ts +12 -12
- package/dist/types/apidoc.d.ts +1 -1
- package/dist/types/i18n.d.ts +25 -0
- package/dist/types/index.d.ts +16 -14
- package/dist/types/vite.d.ts +2 -2
- package/docs/analytics.md +12 -12
- package/docs/base-ui-skill.md +4 -4
- package/docs/blocks.md +6 -6
- package/docs/components/accordion.md +4 -4
- package/docs/components/alert-dialog.md +2 -2
- package/docs/components/alert.md +5 -5
- package/docs/components/apidoc.md +14 -14
- package/docs/components/aspect-ratio.md +2 -2
- package/docs/components/attachment.md +5 -5
- package/docs/components/avatar.md +7 -7
- package/docs/components/badge.md +2 -2
- package/docs/components/block-viewer.md +8 -8
- package/docs/components/breadcrumb.md +3 -3
- package/docs/components/bubble.md +2 -2
- package/docs/components/button-group.md +2 -2
- package/docs/components/button.md +2 -2
- package/docs/components/calendar.md +7 -7
- package/docs/components/card.md +2 -2
- package/docs/components/carousel.md +9 -9
- package/docs/components/chart.md +7 -7
- package/docs/components/checkbox.md +2 -2
- package/docs/components/clipboard-button.md +7 -7
- package/docs/components/code-editor.md +1 -1
- package/docs/components/collapsible.md +4 -4
- package/docs/components/combobox.md +7 -7
- package/docs/components/command.md +7 -7
- package/docs/components/context-menu.md +7 -7
- package/docs/components/data-table.md +9 -9
- package/docs/components/date-picker.md +7 -7
- package/docs/components/dialog.md +5 -5
- package/docs/components/direction.md +2 -2
- package/docs/components/drawer.md +4 -4
- package/docs/components/dropdown-menu.md +3 -3
- package/docs/components/empty.md +3 -3
- package/docs/components/field.md +1 -1
- package/docs/components/form.md +3 -3
- package/docs/components/hover-card.md +2 -2
- package/docs/components/icon.md +3 -3
- package/docs/components/input-otp.md +7 -7
- package/docs/components/input.md +6 -6
- package/docs/components/item.md +3 -3
- package/docs/components/kbd.md +2 -2
- package/docs/components/label.md +2 -2
- package/docs/components/markdown.md +13 -13
- package/docs/components/marker.md +2 -2
- package/docs/components/menubar.md +2 -2
- package/docs/components/message-scroller.md +7 -7
- package/docs/components/message.md +7 -7
- package/docs/components/native-select.md +3 -3
- package/docs/components/navigation-menu.md +3 -3
- package/docs/components/pagination.md +3 -3
- package/docs/components/popover.md +10 -10
- package/docs/components/progress.md +2 -2
- package/docs/components/pwa.md +4 -4
- package/docs/components/questionnaire.md +7 -7
- package/docs/components/radio-group.md +2 -2
- package/docs/components/resizable.md +7 -7
- package/docs/components/scroll-area.md +7 -7
- package/docs/components/select.md +2 -2
- package/docs/components/separator.md +2 -2
- package/docs/components/sheet.md +3 -3
- package/docs/components/shell.md +7 -7
- package/docs/components/sidebar.md +3 -3
- package/docs/components/skeleton.md +2 -2
- package/docs/components/slider.md +2 -2
- package/docs/components/spinner.md +4 -4
- package/docs/components/switch.md +2 -2
- package/docs/components/table.md +2 -2
- package/docs/components/tabs.md +6 -6
- package/docs/components/text-editor.md +6 -6
- package/docs/components/textarea.md +3 -3
- package/docs/components/theme-button.md +6 -6
- package/docs/components/toast.md +6 -6
- package/docs/components/toggle-group.md +7 -7
- package/docs/components/toggle.md +7 -7
- package/docs/components/tooltip.md +9 -9
- package/docs/components/typography.md +9 -9
- package/docs/i18n.md +119 -0
- package/docs/icons.md +9 -9
- package/docs/installation.md +31 -32
- package/docs/owl-components.md +36 -38
- package/docs/registry.md +14 -13
- package/docs/runtime-api.md +14 -12
- package/docs/theming.md +15 -15
- package/docs/usage-guide.md +54 -56
- package/package.json +51 -35
- package/dist/baseui.esm.js +0 -58
- package/dist/baseui.icons.esm.js +0 -1
- package/dist/baseui.min.js +0 -77
- /package/dist/{baseui.analytics.esm.js → nodexui.analytics.esm.js} +0 -0
- /package/dist/{baseui.analytics.min.js → nodexui.analytics.min.js} +0 -0
- /package/dist/themes/{baseui-dark.min.css → nodexui-dark.min.css} +0 -0
- /package/dist/themes/{baseui-light.min.css → nodexui-light.min.css} +0 -0
package/docs/installation.md
CHANGED
|
@@ -2,60 +2,58 @@
|
|
|
2
2
|
|
|
3
3
|
See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choosing an API, install, theming, verification). This page covers install mechanics only.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Nodex UI is distributed as one CSS file and one JavaScript file for browser use. `dist/nodexui.min.js` is fully self-contained: the JS bundle (Popper.js included) and the Nodex runtime are embedded ahead of Nodex UI's own code, in load order (JS bundle, then runtime, then Nodex UI) — nothing else needs to load first. Both install paths below load this same file; the Base component API is the recommended way to consume Nodex UI in an application, with the base static markup (`b-ui`) API available as a lighter-weight alternative for non-component pages.
|
|
6
6
|
|
|
7
|
-
The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.
|
|
7
|
+
The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.3.0`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
|
|
8
8
|
|
|
9
9
|
## Base component install (recommended)
|
|
10
10
|
|
|
11
|
-
If you're building your own application and want to import
|
|
11
|
+
If you're building your own application and want to import Nodex UI components as real Nodex component classes (`<Button/>`, `<Card/>`, `<Tabs/>`, ...) instead of `b-ui` markup, it's the same one file as the static install, just accessed through an import map:
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm
|
|
14
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.css">
|
|
15
15
|
<script type="importmap">
|
|
16
16
|
{
|
|
17
17
|
"imports": {
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"@base/theme": "https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.esm.js",
|
|
21
|
-
"@base/templates": "https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.templates.xml"
|
|
18
|
+
"nodexui": "https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.esm.js",
|
|
19
|
+
"nodexui/templates": "https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.templates.xml"
|
|
22
20
|
}
|
|
23
21
|
}
|
|
24
22
|
</script>
|
|
25
23
|
```
|
|
26
24
|
|
|
27
|
-
`https://unpkg.com
|
|
25
|
+
`https://unpkg.com/nodexui@latest/dist/...` mirrors the same files if jsDelivr is unreachable — swap the host in each URL above.
|
|
28
26
|
|
|
29
|
-
|
|
27
|
+
`nodexui` resolves to the `dist/nodexui.esm.js` module — the browser fetches and evaluates it once, so `Component`/`mount`/`xml` from `nodexui` and `Button`/`Card`/... from `nodexui` are guaranteed to be the same runtime identity (no separate script needs to load first to set up a shared global). Your own app code should still import Nodex from `nodexui`, never install or import `@odoo/owl` directly — that's what keeps a `class Root extends Component` you write instanceof-compatible with Nodex UI's own components. `nodexui/templates` maps to the templates XML — not a JS module, so resolve it with `import.meta.resolve("nodexui/templates")` and `fetch()` the result rather than `import`ing it.
|
|
30
28
|
|
|
31
|
-
For npm/bundler usage, everything (
|
|
29
|
+
For npm/bundler usage, everything (Nodex runtime, component classes, theme helper) is exported from the one `nodexui` package entry: `import { Component, mount, xml, Button, Card, createThemeController } from "nodexui";` — plus `nodexui/dist/nodexui.templates.xml` (component templates — fetch or load them before mounting). Note that importing the main entry always runs its `autoMount()` side effect (it scans the DOM for `[b-ui]`/`[b-icon]` markers on `DOMContentLoaded`) — harmless if your page has none, but worth knowing if you specifically wanted a side-effect-free import.
|
|
32
30
|
|
|
33
|
-
See [
|
|
31
|
+
See [Nodex UI Component](owl-components.md) for the full loading contract, a worked example, and common mistakes.
|
|
34
32
|
|
|
35
33
|
## Static `b-ui` install (alternative)
|
|
36
34
|
|
|
37
|
-
For static HTML, a server-rendered page, or a Base HUB website page that has no
|
|
35
|
+
For static HTML, a server-rendered page, or a Base HUB website page that has no Nodex runtime of its own, load the same bundle as plain CSS + a classic `<script>` tag instead of an import map:
|
|
38
36
|
|
|
39
37
|
```html
|
|
40
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm
|
|
41
|
-
<script src="https://cdn.jsdelivr.net/npm
|
|
38
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.css">
|
|
39
|
+
<script src="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.js" defer></script>
|
|
42
40
|
```
|
|
43
41
|
|
|
44
|
-
|
|
42
|
+
base is the bundled baseline CSS framework, and its JS bundle now drives Nodex UI's interactive components directly.
|
|
45
43
|
|
|
46
|
-
|
|
44
|
+
`nodexui` is published on npm, so [unpkg](https://unpkg.com/nodexui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/nodexui@latest/dist/nodexui.min.css` / `nodexui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.3.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
47
45
|
|
|
48
46
|
For npm/self-hosted usage:
|
|
49
47
|
|
|
50
48
|
```sh
|
|
51
|
-
npm install
|
|
49
|
+
npm install nodexui
|
|
52
50
|
```
|
|
53
51
|
|
|
54
|
-
Then copy or serve `node_modules
|
|
52
|
+
Then copy or serve `node_modules/nodexui/dist/nodexui.min.css` and `node_modules/nodexui/dist/nodexui.min.js`.
|
|
55
53
|
|
|
56
|
-
`dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/
|
|
54
|
+
`dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/nodexui.registry.json`, in case a project wants vendored built-in JS on its own — Nodex UI itself never needs it loaded separately.
|
|
57
55
|
|
|
58
|
-
The static bundle auto-mounts existing `[b-ui]` and `[b-icon]` markers on `DOMContentLoaded`. Use `thebase.mountAll(root)` after later DOM injection, and `thebase.destroy(root)` before removing a mounted subtree that owns listeners or an
|
|
56
|
+
The static bundle auto-mounts existing `[b-ui]` and `[b-icon]` markers on `DOMContentLoaded`. Use `thebase.mountAll(root)` after later DOM injection, and `thebase.destroy(root)` before removing a mounted subtree that owns listeners or an runtime-backed controller.
|
|
59
57
|
|
|
60
58
|
The package also ships the complete Lucide SVG icon set under `dist/icons/lucide/` and a generated `dist/icons/lucide.json` manifest. The built-in icon component can use the pinned jsDelivr Lucide CDN by default or your own self-hosted path:
|
|
61
59
|
|
|
@@ -70,19 +68,20 @@ Production pages should use pinned version URLs. `latest` is for demos and exper
|
|
|
70
68
|
|
|
71
69
|
| Need | npm/bundler export | Browser import-map key | Dist file |
|
|
72
70
|
| --- | --- | --- | --- |
|
|
73
|
-
| Static `b-ui` runtime,
|
|
74
|
-
| Styles |
|
|
75
|
-
|
|
|
76
|
-
| Named-icon components (`IconEye`, ...) |
|
|
77
|
-
|
|
|
78
|
-
| Registry metadata |
|
|
79
|
-
| Optional analytics service (`init`, `track`) |
|
|
80
|
-
|
|
|
81
|
-
|
|
82
|
-
|
|
71
|
+
| Static `b-ui` runtime, Nodex runtime, every Base component class, theme helper | `nodexui` | `nodexui` (one key pointing at the same file) | `dist/nodexui.esm.js`, `dist/nodexui.min.js` |
|
|
72
|
+
| Styles | `nodexui/nodexui.css` | none; load with `<link>` | `dist/nodexui.min.css` |
|
|
73
|
+
| built-in JS | embedded; standalone file is a vendoring convenience only, not part of Nodex UI's own load path | none | `dist/bootstrap.bundle.min.js` |
|
|
74
|
+
| Named-icon components (`IconEye`, ...) | `nodexui/icons` | `nodexui/icons` | `dist/nodexui.icons.esm.js` |
|
|
75
|
+
| Nodex templates XML | `nodexui/dist/nodexui.templates.xml` | `nodexui/templates` | `dist/nodexui.templates.xml` |
|
|
76
|
+
| Registry metadata | `nodexui/registry` | none; fetch the JSON file | `dist/nodexui.registry.json` |
|
|
77
|
+
| Optional analytics service (`init`, `track`) | `nodexui/analytics` | none; import the file URL or load the `<script>` build (sets `window.thebase.analytics`) | `dist/nodexui.analytics.esm.js`, `dist/nodexui.analytics.min.js` |
|
|
78
|
+
| Optional i18n service (`init`, `t`, `loadCatalog`) | `nodexui/i18n` | `nodexui/i18n` (as in `emvhub/index.html`); or load the `<script>` build (sets `window.thebase.i18n`) | `dist/nodexui.i18n.esm.js`, `dist/nodexui.i18n.min.js` |
|
|
79
|
+
| Standalone ApiDoc (`mountApiDoc`) | `nodexui/apidoc` | none; embeds Nodex + its templates, still needs `nodexui.min.css`; set `assetBase` for the language logos | `dist/nodexui.apidoc.esm.js`, `dist/nodexui.apidoc.min.js` |
|
|
80
|
+
|
|
81
|
+
`nodexui/templates` points to XML, not JavaScript. Resolve and fetch it (`fetch(import.meta.resolve("nodexui/templates"))`) before mounting an application that uses Nodex UI component classes.
|
|
83
82
|
|
|
84
83
|
## Release Guardrails
|
|
85
84
|
|
|
86
|
-
|
|
85
|
+
Nodex UI intentionally keeps its built-in styles and scripts bundled for the browser build, both CSS and JS. The JS bundle and the Nodex runtime are embedded directly into `dist/nodexui.min.js`/`nodexui.esm.js` — in that load order — along with every Base component class and the theme helper, so both the static API and the pure Base API install with one stylesheet and one script/import: there is no more separate `nodexui.owl.*`/`nodexui.components.esm.js`/`nodexui.theme.esm.js` file to keep in load order. the bundled JS instances (`bootstrap.Modal`, `Dropdown`, `Collapse`, `Tab`, `Toast`, `Carousel`, `Tooltip`, `Popover`, `Alert`) drive the components that map to them, wrapped by Nodex UI's own `.behavior.js`/`runtime/*.js` helpers so both the static and pure Base APIs share identical ARIA/keyboard/event behavior.
|
|
87
86
|
|
|
88
87
|
Release checks enforce runtime dependency, peer dependency, scoped CSS selector, and CDN file-size budgets through `npm run lint` and `npm run build`.
|
package/docs/owl-components.md
CHANGED
|
@@ -1,44 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Nodex UI Component
|
|
2
2
|
|
|
3
3
|
See the [Usage Guide](usage-guide.md) for when to reach for this API versus the static `b-ui` one. This page covers the pure Base API only.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Nodex UI ships a second, additive public API alongside the static `b-ui` markers: real Nodex component classes you import, compose with `static components`, and mount as part of your own application. This page covers how to load and use it; see [Component Authoring](component-authoring.md) for how components implement both APIs from one source folder.
|
|
6
6
|
|
|
7
|
-
As of 1.1.0, every component in the registry (all 74) has a pure Base export — there are no static-only components left. Compound components export a root class plus sub-components (e.g. `Dialog`/`DialogTrigger`/`DialogContent`/...); check a component's `owlComponents` entry in `dist/
|
|
7
|
+
As of 1.1.0, every component in the registry (all 74) has a pure Base export — there are no static-only components left. Compound components export a root class plus sub-components (e.g. `Dialog`/`DialogTrigger`/`DialogContent`/...); check a component's `owlComponents` entry in `dist/nodexui.registry.json`, or its doc page under [`docs/components/`](components/), for the exact export list. A few components have a deliberately reshaped pure Base API versus their static markup-scanning adapter — see [Registry](registry.md#component-export-policy) for which ones and why.
|
|
8
8
|
|
|
9
9
|
## What you need to load
|
|
10
10
|
|
|
11
|
-
Everything — the static `b-ui` runtime, the
|
|
11
|
+
Everything — the static `b-ui` runtime, the Nodex runtime, every Base component class, and the theme helper — is one file: `dist/nodexui.esm.js` (or `dist/nodexui.min.js` as a classic script). There is no separate `nodexui.owl.*`/`nodexui.components.esm.js`/`nodexui.theme.esm.js` to load.
|
|
12
12
|
|
|
13
13
|
| File | Purpose |
|
|
14
14
|
| --- | --- |
|
|
15
|
-
| `dist/
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
15
|
+
| `dist/nodexui.min.css` | the built-in styles + Nodex UI styling, shared by both APIs. |
|
|
16
|
+
| `nodexui` (`dist/nodexui.esm.js`) | The Nodex runtime — `Component`, `mount`, `xml`, `useState`, etc. Pinned to Nodex `2.8.3`, embedded directly in this file. Import your app's own Nodex usage from here too, not `@odoo/owl`. |
|
|
17
|
+
| `nodexui` (`dist/nodexui.esm.js`) | The Base component classes — same file as `nodexui` above, just a different import-map key for readability. |
|
|
18
|
+
| `nodexui` (`dist/nodexui.esm.js`) | Same file again — the theme helper for persisted light/dark toggles, URL overrides, button-label sync, and iframe preview sync. |
|
|
19
|
+
| `nodexui/templates` (`dist/nodexui.templates.xml`) | The Nodex templates the component classes reference (`static template = "nodexui.Button"`, etc). Must be loaded and passed to `mount()` before any Nodex UI component tag renders — a component class alone does not carry its template. |
|
|
20
20
|
|
|
21
21
|
## Browser (import map) usage
|
|
22
22
|
|
|
23
23
|
```html
|
|
24
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm
|
|
24
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.css">
|
|
25
25
|
<script type="importmap">
|
|
26
26
|
{
|
|
27
27
|
"imports": {
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"@base/theme": "https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.esm.js",
|
|
31
|
-
"@base/templates": "https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.templates.xml"
|
|
28
|
+
"nodexui": "https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.esm.js",
|
|
29
|
+
"nodexui/templates": "https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.templates.xml"
|
|
32
30
|
}
|
|
33
31
|
}
|
|
34
32
|
</script>
|
|
35
33
|
<script type="module">
|
|
36
|
-
import { Component, mount, xml } from "
|
|
37
|
-
import { Button, Card, CardBody, CardHeader, CardTitle } from "
|
|
34
|
+
import { Component, mount, xml } from "nodexui";
|
|
35
|
+
import { Button, Card, CardBody, CardHeader, CardTitle } from "nodexui";
|
|
38
36
|
|
|
39
|
-
// "
|
|
37
|
+
// "nodexui/templates" is an import-map entry, not a JS module — resolve it
|
|
40
38
|
// to its mapped URL and fetch the text.
|
|
41
|
-
const templates = await fetch(import.meta.resolve("
|
|
39
|
+
const templates = await fetch(import.meta.resolve("nodexui/templates")).then((r) => r.text());
|
|
42
40
|
|
|
43
41
|
class Root extends Component {
|
|
44
42
|
static components = { Button, Card, CardBody, CardHeader, CardTitle };
|
|
@@ -55,19 +53,19 @@ Everything — the static `b-ui` runtime, the Owl framework, every Base componen
|
|
|
55
53
|
</script>
|
|
56
54
|
```
|
|
57
55
|
|
|
58
|
-
`https://unpkg.com
|
|
56
|
+
`https://unpkg.com/nodexui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/nodexui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.3.0`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
|
|
59
57
|
|
|
60
|
-
No `@odoo/owl` import appears anywhere in that snippet —
|
|
58
|
+
No `@odoo/owl` import appears anywhere in that snippet — `nodexui` is the only Nodex entry point Nodex UI components and consumer apps need. Because `nodexui`, `nodexui`, and `nodexui` all point at the exact same `dist/nodexui.esm.js` URL, the browser fetches and evaluates it once and every key shares the same module instance — no separate classic `<script>` needs to load first to set up a shared global.
|
|
61
59
|
|
|
62
60
|
## npm / bundler usage
|
|
63
61
|
|
|
64
62
|
```sh
|
|
65
|
-
npm install
|
|
63
|
+
npm install nodexui
|
|
66
64
|
```
|
|
67
65
|
|
|
68
66
|
```js
|
|
69
|
-
import { Component, mount, xml, Button, Card } from "
|
|
70
|
-
import
|
|
67
|
+
import { Component, mount, xml, Button, Card } from "nodexui";
|
|
68
|
+
import nodexuiTemplates from "nodexui/dist/nodexui.templates.xml?raw"; // exact loader syntax depends on your bundler
|
|
71
69
|
|
|
72
70
|
class Root extends Component {
|
|
73
71
|
static components = { Button, Card };
|
|
@@ -75,40 +73,40 @@ class Root extends Component {
|
|
|
75
73
|
}
|
|
76
74
|
```
|
|
77
75
|
|
|
78
|
-
There's only one package entry now —
|
|
76
|
+
There's only one package entry now — `nodexui` exports the Nodex runtime (built from the exact `@odoo/owl@2.8.3` this Nodex UI release vendors; you do not need to install `@odoo/owl` yourself), every Base component class, and the theme helper together. Browser import-map examples above still use the `nodexui`/`nodexui`/`nodexui` keys for readability, but they're just local aliases to the same file.
|
|
79
77
|
|
|
80
|
-
When a bundler cannot import XML with `?raw`, load `dist/
|
|
78
|
+
When a bundler cannot import XML with `?raw`, load `dist/nodexui.templates.xml` as a served asset and pass the fetched string to `mount(Root, target, { templates })`. The template file is part of the runtime contract, not optional documentation.
|
|
81
79
|
|
|
82
80
|
## Mixing with the static API
|
|
83
81
|
|
|
84
82
|
Both APIs come from the exact same bundle now, so there's nothing extra to load — just be clear about which mechanism owns which markup:
|
|
85
83
|
|
|
86
84
|
- `thebase.mountAll(root)` enhances static `[b-ui]` and `[b-icon]` markers.
|
|
87
|
-
-
|
|
85
|
+
- Nodex `mount(Root, target, { templates })` renders component tags such as `<Button/>`.
|
|
88
86
|
- Importing the package always also runs `autoMount()` (its `[b-ui]`/`[b-icon]` DOM scan on `DOMContentLoaded`) — harmless if your page has none, but means there's no side-effect-free way to import just the component classes anymore.
|
|
89
|
-
- Both APIs share `dist/
|
|
87
|
+
- Both APIs share `dist/nodexui.min.css`, `nodexui`, and the same `b-theme` / `data-bs-theme` root attributes.
|
|
90
88
|
|
|
91
89
|
## Props, events, slots
|
|
92
90
|
|
|
93
91
|
- Props are camelCase (`variant`, `label`, `disabled`, `className`).
|
|
94
92
|
- Almost every component that renders its own root element also accepts `style` (a string or a plain object of CSS properties) alongside `className`. Components that only forward a default slot with no wrapping element of their own (`AlertDialog`, `Pwa`, `Sheet`, `ContextMenu`, `Drawer`) have neither prop. A handful of components that already compute an internal style (`Icon`, `AspectRatio`, `Progress`, `ContextMenuContent`, `SidebarMenuSkeleton`) merge your `style` with their own computed value instead of one overwriting the other.
|
|
95
93
|
- Events are callback props (`onClick`, `onChange`, `onOpenChange`), not DOM `CustomEvent`s — that's the static API's contract, not this one.
|
|
96
|
-
- Default slot content works as normal
|
|
94
|
+
- Default slot content works as normal Nodex children (`<Badge>Draft</Badge>`); compound components use named slots/sub-tags (`<CardHeader>`, `<DialogFooter>`).
|
|
97
95
|
|
|
98
96
|
## Global component fallback
|
|
99
97
|
|
|
100
|
-
`Component` exported from
|
|
98
|
+
`Component` exported from `nodexui` / `nodexui` is Nodex's `Component` with one addition: any component that extends it can use every registered Nodex UI component (`<Icon/>`, `<Button/>`, `<Card/>`, ...) in its template, even if its own `static components` doesn't list it. Without this, Nodex only checks a component's own `static components` map, so a nested child that used `<Icon/>` without declaring it crashed with `Cannot find the definition of component "Icon"`.
|
|
101
99
|
|
|
102
100
|
- The fallback applies to every component in the tree, not only the root passed to `mount()`.
|
|
103
|
-
- Entries in your own `static components` still take precedence over a
|
|
104
|
-
- Listing
|
|
105
|
-
- The fallback only works for classes that extend
|
|
101
|
+
- Entries in your own `static components` still take precedence over a Nodex UI component with the same name.
|
|
102
|
+
- Listing Nodex UI classes in `static components` is still allowed and is the clearest choice for shared or library code. The fallback mainly protects deeply nested app components.
|
|
103
|
+
- The fallback only works for classes that extend Nodex UI's `Component`. A class built on `Component` from `@odoo/owl` directly does not get it.
|
|
106
104
|
|
|
107
105
|
```js
|
|
108
|
-
import { Component, mount, xml } from "
|
|
106
|
+
import { Component, mount, xml } from "nodexui";
|
|
109
107
|
|
|
110
108
|
class SaveRow extends Component {
|
|
111
|
-
// No static components — <Button/> and <Icon/> resolve from the
|
|
109
|
+
// No static components — <Button/> and <Icon/> resolve from the NodexUI registry.
|
|
112
110
|
static template = xml`<div><Icon name="'save'"/><Button label="'Save'"/></div>`;
|
|
113
111
|
}
|
|
114
112
|
|
|
@@ -118,11 +116,11 @@ class Root extends Component {
|
|
|
118
116
|
}
|
|
119
117
|
```
|
|
120
118
|
|
|
121
|
-
See each component's page under [`docs/components/`](components/) for its specific props table and
|
|
119
|
+
See each component's page under [`docs/components/`](components/) for its specific props table and a Nodex usage example alongside the static `b-ui` one.
|
|
122
120
|
|
|
123
121
|
## Common mistakes
|
|
124
122
|
|
|
125
123
|
- **Rendering a bare `<Button/>` with no template loaded.** `mount(Root, target)` without `{ templates }` (or `app.addTemplates(...)`) throws — the `.xml` file is a real build/runtime input, not documentation.
|
|
126
|
-
- **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other
|
|
127
|
-
- **Importing from `@odoo/owl`.** Always import from
|
|
128
|
-
- **Adding a `
|
|
124
|
+
- **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other Nodex component. If you alias a Nodex UI class under a different tag (`{ PrimaryButton: Button }`), the alias exists only in that component's map.
|
|
125
|
+
- **Importing from `@odoo/owl`.** Always import from `nodexui` instead, even in your own app code — it keeps your app on the exact Nodex version this Nodex UI release was tested against, and only `nodexui`'s `Component` provides the [global component fallback](#global-component-fallback).
|
|
126
|
+
- **Adding a `nodexui.owl.min.js`/`nodexui.owl.esm.js`/`nodexui.components.esm.js` script or import-map entry.** None of those files are published anymore — point `nodexui`/`nodexui`/`nodexui` all at `dist/nodexui.esm.js` instead.
|
package/docs/registry.md
CHANGED
|
@@ -1,35 +1,36 @@
|
|
|
1
1
|
# Registry
|
|
2
2
|
|
|
3
|
-
Every release publishes `dist/
|
|
3
|
+
Every release publishes `dist/nodexui.registry.json`. The registry lists package metadata, CDN paths, build files, themes, and per-component metadata (type, dependencies, `b-*` attributes, events, and — since the Phase 8 pure Base rollout — Nodex component/template metadata). It only registers components under `src/components/`; example blocks under `examples/blocks/` are not part of the registry.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Nodex UI ships as bundled files only — there is no per-component source distribution. Use the registry's `components` entries to look up a component's contract, not to locate individual source files.
|
|
6
6
|
|
|
7
7
|
## Build files
|
|
8
8
|
|
|
9
9
|
`buildFiles` lists every top-level `dist/` artifact the release validates and hashes:
|
|
10
10
|
|
|
11
|
-
- `
|
|
12
|
-
- `
|
|
13
|
-
- `bootstrap.bundle.min.js` — vendored
|
|
14
|
-
- `
|
|
15
|
-
- `
|
|
16
|
-
- `
|
|
11
|
+
- `nodexui.min.css` — Nodex UI styles (static and pure Base APIs share the same stylesheet).
|
|
12
|
+
- `nodexui.min.js` / `nodexui.esm.js` — the one bundle for both APIs: the static `b-ui` runtime (`NodexUI.register(...)`, `thebase.mountAll()`), the Nodex runtime (`Component`, `mount`, `xml`, ...), every Base component class (`Button`, `Card`, `Tabs`, ...), and the theme helper (`createThemeController`, `NodexUITheme`). The JS bundle and Nodex's global build are embedded ahead of Nodex UI's own code, in that load order — no separate `nodexui.owl.*`/`nodexui.components.esm.js`/`nodexui.theme.esm.js`/`bootstrap.bundle.min.js` script is needed.
|
|
13
|
+
- `bootstrap.bundle.min.js` — vendored built-in JS, standalone, unmodified. Ships in case a project wants it on its own; Nodex UI's own bundle never needs it loaded separately (it's embedded in `nodexui.min.js`/`nodexui.esm.js` too).
|
|
14
|
+
- `nodexui.icons.esm.js` — the 2000+ generated `Icon<Name>` components (`IconEye`, `IconSearch`, ...), split out because they'd blow the main bundle's size budget. The one deliberate exception to "everything is one bundle".
|
|
15
|
+
- `nodexui.templates.xml` — every Base component's compiled `<templates>` body, concatenated into one file. Load this into the Nodex `App`'s `templates` config before mounting; `.xml` files under `src/components/` are authoring sources, not something a consumer app loads directly.
|
|
16
|
+
- `nodexui.analytics.esm.js` / `nodexui.analytics.min.js` — the optional, standalone cookieless analytics service (`nodexui/analytics`). Not part of the main bundles and needs no other Nodex UI file; see [Analytics](analytics.md).
|
|
17
|
+
- `nodexui.i18n.esm.js` / `nodexui.i18n.min.js` — the optional, standalone gettext-style i18n service (`nodexui/i18n`). Not part of the main bundles and needs no other Nodex UI file; see [i18n](i18n.md).
|
|
17
18
|
- `icons/lucide.json` — the built-in icon manifest.
|
|
18
19
|
|
|
19
20
|
## Component export policy
|
|
20
21
|
|
|
21
22
|
Every component folder under `src/components/<name>/` is one of:
|
|
22
23
|
|
|
23
|
-
1. **Both APIs** — has `<name>.js` (static `
|
|
24
|
+
1. **Both APIs** — has `<name>.js` (static `NodexUI.register(...)` adapter) *and* `<name>.component.js` (pure Base `Component` class(es)). As of the Phase 8 rollout this is **all 74** registry components; there are no static-only exceptions left. A handful of components (`chart`, most notably) have lighter-fidelity pure Base treatments than their static adapter — see their component doc page for the documented gap — but every registry component has a real Nodex export.
|
|
24
25
|
2. Static-only components would report `"type": "static"` with no `owlComponents` field, but none currently exist in this registry.
|
|
25
26
|
|
|
26
27
|
Per-component registry entries now include:
|
|
27
28
|
|
|
28
|
-
- `owlComponents` — the exact list of exported
|
|
29
|
-
- `templateName` — the namespaced template name the component's *root* class renders, e.g. `"
|
|
29
|
+
- `owlComponents` — the exact list of exported Nodex class names from `<name>.component.js`, e.g. `["Dialog", "DialogTrigger", "DialogContent", ...]` for compound components. Import these from `nodexui`.
|
|
30
|
+
- `templateName` — the namespaced template name the component's *root* class renders, e.g. `"nodexui.Dialog"`. Every template also registers a short un-namespaced alias (e.g. `Dialog`) via `t-call` for local convenience; `templateName` documents the namespaced form because that's the collision-safe one to rely on across a large template set.
|
|
30
31
|
|
|
31
|
-
Existing fields (`type`, `dependencies`, `attributes`, `events`) are unchanged and describe the static `b-ui` contract; they apply regardless of whether
|
|
32
|
+
Existing fields (`type`, `dependencies`, `attributes`, `events`) are unchanged and describe the static `b-ui` contract; they apply regardless of whether a Nodex export also exists.
|
|
32
33
|
|
|
33
34
|
## Validation
|
|
34
35
|
|
|
35
|
-
The build validates every registry path against `dist/` and adds SHA-384 integrity hashes for build files and themes. Example blocks (composed static HTML demos styled by `
|
|
36
|
+
The build validates every registry path against `dist/` and adds SHA-384 integrity hashes for build files and themes. Example blocks (composed static HTML demos styled by `nodexui.min.css`) live under `examples/blocks/` with per-block CSS split from `examples/blocks/shared.css`, but are not registry or JavaScript components.
|
package/docs/runtime-api.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Runtime API
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Nodex UI exposes one browser global: `window.thebase`. `window.NodexUI` still points to the same object as a deprecated alias for 1.x pages; it will be removed in 2.0.0.
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
thebase.version
|
|
@@ -14,45 +14,47 @@ thebase.theme.set("dark")
|
|
|
14
14
|
thebase.theme.set({ primary: "#0f6cbd" })
|
|
15
15
|
thebase.analytics.init({ domain, endpoint })
|
|
16
16
|
thebase.track(eventName, options)
|
|
17
|
+
thebase.i18n.init({ languages, defaultLanguage })
|
|
18
|
+
thebase.i18n.t(text, params)
|
|
17
19
|
```
|
|
18
20
|
|
|
19
|
-
`thebase.analytics` is set only when the optional `dist/
|
|
21
|
+
`thebase.analytics` is set only when the optional `dist/nodexui.analytics.min.js` is loaded (it is not in the main bundles), and `thebase.track` is bound once it is initialized — see [Analytics](analytics.md). Likewise `thebase.i18n` is set only when the optional `dist/nodexui.i18n.min.js` is loaded — see [i18n](i18n.md).
|
|
20
22
|
|
|
21
|
-
The static runtime calls `autoMount()` when imported through `dist/
|
|
23
|
+
The static runtime calls `autoMount()` when imported through `dist/nodexui.esm.js` or `dist/nodexui.min.js`. Existing `[b-ui]` and `[b-icon]` markers are enhanced automatically once the DOM is ready.
|
|
22
24
|
|
|
23
|
-
`mountAll(rootElement)` scans `[b-ui]` and `[b-icon]` below the given root. Repeated calls are idempotent for already-mounted nodes, so it is safe to call after rendering an AJAX partial or replacing a small subtree. `mount(selectorOrElement, options)` mounts one element and returns its instance metadata when a registered component exists. `destroy(rootElement)` calls component cleanup handlers and dispatches `
|
|
25
|
+
`mountAll(rootElement)` scans `[b-ui]` and `[b-icon]` below the given root. Repeated calls are idempotent for already-mounted nodes, so it is safe to call after rendering an AJAX partial or replacing a small subtree. `mount(selectorOrElement, options)` mounts one element and returns its instance metadata when a registered component exists. `destroy(rootElement)` calls component cleanup handlers and dispatches `nodexui:destroyed` before a mounted subtree is removed.
|
|
24
26
|
|
|
25
27
|
Mounted components dispatch lifecycle events on their root element:
|
|
26
28
|
|
|
27
|
-
- `
|
|
28
|
-
- `
|
|
29
|
+
- `nodexui:mounted` with `{ name, instance }` in `event.detail`.
|
|
30
|
+
- `nodexui:destroyed` with `{ name }` in `event.detail`.
|
|
29
31
|
|
|
30
|
-
`thebase.theme.set(...)` is the low-level setter. For persisted light/dark toggles, button-label synchronization, URL `?theme=` overrides, and iframe preview sync, import `createThemeController` from
|
|
32
|
+
`thebase.theme.set(...)` is the low-level setter. For persisted light/dark toggles, button-label synchronization, URL `?theme=` overrides, and iframe preview sync, import `createThemeController` from `nodexui` in browser import maps or `nodexui` in npm/bundler apps.
|
|
31
33
|
|
|
32
|
-
`thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register
|
|
34
|
+
`thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register Nodex component tags (`<Button/>`, `<Card/>`, ...) and does not know about `nodexui` or `dist/nodexui.templates.xml`. To use Base components, extend `Component` from `nodexui`, fetch the templates XML, and pass it to `mount()`. Registered Nodex UI components then resolve in every template, whether or not they are listed in `static components`; see [Nodex UI Component](owl-components.md#global-component-fallback).
|
|
33
35
|
|
|
34
36
|
## `cn()` class-name helper
|
|
35
37
|
|
|
36
38
|
`cn(...classNames)` joins strings, arrays, and falsy values into one space-separated class string, flattening nested arrays and skipping anything falsy:
|
|
37
39
|
|
|
38
40
|
```js
|
|
39
|
-
import { cn } from "
|
|
41
|
+
import { cn } from "nodexui";
|
|
40
42
|
|
|
41
43
|
cn("btn", isActive && "active", ["b-button", className]);
|
|
42
44
|
// "btn active b-button my-class" (when isActive is truthy and className is "my-class")
|
|
43
45
|
```
|
|
44
46
|
|
|
45
|
-
It's a standalone named export — `import { cn } from "
|
|
47
|
+
It's a standalone named export — `import { cn } from "nodexui"` in npm/bundler apps, or `NodexUIBundle.cn` in the browser IIFE global — not a method on `NodexUI` itself. Use it to build your own components' class lists on top of Nodex UI's conventions.
|
|
46
48
|
|
|
47
49
|
## `mergeStyle()` inline-style helper
|
|
48
50
|
|
|
49
51
|
`mergeStyle(...styles)` combines a component's own computed inline style with a caller-supplied `style` (string or object) into one `;`-joined declaration string, dropping empty/nullish entries. Object keys may be camelCase (converted to kebab-case); later entries win on conflicting properties since they're appended last:
|
|
50
52
|
|
|
51
53
|
```js
|
|
52
|
-
import { mergeStyle } from "
|
|
54
|
+
import { mergeStyle } from "nodexui";
|
|
53
55
|
|
|
54
56
|
mergeStyle("--b-progress-value:50%", { color: "red" }, "opacity:0.5;");
|
|
55
57
|
// "--b-progress-value:50%;color:red;opacity:0.5"
|
|
56
58
|
```
|
|
57
59
|
|
|
58
|
-
It's a standalone named export — `import { mergeStyle } from "
|
|
60
|
+
It's a standalone named export — `import { mergeStyle } from "nodexui"` in npm/bundler apps, or `NodexUIBundle.mergeStyle` in the browser IIFE global. Unlike `cn()`, which joins class names with a space, `mergeStyle()` joins CSS declarations with `;` — the two are not interchangeable.
|
package/docs/theming.md
CHANGED
|
@@ -15,16 +15,16 @@ thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
|
|
|
15
15
|
|
|
16
16
|
## Make your own theme
|
|
17
17
|
|
|
18
|
-
`dist/
|
|
18
|
+
`dist/nodexui.min.css` is the only stylesheet an app loads; it already includes the default light and dark themes. A custom theme is two small files, `nodexui-light.css` and `nodexui-dark.css` (readable copies in `dist/themes/`, minified `.min.css` versions beside them), loaded after it.
|
|
19
19
|
|
|
20
|
-
1. Build one visually in the **theme creator** (the **Theme** tab of the examples app (`examples/index.html#/theme`)): pick a base colour, accent and radius, preview
|
|
20
|
+
1. Build one visually in the **theme creator** (the **Theme** tab of the examples app (`examples/index.html#/theme`)): pick a base colour, accent and radius, preview Nodex UI live in light or dark, then download `nodexui-light.css` and `nodexui-dark.css`.
|
|
21
21
|
2. Or download the two files from `dist/themes/` (or copy `src/themes/`) and edit the values by hand.
|
|
22
|
-
3. Load them after
|
|
22
|
+
3. Load them after Nodex UI stylesheet:
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm
|
|
26
|
-
<link rel="stylesheet" href="/css/
|
|
27
|
-
<link rel="stylesheet" href="/css/
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nodexui@1.3.0/dist/nodexui.min.css">
|
|
26
|
+
<link rel="stylesheet" href="/css/nodexui-light.css">
|
|
27
|
+
<link rel="stylesheet" href="/css/nodexui-dark.css">
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Each file declares the same variables on its own selector (`light`: `:root`, `[b-theme="light"]`, `.light`; `dark`: `[b-theme="dark"]`, `.dark`), so loading yours after the defaults replaces them. Edit only the values; keep the selectors and variable names. The tokens you will usually change:
|
|
@@ -35,7 +35,7 @@ Each file declares the same variables on its own selector (`light`: `:root`, `[b
|
|
|
35
35
|
| `--b-surface`, `--b-card`, `--b-popover` (+ `-foreground`) | Raised surfaces |
|
|
36
36
|
| `--b-primary`, `--b-primary-rgb`, `--b-primary-foreground` | Primary buttons, links, active states (keep `-rgb` in sync with the colour) |
|
|
37
37
|
| `--b-secondary`, `--b-muted`, `--b-accent` (+ `-foreground`) | Subtle fills and hover states |
|
|
38
|
-
| `--b-danger`, `--b-success`, `--b-warning`, `--b-info` (each with `-rgb` and `-foreground`) | Error/destructive, success, warning and info states: buttons (`.btn-success` …), badges, alerts,
|
|
38
|
+
| `--b-danger`, `--b-success`, `--b-warning`, `--b-info` (each with `-rgb` and `-foreground`) | Error/destructive, success, warning and info states: buttons (`.btn-success` …), badges, alerts, built-in `text-*`/`bg-*` helpers |
|
|
39
39
|
| `--b-border`, `--b-input`, `--b-ring` | Borders, field outlines, focus ring |
|
|
40
40
|
| `--b-chart-1` … `--b-chart-5`, `--b-sidebar-*` | Charts and the sidebar |
|
|
41
41
|
| `--base-radius` | Corner roundness; every `--b-radius-*` step is derived from it |
|
|
@@ -43,7 +43,7 @@ Each file declares the same variables on its own selector (`light`: `:root`, `[b
|
|
|
43
43
|
|
|
44
44
|
To change a few values without a full theme, override them on `:root` / `[b-theme="dark"]` in your own CSS, or at runtime with `thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" })`.
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
Nodex UI maps semantic tokens such as `--b-background`, `--b-primary`, `--b-border`, and `--b-radius` into built-in variables. Radius tokens are sourced from the shorter public alias family `--base-radius`, `--base-radius-sm`, `--base-radius-md`, `--base-radius-lg`, `--base-radius-xl`, `--base-radius-2xl`, `--base-radius-3xl`, `--base-radius-4xl`, and `--base-radius-full`, then mirrored to `--b-radius*` for component CSS.
|
|
47
47
|
|
|
48
48
|
For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
|
|
49
49
|
|
|
@@ -51,12 +51,12 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
|
|
|
51
51
|
<script type="importmap">
|
|
52
52
|
{
|
|
53
53
|
"imports": {
|
|
54
|
-
"
|
|
54
|
+
"nodexui": "https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.esm.js"
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
</script>
|
|
58
58
|
<script type="module">
|
|
59
|
-
import { createThemeController } from "
|
|
59
|
+
import { createThemeController } from "nodexui";
|
|
60
60
|
|
|
61
61
|
const theme = createThemeController({
|
|
62
62
|
storageKey: "my-app-theme",
|
|
@@ -68,18 +68,18 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
|
|
|
68
68
|
</script>
|
|
69
69
|
```
|
|
70
70
|
|
|
71
|
-
`https://unpkg.com
|
|
71
|
+
`https://unpkg.com/nodexui@latest/dist/nodexui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.3.0`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Npm/bundler consumers can import the same API from `nodexui`.
|
|
72
72
|
|
|
73
|
-
For a ready-made icon button, use
|
|
73
|
+
For a ready-made icon button, use Nodex UI component instead of wiring your own click handler:
|
|
74
74
|
|
|
75
75
|
```html
|
|
76
76
|
<button b-ui="theme-button" b-att-variant="outline" b-att-storage-key="my-app-theme" type="button"></button>
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
The documentation and example pages use the same theme infrastructure.
|
|
79
|
+
The documentation and example pages use the same theme infrastructure. Nodex example modules import `createThemeController` from `nodexui`; static chrome relies on `b-ui="theme-button"`, which uses the helper internally, so one selected theme is persisted across components, docs, chart galleries, block viewers, and same-origin block preview iframes. Theme changes dispatch `nodexui:theme-change` on `document` with `{ theme }` in `event.detail`.
|
|
80
80
|
|
|
81
81
|
## Design tokens
|
|
82
82
|
|
|
83
|
-
The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com)
|
|
83
|
+
The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Nodex UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)` (set in the theme files), and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts. Nodex UI reads an existing upstream `--radius` value when present, but it does not redefine `--radius` back to `--b-radius`; that one-way bridge avoids CSS custom-property cycles. `--b-card`/`--b-popover` alias `--b-surface` for shadcn-token-name parity.
|
|
84
84
|
|
|
85
|
-
Because
|
|
85
|
+
Because Nodex UI ships the built-in stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/base-extensions.css` re-points the `.btn-primary`/`.btn-secondary`/`.btn-danger`/`.btn-outline-secondary`/`.btn-light` variants at Nodex UI tokens so `thebase.theme.set(...)` overrides actually render. Badges use their own `b-badge-*` classes (`src/components/badge/badge.css`) instead of the built-in `text-bg-*`, which hardcode non-overridable colors.
|