@thebase/ui 1.1.3 → 1.1.5
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 +37 -18
- package/README.md +26 -22
- package/bin/create-baseui-app.mjs +7 -7
- package/dist/baseui.apidoc.esm.js +949 -0
- package/dist/baseui.apidoc.min.js +950 -0
- package/dist/baseui.esm.js +31 -31
- package/dist/baseui.min.css +1 -1
- package/dist/baseui.min.js +31 -31
- package/dist/baseui.registry.json +5 -5
- package/dist/baseui.templates.xml +60 -31
- package/dist/types/apidoc.d.ts +27 -0
- package/docs/analytics.md +5 -5
- package/docs/blocks.md +5 -5
- package/docs/components/accordion.md +3 -3
- package/docs/components/alert-dialog.md +2 -2
- package/docs/components/alert.md +2 -2
- package/docs/components/apidoc.md +17 -4
- package/docs/components/aspect-ratio.md +2 -2
- package/docs/components/attachment.md +3 -3
- package/docs/components/avatar.md +5 -5
- package/docs/components/badge.md +2 -2
- package/docs/components/block-viewer.md +4 -4
- 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 +5 -5
- package/docs/components/card.md +2 -2
- package/docs/components/carousel.md +5 -5
- package/docs/components/chart.md +5 -5
- package/docs/components/checkbox.md +2 -2
- package/docs/components/clipboard-button.md +2 -2
- package/docs/components/collapsible.md +2 -2
- package/docs/components/combobox.md +7 -6
- package/docs/components/command.md +5 -5
- package/docs/components/context-menu.md +5 -5
- package/docs/components/data-table.md +6 -6
- package/docs/components/date-picker.md +9 -8
- package/docs/components/dialog.md +4 -4
- package/docs/components/direction.md +2 -2
- package/docs/components/drawer.md +3 -3
- package/docs/components/dropdown-menu.md +3 -3
- package/docs/components/empty.md +3 -3
- package/docs/components/field.md +23 -17
- package/docs/components/form.md +3 -3
- package/docs/components/hover-card.md +5 -8
- package/docs/components/icon.md +3 -3
- package/docs/components/input-group.md +8 -7
- package/docs/components/input-otp.md +5 -5
- package/docs/components/input.md +6 -5
- package/docs/components/item.md +2 -2
- package/docs/components/kbd.md +2 -2
- package/docs/components/label.md +2 -2
- package/docs/components/markdown.md +3 -3
- package/docs/components/marker.md +2 -2
- package/docs/components/menubar.md +2 -2
- package/docs/components/message-scroller.md +5 -5
- package/docs/components/message.md +5 -5
- package/docs/components/native-select.md +4 -4
- package/docs/components/navigation-menu.md +3 -3
- package/docs/components/pagination.md +3 -3
- package/docs/components/popover.md +7 -7
- package/docs/components/progress.md +2 -2
- package/docs/components/pwa.md +2 -2
- package/docs/components/questionnaire.md +5 -5
- package/docs/components/radio-group.md +2 -2
- package/docs/components/resizable.md +5 -5
- package/docs/components/scroll-area.md +5 -5
- package/docs/components/select.md +6 -5
- package/docs/components/separator.md +2 -2
- package/docs/components/sheet.md +3 -3
- package/docs/components/shell.md +2 -2
- package/docs/components/sidebar.md +2 -2
- package/docs/components/skeleton.md +2 -2
- package/docs/components/slider.md +2 -2
- package/docs/components/spinner.md +3 -3
- package/docs/components/switch.md +2 -2
- package/docs/components/table.md +2 -2
- package/docs/components/tabs.md +4 -4
- package/docs/components/text-editor.md +2 -2
- package/docs/components/textarea.md +11 -15
- package/docs/components/theme-button.md +4 -4
- package/docs/components/toast.md +3 -3
- package/docs/components/toggle-group.md +5 -5
- package/docs/components/toggle.md +5 -5
- package/docs/components/tooltip.md +7 -7
- package/docs/components/typography.md +3 -3
- package/docs/icons.md +7 -7
- package/docs/installation.md +14 -13
- package/docs/owl-components.md +17 -17
- package/docs/registry.md +8 -8
- package/docs/runtime-api.md +3 -3
- package/docs/theming.md +5 -5
- package/docs/usage-guide.md +26 -26
- package/package.json +9 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="tooltip"` with either `b-att-content` or a tooltip content child.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Tooltip } from "@thebase/ui";
|
|
@@ -24,11 +24,11 @@ import { Tooltip } from "@thebase/ui";
|
|
|
24
24
|
| `Tooltip` | `state` | `String` | optional; `"open"`/`"on"`/`"active"` shows the tooltip once on mount (uncontrolled testing hook) |
|
|
25
25
|
| `Tooltip` | `className` | `String` | optional |
|
|
26
26
|
|
|
27
|
-
See [
|
|
27
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
28
28
|
|
|
29
|
-
Both the pure
|
|
29
|
+
Both the pure Base and static forms are driven by a live `bootstrap.Tooltip` instance owned on the trigger element, with `trigger: "hover focus"` — **the visible popup is Bootstrap's own generated DOM (a `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` node, positioned via Popper), appended to `document.body`, not rendered inline where you authored the tooltip.** Don't query for it as a descendant of the trigger; query `document.body.querySelector(".tooltip .tooltip-inner")` instead. Bootstrap sets `aria-describedby` on the trigger itself, but only while the tooltip is actually shown (removed again on hide) — the Base UI does not additionally set a static `aria-describedby` up front.
|
|
30
30
|
|
|
31
|
-
The default slot's rendered markup is captured into an HTML string for Bootstrap's `title`/`html: true` options (Bootstrap can't consume live vnodes): the
|
|
31
|
+
The default slot's rendered markup is captured into an HTML string for Bootstrap's `title`/`html: true` options (Bootstrap can't consume live vnodes): the Base component renders the slot into a hidden buffer element internal to its own template, reads its `innerHTML` on mount, and re-syncs the live popup via `.setContent({'.tooltip-inner': html})` whenever that HTML changes on a later render.
|
|
32
32
|
|
|
33
33
|
## Static component
|
|
34
34
|
|
|
@@ -54,11 +54,11 @@ Use the global runtime methods: `thebase.mount()`, `thebase.mountAll()`, and `th
|
|
|
54
54
|
|
|
55
55
|
## Events
|
|
56
56
|
|
|
57
|
-
Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.tooltip`/`hidden.bs.tooltip` on the trigger element to react to show/hide;
|
|
57
|
+
Interactive components emit documented `baseui:*` events from their root element. Listen for Bootstrap's own `shown.bs.tooltip`/`hidden.bs.tooltip` on the trigger element to react to show/hide; the Base UI mirrors those into `b-att-state` (`open`/`closed`) on the static root and `this.state.open` on the Base component.
|
|
58
58
|
|
|
59
59
|
## CSS variables
|
|
60
60
|
|
|
61
|
-
The component inherits
|
|
61
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`. The popup itself is styled by Bootstrap's own bundled `.tooltip`/`.tooltip-arrow`/`.tooltip-inner` CSS (loaded via `dist/baseui.min.css`), not the Base UI's own classes.
|
|
62
62
|
|
|
63
63
|
## Accessibility behavior
|
|
64
64
|
|
|
@@ -70,7 +70,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
70
70
|
|
|
71
71
|
## Browser support
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
74
74
|
|
|
75
75
|
## Test checklist
|
|
76
76
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Small text helpers for plain content.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Typography } from "@thebase/ui";
|
|
@@ -85,7 +85,7 @@ import { Typography } from "@thebase/ui";
|
|
|
85
85
|
| `Typography` | `variant` | `String` | optional |
|
|
86
86
|
| `Typography` | `className` | `String` | optional |
|
|
87
87
|
|
|
88
|
-
See [
|
|
88
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
89
89
|
|
|
90
90
|
## Static component
|
|
91
91
|
|
|
@@ -96,4 +96,4 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
96
96
|
|
|
97
97
|
Options: `b-att-variant="body|lead|muted|code|kbd"`.
|
|
98
98
|
|
|
99
|
-
Accessibility: choose semantic HTML elements first, then add
|
|
99
|
+
Accessibility: choose semantic HTML elements first, then add the Base UI typography attributes for styling.
|
package/docs/icons.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Built-in Icons
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Base UI ships the full Lucide icon set as a built-in CDN-ready icon library. Icons use the `b-icon` attribute, render as CSS masks, and inherit `currentColor` from the surrounding button, link, menu item, block, or theme.
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
6
|
<button b-ui="button" type="button">
|
|
@@ -15,20 +15,20 @@ BaseUI ships the full Lucide icon set as a built-in CDN-ready icon library. Icon
|
|
|
15
15
|
|
|
16
16
|
## Install
|
|
17
17
|
|
|
18
|
-
Load the normal
|
|
18
|
+
Load the normal the Base UI assets. No separate icon script is required.
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
21
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
|
|
22
22
|
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.
|
|
25
|
+
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production. `b-icon` also works with the [pure Base `Icon` component](components/icon.md) — the recommended API in an application; the classic script above is for pages using the static `b-ui` API.
|
|
26
26
|
|
|
27
27
|
The build publishes every Lucide SVG to `dist/icons/lucide/` and writes the generated icon manifest to `dist/icons/lucide.json`.
|
|
28
28
|
|
|
29
29
|
## Markup
|
|
30
30
|
|
|
31
|
-
Use the Lucide icon name in kebab-case, camelCase, snake_case, or space-separated form.
|
|
31
|
+
Use the Lucide icon name in kebab-case, camelCase, snake_case, or space-separated form. The Base UI normalizes the name to the matching Lucide SVG file.
|
|
32
32
|
|
|
33
33
|
```html
|
|
34
34
|
<span b-icon="check"></span>
|
|
@@ -46,7 +46,7 @@ Use `b-icon-size` when the surrounding component should not control the icon siz
|
|
|
46
46
|
|
|
47
47
|
## Color
|
|
48
48
|
|
|
49
|
-
Icons inherit `currentColor`, so set color on the parent element or let
|
|
49
|
+
Icons inherit `currentColor`, so set color on the parent element or let the Base UI component variants and themes do it.
|
|
50
50
|
|
|
51
51
|
```html
|
|
52
52
|
<button b-ui="button" b-att-variant="destructive" type="button">
|
|
@@ -62,7 +62,7 @@ Icons inherit `currentColor`, so set color on the parent element or let BaseUI c
|
|
|
62
62
|
|
|
63
63
|
## Accessibility
|
|
64
64
|
|
|
65
|
-
Decorative icons should not have a label.
|
|
65
|
+
Decorative icons should not have a label. The Base UI marks them with `aria-hidden="true"`.
|
|
66
66
|
|
|
67
67
|
```html
|
|
68
68
|
<span b-icon="mail"></span>
|
|
@@ -84,7 +84,7 @@ Standalone meaningful icons can use `aria-label`.
|
|
|
84
84
|
|
|
85
85
|
## Self-hosting
|
|
86
86
|
|
|
87
|
-
By default, icon URLs point to the pinned Lucide CDN configured in the registry. To serve icons from your own
|
|
87
|
+
By default, icon URLs point to the pinned Lucide CDN configured in the registry. To serve icons from your own the Base UI build, point `b-icon-base-url` at the published icon folder.
|
|
88
88
|
|
|
89
89
|
```html
|
|
90
90
|
<span b-icon="search" b-icon-base-url="/dist/icons/lucide"></span>
|
package/docs/installation.md
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choosing an API, install, theming, verification). This page covers install mechanics only.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Base UI is distributed as one CSS file and one JavaScript file for browser use. `dist/baseui.min.js` is fully self-contained: Bootstrap's JS bundle (Popper.js included) and the Owl runtime are embedded ahead of the Base UI's own code, in load order (Bootstrap, then Owl, then the Base UI) — nothing else needs to load first. Both install paths below load this same file; the Base component API is the recommended way to consume the Base UI in an application, with the base static markup (`b-ui`) API available as a lighter-weight alternative for non-Owl pages.
|
|
6
6
|
|
|
7
|
-
The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.
|
|
7
|
+
The snippets below use the `@latest` tag for readability. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for any production page — `@latest` can silently change what your page loads the moment a new version is published.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component install (recommended)
|
|
10
10
|
|
|
11
|
-
If you're building your own
|
|
11
|
+
If you're building your own application and want to import the Base UI components as real Owl component classes (`<Button/>`, `<Card/>`, `<Tabs/>`, ...) instead of `b-ui` markup, it's the same one file as the static install, just accessed through an import map:
|
|
12
12
|
|
|
13
13
|
```html
|
|
14
14
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
|
|
@@ -26,11 +26,11 @@ If you're building your own Owl app and want to import BaseUI components as real
|
|
|
26
26
|
|
|
27
27
|
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files if jsDelivr is unreachable — swap the host in each URL above.
|
|
28
28
|
|
|
29
|
-
`@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` module — the browser fetches and evaluates it once, so `Component`/`mount`/`xml` from `@base/owl` and `Button`/`Card`/... from `@base/component` are guaranteed to be the same runtime identity (no separate script needs to load first to set up a shared global). Your own app code should still import Owl from `@base/owl`, never install or import `@odoo/owl` directly — that's what keeps a `class Root extends Component` you write instanceof-compatible with
|
|
29
|
+
`@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` module — the browser fetches and evaluates it once, so `Component`/`mount`/`xml` from `@base/owl` and `Button`/`Card`/... from `@base/component` are guaranteed to be the same runtime identity (no separate script needs to load first to set up a shared global). Your own app code should still import Owl from `@base/owl`, never install or import `@odoo/owl` directly — that's what keeps a `class Root extends Component` you write instanceof-compatible with Base UI's own components. `@base/templates` maps to the templates XML — not a JS module, so resolve it with `import.meta.resolve("@base/templates")` and `fetch()` the result rather than `import`ing it.
|
|
30
30
|
|
|
31
31
|
For npm/bundler usage, everything (Owl framework, component classes, theme helper) is exported from the one `@thebase/ui` package entry: `import { Component, mount, xml, Button, Card, createThemeController } from "@thebase/ui";` — plus `@thebase/ui/dist/baseui.templates.xml` (component templates — fetch or load them before mounting). Note that importing the main entry always runs its `autoMount()` side effect (it scans the DOM for `[b-ui]`/`[b-icon]` markers on `DOMContentLoaded`) — harmless if your page has none, but worth knowing if you specifically wanted a side-effect-free import.
|
|
32
32
|
|
|
33
|
-
See [
|
|
33
|
+
See [Base Components](owl-components.md) for the full loading contract, a worked example, and common mistakes.
|
|
34
34
|
|
|
35
35
|
## Static `b-ui` install (alternative)
|
|
36
36
|
|
|
@@ -41,9 +41,9 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
|
|
|
41
41
|
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives
|
|
44
|
+
Bootstrap 5 is the bundled baseline CSS framework, and its JS bundle now drives the Base UI's interactive components directly.
|
|
45
45
|
|
|
46
|
-
`@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.
|
|
46
|
+
`@thebase/ui` is published on npm, so [unpkg](https://unpkg.com/@thebase/ui@latest/) mirrors the same files as an alternative CDN (`https://unpkg.com/@thebase/ui@latest/dist/baseui.min.css` / `baseui.min.js`) if jsDelivr is unreachable in your environment. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
47
47
|
|
|
48
48
|
For npm/self-hosted usage:
|
|
49
49
|
|
|
@@ -53,7 +53,7 @@ npm install @thebase/ui
|
|
|
53
53
|
|
|
54
54
|
Then copy or serve `node_modules/@thebase/ui/dist/baseui.min.css` and `node_modules/@thebase/ui/dist/baseui.min.js`.
|
|
55
55
|
|
|
56
|
-
`dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/baseui.registry.json`, in case a project wants vendored Bootstrap JS on its own —
|
|
56
|
+
`dist/bootstrap.bundle.min.js` also ships standalone, unmodified, with its own integrity hash in `dist/baseui.registry.json`, in case a project wants vendored Bootstrap JS on its own — the Base UI itself never needs it loaded separately.
|
|
57
57
|
|
|
58
58
|
The static bundle auto-mounts existing `[b-ui]` and `[b-icon]` markers on `DOMContentLoaded`. Use `thebase.mountAll(root)` after later DOM injection, and `thebase.destroy(root)` before removing a mounted subtree that owns listeners or an Owl-backed controller.
|
|
59
59
|
|
|
@@ -70,18 +70,19 @@ Production pages should use pinned version URLs. `latest` is for demos and exper
|
|
|
70
70
|
|
|
71
71
|
| Need | npm/bundler export | Browser import-map key | Dist file |
|
|
72
72
|
| --- | --- | --- | --- |
|
|
73
|
-
| Static `b-ui` runtime, Owl framework, every
|
|
73
|
+
| Static `b-ui` runtime, Owl framework, every Base component class, theme helper | `@thebase/ui` | `@base/owl`, `@base/component`, `@base/theme` (all three point at the same file) | `dist/baseui.esm.js`, `dist/baseui.min.js` |
|
|
74
74
|
| Styles | `@thebase/ui/baseui.css` | none; load with `<link>` | `dist/baseui.min.css` |
|
|
75
|
-
| Bootstrap JS | embedded; standalone file is a vendoring convenience only, not part of
|
|
75
|
+
| Bootstrap JS | embedded; standalone file is a vendoring convenience only, not part of the Base UI's own load path | none | `dist/bootstrap.bundle.min.js` |
|
|
76
76
|
| Named-icon components (`IconEye`, ...) | `@thebase/ui/icons` | `@base/icons` | `dist/baseui.icons.esm.js` |
|
|
77
77
|
| Owl templates XML | `@thebase/ui/dist/baseui.templates.xml` | `@base/templates` | `dist/baseui.templates.xml` |
|
|
78
78
|
| Registry metadata | `@thebase/ui/registry` | none; fetch the JSON file | `dist/baseui.registry.json` |
|
|
79
79
|
| Optional analytics service (`init`, `track`) | `@thebase/ui/analytics` | none; import the file URL or load the `<script>` build (sets `window.thebase.analytics`) | `dist/baseui.analytics.esm.js`, `dist/baseui.analytics.min.js` |
|
|
80
|
+
| Standalone ApiDoc (`mountApiDoc`) | `@thebase/ui/apidoc` | none; embeds Owl + its templates, still needs `baseui.min.css`; set `assetBase` for the language logos | `dist/baseui.apidoc.esm.js`, `dist/baseui.apidoc.min.js` |
|
|
80
81
|
|
|
81
|
-
`@base/templates` points to XML, not JavaScript. Resolve and fetch it (`fetch(import.meta.resolve("@base/templates"))`) before mounting an
|
|
82
|
+
`@base/templates` points to XML, not JavaScript. Resolve and fetch it (`fetch(import.meta.resolve("@base/templates"))`) before mounting an application that uses the Base UI component classes.
|
|
82
83
|
|
|
83
84
|
## Release Guardrails
|
|
84
85
|
|
|
85
|
-
|
|
86
|
+
The Base UI intentionally keeps Bootstrap bundled for the browser build, both CSS and JS. Bootstrap's JS bundle and the Owl runtime are embedded directly into `dist/baseui.min.js`/`baseui.esm.js` — in that load order — along with every Base component class and the theme helper, so both the static API and the pure Base API install with one stylesheet and one script/import: there is no more separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` file to keep in load order. Bootstrap's JS instances (`bootstrap.Modal`, `Dropdown`, `Collapse`, `Tab`, `Toast`, `Carousel`, `Tooltip`, `Popover`, `Alert`) drive the components that map to them, wrapped by the Base UI's own `.behavior.js`/`runtime/*.js` helpers so both the static and pure Base APIs share identical ARIA/keyboard/event behavior.
|
|
86
87
|
|
|
87
88
|
Release checks enforce runtime dependency, peer dependency, scoped CSS selector, and CDN file-size budgets through `npm run lint` and `npm run build`.
|
package/docs/owl-components.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Base Components
|
|
2
2
|
|
|
3
|
-
See the [Usage Guide](usage-guide.md) for when to reach for this API versus the static `b-ui` one. This page covers the pure
|
|
3
|
+
See the [Usage Guide](usage-guide.md) for when to reach for this API versus the static `b-ui` one. This page covers the pure Base API only.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Base UI ships a second, additive public API alongside the static `b-ui` markers: real Owl component classes you import, compose with `static components`, and mount as part of your own application. This page covers how to load and use it; see [Component Authoring](component-authoring.md) for how components implement both APIs from one source folder.
|
|
6
6
|
|
|
7
|
-
As of 1.1.0, every component in the registry (all 74) has a pure
|
|
7
|
+
As of 1.1.0, every component in the registry (all 74) has a pure Base export — there are no static-only components left. Compound components export a root class plus sub-components (e.g. `Dialog`/`DialogTrigger`/`DialogContent`/...); check a component's `owlComponents` entry in `dist/baseui.registry.json`, or its doc page under [`docs/components/`](components/), for the exact export list. A few components have a deliberately reshaped pure Base API versus their static markup-scanning adapter — see [Registry](registry.md#component-export-policy) for which ones and why.
|
|
8
8
|
|
|
9
9
|
## What you need to load
|
|
10
10
|
|
|
11
|
-
Everything — the static `b-ui` runtime, the Owl framework, every
|
|
11
|
+
Everything — the static `b-ui` runtime, the Owl framework, every Base component class, and the theme helper — is one file: `dist/baseui.esm.js` (or `dist/baseui.min.js` as a classic script). There is no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js` to load.
|
|
12
12
|
|
|
13
13
|
| File | Purpose |
|
|
14
14
|
| --- | --- |
|
|
15
|
-
| `dist/baseui.min.css` | Bootstrap +
|
|
15
|
+
| `dist/baseui.min.css` | Bootstrap + the Base UI styling, shared by both APIs. |
|
|
16
16
|
| `@base/owl` (`dist/baseui.esm.js`) | The Owl framework — `Component`, `mount`, `xml`, `useState`, etc. Pinned to Owl `2.8.3`, embedded directly in this file. Import your app's own Owl usage from here too, not `@odoo/owl`. |
|
|
17
|
-
| `@base/component` (`dist/baseui.esm.js`) | The
|
|
17
|
+
| `@base/component` (`dist/baseui.esm.js`) | The Base component classes — same file as `@base/owl` above, just a different import-map key for readability. |
|
|
18
18
|
| `@base/theme` (`dist/baseui.esm.js`) | Same file again — the theme helper for persisted light/dark toggles, URL overrides, button-label sync, and iframe preview sync. |
|
|
19
|
-
| `@base/templates` (`dist/baseui.templates.xml`) | The Owl templates the component classes reference (`static template = "baseui.Button"`, etc). Must be loaded and passed to `mount()` before any
|
|
19
|
+
| `@base/templates` (`dist/baseui.templates.xml`) | The Owl templates the component classes reference (`static template = "baseui.Button"`, etc). Must be loaded and passed to `mount()` before any Base UI component tag renders — a component class alone does not carry its template. |
|
|
20
20
|
|
|
21
21
|
## Browser (import map) usage
|
|
22
22
|
|
|
@@ -55,9 +55,9 @@ Everything — the static `b-ui` runtime, the Owl framework, every pure Owl comp
|
|
|
55
55
|
</script>
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.
|
|
58
|
+
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. For a self-hosted build, replace the CDN host with your own served path (e.g. `/dist/baseui.esm.js`). These snippets use `@latest` for readability; pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
|
|
59
59
|
|
|
60
|
-
No `@odoo/owl` import appears anywhere in that snippet — `@base/owl` is the only Owl entry point
|
|
60
|
+
No `@odoo/owl` import appears anywhere in that snippet — `@base/owl` is the only Owl entry point the Base UI components and consumer apps need. Because `@base/owl`, `@base/component`, and `@base/theme` all point at the exact same `dist/baseui.esm.js` URL, the browser fetches and evaluates it once and every key shares the same module instance — no separate classic `<script>` needs to load first to set up a shared global.
|
|
61
61
|
|
|
62
62
|
## npm / bundler usage
|
|
63
63
|
|
|
@@ -75,7 +75,7 @@ class Root extends Component {
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
There's only one package entry now — `@thebase/ui` exports the Owl framework (built from the exact `@odoo/owl@2.8.3` this
|
|
78
|
+
There's only one package entry now — `@thebase/ui` exports the Owl framework (built from the exact `@odoo/owl@2.8.3` this Base UI release vendors; you do not need to install `@odoo/owl` yourself), every Base component class, and the theme helper together. Browser import-map examples above still use the `@base/owl`/`@base/component`/`@base/theme` keys for readability, but they're just local aliases to the same file.
|
|
79
79
|
|
|
80
80
|
When a bundler cannot import XML with `?raw`, load `dist/baseui.templates.xml` as a served asset and pass the fetched string to `mount(Root, target, { templates })`. The template file is part of the runtime contract, not optional documentation.
|
|
81
81
|
|
|
@@ -97,12 +97,12 @@ Both APIs come from the exact same bundle now, so there's nothing extra to load
|
|
|
97
97
|
|
|
98
98
|
## Global component fallback
|
|
99
99
|
|
|
100
|
-
`Component` exported from `@base/owl` / `@thebase/ui` is Owl's `Component` with one addition: any component that extends it can use every registered
|
|
100
|
+
`Component` exported from `@base/owl` / `@thebase/ui` is Owl's `Component` with one addition: any component that extends it can use every registered the Base UI component (`<Icon/>`, `<Button/>`, `<Card/>`, ...) in its template, even if its own `static components` doesn't list it. Without this, Owl only checks a component's own `static components` map, so a nested child that used `<Icon/>` without declaring it crashed with `Cannot find the definition of component "Icon"`.
|
|
101
101
|
|
|
102
102
|
- The fallback applies to every component in the tree, not only the root passed to `mount()`.
|
|
103
|
-
- Entries in your own `static components` still take precedence over a
|
|
104
|
-
- Listing
|
|
105
|
-
- The fallback only works for classes that extend
|
|
103
|
+
- Entries in your own `static components` still take precedence over a Base UI component with the same name.
|
|
104
|
+
- Listing the Base UI classes in `static components` is still allowed and is the clearest choice for shared or library code. The fallback mainly protects deeply nested app components.
|
|
105
|
+
- The fallback only works for classes that extend the Base UI's `Component`. A class built on `Component` from `@odoo/owl` directly does not get it.
|
|
106
106
|
|
|
107
107
|
```js
|
|
108
108
|
import { Component, mount, xml } from "@base/owl";
|
|
@@ -123,6 +123,6 @@ See each component's page under [`docs/components/`](components/) for its specif
|
|
|
123
123
|
## Common mistakes
|
|
124
124
|
|
|
125
125
|
- **Rendering a bare `<Button/>` with no template loaded.** `mount(Root, target)` without `{ templates }` (or `app.addTemplates(...)`) throws — the `.xml` file is a real build/runtime input, not documentation.
|
|
126
|
-
- **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other Owl component. If you alias a
|
|
127
|
-
- **Importing from `@odoo/owl`.** Always import from `@base/owl` instead, even in your own app code — it keeps your app on the exact Owl version this
|
|
126
|
+
- **Registering `Button` under the wrong tag name.** `static components = { Button }` must match the tag used in the template (`<Button/>`), same as any other Owl component. If you alias a Base UI class under a different tag (`{ PrimaryButton: Button }`), the alias exists only in that component's map.
|
|
127
|
+
- **Importing from `@odoo/owl`.** Always import from `@base/owl` instead, even in your own app code — it keeps your app on the exact Owl version this Base UI release was tested against, and only `@base/owl`'s `Component` provides the [global component fallback](#global-component-fallback).
|
|
128
128
|
- **Adding a `baseui.owl.min.js`/`baseui.owl.esm.js`/`baseui.components.esm.js` script or import-map entry.** None of those files are published anymore — point `@base/owl`/`@base/component`/`@base/theme` all at `dist/baseui.esm.js` instead.
|
package/docs/registry.md
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
# Registry
|
|
2
2
|
|
|
3
|
-
Every release publishes `dist/baseui.registry.json`. The registry lists package metadata, CDN paths, build files, themes, and per-component metadata (type, dependencies, `b-*` attributes, events, and — since the Phase 8 pure
|
|
3
|
+
Every release publishes `dist/baseui.registry.json`. The registry lists package metadata, CDN paths, build files, themes, and per-component metadata (type, dependencies, `b-*` attributes, events, and — since the Phase 8 pure Base rollout — Owl component/template metadata). It only registers components under `src/components/`; example blocks under `examples/blocks/` are not part of the registry.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Base UI ships as bundled files only — there is no per-component source distribution. Use the registry's `components` entries to look up a component's contract, not to locate individual source files.
|
|
6
6
|
|
|
7
7
|
## Build files
|
|
8
8
|
|
|
9
9
|
`buildFiles` lists every top-level `dist/` artifact the release validates and hashes:
|
|
10
10
|
|
|
11
|
-
- `baseui.min.css` — Bootstrap 5 +
|
|
12
|
-
- `baseui.min.js` / `baseui.esm.js` — the one bundle for both APIs: the static `b-ui` runtime (`BaseUI.register(...)`, `thebase.mountAll()`), the Owl framework (`Component`, `mount`, `xml`, ...), every
|
|
13
|
-
- `bootstrap.bundle.min.js` — vendored Bootstrap JS, standalone, unmodified. Ships in case a project wants it on its own;
|
|
11
|
+
- `baseui.min.css` — Bootstrap 5 + the Base UI styles (static and pure Base APIs share the same stylesheet).
|
|
12
|
+
- `baseui.min.js` / `baseui.esm.js` — the one bundle for both APIs: the static `b-ui` runtime (`BaseUI.register(...)`, `thebase.mountAll()`), the Owl framework (`Component`, `mount`, `xml`, ...), every Base component class (`Button`, `Card`, `Tabs`, ...), and the theme helper (`createThemeController`, `BaseUITheme`). Bootstrap's JS bundle and Owl's global build are embedded ahead of the Base UI's own code, in that load order — no separate `baseui.owl.*`/`baseui.components.esm.js`/`baseui.theme.esm.js`/`bootstrap.bundle.min.js` script is needed.
|
|
13
|
+
- `bootstrap.bundle.min.js` — vendored Bootstrap JS, standalone, unmodified. Ships in case a project wants it on its own; the Base UI's own bundle never needs it loaded separately (it's embedded in `baseui.min.js`/`baseui.esm.js` too).
|
|
14
14
|
- `baseui.icons.esm.js` — the 2000+ generated `Icon<Name>` components (`IconEye`, `IconSearch`, ...), split out because they'd blow the main bundle's size budget. The one deliberate exception to "everything is one bundle".
|
|
15
|
-
- `baseui.templates.xml` — every
|
|
16
|
-
- `baseui.analytics.esm.js` / `baseui.analytics.min.js` — the optional, standalone cookieless analytics service (`@thebase/ui/analytics`). Not part of the main bundles and needs no other
|
|
15
|
+
- `baseui.templates.xml` — every Base component's compiled `<templates>` body, concatenated into one file. Load this into the Owl `App`'s `templates` config before mounting; `.xml` files under `src/components/` are authoring sources, not something a consumer app loads directly.
|
|
16
|
+
- `baseui.analytics.esm.js` / `baseui.analytics.min.js` — the optional, standalone cookieless analytics service (`@thebase/ui/analytics`). Not part of the main bundles and needs no other Base UI file; see [Analytics](analytics.md).
|
|
17
17
|
- `icons/lucide.json` — the built-in icon manifest.
|
|
18
18
|
|
|
19
19
|
## Component export policy
|
|
20
20
|
|
|
21
21
|
Every component folder under `src/components/<name>/` is one of:
|
|
22
22
|
|
|
23
|
-
1. **Both APIs** — has `<name>.js` (static `BaseUI.register(...)` adapter) *and* `<name>.component.js` (pure
|
|
23
|
+
1. **Both APIs** — has `<name>.js` (static `BaseUI.register(...)` adapter) *and* `<name>.component.js` (pure Base `Component` class(es)). As of the Phase 8 rollout this is **all 74** registry components; there are no static-only exceptions left. A handful of components (`chart`, most notably) have lighter-fidelity pure Base treatments than their static adapter — see their component doc page for the documented gap — but every registry component has a real Owl export.
|
|
24
24
|
2. Static-only components would report `"type": "static"` with no `owlComponents` field, but none currently exist in this registry.
|
|
25
25
|
|
|
26
26
|
Per-component registry entries now include:
|
package/docs/runtime-api.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Runtime API
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Base UI exposes one browser global: `window.thebase`. `window.BaseUI` still points to the same object as a deprecated alias for 1.x pages; it will be removed in 2.0.0.
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
thebase.version
|
|
@@ -29,7 +29,7 @@ Mounted components dispatch lifecycle events on their root element:
|
|
|
29
29
|
|
|
30
30
|
`thebase.theme.set(...)` is the low-level setter. For persisted light/dark toggles, button-label synchronization, URL `?theme=` overrides, and iframe preview sync, import `createThemeController` from `@base/theme` in browser import maps or `@thebase/ui` in npm/bundler apps.
|
|
31
31
|
|
|
32
|
-
`thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register Owl component tags (`<Button/>`, `<Card/>`, ...) and does not know about `@thebase/ui` or `dist/baseui.templates.xml`. To use
|
|
32
|
+
`thebase.mountAll()` is for static `b-ui`/`b-att-*` markers and `b-icon` markers only. It does not register Owl component tags (`<Button/>`, `<Card/>`, ...) and does not know about `@thebase/ui` or `dist/baseui.templates.xml`. To use Base components, extend `Component` from `@base/owl`, fetch the templates XML, and pass it to `mount()`. Registered the Base UI components then resolve in every template, whether or not they are listed in `static components`; see [Base Components](owl-components.md#global-component-fallback).
|
|
33
33
|
|
|
34
34
|
## `cn()` class-name helper
|
|
35
35
|
|
|
@@ -42,7 +42,7 @@ cn("btn", isActive && "active", ["bu-button", className]);
|
|
|
42
42
|
// "btn active bu-button my-class" (when isActive is truthy and className is "my-class")
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
It's a standalone named export — `import { cn } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.cn` in the browser IIFE global — not a method on `BaseUI` itself. Use it to build your own components' class lists on top of
|
|
45
|
+
It's a standalone named export — `import { cn } from "@thebase/ui"` in npm/bundler apps, or `BaseUIBundle.cn` in the browser IIFE global — not a method on `BaseUI` itself. Use it to build your own components' class lists on top of the Base UI's conventions.
|
|
46
46
|
|
|
47
47
|
## `mergeStyle()` inline-style helper
|
|
48
48
|
|
package/docs/theming.md
CHANGED
|
@@ -13,7 +13,7 @@ thebase.theme.set("dark");
|
|
|
13
13
|
thebase.theme.set({ primary: "#0057d8", radius: "0.5rem" });
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
The Base UI maps semantic tokens such as `--b-background`, `--b-primary`, `--b-border`, and `--b-radius` into Bootstrap 5 variables. Radius tokens are sourced from the shorter public alias family `--base-radius`, `--base-radius-sm`, `--base-radius-md`, `--base-radius-lg`, `--base-radius-xl`, `--base-radius-2xl`, `--base-radius-3xl`, `--base-radius-4xl`, and `--base-radius-full`, then mirrored to `--b-radius*` for component CSS.
|
|
17
17
|
|
|
18
18
|
For a reusable theme toggle with persistence, URL override, button-label sync, and iframe preview sync, import the theme helper:
|
|
19
19
|
|
|
@@ -38,9 +38,9 @@ For a reusable theme toggle with persistence, URL override, button-label sync, a
|
|
|
38
38
|
</script>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
`https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.
|
|
41
|
+
`https://unpkg.com/@thebase/ui@latest/dist/baseui.esm.js` mirrors the same file as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Npm/bundler consumers can import the same API from `@thebase/ui`.
|
|
42
42
|
|
|
43
|
-
For a ready-made icon button, use the
|
|
43
|
+
For a ready-made icon button, use the Base UI component instead of wiring your own click handler:
|
|
44
44
|
|
|
45
45
|
```html
|
|
46
46
|
<button b-ui="theme-button" b-att-variant="outline" b-att-storage-key="my-app-theme" type="button"></button>
|
|
@@ -50,6 +50,6 @@ The documentation and example pages use the same theme infrastructure. Owl examp
|
|
|
50
50
|
|
|
51
51
|
## Design tokens
|
|
52
52
|
|
|
53
|
-
The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Base UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts.
|
|
53
|
+
The default light/dark palettes and radius follow the current [shadcn/ui](https://ui.shadcn.com) Base UI neutral theme: black/neutral primary on white in light mode, neutral-900/50 foreground-background inversion in dark mode, neutral `--b-secondary`/`--b-muted`/`--b-accent` surfaces, `--base-radius: var(--radius, 0.625rem)`, and a derived radius scale (`--base-radius-sm|md|lg|xl`, mirrored as `--b-radius-sm|md|lg|xl`) and shadow scale (`--b-shadow-sm|md|lg`) for consistent elevation across popovers, menus, dialogs, and toasts. The Base UI reads an existing upstream `--radius` value when present, but it does not redefine `--radius` back to `--b-radius`; that one-way bridge avoids CSS custom-property cycles. `--b-card`/`--b-popover` alias `--b-surface` for shadcn-token-name parity.
|
|
54
54
|
|
|
55
|
-
Because
|
|
55
|
+
Because the Base UI ships Bootstrap's stock precompiled CSS, most `.btn-*`/badge colors are not driven by `--bs-*` variables directly — `src/styles/baseui.css` re-points the `.btn-primary`/`.btn-secondary`/`.btn-danger`/`.btn-outline-secondary`/`.btn-light` variants at the Base UI tokens so `thebase.theme.set(...)` overrides actually render. Badges use their own `bu-badge-*` classes (`src/components/badge/badge.css`) instead of Bootstrap's `text-bg-*`, which hardcode non-overridable colors.
|
package/docs/usage-guide.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# Usage Guide — Integrating
|
|
1
|
+
# Usage Guide — Integrating the Base UI Into a Project
|
|
2
2
|
|
|
3
|
-
This is the single entry point for adding
|
|
3
|
+
This is the single entry point for adding the Base UI to a consumer project (a static page, a Base HUB website page, a server-rendered app, or your own application). It sequences the existing reference docs into one path and gives copy-paste-ready examples — read the linked page for exhaustive detail on any step.
|
|
4
4
|
|
|
5
5
|
Audience: engineers and AI coding agents integrating `@thebase/ui` into a project that is **not** this repository.
|
|
6
6
|
|
|
7
7
|
## Quick start (copy-paste, works as-is)
|
|
8
8
|
|
|
9
|
-
Save this as an `.html` file and open it — no build step, no server required. It installs
|
|
9
|
+
Save this as an `.html` file and open it — no build step, no server required. It installs the Base UI from the pinned CDN and renders a button, an input, and a card using the base static markup (`b-ui`) API (the zero-build alternative). If you're building an application, skip straight to the [pure Base install](#2-install-pure-owl-api--recommended) below — it's the recommended way to consume the Base UI.
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
12
|
<!doctype html>
|
|
@@ -32,22 +32,22 @@ Save this as an `.html` file and open it — no build step, no server required.
|
|
|
32
32
|
</html>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
`https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.
|
|
35
|
+
`https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/...` is the real jsDelivr URL for the published `@thebase/ui` npm package's `latest` tag, used here for a copy-paste-and-go quick start. Pin an exact version instead (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) for production, so a new release can't change what your page loads. See [Installation](installation.md) for jsDelivr/unpkg/npm/self-hosted paths.
|
|
36
36
|
|
|
37
|
-
The static bundle calls `thebase.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `thebase.mountAll(root)` yourself only after injecting new markup or when mounting a specific fragment. If the consumer is itself an
|
|
37
|
+
The static bundle calls `thebase.mountAll()` automatically on `DOMContentLoaded`, so initial `[b-ui]` and `[b-icon]` markup mounts without an extra script. Call `thebase.mountAll(root)` yourself only after injecting new markup or when mounting a specific fragment. If the consumer is itself an application, use [step 2](#2-install-pure-owl-api--recommended) instead — that's the recommended path.
|
|
38
38
|
|
|
39
39
|
## 1. Decide which API you need
|
|
40
40
|
|
|
41
41
|
| You are building... | Use | Install | Full reference |
|
|
42
42
|
| --- | --- | --- | --- |
|
|
43
|
-
| Your own
|
|
44
|
-
| Static HTML, a server-rendered page, or a Base HUB website page with no Owl runtime | The static `b-ui`
|
|
43
|
+
| Your own application that wants `<Button/>`, `<Card/>`, `<Dialog/>` as real component classes | The Base component API (recommended) | CSS + the same `baseui.min.js`/`baseui.esm.js` (via `@base/owl`/`@base/component` import-map keys or a plain npm import) + `dist/baseui.templates.xml` | [Base Components](owl-components.md) |
|
|
44
|
+
| Static HTML, a server-rendered page, or a Base HUB website page with no Owl runtime | The base static markup (`b-ui`) API (alternative) | One CSS file + one `<script>` tag | [Installation](installation.md) |
|
|
45
45
|
|
|
46
|
-
Both APIs come from the same package and the same CSS file, and can be mixed on one page. Prefer the
|
|
46
|
+
Both APIs come from the same package and the same CSS file, and can be mixed on one page. Prefer the Base component API by default — real component classes, props, and slots compose more predictably than markup attributes. Reach for the static API only when the target page has no Owl runtime of its own (plain HTML, server-rendered templates, a Base HUB website page) and adding one isn't worthwhile just to use the Base UI.
|
|
47
47
|
|
|
48
48
|
**[VERIFY]** Before choosing, confirm whether the target project already runs Owl (check for `@odoo/owl` or `@base/owl` in its `package.json`), or whether it's a plain page you'd rather not add a component-mount step to. Use the static API for the latter.
|
|
49
49
|
|
|
50
|
-
## 2. Install (pure
|
|
50
|
+
## 2. Install (pure Base API — recommended)
|
|
51
51
|
|
|
52
52
|
```html
|
|
53
53
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
|
|
@@ -63,7 +63,7 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
|
|
|
63
63
|
</script>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.
|
|
66
|
+
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable — swap the host in each URL above. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
67
67
|
|
|
68
68
|
```html
|
|
69
69
|
<script type="module">
|
|
@@ -87,12 +87,12 @@ Both APIs come from the same package and the same CSS file, and can be mixed on
|
|
|
87
87
|
</script>
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
`@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` — the one file this whole guide installs for the static API too. For npm/bundler usage, skip the import map entirely and import everything straight from `@thebase/ui` (plus `@thebase/ui/dist/baseui.templates.xml` as a fetch target) — see [
|
|
90
|
+
`@base/owl`, `@base/component`, and `@base/theme` all resolve to the exact same `dist/baseui.esm.js` — the one file this whole guide installs for the static API too. For npm/bundler usage, skip the import map entirely and import everything straight from `@thebase/ui` (plus `@thebase/ui/dist/baseui.templates.xml` as a fetch target) — see [Base Components](owl-components.md#npm--bundler-usage).
|
|
91
91
|
|
|
92
|
-
Two rules that account for most integration failures — see [
|
|
92
|
+
Two rules that account for most integration failures — see [Base Components](owl-components.md#common-mistakes) for the worked example:
|
|
93
93
|
|
|
94
|
-
1. `dist/baseui.templates.xml` must be loaded and passed to `mount()` before any
|
|
95
|
-
2. Import Owl itself from `@base/owl`, never `@odoo/owl` — otherwise the consumer's `Component` class and
|
|
94
|
+
1. `dist/baseui.templates.xml` must be loaded and passed to `mount()` before any Base UI tag renders.
|
|
95
|
+
2. Import Owl itself from `@base/owl`, never `@odoo/owl` — otherwise the consumer's `Component` class and the Base UI's are different runtime identities and mounting throws.
|
|
96
96
|
|
|
97
97
|
## 3. Install (static `b-ui` API — alternative, no Owl runtime needed)
|
|
98
98
|
|
|
@@ -103,7 +103,7 @@ Two rules that account for most integration failures — see [Pure Owl Component
|
|
|
103
103
|
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
|
|
104
104
|
```
|
|
105
105
|
|
|
106
|
-
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.
|
|
106
|
+
`https://unpkg.com/@thebase/ui@latest/dist/...` mirrors the same files as an alternative CDN if jsDelivr is unreachable. Pin an exact version (e.g. `@1.1.5`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
107
107
|
|
|
108
108
|
**Option B — npm (bundler-based apps: Vite, webpack, etc.):**
|
|
109
109
|
|
|
@@ -116,11 +116,11 @@ import "@thebase/ui/baseui.css";
|
|
|
116
116
|
import "@thebase/ui"; // side-effect import: registers window.thebase and auto-mounts on DOMContentLoaded
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
-
`dist/baseui.min.js`/`baseui.esm.js` are fully self-contained — Bootstrap's JS bundle and the Owl runtime are embedded ahead of
|
|
119
|
+
`dist/baseui.min.js`/`baseui.esm.js` are fully self-contained — Bootstrap's JS bundle and the Owl runtime are embedded ahead of the Base UI's own code, in load order, inside this one file. No other script or import is needed for the static API.
|
|
120
120
|
|
|
121
121
|
Rule that applies to both options:
|
|
122
122
|
|
|
123
|
-
- Production pages must use a pinned version (e.g. `@thebase/ui@1.1.
|
|
123
|
+
- Production pages must use a pinned version (e.g. `@thebase/ui@1.1.5` or `@thebase/ui@1`), never `@latest`.
|
|
124
124
|
|
|
125
125
|
Mount markup:
|
|
126
126
|
|
|
@@ -198,11 +198,11 @@ Full token list and the shadcn-aligned default palette: [Theming](theming.md).
|
|
|
198
198
|
</button>
|
|
199
199
|
```
|
|
200
200
|
|
|
201
|
-
Icons ship with the normal
|
|
201
|
+
Icons ship with the normal the Base UI assets — no separate script tag, and every Lucide icon name is available by kebab-case (`panel-left`), camelCase, or snake_case. Sizing, color, accessibility rules, and self-hosting: [Built-in Icons](icons.md).
|
|
202
202
|
|
|
203
203
|
## 5b. PWA toolkit (optional) — generate manifest.webmanifest + sw.js
|
|
204
204
|
|
|
205
|
-
Any
|
|
205
|
+
Any Base UI app can become an installable PWA without hand-writing a service worker. `@thebase/ui/pwa`
|
|
206
206
|
exports two pure functions, `buildManifest(config)` and `buildServiceWorker(config)`, that turn a
|
|
207
207
|
config object into the exact manifest JSON and service-worker source a hand-written PWA needs
|
|
208
208
|
(precache the app shell, network-first for same-origin requests, cache-first for the pinned CDN
|
|
@@ -219,7 +219,7 @@ export default {
|
|
|
219
219
|
},
|
|
220
220
|
serviceWorker: {
|
|
221
221
|
cacheName: "my-app-cache-v1",
|
|
222
|
-
cdnVersion: "1.1.
|
|
222
|
+
cdnVersion: "1.1.5", // pin to match the importmap in index.html
|
|
223
223
|
appFiles: ["/app.css", "/app.js", "/app.xml", "/favicon.svg", "/icons/icon-192.png", "/icons/icon-512.png"],
|
|
224
224
|
},
|
|
225
225
|
};
|
|
@@ -248,7 +248,7 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
|
|
|
248
248
|
- [ ] Only `baseui.min.css` + `baseui.min.js` (or `baseui.esm.js`) are loaded — no separate `baseui.owl.*`/`bootstrap.bundle.min.js`/`baseui.components.esm.js` files needed, for either API.
|
|
249
249
|
- [ ] `thebase.version` returns the expected pinned version in the browser console.
|
|
250
250
|
- [ ] Initial static markup mounts without an extra call; injected markup mounts after `thebase.mountAll(root)`.
|
|
251
|
-
- [ ]
|
|
251
|
+
- [ ] Base components render with no console errors (a missing-template error means step 2's `dist/baseui.templates.xml` load is missing or unawaited).
|
|
252
252
|
- [ ] Toggling `b-theme` actually changes rendered colors (a no-op usually means CSS custom properties are being overridden by the consumer's own stylesheet loaded after `baseui.min.css`).
|
|
253
253
|
- [ ] Look up the specific component in [`docs/components/`](components/) for its attributes, events, and accessibility notes before wiring it up.
|
|
254
254
|
|
|
@@ -259,10 +259,10 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
|
|
|
259
259
|
| `ReferenceError: BaseUI is not defined` | The bundle script hasn't run yet, or its `<script>` tag is missing/mistyped. | Confirm the `<script src=".../baseui.min.js" defer>` tag is present and the network tab shows it loading (200, not 404). |
|
|
260
260
|
| Components render unstyled (plain HTML, no Bootstrap look) | `baseui.min.css` isn't loaded, or loaded after your own stylesheet overrides it. | Load `baseui.min.css` in `<head>`, before any of your own CSS that touches the same elements. |
|
|
261
261
|
| `tabs` (or another Owl-backed static component) silently does nothing | `baseui.min.js` didn't finish loading. | Confirm `baseui.min.js` loads (network tab, 200 not 404). |
|
|
262
|
-
| Pure
|
|
263
|
-
|
|
|
262
|
+
| Pure Base mount throws `"X is not a Component. It must inherit from the Component class"` | Your app imports `@odoo/owl` directly somewhere instead of `@base/owl`. | Replace every `@odoo/owl` import with `@base/owl` in your own app code — both must resolve to the same `globalThis.owl` instance. |
|
|
263
|
+
| Base component renders blank / throws a template-not-found error | `dist/baseui.templates.xml` was never fetched and passed to `mount()`. | Fetch the templates string and pass it as `{ templates }` to `mount()` (or `app.addTemplates(...)`) before rendering any Base UI tag. |
|
|
264
264
|
| New markup injected via AJAX/fetch doesn't turn into components | Auto-mount only covers markup present when the bundle initializes. | Call `thebase.mountAll(root)` after injecting new `[b-ui]` or `[b-icon]` markup — it's idempotent, safe to call repeatedly. |
|
|
265
|
-
| `thebase.theme.set(...)` has no visible effect | A page stylesheet loaded after `baseui.min.css` re-hardcodes the same properties, or the element isn't a descendant of the themed root. | Load consumer CSS after
|
|
265
|
+
| `thebase.theme.set(...)` has no visible effect | A page stylesheet loaded after `baseui.min.css` re-hardcodes the same properties, or the element isn't a descendant of the themed root. | Load consumer CSS after the Base UI's, and confirm `b-theme` is set on `<html>` or an ancestor of the components you expect to change. |
|
|
266
266
|
|
|
267
267
|
## 9. Common mistakes
|
|
268
268
|
|
|
@@ -270,8 +270,8 @@ For common layouts (dashboard shells, sidebars, login/signup forms, charts), cop
|
|
|
270
270
|
- Using `/latest/` CDN paths in production instead of a pinned version.
|
|
271
271
|
- Assuming auto-mount watches the DOM forever — it does not; call `thebase.mountAll(root)` after injecting new `[b-ui]` markup client-side (e.g. from a fetched partial).
|
|
272
272
|
- Mixing `@odoo/owl` imports into a project that also imports `@thebase/ui` — always go through `@base/owl`.
|
|
273
|
-
- Expecting `thebase.mountAll()` to pick up Owl component tags (`<Button/>`) — it only mounts static `[b-ui]` markers;
|
|
273
|
+
- Expecting `thebase.mountAll()` to pick up Owl component tags (`<Button/>`) — it only mounts static `[b-ui]` markers; Base components are registered and mounted through your own app's `static components` + `mount()`, per step 2.
|
|
274
274
|
|
|
275
275
|
## Related docs
|
|
276
276
|
|
|
277
|
-
[Installation](installation.md) · [Runtime API](runtime-api.md) · [Theming](theming.md) · [Built-in Icons](icons.md) · [
|
|
277
|
+
[Installation](installation.md) · [Runtime API](runtime-api.md) · [Theming](theming.md) · [Built-in Icons](icons.md) · [Base Components](owl-components.md) · [Blocks](blocks.md) · [Component Authoring](component-authoring.md) (for contributing to the Base UI itself, not for consuming it) · [Registry](registry.md) · [Component Reference index](components/button.md) (per-component pages live under `docs/components/`)
|