@thebase/ui 1.2.1 → 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 -269
- package/LICENSE +1 -1
- package/README.md +96 -105
- 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.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 +7 -7
- package/dist/types/index.d.ts +15 -15
- 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 +10 -10
- package/docs/icons.md +9 -9
- package/docs/installation.md +31 -33
- package/docs/owl-components.md +36 -38
- package/docs/registry.md +14 -14
- package/docs/runtime-api.md +12 -12
- package/docs/theming.md +15 -15
- package/docs/usage-guide.md +54 -56
- package/package.json +48 -39
- 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/{baseui.i18n.esm.js → nodexui.i18n.esm.js} +0 -0
- /package/dist/{baseui.i18n.min.js → nodexui.i18n.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/dist/types/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export interface
|
|
1
|
+
export interface NodexUIComponentDefinition {
|
|
2
2
|
type?: "static" | "owl";
|
|
3
3
|
selector?: string;
|
|
4
|
-
mount?: (element: Element, api:
|
|
4
|
+
mount?: (element: Element, api: NodexUIApi, options?: Record<string, unknown>) => { destroy?: () => void } | void;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
export interface
|
|
7
|
+
export interface NodexUIApi {
|
|
8
8
|
version: string;
|
|
9
|
-
register(name: string, componentDefinition:
|
|
10
|
-
component(name: string):
|
|
9
|
+
register(name: string, componentDefinition: NodexUIComponentDefinition): NodexUIApi;
|
|
10
|
+
component(name: string): NodexUIComponentDefinition | undefined;
|
|
11
11
|
mount(selectorOrElement: string | Element, options?: Record<string, unknown>): unknown;
|
|
12
12
|
mountAll(rootElement?: ParentNode): unknown[];
|
|
13
13
|
destroy(rootElement?: ParentNode): void;
|
|
@@ -25,15 +25,15 @@ export interface BaseUIApi {
|
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
theme: { set(modeOrTokens: string | Record<string, string>): void };
|
|
28
|
-
/** Set by dist/
|
|
29
|
-
analytics?: import("./analytics").
|
|
30
|
-
/** Set by dist/
|
|
28
|
+
/** Set by dist/nodexui.analytics.min.js (the optional analytics service). */
|
|
29
|
+
analytics?: import("./analytics").NodexUIAnalytics;
|
|
30
|
+
/** Set by dist/nodexui.i18n.min.js (the optional i18n service). */
|
|
31
31
|
i18n?: typeof import("./i18n");
|
|
32
32
|
/** Bound by `analytics.init()` (unless `bindToWindow: false`). */
|
|
33
|
-
track?: import("./analytics").
|
|
33
|
+
track?: import("./analytics").NodexUIAnalytics["track"];
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
export interface
|
|
36
|
+
export interface NodexUIThemeController {
|
|
37
37
|
current(): "light" | "dark";
|
|
38
38
|
set(theme: string, options?: { skipStorage?: boolean }): "light" | "dark";
|
|
39
39
|
toggle(): "light" | "dark";
|
|
@@ -41,7 +41,7 @@ export interface BaseUIThemeController {
|
|
|
41
41
|
init(): "light" | "dark";
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
export interface
|
|
44
|
+
export interface NodexUIThemeOptions {
|
|
45
45
|
storageKey?: string;
|
|
46
46
|
queryKey?: string;
|
|
47
47
|
toggleSelector?: string;
|
|
@@ -49,8 +49,8 @@ export interface BaseUIThemeOptions {
|
|
|
49
49
|
root?: Element;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
export const
|
|
53
|
-
export const
|
|
54
|
-
export function createThemeController(options?:
|
|
52
|
+
export const NodexUI: NodexUIApi;
|
|
53
|
+
export const NodexUITheme: NodexUIThemeController;
|
|
54
|
+
export function createThemeController(options?: NodexUIThemeOptions): NodexUIThemeController;
|
|
55
55
|
export function normalizeTheme(value: unknown): "light" | "dark";
|
|
56
|
-
export default
|
|
56
|
+
export default NodexUI;
|
package/dist/types/vite.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { NodexUIManifestConfig } from "./pwa";
|
|
2
2
|
|
|
3
3
|
/** Vite plugin: every `vite build` also emits manifest, sw.js, sw-register.js, version.json and icons. */
|
|
4
|
-
export function
|
|
4
|
+
export function nodexuiPwa(options?: Partial<NodexUIManifestConfig> & { cdnVersion?: string }): import("vite").Plugin;
|
package/docs/analytics.md
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
# Analytics
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Nodex UI ships a cookieless web-analytics service, ported from [`@plausible-analytics/tracker`](https://www.npmjs.com/package/@plausible-analytics/tracker) 0.4.6 (MIT; notice in `LICENSE`). Nothing is collected until the page calls `init({ backendUrl })`. Available from `nodexui` 1.1.0.
|
|
4
4
|
|
|
5
|
-
It is an optional, standalone feature: it is **not** part of `dist/
|
|
5
|
+
It is an optional, standalone feature: it is **not** part of `dist/nodexui.min.js`/`dist/nodexui.esm.js`, and it needs neither of them (no framework or component runtime). Load it on its own, with or without the rest of Nodex UI (~5.6 KB minified):
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
// npm / bundler
|
|
9
|
-
import { init, track } from "
|
|
9
|
+
import { init, track } from "nodexui/analytics";
|
|
10
10
|
init({ backendUrl: "https://stats.example.com" });
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
|
-
<!-- ES module from the CDN (or map it as "
|
|
14
|
+
<!-- ES module from the CDN (or map it as "nodexui/analytics" in an import map) -->
|
|
15
15
|
<script type="module">
|
|
16
|
-
import { init } from "https://cdn.jsdelivr.net/npm
|
|
16
|
+
import { init } from "https://cdn.jsdelivr.net/npm/nodexui@1.3.0/dist/nodexui.analytics.esm.js";
|
|
17
17
|
init({ backendUrl: "https://stats.example.com" });
|
|
18
18
|
</script>
|
|
19
19
|
|
|
20
|
-
<!-- Classic script tag: sets window.thebase.analytics (load order vs dist/
|
|
21
|
-
<script src="https://cdn.jsdelivr.net/npm
|
|
20
|
+
<!-- Classic script tag: sets window.thebase.analytics (load order vs dist/nodexui.min.js doesn't matter) -->
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/nodexui@1.3.0/dist/nodexui.analytics.min.js"></script>
|
|
22
22
|
<script>
|
|
23
23
|
thebase.analytics.init({ backendUrl: "https://stats.example.com" });
|
|
24
24
|
</script>
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
Types ship as `dist/types/analytics.d.ts` (resolved automatically for
|
|
27
|
+
Types ship as `dist/types/analytics.d.ts` (resolved automatically for `nodexui/analytics`).
|
|
28
28
|
|
|
29
29
|
`init()` can be called once. It sends the first pageview, then follows `history.pushState`/`popstate` navigations (or `hashchange` with `hashBasedRouting: true`).
|
|
30
30
|
|
|
@@ -73,7 +73,7 @@ Or tag markup with classes — no JavaScript needed:
|
|
|
73
73
|
`visitorContext()` returns coarse facts about the visitor's setup. Pass it as `customProperties` to attach them to every event (available from 1.1.1):
|
|
74
74
|
|
|
75
75
|
```js
|
|
76
|
-
import { init, visitorContext } from "
|
|
76
|
+
import { init, visitorContext } from "nodexui/analytics";
|
|
77
77
|
init({ backendUrl: "https://stats.example.com", customProperties: visitorContext });
|
|
78
78
|
// every event's props now include { tz: "Asia/Ho_Chi_Minh", lang: "vi-VN", screen: "Mobile" }
|
|
79
79
|
```
|
|
@@ -135,7 +135,7 @@ import (
|
|
|
135
135
|
"github.com/gofiber/fiber/v3/middleware/cors"
|
|
136
136
|
)
|
|
137
137
|
|
|
138
|
-
// Event is the compact payload POSTed by
|
|
138
|
+
// Event is the compact payload POSTed by nodexui/analytics.
|
|
139
139
|
type Event struct {
|
|
140
140
|
Name string `json:"n"`
|
|
141
141
|
URL string `json:"u"`
|
|
@@ -185,7 +185,7 @@ app.add_middleware(CORSMiddleware, allow_origins=["https://www.example.com"], al
|
|
|
185
185
|
|
|
186
186
|
|
|
187
187
|
class Event(BaseModel):
|
|
188
|
-
"""Compact payload POSTed by
|
|
188
|
+
"""Compact payload POSTed by nodexui/analytics."""
|
|
189
189
|
|
|
190
190
|
name: str = Field(alias="n", min_length=1)
|
|
191
191
|
url: str = Field(alias="u", min_length=1)
|
|
@@ -228,7 +228,7 @@ curl -i -X POST http://localhost:8080/api/event -H 'Content-Type: text/plain' \
|
|
|
228
228
|
|
|
229
229
|
[`examples/analytics/`](../examples/analytics/dashboard/?backend=http://localhost:8080) contains a working dashboard plus two complete sample backends: [`server-go`](../examples/analytics/server-go/main.go) (Fiber v3) and [`server-fastapi`](../examples/analytics/server-fastapi/main.py). Each one extends the receivers above with an in-memory store, a daily-salted cookieless visitor hash, a `GET /api/stats` endpoint, and static hosting for the dashboard.
|
|
230
230
|
|
|
231
|
-
The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads
|
|
231
|
+
The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `nodexui@1.3.0` from jsDelivr: KPI `Card`s, an area `Chart`, top pages/sources/events `Table`s, site and period `NativeSelect`s, and a `ThemeButton`. It refreshes every 30 s and tracks its own visits through `nodexui/analytics`, so a fresh backend has data straight away.
|
|
232
232
|
|
|
233
233
|
```sh
|
|
234
234
|
# Go (1.25+)
|
package/docs/base-ui-skill.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Skill for AI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Nodex UI skill teaches an AI coding agent how to build apps and components with NodexUI: scaffolding a PWA, emitting real components and icons, and packaging as Electron or Capacitor apps. It bundles verified syntax references, so the agent uses real NodexUI props and markup instead of guessing.
|
|
4
4
|
|
|
5
5
|
It is a plain folder of Markdown and scripts, so it is not tied to one tool. It works with Claude Code, OpenAI Codex, Gemini CLI, and any other agent that can read instruction files.
|
|
6
6
|
|
|
@@ -32,7 +32,7 @@ Replace `~/.claude/skills` with the folder for your agent, then restart it. Skil
|
|
|
32
32
|
For an agent without a skills folder (Cursor, Copilot, Windsurf, and others), extract the archive anywhere in your project and point the agent at it from its instruction file, such as `AGENTS.md`, `GEMINI.md` or `.cursor/rules`:
|
|
33
33
|
|
|
34
34
|
```md
|
|
35
|
-
For any
|
|
35
|
+
For any NodexUI work, read and follow `base-ui/SKILL.md` first.
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
## Use
|
|
@@ -41,8 +41,8 @@ Ask in plain language. The skill triggers on these phrases:
|
|
|
41
41
|
|
|
42
42
|
| Say | Result |
|
|
43
43
|
| --- | --- |
|
|
44
|
-
| `create app` | Scaffolds a new
|
|
45
|
-
| `use <component>` / `make <component>` | Emits a real
|
|
44
|
+
| `create app` | Scaffolds a new NodexUI PWA |
|
|
45
|
+
| `use <component>` / `make <component>` | Emits a real NodexUI component |
|
|
46
46
|
| `use <icon>` / `make <icon>` | Emits a real Lucide icon |
|
|
47
47
|
| `create electron app` | PWA scaffold plus an Electron shell |
|
|
48
48
|
| `create capacitor app` | PWA scaffold plus a Capacitor shell |
|
package/docs/blocks.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Blocks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Nodex UI blocks are static HTML compositions styled by the same shadcn-aligned tokens as the component library. They are based on the public shadcn/ui blocks page and keep the same sizing landmarks: `min-height: 100svh`, sidebar widths, header heights, `gap-4`/`gap-6`, muted backgrounds, and auth-card widths.
|
|
4
4
|
|
|
5
5
|
Each block has its own source stylesheet in `examples/blocks/<block-name>.css`. Shared helpers live in `examples/blocks/shared.css`; new blocks should not be folded into an all-in-one block stylesheet.
|
|
6
6
|
|
|
7
|
-
Block navigation icons must use
|
|
7
|
+
Block navigation icons must use Nodex UI's built-in Lucide icon component, for example `<span b-icon="layout-dashboard" b-block-icon></span>`. Do not use placeholder letters inside `b-block-icon`.
|
|
8
8
|
|
|
9
|
-
Blocks are not standalone runtime components. Paste the markup and load the normal
|
|
9
|
+
Blocks are not standalone runtime components. Paste the markup and load the normal Nodex UI assets:
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm
|
|
13
|
-
<script src="https://cdn.jsdelivr.net/npm
|
|
12
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.css">
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/nodexui@latest/dist/nodexui.min.js" defer></script>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
`https://unpkg.com
|
|
16
|
+
`https://unpkg.com/nodexui@latest/dist/...` mirrors the same files 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. Blocks are static markup, so they only need the static `b-ui` runtime above — see [Usage Guide](usage-guide.md) if the surrounding page is itself an application and you'd rather compose the equivalent layout from [Nodex UI Component](owl-components.md).
|
|
17
17
|
|
|
18
18
|
Use `b-block` to select the block style:
|
|
19
19
|
|
|
@@ -5,7 +5,7 @@ Use `b-ui="accordion"` for grouped disclosure panels.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "
|
|
8
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -37,7 +37,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@t
|
|
|
37
37
|
| `AccordionItem` | `className` | `String` | optional |
|
|
38
38
|
| `AccordionTrigger` | `className` | `String` | optional |
|
|
39
39
|
|
|
40
|
-
See [
|
|
40
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
41
41
|
|
|
42
42
|
## Static component
|
|
43
43
|
|
|
@@ -67,6 +67,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
67
67
|
</div>
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `
|
|
70
|
+
Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `nodexui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="b-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Base `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
|
|
71
71
|
|
|
72
|
-
Each panel (`b-accordion-panel` / `AccordionContent`'s root) is driven by its own live `bootstrap.Collapse` instance: it always carries the
|
|
72
|
+
Each panel (`b-accordion-panel` / `AccordionContent`'s root) is driven by its own live `bootstrap.Collapse` instance: it always carries the built-in `collapse` class (plus `show` while open), and the library itself manages the `collapsing`/height transition and the `show` class across toggles — don't rely on `hidden`/node removal to detect open state. In single-open mode (the default, without `multiple`), opening one item hides every other open item's own `bootstrap.Collapse` instance before showing the clicked item's.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, Icon } from "
|
|
6
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, Icon } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -41,7 +41,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
|
|
|
41
41
|
| `AlertDialogTitle` | `className` | `String` | optional |
|
|
42
42
|
| `AlertDialogTrigger` | `className` | `String` | optional |
|
|
43
43
|
|
|
44
|
-
See [
|
|
44
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
45
45
|
|
|
46
46
|
## Static component
|
|
47
47
|
|
package/docs/components/alert.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Alert, AlertAction, AlertDescription, AlertTitle, Button, Icon } from "
|
|
6
|
+
import { Alert, AlertAction, AlertDescription, AlertTitle, Button, Icon } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -24,13 +24,13 @@ import { Alert, AlertAction, AlertDescription, AlertTitle, Button, Icon } from "
|
|
|
24
24
|
| Component | Prop | Type | Notes |
|
|
25
25
|
| --- | --- | --- | --- |
|
|
26
26
|
| `Alert` | `variant` | `String` | optional |
|
|
27
|
-
| `Alert` | `dismissible` | `Boolean` | optional; renders a
|
|
27
|
+
| `Alert` | `dismissible` | `Boolean` | optional; renders a built-in close button that fades and removes the alert |
|
|
28
28
|
| `Alert` | `className` | `String` | optional |
|
|
29
29
|
| `AlertTitle` | `className` | `String` | optional |
|
|
30
30
|
| `AlertDescription` | `className` | `String` | optional |
|
|
31
31
|
| `AlertAction` | `className` | `String` | optional |
|
|
32
32
|
|
|
33
|
-
See [
|
|
33
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
34
34
|
|
|
35
35
|
## Static component
|
|
36
36
|
|
|
@@ -41,6 +41,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
41
41
|
|
|
42
42
|
Options: `b-att-variant="default|destructive"`, `b-att-dismissible="true"`. Legacy aliases `info|success|warning|danger` are still supported for existing markup.
|
|
43
43
|
|
|
44
|
-
Alerts receive
|
|
44
|
+
Alerts receive built-in alert classes and a default `role="alert"`. Alerts lay out as a grid — putting an icon (`b-ui="icon"`/`<Icon>`) as the first child shifts the title/description into a second column automatically.
|
|
45
45
|
|
|
46
|
-
Setting `b-att-dismissible` appends a
|
|
46
|
+
Setting `b-att-dismissible` appends a built-in close button (`<button class="btn-close" data-bs-dismiss="alert">`) if one isn't already present and instantiates `bootstrap.Alert` so clicking it fades out and removes the alert from the DOM.
|
|
@@ -9,7 +9,7 @@ Markdown in `info.description`, tag and operation descriptions is rendered with
|
|
|
9
9
|
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import { ApiDoc } from "
|
|
12
|
+
import { ApiDoc } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```html
|
|
@@ -22,18 +22,18 @@ Pass an already-parsed document with `spec` instead of `src`:
|
|
|
22
22
|
<ApiDoc spec="state.spec" serverUrl="'https://api.example.com'" tryIt="false"/>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
## Standalone (
|
|
25
|
+
## Standalone (`nodexui/apidoc`)
|
|
26
26
|
|
|
27
|
-
Like the analytics service, ApiDoc also ships as its own bundle that needs neither the full
|
|
27
|
+
Like the analytics service, ApiDoc also ships as its own bundle that needs neither the full Nodex UI script nor a templates file (Nodex and ApiDoc's templates are embedded). Load `nodexui.min.css` for styling.
|
|
28
28
|
|
|
29
29
|
```js
|
|
30
|
-
import { mountApiDoc } from "
|
|
30
|
+
import { mountApiDoc } from "nodexui/apidoc";
|
|
31
31
|
|
|
32
|
-
const app = await mountApiDoc("#docs", { src: "/openapi.json", hash: true, assetBase: "/node_modules
|
|
32
|
+
const app = await mountApiDoc("#docs", { src: "/openapi.json", hash: true, assetBase: "/node_modules/nodexui/dist/apidoc" });
|
|
33
33
|
// app.destroy() removes it
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
`mountApiDoc(target, props)` takes an element or selector plus the props below. Without a bundler, import `dist/
|
|
36
|
+
`mountApiDoc(target, props)` takes an element or selector plus the props below. Without a bundler, import `dist/nodexui.apidoc.esm.js` from a CDN, or load `dist/nodexui.apidoc.min.js`, which sets `window.thebase.apidoc.mountApiDoc`.
|
|
37
37
|
|
|
38
38
|
## Static component
|
|
39
39
|
|
|
@@ -41,11 +41,11 @@ const app = await mountApiDoc("#docs", { src: "/openapi.json", hash: true, asset
|
|
|
41
41
|
<div b-ui="apidoc" b-att-src="/openapi.json" b-att-height="100vh" b-att-hash="true"></div>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
The static adapter fetches `
|
|
44
|
+
The static adapter fetches `nodexui.templates.xml` from the folder Nodex UI script was loaded from; set `b-att-templates` to override.
|
|
45
45
|
|
|
46
46
|
## Props / attributes
|
|
47
47
|
|
|
48
|
-
|
|
|
48
|
+
| Nodex prop | Static attribute | Default | Meaning |
|
|
49
49
|
| --- | --- | --- | --- |
|
|
50
50
|
| `src` | `b-att-src` | — | URL of the OpenAPI JSON file. |
|
|
51
51
|
| `spec` | — | — | Parsed OpenAPI object (alternative to `src`). |
|
|
@@ -59,21 +59,21 @@ The static adapter fetches `baseui.templates.xml` from the folder the Base UI sc
|
|
|
59
59
|
| `authorize` | `b-att-authorize` | `true` | Show the Authorize button when the spec defines security schemes. |
|
|
60
60
|
| `languages` | `b-att-languages` | all 17 | Which code-sample languages to offer, e.g. `['curl', 'node', 'python']` / `curl,node,python`. |
|
|
61
61
|
| `language` | `b-att-language` | `curl` | Language selected first. |
|
|
62
|
-
| `assetBase` | `b-att-asset-base` | `dist/apidoc` beside
|
|
62
|
+
| `assetBase` | `b-att-asset-base` | `dist/apidoc` beside Nodex UI script | Folder that holds `img/*.svg` language logos. Empty string hides the logos. |
|
|
63
63
|
| `oauthRedirectUri` | `b-att-oauth-redirect-uri` | `oauth2-redirect.html` next to the page | Popup landing page for the implicit / authorization-code flows (see `src/components/apidoc/oauth2-redirect.html`). |
|
|
64
64
|
| `height` | `b-att-height` | `100vh` | CSS height of the component. |
|
|
65
65
|
| `className`, `style` | — | — | Standard root class / inline style. |
|
|
66
66
|
|
|
67
67
|
## Events
|
|
68
68
|
|
|
69
|
-
|
|
|
69
|
+
| Nodex callback | Static event | Detail |
|
|
70
70
|
| --- | --- | --- |
|
|
71
|
-
| `onLoad(doc)` | `
|
|
72
|
-
| `onError(error)` | `
|
|
73
|
-
| `onNavigate(id)` | `
|
|
71
|
+
| `onLoad(doc)` | `nodexui:load` | `{ info, operations }` once the spec is parsed. |
|
|
72
|
+
| `onError(error)` | `nodexui:error` | `{ error }` when the spec cannot be fetched or is not OpenAPI. |
|
|
73
|
+
| `onNavigate(id)` | `nodexui:navigate` | `{ id }` — `introduction` or an operation id. |
|
|
74
74
|
|
|
75
75
|
## Notes
|
|
76
76
|
|
|
77
77
|
- Credentials entered in Authorize live in the tab's `sessionStorage` (`apikey`, `oauthkey`) and are applied to every Try It request. Try It sends the request from the browser, so the API must allow CORS from the docs origin.
|
|
78
|
-
- Language logos are copied to `dist/apidoc/img/` by `npm run build`; the CDN URL pattern is `https://cdn.jsdelivr.net/npm
|
|
78
|
+
- Language logos are copied to `dist/apidoc/img/` by `npm run build`; the CDN URL pattern is `https://cdn.jsdelivr.net/npm/nodexui@<version>/dist/apidoc/img/`.
|
|
79
79
|
- Styles are scoped under `.b-apidoc` and use their own palette (`--line`, `--accent`, … on `.b-apidoc`); override them on a wrapper selector to re-theme.
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { AspectRatio } from "
|
|
6
|
+
import { AspectRatio } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -21,7 +21,7 @@ import { AspectRatio } from "@thebase/ui";
|
|
|
21
21
|
| `AspectRatio` | `height` | `Number` | optional |
|
|
22
22
|
| `AspectRatio` | `className` | `String` | optional |
|
|
23
23
|
|
|
24
|
-
See [
|
|
24
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
25
25
|
|
|
26
26
|
## Static component
|
|
27
27
|
|
|
@@ -4,7 +4,7 @@ Use `b-ui="attachment"` for a CDN-ready attachment card with media, metadata, up
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned Nodex UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
9
|
## Base component
|
|
10
10
|
|
|
@@ -20,7 +20,7 @@ import {
|
|
|
20
20
|
AttachmentMedia,
|
|
21
21
|
AttachmentTitle,
|
|
22
22
|
AttachmentTrigger,
|
|
23
|
-
} from "
|
|
23
|
+
} from "nodexui";
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
```base-ui
|
|
@@ -121,7 +121,7 @@ import {
|
|
|
121
121
|
| `AttachmentDropzone` | `disabled` | `Boolean` | disables click/drag/drop |
|
|
122
122
|
| `AttachmentDropzone` | `onFilesSelected` | `Function` | receives the picked/dropped `File[]` |
|
|
123
123
|
|
|
124
|
-
See [
|
|
124
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
125
125
|
|
|
126
126
|
## Static component
|
|
127
127
|
|
|
@@ -216,7 +216,7 @@ Use `b-ui="attachment-dropzone"` for a drag-and-drop upload target with a hidden
|
|
|
216
216
|
| `multiple` | on the inner `input[type=file]`; allows multi-file selection. |
|
|
217
217
|
| `disabled` | on the inner `input[type=file]`; visually and functionally disables the zone. |
|
|
218
218
|
|
|
219
|
-
The dropzone emits `
|
|
219
|
+
The dropzone emits `nodexui:change` with `{ files }` on drop, on file-input change, or on click-to-browse selection.
|
|
220
220
|
|
|
221
221
|
## Options and attributes
|
|
222
222
|
|
|
@@ -231,7 +231,7 @@ The dropzone emits `baseui:change` with `{ files }` on drop, on file-input chang
|
|
|
231
231
|
|
|
232
232
|
## Events
|
|
233
233
|
|
|
234
|
-
The file picker fallback emits `
|
|
234
|
+
The file picker fallback emits `nodexui:change` with `{ files }` from the root element.
|
|
235
235
|
|
|
236
236
|
## Accessibility behavior
|
|
237
237
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="avatar"` for a CDN-ready avatar component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned Nodex UI CSS and JavaScript files; no extra dependency is required for this component.
|
|
8
8
|
|
|
9
9
|
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import { Avatar } from "
|
|
12
|
+
import { Avatar } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -27,7 +27,7 @@ import { Avatar } from "@thebase/ui";
|
|
|
27
27
|
| `Avatar` | `title` | `String` | optional, native hover tooltip |
|
|
28
28
|
| `Avatar` | `className` | `String` | optional |
|
|
29
29
|
|
|
30
|
-
See [
|
|
30
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
31
31
|
|
|
32
32
|
## Static component
|
|
33
33
|
|
|
@@ -41,7 +41,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
41
41
|
|
|
42
42
|
## Options and attributes
|
|
43
43
|
|
|
44
|
-
See `dist/
|
|
44
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
45
45
|
|
|
46
46
|
## Methods
|
|
47
47
|
|
|
@@ -49,11 +49,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
49
49
|
|
|
50
50
|
## Events
|
|
51
51
|
|
|
52
|
-
Interactive components emit documented `
|
|
52
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
53
53
|
|
|
54
54
|
## CSS variables
|
|
55
55
|
|
|
56
|
-
The component inherits
|
|
56
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
57
57
|
|
|
58
58
|
## Accessibility behavior
|
|
59
59
|
|
|
@@ -65,7 +65,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
65
65
|
|
|
66
66
|
## Browser support
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
69
69
|
|
|
70
70
|
## Test checklist
|
|
71
71
|
|
package/docs/components/badge.md
CHANGED
|
@@ -5,7 +5,7 @@ Small status label for counts, states, and metadata.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Badge } from "
|
|
8
|
+
import { Badge } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -24,7 +24,7 @@ import { Badge } from "@thebase/ui";
|
|
|
24
24
|
| `label` | `String` | alternative to default-slot children |
|
|
25
25
|
| `className` | `String` | appended to the generated `badge ...` classes |
|
|
26
26
|
|
|
27
|
-
See [
|
|
27
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
28
28
|
|
|
29
29
|
## Static component
|
|
30
30
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# Block Viewer
|
|
2
2
|
|
|
3
|
-
`BlockViewer` is the page-root component used by
|
|
3
|
+
`BlockViewer` is the page-root component used by Nodex UI block gallery detail pages (`examples/blocks/*.html`). It reads a title/description from `document.body.dataset`, renders a sample block's markup from a `[b-block-code-template]` script tag into a live preview panel, and offers a preview/code toggle with desktop/tablet/mobile viewport switching and a "copy code" action.
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned Nodex UI CSS and JavaScript files, plus the block-viewer adapter bundle (it is not part of `nodexui.min.js`, since it pulls in the full component export surface only when a block sample needs it — but it's self-contained, no import map required):
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<link rel="stylesheet" href="/dist/
|
|
11
|
-
<script type="module" src="/dist/
|
|
12
|
-
<script src="/dist/
|
|
10
|
+
<link rel="stylesheet" href="/dist/nodexui.min.css">
|
|
11
|
+
<script type="module" src="/dist/nodexui.block-viewer.esm.js"></script>
|
|
12
|
+
<script src="/dist/nodexui.min.js" defer></script>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Base component
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
|
-
import { BlockViewer } from "
|
|
18
|
+
import { BlockViewer } from "nodexui";
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
```base-ui
|
|
@@ -42,10 +42,10 @@ import { BlockViewer } from "@base/component";
|
|
|
42
42
|
## Options and attributes
|
|
43
43
|
|
|
44
44
|
- `data-block-title` / `data-block-description` (on `<body>`) — the header title/description shown above the preview.
|
|
45
|
-
- `[b-block-code-template]` — a `<script type="text/xml">` (
|
|
45
|
+
- `[b-block-code-template]` — a `<script type="text/xml">` (runtime-mounted preview, source-of-truth for both the live preview and the "Code" panel) or a `<template>` (static markup, cloned directly into the preview frame).
|
|
46
46
|
- `?embed=1` query param — renders only the preview frame full-bleed, without the page chrome, for use inside an `<iframe>`.
|
|
47
47
|
|
|
48
|
-
See `dist/
|
|
48
|
+
See `dist/nodexui.registry.json` for the full attribute list.
|
|
49
49
|
|
|
50
50
|
## Methods
|
|
51
51
|
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
BreadcrumbList,
|
|
14
14
|
BreadcrumbPage,
|
|
15
15
|
BreadcrumbSeparator,
|
|
16
|
-
} from "
|
|
16
|
+
} from "nodexui";
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
```base-ui
|
|
@@ -48,7 +48,7 @@ import {
|
|
|
48
48
|
| `BreadcrumbSeparator` | `className` | `String` | optional; custom children override the chevron |
|
|
49
49
|
| `BreadcrumbEllipsis` | `className` | `String` | optional |
|
|
50
50
|
|
|
51
|
-
See [
|
|
51
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
52
52
|
|
|
53
53
|
## Static component
|
|
54
54
|
|
|
@@ -63,7 +63,7 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
63
63
|
</nav>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
Nodex UI adds the shadcn/Nova breadcrumb classes, inserts chevron separators when none are authored, styles links and the current page, and marks the current page with `aria-current="page"`.
|
|
67
67
|
|
|
68
68
|
## Dropdown
|
|
69
69
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Bubble } from "
|
|
6
|
+
import { Bubble } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -39,7 +39,7 @@ import { Bubble } from "@thebase/ui";
|
|
|
39
39
|
| --- | --- | --- | --- |
|
|
40
40
|
| `Bubble` | `className` | `String` | optional |
|
|
41
41
|
|
|
42
|
-
See [
|
|
42
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
43
43
|
|
|
44
44
|
## Static component
|
|
45
45
|
|
|
@@ -5,7 +5,7 @@ Groups related buttons while preserving native button semantics.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "
|
|
8
|
+
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -88,7 +88,7 @@ import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@thebase/ui"
|
|
|
88
88
|
| `ButtonGroupSeparator` | `className` | `String` | optional |
|
|
89
89
|
| `ButtonGroupText` | `className` | `String` | optional |
|
|
90
90
|
|
|
91
|
-
See [
|
|
91
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
92
92
|
|
|
93
93
|
## Static component
|
|
94
94
|
|
|
@@ -5,7 +5,7 @@ Use `b-ui="button"` on a native button or link.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Button } from "
|
|
8
|
+
import { Button } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -55,7 +55,7 @@ import { Button } from "@thebase/ui";
|
|
|
55
55
|
| `getRef` | `Function` | called with the rendered root element after mount, and with `null` on unmount |
|
|
56
56
|
| `onClick` | `Function` | called with the native click event |
|
|
57
57
|
|
|
58
|
-
Also accepts default slot content instead of `label`. Every pure Base
|
|
58
|
+
Also accepts default slot content instead of `label`. Every pure Base Nodex UI component that renders a clickable control (dialog close, tab triggers, toast action, select trigger, ...) renders it through `Button`, usually with `unstyled`, so those controls share one click/disabled/`href` implementation. See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
59
59
|
|
|
60
60
|
## Static component
|
|
61
61
|
|