@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
|
@@ -4,12 +4,12 @@ Use `b-ui="calendar"` for a CDN-ready calendar 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 { Calendar } from "
|
|
12
|
+
import { Calendar } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -26,7 +26,7 @@ import { Calendar } from "@thebase/ui";
|
|
|
26
26
|
| `Calendar` | `className` | `String` | optional |
|
|
27
27
|
| `Calendar` | `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/card.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
|
-
import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "
|
|
6
|
+
import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "nodexui";
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
```base-ui
|
|
@@ -32,7 +32,7 @@ import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } fr
|
|
|
32
32
|
</div>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
`Card`, `CardHeader`, `CardBody`, `CardFooter`, `CardTitle`, and `CardDescription` each accept `className` (`String`, optional) and render their default slot as-is. `Card` additionally accepts `tag` (`String`, optional, default `"div"`) to render a different semantic root element, e.g. `tag="'aside'"` for complementary content. See [
|
|
35
|
+
`Card`, `CardHeader`, `CardBody`, `CardFooter`, `CardTitle`, and `CardDescription` each accept `className` (`String`, optional) and render their default slot as-is. `Card` additionally accepts `tag` (`String`, optional, default `"div"`) to render a different semantic root element, e.g. `tag="'aside'"` for complementary content. 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
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="carousel"` for a CDN-ready carousel 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 { Carousel, CarouselNext, CarouselPrevious, CarouselSlide } from "
|
|
12
|
+
import { Carousel, CarouselNext, CarouselPrevious, CarouselSlide } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -67,9 +67,9 @@ import { Carousel, CarouselNext, CarouselPrevious, CarouselSlide } from "@thebas
|
|
|
67
67
|
| `CarouselSlide` | `index` | `Number` | required |
|
|
68
68
|
| `CarouselSlide` | `className` | `String` | optional |
|
|
69
69
|
|
|
70
|
-
See [
|
|
70
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
71
71
|
|
|
72
|
-
The whole group shares a single live `bootstrap.Carousel` instance, owned by the root `Carousel`/`b-ui="carousel"` element: the root always carries classes `carousel slide` and wraps its slides in a `.carousel-inner` container, each `CarouselSlide`/`b-carousel-slide` renders permanently as a `.carousel-item` (exactly one carrying `.active` at a time) — don't rely on node removal to detect the active slide. `CarouselPrevious`/`CarouselNext` (and the static `[b-carousel-prev]`/`[b-carousel-next]` buttons) call `.prev()`/`.next()` on that shared instance directly;
|
|
72
|
+
The whole group shares a single live `bootstrap.Carousel` instance, owned by the root `Carousel`/`b-ui="carousel"` element: the root always carries classes `carousel slide` and wraps its slides in a `.carousel-inner` container, each `CarouselSlide`/`b-carousel-slide` renders permanently as a `.carousel-item` (exactly one carrying `.active` at a time) — don't rely on node removal to detect the active slide. `CarouselPrevious`/`CarouselNext` (and the static `[b-carousel-prev]`/`[b-carousel-next]` buttons) call `.prev()`/`.next()` on that shared instance directly; the built-in `wrap: true` handles wrap-around at both ends and `interval: false` keeps autoplay off.
|
|
73
73
|
|
|
74
74
|
## Static component
|
|
75
75
|
|
|
@@ -82,7 +82,7 @@ The whole group shares a single live `bootstrap.Carousel` instance, owned by the
|
|
|
82
82
|
</div>
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
The static adapter builds the `.carousel-inner`/`.carousel-item` wrapper structure at mount time from the flat authored `[b-carousel-slide]` markup (no wrapper needed in the HTML you author) and syncs `b-att-state` (`active`/`inactive`) on each slide from
|
|
85
|
+
The static adapter builds the `.carousel-inner`/`.carousel-item` wrapper structure at mount time from the flat authored `[b-carousel-slide]` markup (no wrapper needed in the HTML you author) and syncs `b-att-state` (`active`/`inactive`) on each slide from the built-in `slid.bs.carousel` event.
|
|
86
86
|
|
|
87
87
|
## Enhanced usage
|
|
88
88
|
|
|
@@ -90,7 +90,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
90
90
|
|
|
91
91
|
## Options and attributes
|
|
92
92
|
|
|
93
|
-
See `dist/
|
|
93
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
94
94
|
|
|
95
95
|
## Methods
|
|
96
96
|
|
|
@@ -98,11 +98,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
98
98
|
|
|
99
99
|
## Events
|
|
100
100
|
|
|
101
|
-
Interactive components emit documented `
|
|
101
|
+
Interactive components emit documented `nodexui:*` events from their root element. `nodexui:change` fires with `{ index }` off the real `slid.bs.carousel` event.
|
|
102
102
|
|
|
103
103
|
## CSS variables
|
|
104
104
|
|
|
105
|
-
The component inherits
|
|
105
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
106
106
|
|
|
107
107
|
## Accessibility behavior
|
|
108
108
|
|
|
@@ -114,7 +114,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
114
114
|
|
|
115
115
|
## Browser support
|
|
116
116
|
|
|
117
|
-
|
|
117
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
118
118
|
|
|
119
119
|
## Test checklist
|
|
120
120
|
|
package/docs/components/chart.md
CHANGED
|
@@ -4,12 +4,12 @@ Use `b-ui="chart"` for a CDN-ready chart component styled after the current shad
|
|
|
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 static charts. If you provide a `canvas` and a global `window.Chart`, Nodex UI will initialize Chart.js v3 from JSON config without bundling Chart.js into Nodex UI.
|
|
8
8
|
|
|
9
9
|
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import { Chart } from "
|
|
12
|
+
import { Chart } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -50,7 +50,7 @@ import { Chart } from "@thebase/ui";
|
|
|
50
50
|
| `Chart` | `variant` | `String` | optional |
|
|
51
51
|
| `Chart` | `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
|
|
|
@@ -98,7 +98,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
98
98
|
|
|
99
99
|
## Options and attributes
|
|
100
100
|
|
|
101
|
-
See `dist/
|
|
101
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
102
102
|
|
|
103
103
|
## Methods
|
|
104
104
|
|
|
@@ -106,11 +106,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
106
106
|
|
|
107
107
|
## Events
|
|
108
108
|
|
|
109
|
-
Interactive components emit documented `
|
|
109
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
110
110
|
|
|
111
111
|
## CSS variables
|
|
112
112
|
|
|
113
|
-
The component inherits
|
|
113
|
+
The component inherits Nodex UI semantic tokens plus shadcn-compatible chart tokens: `--b-chart-1` through `--b-chart-5`. Area-card examples also use `--b-chart-height`, `--b-chart-grid`, `b-chart-area`, `b-chart-line`, `b-chart-axis`, `b-chart-footer`, `b-chart-trend`, and `b-chart-range`.
|
|
114
114
|
|
|
115
115
|
The plot (`b-chart-plot`) has a fixed height of `--b-chart-height` (default `var(--b50)`), and each `b-att-value` column draws its bar from the bottom as a percentage of the largest value in the chart. Override `--b-chart-height` on the chart element to make it taller or shorter; the bar height needs this definite plot height to resolve.
|
|
116
116
|
|
|
@@ -124,7 +124,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
124
124
|
|
|
125
125
|
## Browser support
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
128
128
|
|
|
129
129
|
## Test checklist
|
|
130
130
|
|
|
@@ -5,7 +5,7 @@ Native checkbox input or label wrapper.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Checkbox } from "
|
|
8
|
+
import { Checkbox } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -22,7 +22,7 @@ import { Checkbox } from "@thebase/ui";
|
|
|
22
22
|
| `Checkbox` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
23
23
|
| `Checkbox` | `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,9 +1,9 @@
|
|
|
1
1
|
# Clipboard Button
|
|
2
2
|
|
|
3
|
-
Use `b-ui="clipboard-button"` on a native button to copy specific data to the clipboard. Built on the same `variant`/`size` classes and
|
|
3
|
+
Use `b-ui="clipboard-button"` on a native button to copy specific data to the clipboard. Built on the same `variant`/`size` classes and built-in `.btn` styling as [Button](button.md), plus a copy/check icon that swaps back after a short delay.
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
|
-
<button b-ui="clipboard-button" b-att-value="npm install
|
|
6
|
+
<button b-ui="clipboard-button" b-att-value="npm install nodexui">Copy install command</button>
|
|
7
7
|
<button b-ui="clipboard-button" b-att-variant="outline" b-att-size="sm" b-att-target="#snippet">Copy</button>
|
|
8
8
|
<pre id="snippet">const x = 1;</pre>
|
|
9
9
|
```
|
|
@@ -11,11 +11,11 @@ Use `b-ui="clipboard-button"` on a native button to copy specific data to the cl
|
|
|
11
11
|
## Base component
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
|
-
import { ClipboardButton } from "
|
|
14
|
+
import { ClipboardButton } from "nodexui";
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
```base-ui
|
|
18
|
-
<ClipboardButton value="'npm install
|
|
18
|
+
<ClipboardButton value="'npm install nodexui'" label="'Copy install command'"/>
|
|
19
19
|
<ClipboardButton getValue="() => this.currentSnippet" variant="'outline'" size="'sm'" aria-label="'Copy snippet'"/>
|
|
20
20
|
```
|
|
21
21
|
|
|
@@ -35,12 +35,12 @@ import { ClipboardButton } from "@thebase/ui";
|
|
|
35
35
|
| `onCopy` | `Function` | called with `{ value, event }` after a successful copy |
|
|
36
36
|
| `onCopyError` | `Function` | called with `{ error, event }` when both the Clipboard API and the fallback fail |
|
|
37
37
|
|
|
38
|
-
Also accepts default slot content instead of `label`. See [
|
|
38
|
+
Also accepts default slot content instead of `label`. See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
39
39
|
|
|
40
40
|
## Static component
|
|
41
41
|
|
|
42
42
|
```base-ui
|
|
43
|
-
<button b-ui="clipboard-button" b-att-value="npm install
|
|
43
|
+
<button b-ui="clipboard-button" b-att-value="npm install nodexui">Copy install command</button>
|
|
44
44
|
<button b-ui="clipboard-button" b-att-variant="outline" b-att-size="sm" b-att-icon="clipboard">Copy</button>
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -50,7 +50,7 @@ Value resolution (first match wins): `b-att-value` (a literal string), `b-att-ta
|
|
|
50
50
|
|
|
51
51
|
Other attributes: `b-att-icon` (default `copy`), `b-att-copied-icon` (default `check`), `b-att-reset-delay` (ms before the icon reverts, default `2000`).
|
|
52
52
|
|
|
53
|
-
Events: `
|
|
53
|
+
Events: `nodexui:clipboard-copy` (`detail: { value }`), `nodexui:clipboard-copy-error` (`detail: { error }`) — both bubble, so a page can listen once on an ancestor (e.g. to show a toast).
|
|
54
54
|
|
|
55
55
|
Copying prefers `navigator.clipboard.writeText`, falling back to a hidden `<textarea>` + `document.execCommand("copy")` when the async Clipboard API is unavailable (insecure context, permission denial, older browser) — it never silently no-ops.
|
|
56
56
|
|
|
@@ -5,7 +5,7 @@ Use `b-ui="collapsible"` for a single disclosure region.
|
|
|
5
5
|
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
|
-
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "
|
|
8
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "nodexui";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```base-ui
|
|
@@ -28,7 +28,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@thebase/ui
|
|
|
28
28
|
| `CollapsibleContent` | `className` | `String` | optional |
|
|
29
29
|
| `CollapsibleTrigger` | `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
|
|
|
@@ -39,6 +39,6 @@ See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how
|
|
|
39
39
|
</div>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
State is reflected through `b-att-state="open|closed"` and `aria-expanded`. Events: `
|
|
42
|
+
State is reflected through `b-att-state="open|closed"` and `aria-expanded`. Events: `nodexui:change`.
|
|
43
43
|
|
|
44
|
-
The panel (`b-collapsible-panel` / `CollapsibleContent`'s root) is driven by a live `bootstrap.Collapse` instance: it always carries the
|
|
44
|
+
The panel (`b-collapsible-panel` / `CollapsibleContent`'s root) is driven by a 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.
|
|
@@ -4,12 +4,12 @@ Use `b-ui="combobox"` for a CDN-ready combobox 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 { Combobox } from "
|
|
12
|
+
import { Combobox } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -44,7 +44,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
|
|
|
44
44
|
| `Combobox` | `onChange` | `Function` | optional |
|
|
45
45
|
| `Combobox` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid`, `disabled` | `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`. |
|
|
46
46
|
|
|
47
|
-
See [
|
|
47
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
48
48
|
|
|
49
49
|
## Static component
|
|
50
50
|
|
|
@@ -58,7 +58,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
58
58
|
|
|
59
59
|
## Options and attributes
|
|
60
60
|
|
|
61
|
-
See `dist/
|
|
61
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
62
62
|
|
|
63
63
|
## Methods
|
|
64
64
|
|
|
@@ -66,11 +66,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
66
66
|
|
|
67
67
|
## Events
|
|
68
68
|
|
|
69
|
-
Interactive components emit documented `
|
|
69
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
70
70
|
|
|
71
71
|
## CSS variables
|
|
72
72
|
|
|
73
|
-
The component inherits
|
|
73
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
74
74
|
|
|
75
75
|
## Accessibility behavior
|
|
76
76
|
|
|
@@ -82,7 +82,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
82
82
|
|
|
83
83
|
## Browser support
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
86
86
|
|
|
87
87
|
## Test checklist
|
|
88
88
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="command"` for a CDN-ready command 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 { Command } from "
|
|
12
|
+
import { Command } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -36,7 +36,7 @@ import { Command } from "@thebase/ui";
|
|
|
36
36
|
| `Command` | `className` | `String` | optional |
|
|
37
37
|
| `Command` | `onSelect` | `Function` | optional |
|
|
38
38
|
|
|
39
|
-
See [
|
|
39
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
40
40
|
|
|
41
41
|
## Static component
|
|
42
42
|
|
|
@@ -50,7 +50,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
50
50
|
|
|
51
51
|
## Options and attributes
|
|
52
52
|
|
|
53
|
-
See `dist/
|
|
53
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
54
54
|
|
|
55
55
|
## Methods
|
|
56
56
|
|
|
@@ -58,11 +58,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
58
58
|
|
|
59
59
|
## Events
|
|
60
60
|
|
|
61
|
-
Interactive components emit documented `
|
|
61
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
62
62
|
|
|
63
63
|
## CSS variables
|
|
64
64
|
|
|
65
|
-
The component inherits
|
|
65
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
66
66
|
|
|
67
67
|
## Accessibility behavior
|
|
68
68
|
|
|
@@ -74,7 +74,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
74
74
|
|
|
75
75
|
## Browser support
|
|
76
76
|
|
|
77
|
-
|
|
77
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
78
78
|
|
|
79
79
|
## Test checklist
|
|
80
80
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="context-menu"` for a CDN-ready context menu 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 { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "
|
|
12
|
+
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -38,7 +38,7 @@ import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger }
|
|
|
38
38
|
| `ContextMenuItem` | `onClick` | `Function` | optional |
|
|
39
39
|
| `ContextMenuTrigger` | `className` | `String` | optional |
|
|
40
40
|
|
|
41
|
-
See [
|
|
41
|
+
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
|
|
|
@@ -52,7 +52,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
52
52
|
|
|
53
53
|
## Options and attributes
|
|
54
54
|
|
|
55
|
-
See `dist/
|
|
55
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
56
56
|
|
|
57
57
|
## Methods
|
|
58
58
|
|
|
@@ -60,11 +60,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
60
60
|
|
|
61
61
|
## Events
|
|
62
62
|
|
|
63
|
-
Interactive components emit documented `
|
|
63
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
64
64
|
|
|
65
65
|
## CSS variables
|
|
66
66
|
|
|
67
|
-
The component inherits
|
|
67
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
68
68
|
|
|
69
69
|
## Accessibility behavior
|
|
70
70
|
|
|
@@ -76,7 +76,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
76
76
|
|
|
77
77
|
## Browser support
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
80
80
|
|
|
81
81
|
## Test checklist
|
|
82
82
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="data-table"` for a CDN-ready data table 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 { DataTable } from "
|
|
12
|
+
import { DataTable } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -41,7 +41,7 @@ import { DataTable } from "@thebase/ui";
|
|
|
41
41
|
|
|
42
42
|
### Custom cell renderers
|
|
43
43
|
|
|
44
|
-
Set `column.component` to
|
|
44
|
+
Set `column.component` to a Nodex `Component` class to render that column's cells with it instead of plain text. The component receives `{ row, column, value }` as props by default, or a custom prop shape from `column.componentProps(row, column)`:
|
|
45
45
|
|
|
46
46
|
```js
|
|
47
47
|
class StatusBadge extends Component {
|
|
@@ -64,7 +64,7 @@ The table viewport always scrolls horizontally (`overflow: auto`) once its conte
|
|
|
64
64
|
|
|
65
65
|
Below 640px width, the table view is replaced by a stacked one-column card ("kanban") view — each row becomes a card showing every visible column as a label/value pair, with selection and row actions preserved. This is CSS-driven (`.b-data-table__viewport` hides, `.b-data-table__cards` shows), so it applies to both the Base component and the static `b-ui="data-table"` markup automatically.
|
|
66
66
|
|
|
67
|
-
See [
|
|
67
|
+
See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
68
68
|
|
|
69
69
|
## Static component
|
|
70
70
|
|
|
@@ -78,7 +78,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
78
78
|
|
|
79
79
|
## Options and attributes
|
|
80
80
|
|
|
81
|
-
See `dist/
|
|
81
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
82
82
|
|
|
83
83
|
## Methods
|
|
84
84
|
|
|
@@ -86,11 +86,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
86
86
|
|
|
87
87
|
## Events
|
|
88
88
|
|
|
89
|
-
Interactive components emit documented `
|
|
89
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
90
90
|
|
|
91
91
|
## CSS variables
|
|
92
92
|
|
|
93
|
-
The component inherits
|
|
93
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
94
94
|
|
|
95
95
|
## Accessibility behavior
|
|
96
96
|
|
|
@@ -103,7 +103,7 @@ The component preserves authored semantic HTML and adds ARIA roles or state attr
|
|
|
103
103
|
Row actions render as an `ellipsis` icon `Button` per row that opens a dropdown menu — pass `rowActions` with an `onSelect` handler per action, and `onRowAction` for a single fallback handler.
|
|
104
104
|
|
|
105
105
|
```js
|
|
106
|
-
import { DataTable } from "
|
|
106
|
+
import { DataTable } from "nodexui";
|
|
107
107
|
|
|
108
108
|
const columns = [
|
|
109
109
|
{ key: "card", label: "Card", filterable: true },
|
|
@@ -150,7 +150,7 @@ Pass custom buttons into the toolbar via the `toolbarActions` slot — they rend
|
|
|
150
150
|
|
|
151
151
|
## Browser support
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
154
154
|
|
|
155
155
|
## Test checklist
|
|
156
156
|
|
|
@@ -4,12 +4,12 @@ Use `b-ui="date-picker"` for a CDN-ready date picker 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 { DatePicker } from "
|
|
12
|
+
import { DatePicker } from "nodexui";
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```base-ui
|
|
@@ -37,7 +37,7 @@ Set `useTip="1"` to move `supportingText` into a tooltip: a question-mark icon a
|
|
|
37
37
|
| `DatePicker` | `onChange` | `Function` | optional |
|
|
38
38
|
| `DatePicker` | `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`. |
|
|
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
|
|
|
@@ -51,7 +51,7 @@ Call `thebase.mount(element)` or rely on `thebase.mountAll()` after the script l
|
|
|
51
51
|
|
|
52
52
|
## Options and attributes
|
|
53
53
|
|
|
54
|
-
See `dist/
|
|
54
|
+
See `dist/nodexui.registry.json` for the supported attribute list.
|
|
55
55
|
|
|
56
56
|
## Methods
|
|
57
57
|
|
|
@@ -59,11 +59,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
59
59
|
|
|
60
60
|
## Events
|
|
61
61
|
|
|
62
|
-
Interactive components emit documented `
|
|
62
|
+
Interactive components emit documented `nodexui:*` events from their root element. Static components do not emit events.
|
|
63
63
|
|
|
64
64
|
## CSS variables
|
|
65
65
|
|
|
66
|
-
The component inherits
|
|
66
|
+
The component inherits Nodex UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
67
67
|
|
|
68
68
|
## Accessibility behavior
|
|
69
69
|
|
|
@@ -75,7 +75,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
75
75
|
|
|
76
76
|
## Browser support
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
Nodex UI targets modern evergreen browsers that support ES modules, CSS variables.
|
|
79
79
|
|
|
80
80
|
## Test checklist
|
|
81
81
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import {
|
|
7
7
|
Dialog, DialogClose, DialogContent, DialogDescription,
|
|
8
8
|
DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
|
|
9
|
-
} from "
|
|
9
|
+
} from "nodexui";
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
```base-ui
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
| `defaultOpen` | `Boolean` | initial state when uncontrolled |
|
|
32
32
|
| `onOpenChange` | `Function` | called with the new open boolean |
|
|
33
33
|
|
|
34
|
-
`DialogContent` also accepts `showCloseButton` (default `true`) to render the shadcn-style top-right close control; pass `false` to hide it. `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, and `DialogClose` each accept `className` and render default slot content; they read open/close behavior from the parent `Dialog` automatically. `DialogContent` is driven by a real `bootstrap.Modal` instance bound to its own root (rendered as `.modal.fade > .modal-dialog > .modal-content`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, the built-in close control, and `DialogClose` (both wired via `data-bs-dismiss="modal"`) all close the dialog, and the Tab focus trap plus initial-focus/focus-restore on open/close are
|
|
34
|
+
`DialogContent` also accepts `showCloseButton` (default `true`) to render the shadcn-style top-right close control; pass `false` to hide it. `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, and `DialogClose` each accept `className` and render default slot content; they read open/close behavior from the parent `Dialog` automatically. `DialogContent` is driven by a real `bootstrap.Modal` instance bound to its own root (rendered as `.modal.fade > .modal-dialog > .modal-content`, permanently mounted rather than added/removed from the DOM) — Escape, backdrop click, the built-in close control, and `DialogClose` (both wired via `data-bs-dismiss="modal"`) all close the dialog, and the Tab focus trap plus initial-focus/focus-restore on open/close are the built-in native Modal behavior, same as the static API. See [Nodex UI Component](/examples/blocks.html#/docs/guide/owl-components) for how to load `nodexui` and `dist/nodexui.templates.xml`.
|
|
35
35
|
|
|
36
36
|
## Static component
|
|
37
37
|
|
|
@@ -65,8 +65,8 @@ import {
|
|
|
65
65
|
</div>
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
At mount,
|
|
68
|
+
At mount, Nodex UI restructures this markup into the built-in required shape: the `[b-ui="dialog"]` root becomes the `.modal.fade` element and `[b-dialog-panel]` is wrapped in a new `.modal-dialog` and becomes `.modal-content` — you don't need to author those wrapper levels yourself. The dialog is driven by a real `bootstrap.Modal` instance (`backdrop: true, keyboard: true, focus: true`, all built-in defaults); `[b-dialog-close]` buttons get `data-bs-dismiss="modal"` at mount time instead of a manual click handler.
|
|
69
69
|
|
|
70
|
-
Events: `
|
|
70
|
+
Events: `nodexui:open`, `nodexui:close` (Nodex UI), plus the underlying `shown.bs.modal`/`hidden.bs.modal`.
|
|
71
71
|
|
|
72
|
-
Keyboard: Escape closes the dialog (
|
|
72
|
+
Keyboard: Escape closes the dialog (the built-in native `keyboard` option), as does a backdrop click. Focus moves into the panel on open and is trapped there via Tab/Shift+Tab, then returns to the trigger on close — all native `bootstrap.Modal` behavior.
|