@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
|
@@ -5,7 +5,7 @@ Use `b-ui="popover"` with trigger and content nodes.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Popover, PopoverContent, PopoverTrigger } from "
|
|
8
|
+
import { Popover, PopoverContent, PopoverTrigger } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -32,13 +32,13 @@ import { Popover, PopoverContent, PopoverTrigger } from "@thebase/ui";
|
|
|
32
32
|
| `PopoverContent` | `className` | `String` | optional |
|
|
33
33
|
| `PopoverTrigger` | `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
|
-
Both the pure Base and static forms are driven by a live `bootstrap.Popover` instance owned on the trigger element — **the visible popup is
|
|
37
|
+
Both the pure Base and static forms are driven by a live `bootstrap.Popover` instance owned on the trigger element — **the visible popup is the built-in generated DOM (a `.popover`/`.popover-arrow`/`.popover-body` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the popover.** Don't query for it as a descendant of the trigger or root; query `document.body.querySelector(".popover .popover-body")` instead. There's no separate heading/title concept in the current API — only body content (`.popover-body`); no `.popover-header` is generated.
|
|
38
38
|
|
|
39
|
-
The default slot's rendered markup is captured into an HTML string for
|
|
39
|
+
The default slot's rendered markup is captured into an HTML string for the built-in `content`/`html: true` options (the library can't consume live vnodes): `PopoverContent` renders the slot into a hidden buffer element internal to its own template (it is no longer a visibly-toggled popup itself), `PopoverTrigger` reads that buffer's `innerHTML` on mount to seed the bootstrap instance, and re-syncs the live popup via `.setContent({'.popover-body': html})` whenever that HTML changes on a later render.
|
|
40
40
|
|
|
41
|
-
Unlike `Tooltip`/hover-driven components,
|
|
41
|
+
Unlike `Tooltip`/hover-driven components, the built-in `trigger: "click"` option would bind its own click listener directly on the trigger element, independent of `PopoverTrigger`'s own `t-on-click`. To avoid double-toggling on a single click, the pure Base `PopoverTrigger` constructs its `bootstrap.Popover` instance with `trigger: "manual"` and calls `.toggle()` itself from `onClick` — `shown.bs.popover`/`hidden.bs.popover` still fire from `.toggle()` regardless of the `trigger` option, since that option only gates the built-in auto-binding, not event dispatch. The static adapter, which has no competing click handler of its own, passes `trigger: "click"` and relies on the built-in built-in binding instead.
|
|
42
42
|
|
|
43
43
|
## Static component
|
|
44
44
|
|
|
@@ -49,7 +49,7 @@ Unlike `Tooltip`/hover-driven components, Bootstrap's own `trigger: "click"` opt
|
|
|
49
49
|
</span>
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
The static adapter reads `[b-popover-content]` once at mount time as the popover's HTML content, then removes that node from the DOM —
|
|
52
|
+
The static adapter reads `[b-popover-content]` once at mount time as the popover's HTML content, then removes that node from the DOM — the library owns showing/hiding the content from then on, so no `[b-popover-content]` element survives in the authored markup post-mount. Events: `nodexui:open`, `nodexui:close` (dispatched from the root element on the built-in `shown.bs.popover`/`hidden.bs.popover`).
|
|
53
53
|
|
|
54
54
|
## Enhanced usage
|
|
55
55
|
|
|
@@ -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. Listen for the built-in `shown.bs.popover`/`hidden.bs.popover` on the trigger element to react to show/hide; Nodex UI mirrors those into `b-att-state` (`open`/`closed`) and `aria-expanded` on the static trigger, and `this.env.popover.open`-equivalent reactive state on the Base components.
|
|
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`. The popup itself is styled by the built-in bundled `.popover`/`.popover-arrow`/`.popover-body` CSS (loaded via `dist/nodexui.min.css`), not Nodex UI's own classes.
|
|
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
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Progress } from "
|
|
6
|
+
import { Progress } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -18,7 +18,7 @@ import { Progress } from "@thebase/ui";
|
|
|
18
18
|
| `Progress` | `max` | `Number` | optional |
|
|
19
19
|
| `Progress` | `className` | `String` | optional |
|
|
20
20
|
|
|
21
|
-
See [
|
|
21
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
22
22
|
|
|
23
23
|
## Static component
|
|
24
24
|
|
package/docs/components/pwa.md
CHANGED
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
PwaSteps,
|
|
17
17
|
PwaTitle,
|
|
18
18
|
PwaTrigger,
|
|
19
|
-
} from "
|
|
19
|
+
} from "nodexui";
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
```base-ui
|
|
@@ -59,7 +59,7 @@ A launcher rendered outside the `Pwa` tree opens it through `PwaTrigger`, or by
|
|
|
59
59
|
|
|
60
60
|
Render a second `Pwa` instance for a follow-up prompt (e.g. "Allow notifications" after install is dismissed) — each `Pwa` owns its own open state independently.
|
|
61
61
|
|
|
62
|
-
See [
|
|
62
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
63
63
|
|
|
64
64
|
## Static component
|
|
65
65
|
|
|
@@ -77,7 +77,7 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
77
77
|
</div>
|
|
78
78
|
```
|
|
79
79
|
|
|
80
|
-
The prompt closes on backdrop click, `[b-pwa-close]`, or Escape. `element.
|
|
80
|
+
The prompt closes on backdrop click, `[b-pwa-close]`, or Escape. `element.NodexUIPwa.open()`/`.close()` are also available once mounted, for a launcher button rendered elsewhere in the page (e.g. only once `beforeinstallprompt` has fired).
|
|
81
81
|
|
|
82
82
|
## Options and attributes
|
|
83
83
|
|
|
@@ -89,7 +89,7 @@ The prompt closes on backdrop click, `[b-pwa-close]`, or Escape. `element.BaseUI
|
|
|
89
89
|
|
|
90
90
|
## Events
|
|
91
91
|
|
|
92
|
-
`
|
|
92
|
+
`nodexui:open` and `nodexui:close` fire on the root element (shared `createModal()` contract with `dialog`/`sheet`).
|
|
93
93
|
|
|
94
94
|
## Accessibility behavior
|
|
95
95
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="questionnaire"` for a CDN-ready questionnaire 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 { Questionnaire, QuestionnaireNext, QuestionnairePrevious, QuestionnaireStep } from "
|
|
12
|
+
import { Questionnaire, QuestionnaireNext, QuestionnairePrevious, QuestionnaireStep } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -83,7 +83,7 @@ import { Questionnaire, QuestionnaireNext, QuestionnairePrevious, QuestionnaireS
|
|
|
83
83
|
| `QuestionnaireStep` | `index` | `Number` | required |
|
|
84
84
|
| `QuestionnaireStep` | `className` | `String` | optional |
|
|
85
85
|
|
|
86
|
-
See [
|
|
86
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
87
87
|
|
|
88
88
|
## Static component
|
|
89
89
|
|
|
@@ -97,7 +97,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
97
97
|
|
|
98
98
|
## Options and attributes
|
|
99
99
|
|
|
100
|
-
See `dist/
|
|
100
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
101
101
|
|
|
102
102
|
## Methods
|
|
103
103
|
|
|
@@ -105,11 +105,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
105
105
|
|
|
106
106
|
## Events
|
|
107
107
|
|
|
108
|
-
Interactive components emit documented `
|
|
108
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
109
109
|
|
|
110
110
|
## CSS variables
|
|
111
111
|
|
|
112
|
-
The component inherits
|
|
112
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
113
113
|
|
|
114
114
|
## Accessibility behavior
|
|
115
115
|
|
|
@@ -121,7 +121,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
121
121
|
|
|
122
122
|
## Browser support
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
125
125
|
|
|
126
126
|
## Test checklist
|
|
127
127
|
|
|
@@ -5,7 +5,7 @@ Native radio input or label wrapper.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { RadioGroup, RadioGroupItem } from "
|
|
8
|
+
import { RadioGroup, RadioGroupItem } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -28,7 +28,7 @@ import { RadioGroup, RadioGroupItem } from "@thebase/ui";
|
|
|
28
28
|
| `RadioGroupItem` | `disabled` | `Boolean` | optional |
|
|
29
29
|
| `RadioGroupItem` | `className` | `String` | optional |
|
|
30
30
|
|
|
31
|
-
See [
|
|
31
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
32
32
|
|
|
33
33
|
## Static component
|
|
34
34
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="resizable"` for a CDN-ready resizable 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 { Resizable } from "
|
|
12
|
+
import { Resizable } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -39,7 +39,7 @@ import { Resizable } from "@thebase/ui";
|
|
|
39
39
|
| `Resizable` | `onChange` | `Function` | optional |
|
|
40
40
|
| `Resizable` | `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
|
|
|
@@ -53,7 +53,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
53
53
|
|
|
54
54
|
## Options and attributes
|
|
55
55
|
|
|
56
|
-
See `dist/
|
|
56
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
57
57
|
|
|
58
58
|
## Methods
|
|
59
59
|
|
|
@@ -61,11 +61,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
61
61
|
|
|
62
62
|
## Events
|
|
63
63
|
|
|
64
|
-
Interactive components emit documented `
|
|
64
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
65
65
|
|
|
66
66
|
## CSS variables
|
|
67
67
|
|
|
68
|
-
The component inherits
|
|
68
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
69
69
|
|
|
70
70
|
## Accessibility behavior
|
|
71
71
|
|
|
@@ -77,7 +77,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
77
77
|
|
|
78
78
|
## Browser support
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
81
81
|
|
|
82
82
|
## Test checklist
|
|
83
83
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="scroll-area"` for a CDN-ready scroll area 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 { ScrollArea } from "
|
|
12
|
+
import { ScrollArea } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -43,7 +43,7 @@ import { ScrollArea } from "@thebase/ui";
|
|
|
43
43
|
| --- | --- | --- | --- |
|
|
44
44
|
| `ScrollArea` | `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
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Select, SelectContent, SelectItem, SelectTrigger } from "
|
|
6
|
+
import { Select, SelectContent, SelectItem, SelectTrigger } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -46,7 +46,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
|
|
|
46
46
|
| `SelectItem` | `className` | `String` | optional |
|
|
47
47
|
| `SelectTrigger` | `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
|
|
|
@@ -5,7 +5,7 @@ Visual divider with separator semantics.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Separator } from "
|
|
8
|
+
import { Separator } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -30,7 +30,7 @@ import { Separator } from "@thebase/ui";
|
|
|
30
30
|
| `Separator` | `orientation` | `String` | optional |
|
|
31
31
|
| `Separator` | `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
|
|
package/docs/components/sheet.md
CHANGED
|
@@ -5,7 +5,7 @@ Use `b-ui="sheet"` for offcanvas panels.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "
|
|
8
|
+
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -38,7 +38,7 @@ import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
|
|
|
38
38
|
| `SheetTitle` | `className` | `String` | optional |
|
|
39
39
|
| `SheetTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
`SheetContent` also accepts `side` (`"left"` or the default right), falling back to the `side` prop on the parent `Sheet` when unset. It is driven by a real `bootstrap.Offcanvas` instance bound to its own root, rendered as `.offcanvas.offcanvas-end` by default or `.offcanvas.offcanvas-start` for `side="left"`, permanently mounted rather than added/removed from the DOM. Escape, backdrop click, and the Tab focus trap are
|
|
41
|
+
`SheetContent` also accepts `side` (`"left"` or the default right), falling back to the `side` prop on the parent `Sheet` when unset. It is driven by a real `bootstrap.Offcanvas` instance bound to its own root, rendered as `.offcanvas.offcanvas-end` by default or `.offcanvas.offcanvas-start` for `side="left"`, permanently mounted rather than added/removed from the DOM. Escape, backdrop click, and the Tab focus trap are the built-in native Offcanvas behavior; focus-restore-to-trigger on close is kept by hand (not native to Offcanvas). `SheetClose` closes via `data-bs-dismiss="offcanvas"`. 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 { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
|
|
|
53
53
|
|
|
54
54
|
At mount, `[b-ui="sheet"]` itself becomes the `.offcanvas.offcanvas-end` element (`.offcanvas.offcanvas-start` when `b-att-side="left"`, `tabindex="-1"`) driven by a real `bootstrap.Offcanvas` instance (`backdrop: true, keyboard: true, scroll: false`); `[b-sheet-panel]` stays as a plain cosmetic content box inside it. `[b-sheet-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
58
|
Options: `b-att-side="left"` moves the sheet panel to the left (`offcanvas-start` instead of `offcanvas-end`). The sheet closes on backdrop click, close button (`data-bs-dismiss="offcanvas"`), or Escape — all native `bootstrap.Offcanvas` behavior — and traps Tab focus while open, restoring focus to the trigger on close (kept by hand — not native to Offcanvas).
|
package/docs/components/shell.md
CHANGED
|
@@ -14,8 +14,8 @@ import {
|
|
|
14
14
|
ShellSidebar,
|
|
15
15
|
ShellSidebarHeader,
|
|
16
16
|
ShellUserMenu,
|
|
17
|
-
} from "
|
|
18
|
-
import { SidebarClose, SidebarTrigger } from "
|
|
17
|
+
} from "nodexui";
|
|
18
|
+
import { SidebarClose, SidebarTrigger } from "nodexui";
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
```base-ui
|
|
@@ -51,7 +51,7 @@ Four cross-cutting concerns are opt-in via props instead of baked into the layou
|
|
|
51
51
|
|
|
52
52
|
- `authState` — an arbitrary object (e.g. `{ username, onLogout }`), exposed to descendants via `env.shell.authState`. `ShellUserMenu` reads it directly and renders nothing when it's absent; pass its own default slot to fully customize the markup instead of the built-in username/logout row.
|
|
53
53
|
- `toast`/`onToastOpenChange` — when `toast` is set (`{ variant, message, delay, persistent, actionLabel, onAction }`), `Shell` renders a built-in `Toast` bound to it, positioned as a fixed top-right overlay (`.b-shell-toast`) so it survives regardless of where `ShellContent` scrolls. Useful for a single app-wide notification channel (e.g. a message-bus toast) that should outlive route changes.
|
|
54
|
-
- `notificationPage`/`pwa` — each
|
|
54
|
+
- `notificationPage`/`pwa` — each a Nodex component class, mounted once at the shell root (`<t t-component="..."/>`) alongside the sidebar, same shape as a consumer app's own `PWAInstallDrawer`. `Shell` doesn't know or care what they render — they're expected to manage their own trigger/visibility.
|
|
55
55
|
|
|
56
56
|
| Component | Prop | Type | Notes |
|
|
57
57
|
| --- | --- | --- | --- |
|
|
@@ -64,8 +64,8 @@ Four cross-cutting concerns are opt-in via props instead of baked into the layou
|
|
|
64
64
|
| `Shell` | `authState` | `Object` | optional, exposed to descendants via `env.shell.authState` |
|
|
65
65
|
| `Shell` | `toast` | `Object` | optional, `{ variant, message, delay, persistent, actionLabel, onAction }` |
|
|
66
66
|
| `Shell` | `onToastOpenChange` | `Function` | optional, called with `false` when the built-in toast is dismissed |
|
|
67
|
-
| `Shell` | `notificationPage` | `Function` | optional,
|
|
68
|
-
| `Shell` | `pwa` | `Function` | optional,
|
|
67
|
+
| `Shell` | `notificationPage` | `Function` | optional, a Nodex component class mounted at the shell root |
|
|
68
|
+
| `Shell` | `pwa` | `Function` | optional, a Nodex component class mounted at the shell root |
|
|
69
69
|
| `Shell` | `className` | `String` | optional |
|
|
70
70
|
| `ShellSidebar` | `className` | `String` | optional |
|
|
71
71
|
| `ShellSidebarHeader` | `className` | `String` | optional |
|
|
@@ -76,7 +76,7 @@ Four cross-cutting concerns are opt-in via props instead of baked into the layou
|
|
|
76
76
|
| `ShellContent` | `className` | `String` | optional |
|
|
77
77
|
| `ShellUserMenu` | `className` | `String` | optional |
|
|
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
|
|
|
@@ -93,4 +93,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
93
93
|
</div>
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
State is reflected through `b-att-collapsed="true|false"`. Events: `
|
|
96
|
+
State is reflected through `b-att-collapsed="true|false"`. Events: `nodexui:collapse`, `nodexui:expand`.
|
|
@@ -5,7 +5,7 @@ Use `b-ui="sidebar"` for app navigation panels. The component mirrors shadcn's c
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "
|
|
8
|
+
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
`Sidebar` owns the open/collapsed state itself (`defaultOpen`/`open`/`onOpenChange`) and lays out its `SidebarContent` panel next to `SidebarInset` as siblings — do **not** wrap it in a separate `SidebarProvider`, that duplicates the layout/state and breaks rendering. `SidebarHeader`, the nav `SidebarGroup`s, and `SidebarFooter` all nest *inside* `SidebarContent` (which renders the actual bordered/fixed-width panel), not beside it.
|
|
@@ -234,7 +234,7 @@ Reusable nav-content primitives, extracted from the recurring group/item shapes
|
|
|
234
234
|
| `SidebarMenuSubButton` | `href` | `String` | optional |
|
|
235
235
|
| `SidebarMenuSubItem` | `className` | `String` | optional |
|
|
236
236
|
|
|
237
|
-
See [
|
|
237
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
238
238
|
|
|
239
239
|
## Static component
|
|
240
240
|
|
|
@@ -305,6 +305,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
305
305
|
</div>
|
|
306
306
|
```
|
|
307
307
|
|
|
308
|
-
State is reflected through `b-att-state="open|closed"`. Events: `
|
|
308
|
+
State is reflected through `b-att-state="open|closed"`. Events: `nodexui:open`, `nodexui:close`.
|
|
309
309
|
|
|
310
310
|
Below 992px the sidebar is an off-canvas drawer closed by navigation; the `Shell` and `Sidebar` CSS and `matchMedia` checks share this breakpoint.
|
|
@@ -5,7 +5,7 @@ Loading placeholder for content that is not ready yet.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Skeleton } from "
|
|
8
|
+
import { Skeleton } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -29,7 +29,7 @@ import { Skeleton } from "@thebase/ui";
|
|
|
29
29
|
| `Skeleton` | `shape` | `String` | optional |
|
|
30
30
|
| `Skeleton` | `className` | `String` | optional |
|
|
31
31
|
|
|
32
|
-
See [
|
|
32
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
33
33
|
|
|
34
34
|
## Static component
|
|
35
35
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Slider } from "
|
|
6
|
+
import { Slider } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -22,7 +22,7 @@ import { Slider } from "@thebase/ui";
|
|
|
22
22
|
| `Slider` | `className` | `String` | optional |
|
|
23
23
|
| `Slider` | `onChange` | `Function` | optional |
|
|
24
24
|
|
|
25
|
-
See [
|
|
25
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
26
26
|
|
|
27
27
|
## Static component
|
|
28
28
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
# Spinner
|
|
2
2
|
|
|
3
|
-
Inline loading indicator using
|
|
3
|
+
Inline loading indicator using built-in spinner classes.
|
|
4
4
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Spinner } from "
|
|
8
|
+
import { Spinner } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -24,7 +24,7 @@ import { Spinner } from "@thebase/ui";
|
|
|
24
24
|
| `Spinner` | `label` | `String` | optional |
|
|
25
25
|
| `Spinner` | `className` | `String` | optional |
|
|
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
|
|
|
@@ -35,4 +35,4 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
35
35
|
|
|
36
36
|
Options: `b-att-type="border|grow"`, `b-att-label`.
|
|
37
37
|
|
|
38
|
-
Accessibility:
|
|
38
|
+
Accessibility: Nodex UI adds `role="status"` and hidden loading text.
|
|
@@ -5,7 +5,7 @@ Checkbox-backed switch control using `role="switch"`.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Switch } from "
|
|
8
|
+
import { Switch } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -32,7 +32,7 @@ import { Switch } from "@thebase/ui";
|
|
|
32
32
|
| `Switch` | `className` | `String` | optional |
|
|
33
33
|
| `Switch` | `onChange` | `Function` | 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/table.md
CHANGED
|
@@ -5,7 +5,7 @@ Native table styling for static or server-rendered data.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Table } from "
|
|
8
|
+
import { Table } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -50,7 +50,7 @@ import { Table } from "@thebase/ui";
|
|
|
50
50
|
| `Table` | `hover` | `Boolean` | optional |
|
|
51
51
|
| `Table` | `className` | `String` | optional |
|
|
52
52
|
|
|
53
|
-
See [
|
|
53
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
54
54
|
|
|
55
55
|
## Static component
|
|
56
56
|
|
package/docs/components/tabs.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Tabs
|
|
2
2
|
|
|
3
|
-
Matches [shadcn/
|
|
3
|
+
Matches [shadcn/the built-in Tabs](https://ui.shadcn.com/docs/components/base/tabs): `TabsList` renders
|
|
4
4
|
as a segmented pill control on a muted background by default, or a transparent underline list via
|
|
5
5
|
`variant="'line'"`. `TabContent`/`b-panel` render as bare panels with no default border or
|
|
6
6
|
background — a bordered/padded look is opt-in via `className` on `TabsContainer` (or the
|
|
@@ -9,7 +9,7 @@ consumer's own wrapper), not baked into every panel.
|
|
|
9
9
|
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import { Tabs, TabContent, TabsContainer, TabsList, TabTrigger } from "
|
|
12
|
+
import { Tabs, TabContent, TabsContainer, TabsList, TabTrigger } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -57,10 +57,10 @@ The `"line"` variant swaps the segmented pill for a transparent, underline-drive
|
|
|
57
57
|
|
|
58
58
|
ArrowLeft/ArrowRight (or ArrowUp/ArrowDown when vertical) move focus and selection between
|
|
59
59
|
`TabTrigger`s, same as the static API — each trigger's own live `bootstrap.Tab` instance handles
|
|
60
|
-
this natively. See [
|
|
61
|
-
to load
|
|
60
|
+
this natively. See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
61
|
+
to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
62
62
|
|
|
63
|
-
Each `TabTrigger` (`b-tab` button / pure Base `TabTrigger`'s own root) is driven by a live `bootstrap.Tab` instance: it always carries `role="tab"` plus a `data-bs-target="#<id>"` pointing at its linked pane, and
|
|
63
|
+
Each `TabTrigger` (`b-tab` button / pure Base `TabTrigger`'s own root) is driven by a live `bootstrap.Tab` instance: it always carries `role="tab"` plus a `data-bs-target="#<id>"` pointing at its linked pane, and the library itself manages the pane's `tab-pane fade`/`show`/`active` classes and the trigger's `active`/`aria-selected`/`tabindex` across switches — don't rely on node removal to detect the active panel; every `TabContent`/`b-panel` stays mounted permanently (`role="tabpanel"`, `tab-pane fade` + `show active` on the initially active one).
|
|
64
64
|
|
|
65
65
|
## Static component
|
|
66
66
|
|
|
@@ -78,6 +78,6 @@ of the default segmented pill. `orientation` is a pure Base-only prop — the st
|
|
|
78
78
|
`[b-tab]`/`[b-panel]` flat as siblings with no `TabsList`/`TabsContainer`-equivalent grouping
|
|
79
79
|
wrapper to flip into a row/column pair.
|
|
80
80
|
|
|
81
|
-
Events: `
|
|
81
|
+
Events: `nodexui:change` with `{ value }`.
|
|
82
82
|
|
|
83
83
|
Keyboard: Left and Right arrows move between tabs.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Text Editor
|
|
2
2
|
|
|
3
|
-
Use `b-ui="text-editor"` (or the pure Base `TextEditor` component) for WYSIWYG rich-text editing backed by [Milkdown](https://milkdown.dev/) (ProseMirror + a Markdown-aware schema, via `@milkdown/kit`). The editor runtime is lazy-loaded from `dist/runtime/milkdown/milkdown-text-editor.js`, so the default
|
|
3
|
+
Use `b-ui="text-editor"` (or the pure Base `TextEditor` component) for WYSIWYG rich-text editing backed by [Milkdown](https://milkdown.dev/) (ProseMirror + a Markdown-aware schema, via `@milkdown/kit`). The editor runtime is lazy-loaded from `dist/runtime/milkdown/milkdown-text-editor.js`, so the default Nodex UI bundle stays small until an editor is actually mounted. `content`/`onChange` still deal in HTML — Milkdown's document is converted to/from HTML at the boundary, so nothing in this contract changes even though the engine now understands Markdown natively (e.g. typing a leading `#`, `**bold**`, or `1.` auto-formats as you type).
|
|
4
4
|
|
|
5
5
|
Collaborative mode (`collaborative` / `b-att-collaborative`) is optional and off by default; toggle it per editor without changing anything else. It runs on Yjs + `@milkdown/plugin-collab` over one of two providers, picked with `provider` / `b-att-provider`:
|
|
6
6
|
|
|
@@ -12,7 +12,7 @@ Collaboration actually turns on when `collaborative` is explicitly truthy, **or*
|
|
|
12
12
|
## Base Component
|
|
13
13
|
|
|
14
14
|
```js
|
|
15
|
-
import { TextEditor } from "
|
|
15
|
+
import { TextEditor } from "nodexui";
|
|
16
16
|
```
|
|
17
17
|
|
|
18
18
|
```base-ui
|
|
@@ -89,13 +89,13 @@ Or the same session hosted on an external websocket backend instead of peer-to-p
|
|
|
89
89
|
- `b-att-room` / `room` — document/room name for collaborative sessions (defaults to `b-text-editor`); shared across peers for y-webrtc, or used as the document name on the y-websocket backend.
|
|
90
90
|
- `b-att-url` / `url` — y-websocket server URL (e.g. `wss://your-backend.example.com/mkdn`), required when `provider` is `"websocket"`. Ignored for `"webrtc"`.
|
|
91
91
|
- `b-att-password` / `password` — optional y-webrtc room password. Ignored for `"websocket"`.
|
|
92
|
-
- `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for
|
|
92
|
+
- `b-att-signaling` / `signaling` — comma-separated signaling URLs for the static API, or an array prop for Nodex. y-webrtc only.
|
|
93
93
|
|
|
94
94
|
## Events
|
|
95
95
|
|
|
96
|
-
- `
|
|
97
|
-
- `
|
|
98
|
-
- `
|
|
96
|
+
- `nodexui:text-editor-ready` — fired after the Milkdown editor mounts (`detail.collaborative`, `detail.room`).
|
|
97
|
+
- `nodexui:text-editor-change` — fired whenever the rich-text document emits a new HTML string (`detail.html`, `detail.previousHtml`).
|
|
98
|
+
- `nodexui:text-editor-error` — fired when fetching or editor mounting fails (`detail.error`).
|
|
99
99
|
|
|
100
100
|
## Methods
|
|
101
101
|
|