@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
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Direction } from "
|
|
6
|
+
import { Direction } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -51,7 +51,7 @@ import { Direction } from "@thebase/ui";
|
|
|
51
51
|
| `Direction` | `dir` | `String` | optional |
|
|
52
52
|
| `Direction` | `className` | `String` | optional |
|
|
53
53
|
|
|
54
|
-
See [
|
|
54
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
55
55
|
|
|
56
56
|
## Static component
|
|
57
57
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "
|
|
6
|
+
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -38,7 +38,7 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
|
|
|
38
38
|
| `DrawerTitle` | `className` | `String` | optional |
|
|
39
39
|
| `DrawerTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
`DrawerContent` is driven by a real `bootstrap.Offcanvas` instance bound to its own root (rendered as `.offcanvas.offcanvas-bottom`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, and the Tab focus trap are
|
|
41
|
+
`DrawerContent` is driven by a real `bootstrap.Offcanvas` instance bound to its own root (rendered as `.offcanvas.offcanvas-bottom`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, and the Tab focus trap are the built-in native Offcanvas behavior, same as the static API; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `DrawerClose` closes via `data-bs-dismiss="offcanvas"`. Drawer has no side variant — it always slides up from the bottom. See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
42
42
|
|
|
43
43
|
## Static component
|
|
44
44
|
|
|
@@ -53,6 +53,6 @@ import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, Dr
|
|
|
53
53
|
|
|
54
54
|
At mount, `[b-ui="drawer"]` itself becomes the `.offcanvas.offcanvas-bottom` element (`tabindex="-1"`) driven by a real `bootstrap.Offcanvas` instance (`backdrop: true, keyboard: true, scroll: false`); `[b-drawer-panel]` stays as a plain cosmetic content box inside it. `[b-drawer-close]` buttons get `data-bs-dismiss="offcanvas"` at mount time instead of a manual click handler.
|
|
55
55
|
|
|
56
|
-
Events: `
|
|
56
|
+
Events: `nodexui:open`, `nodexui:close` (Nodex UI), plus the underlying `shown.bs.offcanvas`/`hidden.bs.offcanvas`.
|
|
57
57
|
|
|
58
|
-
Keyboard: Escape closes the drawer (
|
|
58
|
+
Keyboard: Escape closes the drawer (the built-in native `keyboard` option), as does a backdrop click on the generated `.offcanvas-backdrop`. Focus is trapped inside via Tab/Shift+Tab (native `bootstrap.Offcanvas` focus trap) and returns to the trigger on close (kept by hand — not native to Offcanvas).
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
DropdownMenuSubContent,
|
|
18
18
|
DropdownMenuSubTrigger,
|
|
19
19
|
DropdownMenuTrigger,
|
|
20
|
-
} from "
|
|
20
|
+
} from "nodexui";
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
```base-ui
|
|
@@ -68,7 +68,7 @@ import {
|
|
|
68
68
|
| `DropdownMenuRadioItem` | `value` | `String` | optional |
|
|
69
69
|
| `DropdownMenuLabel`, `DropdownMenuShortcut`, `DropdownMenuSeparator`, `DropdownMenuGroup` | `className` | `String` | optional |
|
|
70
70
|
|
|
71
|
-
See [
|
|
71
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
72
72
|
|
|
73
73
|
## Static component
|
|
74
74
|
|
|
@@ -106,4 +106,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
106
106
|
</div>
|
|
107
107
|
```
|
|
108
108
|
|
|
109
|
-
The trigger supports click, ArrowDown, and Escape. Root open/close is driven by a real `bootstrap.Dropdown` instance on the trigger (the panel carries
|
|
109
|
+
The trigger supports click, ArrowDown, and Escape. Root open/close is driven by a real `bootstrap.Dropdown` instance on the trigger (the panel carries the built-in `dropdown-menu`/`show` classes); submenus remain Nodex UI's own hover/click behavior. Events: `nodexui:open`, `nodexui:close` (Nodex UI), plus the underlying `show.bs.dropdown`/`shown.bs.dropdown`/`hide.bs.dropdown`/`hidden.bs.dropdown`.
|
package/docs/components/empty.md
CHANGED
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
EmptyHeader,
|
|
13
13
|
EmptyMedia,
|
|
14
14
|
EmptyTitle,
|
|
15
|
-
} from "
|
|
15
|
+
} from "nodexui";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
```base-ui
|
|
@@ -46,7 +46,7 @@ import {
|
|
|
46
46
|
| `EmptyDescription` | `className` | `String` | optional |
|
|
47
47
|
| `EmptyContent` | `className` | `String` | optional |
|
|
48
48
|
|
|
49
|
-
See [
|
|
49
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
50
50
|
|
|
51
51
|
## Static component
|
|
52
52
|
|
|
@@ -63,4 +63,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
63
63
|
</div>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
Nodex UI sets `role="status"` by default. Use `b-att-variant="outline"` for a dashed container and `b-att-variant="background"` for a muted panel; avatar, avatar-group, and RTL states are composed by placing those components inside `b-empty-media` or `b-empty-content`.
|
package/docs/components/field.md
CHANGED
package/docs/components/form.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
# Form
|
|
2
2
|
|
|
3
|
-
Build an accessible Bug Report form with
|
|
3
|
+
Build an accessible Bug Report form with Nodex UI `Field` layout, Nodex UI `Button` actions, and Nodex `t-model` input bindings.
|
|
4
4
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Component, useState, xml } from "
|
|
8
|
+
import { Component, useState, xml } from "nodexui";
|
|
9
9
|
import {
|
|
10
10
|
Button,
|
|
11
11
|
Field,
|
|
12
12
|
FieldDescription,
|
|
13
13
|
FieldGroup,
|
|
14
14
|
FieldLabel,
|
|
15
|
-
} from "
|
|
15
|
+
} from "nodexui";
|
|
16
16
|
|
|
17
17
|
class BugReportExample extends Component {
|
|
18
18
|
static components = {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { HoverCard, HoverCardContent, HoverCardTrigger } from "
|
|
6
|
+
import { HoverCard, HoverCardContent, HoverCardTrigger } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -33,7 +33,7 @@ import { HoverCard, HoverCardContent, HoverCardTrigger } from "@thebase/ui";
|
|
|
33
33
|
| `HoverCardContent` | `className` | `String` | optional |
|
|
34
34
|
| `HoverCardTrigger` | `className` | `String` | optional |
|
|
35
35
|
|
|
36
|
-
See [
|
|
36
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
37
37
|
|
|
38
38
|
## Static component
|
|
39
39
|
|
package/docs/components/icon.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# Icon
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Nodex UI includes the full Lucide SVG icon set as a built-in CDN icon library.
|
|
4
4
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Icon } from "
|
|
8
|
+
import { Icon } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -21,7 +21,7 @@ import { Icon } from "@thebase/ui";
|
|
|
21
21
|
| `Icon` | `baseUrl` | `String` | optional |
|
|
22
22
|
| `Icon` | `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,12 +4,12 @@ Use `b-ui="input-otp"` for a CDN-ready input otp 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 { InputOtp } from "
|
|
12
|
+
import { InputOtp } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -26,7 +26,7 @@ import { InputOtp } from "@thebase/ui";
|
|
|
26
26
|
| `InputOtp` | `className` | `String` | optional |
|
|
27
27
|
| `InputOtp` | `onChange` | `Function` | optional |
|
|
28
28
|
|
|
29
|
-
See [
|
|
29
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
30
30
|
|
|
31
31
|
## Static component
|
|
32
32
|
|
|
@@ -40,7 +40,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
40
40
|
|
|
41
41
|
## Options and attributes
|
|
42
42
|
|
|
43
|
-
See `dist/
|
|
43
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
44
44
|
|
|
45
45
|
## Methods
|
|
46
46
|
|
|
@@ -48,11 +48,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
48
48
|
|
|
49
49
|
## Events
|
|
50
50
|
|
|
51
|
-
Interactive components emit documented `
|
|
51
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
52
52
|
|
|
53
53
|
## CSS variables
|
|
54
54
|
|
|
55
|
-
The component inherits
|
|
55
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
56
56
|
|
|
57
57
|
## Accessibility behavior
|
|
58
58
|
|
|
@@ -64,7 +64,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
64
64
|
|
|
65
65
|
## Browser support
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
68
68
|
|
|
69
69
|
## Test checklist
|
|
70
70
|
|
package/docs/components/input.md
CHANGED
|
@@ -5,7 +5,7 @@ Use `b-ui="input"` on a native input element.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Input } from "
|
|
8
|
+
import { Input } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -76,7 +76,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
|
|
|
76
76
|
| `onInput` | `Function` | called as `(value, event)` on the native `input` event |
|
|
77
77
|
| `onChange` | `Function` | called as `(value, event)` on the native `change` event |
|
|
78
78
|
|
|
79
|
-
See [
|
|
79
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
80
80
|
|
|
81
81
|
## Static component
|
|
82
82
|
|
|
@@ -90,7 +90,7 @@ Accessibility: provide a visible label or an `aria-label` when the input is not
|
|
|
90
90
|
|
|
91
91
|
## CDN install requirements
|
|
92
92
|
|
|
93
|
-
Load `
|
|
93
|
+
Load `nodexui.min.css` and `nodexui.min.js`.
|
|
94
94
|
|
|
95
95
|
## Enhanced usage
|
|
96
96
|
|
|
@@ -102,15 +102,15 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
102
102
|
|
|
103
103
|
## Events
|
|
104
104
|
|
|
105
|
-
Input does not emit custom
|
|
105
|
+
Input does not emit custom Nodex UI events. Use native `input` and `change` events.
|
|
106
106
|
|
|
107
107
|
## CSS variables
|
|
108
108
|
|
|
109
|
-
The component inherits
|
|
109
|
+
The component inherits Nodex UI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.
|
|
110
110
|
|
|
111
111
|
## Browser support
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
114
114
|
|
|
115
115
|
## Test checklist
|
|
116
116
|
|
package/docs/components/item.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Item } from "
|
|
6
|
+
import { Item } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -54,7 +54,7 @@ import { Item } from "@thebase/ui";
|
|
|
54
54
|
| --- | --- | --- | --- |
|
|
55
55
|
| `Item` | `className` | `String` | optional |
|
|
56
56
|
|
|
57
|
-
See [
|
|
57
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
58
58
|
|
|
59
59
|
## Static component
|
|
60
60
|
|
|
@@ -63,7 +63,7 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
63
63
|
<div b-ui="item">
|
|
64
64
|
<span b-item-media>BU</span>
|
|
65
65
|
<span b-item-content>
|
|
66
|
-
<strong b-item-title>
|
|
66
|
+
<strong b-item-title>NodexUI</strong>
|
|
67
67
|
<span b-item-description>CDN-ready shadcn-style components.</span>
|
|
68
68
|
</span>
|
|
69
69
|
<span b-item-actions>
|
package/docs/components/kbd.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Kbd } from "
|
|
6
|
+
import { Kbd } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -32,7 +32,7 @@ import { Kbd } from "@thebase/ui";
|
|
|
32
32
|
| --- | --- | --- | --- |
|
|
33
33
|
| `Kbd` | `className` | `String` | optional |
|
|
34
34
|
|
|
35
|
-
See [
|
|
35
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
36
36
|
|
|
37
37
|
## Static component
|
|
38
38
|
|
package/docs/components/label.md
CHANGED
|
@@ -5,7 +5,7 @@ Form label with consistent spacing and optional required marker.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Label } from "
|
|
8
|
+
import { Label } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -23,7 +23,7 @@ import { Label } from "@thebase/ui";
|
|
|
23
23
|
| `Label` | `required` | `Boolean` | optional |
|
|
24
24
|
| `Label` | `className` | `String` | optional |
|
|
25
25
|
|
|
26
|
-
See [
|
|
26
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
27
27
|
|
|
28
28
|
## Static component
|
|
29
29
|
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
# Markdown
|
|
2
2
|
|
|
3
|
-
Use `b-ui="markdown"` (or the pure Base `Markdown` component) to render Markdown or mount an editable Markdown document. Read-only parsing uses the vendored `src/runtime/marked/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live
|
|
3
|
+
Use `b-ui="markdown"` (or the pure Base `Markdown` component) to render Markdown or mount an editable Markdown document. Read-only parsing uses the vendored `src/runtime/marked/marked.min.js` (marked v15). Fenced ` ```mermaid ` code blocks render as inline SVG via `src/runtime/mermaid/mermaid.esm.min.mjs`. Fenced ` ```base-ui ` code blocks render as a live Nodex UI preview through the page's global static runtime (`window.thebase`, e.g. `dist/nodexui.min.js`).
|
|
4
4
|
|
|
5
5
|
Editable mode lazy-loads `dist/runtime/milkdown/milkdown-editor.js`, which bundles Milkdown, Yjs, and y-webrtc only when `b-att-editable="true"` / `editable="true"` is used. The editor runtime enables CommonMark, GFM, history, clipboard, cursor, listener, indent, upload, block handle, tooltip, slash, streaming, and diff plugins. Collaborative mode uses Milkdown's Yjs-aware collab undo/redo instead of the plain history stack.
|
|
6
6
|
|
|
7
7
|
## CDN install requirements
|
|
8
8
|
|
|
9
|
-
Load the pinned
|
|
9
|
+
Load the pinned Nodex UI CSS and JavaScript files. No extra `<script>` tag, npm install, or CDN reference is required for Markdown parsing, mermaid diagrams, or the Milkdown editor runtime — each lazy asset is emitted under `dist/runtime/` and fetched only when needed. Live ` ```base-ui ` previews reuse the same static runtime the rest of the page already loads (`dist/nodexui.min.js`) — if that script isn't on the page, the block renders an inline error instead of a live preview.
|
|
10
10
|
|
|
11
11
|
## Base component
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
|
-
import { Markdown } from "
|
|
14
|
+
import { Markdown } from "nodexui";
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
```base-ui
|
|
18
18
|
<div class="d-flex flex-column gap-4">
|
|
19
19
|
<Markdown src="'/docs/installation.md'"/>
|
|
20
|
-
<Markdown content="state.source" mermaid="false"
|
|
20
|
+
<Markdown content="state.source" mermaid="false" nodexUi="false"/>
|
|
21
21
|
<Markdown
|
|
22
22
|
content="state.source"
|
|
23
23
|
editable="true"
|
|
@@ -98,25 +98,25 @@ A fenced ` ```base-ui ` block renders as a live component, not a code sample:
|
|
|
98
98
|
- `b-att-src` / `src` — fetch a remote Markdown file instead of using inline content.
|
|
99
99
|
- `b-att-content` / `content` — a static `<script type="text/markdown">` child (or a `<template>`), `b-att-content`, or the element's own text content supplies the Markdown source when no `src` is set.
|
|
100
100
|
- `b-att-mermaid` / `mermaid` — set to `"false"` to skip mermaid diagram rendering (defaults to enabled). Diagrams use mermaid's dark theme when the nearest `data-bs-theme` (else the system preference) is dark.
|
|
101
|
-
- `b-att-base-ui` / `
|
|
101
|
+
- `b-att-base-ui` / `nodexUi` — set to `"false"` to skip live-mounting fenced ` ```base-ui ` blocks; they render as plain code instead (defaults to enabled).
|
|
102
102
|
- `b-att-editable` / `editable` — set to `"true"` to mount Milkdown instead of read-only rendered HTML.
|
|
103
103
|
- `b-att-collaborative` / `collaborative` — set to `"true"` to connect the editor through Yjs + y-webrtc.
|
|
104
104
|
- `b-att-room` / `room` — y-webrtc room name for collaborative sessions (defaults to `b-markdown`).
|
|
105
105
|
- `b-att-password` / `password` — optional y-webrtc room password.
|
|
106
|
-
- `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for
|
|
106
|
+
- `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Nodex.
|
|
107
107
|
|
|
108
|
-
See `dist/
|
|
108
|
+
See `dist/nodexui.registry.json` for the full attribute list.
|
|
109
109
|
|
|
110
110
|
Task-list checkboxes (`- [ ] item`) get an `aria-label` with the item text after rendering. On coarse pointers (touch), links in tables and lists and checkboxes get larger touch targets. Tables scroll horizontally inside their own container.
|
|
111
111
|
|
|
112
112
|
## Events
|
|
113
113
|
|
|
114
|
-
- `
|
|
115
|
-
- `
|
|
116
|
-
- `
|
|
117
|
-
- `
|
|
118
|
-
- `
|
|
119
|
-
- `
|
|
114
|
+
- `nodexui:markdown-render` — fired after Markdown parses and diagrams finish enhancing (`detail.html`).
|
|
115
|
+
- `nodexui:markdown-error` — fired when fetching or parsing fails (`detail.error`).
|
|
116
|
+
- `nodexui:markdown-editor-ready` — fired after Milkdown mounts (`detail.collaborative`, `detail.room`).
|
|
117
|
+
- `nodexui:markdown-change` — fired whenever Milkdown emits a Markdown update (`detail.markdown`, `detail.previousMarkdown`).
|
|
118
|
+
- `nodexui:markdown-copy` — fired on a fenced ` ```base-ui ` block's copy button after its source is written to the clipboard (`detail.source`). A transient `b-ui="toast"` also shows "Copied to clipboard" automatically if the global static runtime is loaded.
|
|
119
|
+
- `nodexui:markdown-copy-error` — fired instead of `nodexui:markdown-copy` if the clipboard write fails (`detail.error`).
|
|
120
120
|
|
|
121
121
|
## Methods
|
|
122
122
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Marker } from "
|
|
6
|
+
import { Marker } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -19,7 +19,7 @@ import { Marker } from "@thebase/ui";
|
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
20
|
| `Marker` | `className` | `String` | optional |
|
|
21
21
|
|
|
22
|
-
See [
|
|
22
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
23
23
|
|
|
24
24
|
## Static component
|
|
25
25
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Menubar } from "
|
|
6
|
+
import { Menubar } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -91,7 +91,7 @@ import { Menubar } from "@thebase/ui";
|
|
|
91
91
|
| --- | --- | --- | --- |
|
|
92
92
|
| `Menubar` | `className` | `String` | optional |
|
|
93
93
|
|
|
94
|
-
See [
|
|
94
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
95
95
|
|
|
96
96
|
## Static component
|
|
97
97
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="message-scroller"` for a CDN-ready message scroller 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 { MessageScroller } from "
|
|
12
|
+
import { MessageScroller } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -43,7 +43,7 @@ import { MessageScroller } from "@thebase/ui";
|
|
|
43
43
|
| `MessageScroller` | `autoscroll` | `Boolean` | optional |
|
|
44
44
|
| `MessageScroller` | `className` | `String` | optional |
|
|
45
45
|
|
|
46
|
-
See [
|
|
46
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
47
47
|
|
|
48
48
|
## Static component
|
|
49
49
|
|
|
@@ -57,7 +57,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
57
57
|
|
|
58
58
|
## Options and attributes
|
|
59
59
|
|
|
60
|
-
See `dist/
|
|
60
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
61
61
|
|
|
62
62
|
## Methods
|
|
63
63
|
|
|
@@ -65,11 +65,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
65
65
|
|
|
66
66
|
## Events
|
|
67
67
|
|
|
68
|
-
Interactive components emit documented `
|
|
68
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
69
69
|
|
|
70
70
|
## CSS variables
|
|
71
71
|
|
|
72
|
-
The component inherits
|
|
72
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
73
73
|
|
|
74
74
|
## Accessibility behavior
|
|
75
75
|
|
|
@@ -81,7 +81,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
81
81
|
|
|
82
82
|
## Browser support
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
85
85
|
|
|
86
86
|
## Test checklist
|
|
87
87
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="message"` for a CDN-ready message 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 { Message } from "
|
|
12
|
+
import { Message } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -41,7 +41,7 @@ import { Message } from "@thebase/ui";
|
|
|
41
41
|
| `Message` | `side` | `String` | optional |
|
|
42
42
|
| `Message` | `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
|
|
|
@@ -55,7 +55,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
55
55
|
|
|
56
56
|
## Options and attributes
|
|
57
57
|
|
|
58
|
-
See `dist/
|
|
58
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
59
59
|
|
|
60
60
|
## Methods
|
|
61
61
|
|
|
@@ -63,11 +63,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
63
63
|
|
|
64
64
|
## Events
|
|
65
65
|
|
|
66
|
-
Interactive components emit documented `
|
|
66
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
67
67
|
|
|
68
68
|
## CSS variables
|
|
69
69
|
|
|
70
|
-
The component inherits
|
|
70
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
71
71
|
|
|
72
72
|
## Accessibility behavior
|
|
73
73
|
|
|
@@ -79,7 +79,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
79
79
|
|
|
80
80
|
## Browser support
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
83
83
|
|
|
84
84
|
## Test checklist
|
|
85
85
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# Native Select
|
|
2
2
|
|
|
3
|
-
Browser-native select control with
|
|
3
|
+
Browser-native select control with standard styling.
|
|
4
4
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { NativeSelect } from "
|
|
8
|
+
import { NativeSelect } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -43,7 +43,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
|
|
|
43
43
|
| `NativeSelect` | `onChange` | `Function` | optional |
|
|
44
44
|
| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
|
|
45
45
|
|
|
46
|
-
See [
|
|
46
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
47
47
|
|
|
48
48
|
## Static component
|
|
49
49
|
|
|
@@ -5,7 +5,7 @@ Use `b-ui="navigation-menu"` for horizontal site or app navigation.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { NavigationMenu, NavigationMenuItem } from "
|
|
8
|
+
import { NavigationMenu, NavigationMenuItem } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -27,7 +27,7 @@ import { NavigationMenu, NavigationMenuItem } from "@thebase/ui";
|
|
|
27
27
|
| `NavigationMenuItem` | `href` | `String` | optional |
|
|
28
28
|
| `NavigationMenuItem` | `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
|
|
|
@@ -38,6 +38,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
38
38
|
</nav>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
Nodex UI adds `menubar`/`menuitem` roles and Left/Right arrow focus movement.
|
|
42
42
|
|
|
43
43
|
Below 768px the menu does not wrap: it scrolls horizontally with a fade on the right edge and no visible scrollbar, so a sticky header keeps a constant height. Items never shrink or wrap their text.
|
|
@@ -5,7 +5,7 @@ Use `b-ui="pagination"` on a `nav` containing a list of links or buttons.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Pagination, PaginationItem } from "
|
|
8
|
+
import { Pagination, PaginationItem } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -34,7 +34,7 @@ import { Pagination, PaginationItem } from "@thebase/ui";
|
|
|
34
34
|
| `PaginationItem` | `disabled` | `Boolean` | optional |
|
|
35
35
|
| `PaginationItem` | `onClick` | `Function` | optional |
|
|
36
36
|
|
|
37
|
-
See [
|
|
37
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
38
38
|
|
|
39
39
|
## Static component
|
|
40
40
|
|
|
@@ -47,4 +47,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
47
47
|
</nav>
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
Nodex UI adds built-in pagination classes, active states, and disabled item styling.
|