@thebase/ui 1.1.5 → 1.1.6
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 +10 -0
- package/README.md +4 -4
- package/dist/baseui.apidoc.esm.js +25 -24
- package/dist/baseui.apidoc.min.js +23 -22
- package/dist/baseui.esm.js +13 -13
- package/dist/baseui.min.css +1 -1
- package/dist/baseui.min.js +7 -7
- package/dist/baseui.registry.json +5 -5
- package/dist/baseui.templates.xml +2 -0
- package/docs/analytics.md +3 -3
- package/docs/blocks.md +1 -1
- package/docs/components/combobox.md +1 -1
- package/docs/components/date-picker.md +1 -1
- package/docs/components/field.md +1 -1
- package/docs/components/input-group.md +1 -1
- package/docs/components/input.md +1 -0
- package/docs/components/native-select.md +1 -1
- package/docs/components/select.md +1 -1
- package/docs/components/textarea.md +1 -1
- package/docs/icons.md +1 -1
- package/docs/installation.md +2 -2
- package/docs/owl-components.md +1 -1
- package/docs/theming.md +1 -1
- package/docs/usage-guide.md +5 -5
- package/package.json +1 -1
|
@@ -1697,13 +1697,13 @@
|
|
|
1697
1697
|
}
|
|
1698
1698
|
],
|
|
1699
1699
|
"integrity": {
|
|
1700
|
-
"baseui.min.css": "sha384-
|
|
1700
|
+
"baseui.min.css": "sha384-CJXU0BIk1YJ6i2k4WqGlnxRXisLJ1pvbbdAOaIYXbsq3NjdqvCsST304XieDxyIp",
|
|
1701
1701
|
"bootstrap.bundle.min.js": "sha384-RMbllTJcplkCRnELNTOc5Kz/3AvFDE/rNlJqWqfgmRWruobClBdfwvl10akQZkR1",
|
|
1702
|
-
"baseui.min.js": "sha384-
|
|
1703
|
-
"baseui.esm.js": "sha384-
|
|
1702
|
+
"baseui.min.js": "sha384-RRvp6vUHm/o+shXVAySNrLIPTaWQis8FmnhSPziowptMMfxaPmfWvrwCqKqNpYTo",
|
|
1703
|
+
"baseui.esm.js": "sha384-lqsK9lnh8XSA2lx94aLjn0Ndngg3B6lRVp734RbJmO51IUA0xufqGYyE5+nV9kKu",
|
|
1704
1704
|
"baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
|
|
1705
|
-
"baseui.templates.xml": "sha384-
|
|
1706
|
-
"baseui.block-viewer.esm.js": "sha384-
|
|
1705
|
+
"baseui.templates.xml": "sha384-7ALCzje9vh+KVAMbUXRuj10oa2Fnreo1X8wv2+MFVsMo1wXYNL59Yh/HCk35Vn8d",
|
|
1706
|
+
"baseui.block-viewer.esm.js": "sha384-y7RT1EQqZt+wRpYQOjJW1vV/flr7rMB62ri6NmYbf8Yg+YQEIhFBeywjB90YIaML",
|
|
1707
1707
|
"baseui.analytics.esm.js": "sha384-M6TVmchmceTvpSzgI+DNA6zAn9xmz9a+YEexCLslSo/Ngxyp2kmzs9fm+PxWy+Da",
|
|
1708
1708
|
"baseui.analytics.min.js": "sha384-B0hBkVDbT7gmDmUMazlN4Nc1KnYGSpL+IcW2hd8840knx73HGImPgGs84MvS3hKE",
|
|
1709
1709
|
"icons/lucide.json": "sha384-mc5mzpmq9eOgZVa2IcjrL33Ty4nMXE8aoZMfy+lgkC/jMQ4aYnk2S58mFsSGFnW1",
|
|
@@ -1773,6 +1773,7 @@
|
|
|
1773
1773
|
<t t-out="0"/>
|
|
1774
1774
|
<span class="bu-input-label" t-esc="label"/>
|
|
1775
1775
|
<Icon t-if="trailingIcon" name="trailingIcon" className="'bu-input-icon bu-input-trailing'"/>
|
|
1776
|
+
<Tooltip t-if="tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
|
|
1776
1777
|
</div>
|
|
1777
1778
|
<div t-if="supportingText or props.maxLength" class="bu-input-support">
|
|
1778
1779
|
<span t-att-id="supportId" t-esc="supportingText"/>
|
|
@@ -2276,6 +2277,7 @@
|
|
|
2276
2277
|
<div t-att-class="classNames" t-att-style="rootStyle" t-ref="root">
|
|
2277
2278
|
<t t-slot="default"/>
|
|
2278
2279
|
<span t-if="isOutlined" class="bu-input-label" t-esc="label"/>
|
|
2280
|
+
<Tooltip t-if="isOutlined and tipText" content="tipText" className="'bu-input-tip'"><t t-set-slot="trigger"><Icon name="'info'"/></t></Tooltip>
|
|
2279
2281
|
<div t-if="isOutlined and supportingText" class="bu-input-support">
|
|
2280
2282
|
<span t-att-id="supportId" t-esc="supportingText"/>
|
|
2281
2283
|
</div>
|
package/docs/analytics.md
CHANGED
|
@@ -13,12 +13,12 @@ init({ backendUrl: "https://stats.example.com" });
|
|
|
13
13
|
```html
|
|
14
14
|
<!-- ES module from the CDN (or map it as "@base/analytics" in an import map) -->
|
|
15
15
|
<script type="module">
|
|
16
|
-
import { init } from "https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.
|
|
16
|
+
import { init } from "https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.6/dist/baseui.analytics.esm.js";
|
|
17
17
|
init({ backendUrl: "https://stats.example.com" });
|
|
18
18
|
</script>
|
|
19
19
|
|
|
20
20
|
<!-- Classic script tag: sets window.thebase.analytics (load order vs dist/baseui.min.js doesn't matter) -->
|
|
21
|
-
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.
|
|
21
|
+
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@1.1.6/dist/baseui.analytics.min.js"></script>
|
|
22
22
|
<script>
|
|
23
23
|
thebase.analytics.init({ backendUrl: "https://stats.example.com" });
|
|
24
24
|
</script>
|
|
@@ -228,7 +228,7 @@ curl -i -X POST http://localhost:8080/api/event -H 'Content-Type: text/plain' \
|
|
|
228
228
|
|
|
229
229
|
[`examples/analytics/`](../examples/analytics/dashboard/?backend=http://localhost:8080) contains a working dashboard plus two complete sample backends: [`server-go`](../examples/analytics/server-go/main.go) (Fiber v3) and [`server-fastapi`](../examples/analytics/server-fastapi/main.py). Each one extends the receivers above with an in-memory store, a daily-salted cookieless visitor hash, a `GET /api/stats` endpoint, and static hosting for the dashboard.
|
|
230
230
|
|
|
231
|
-
The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `@thebase/ui@1.1.
|
|
231
|
+
The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `@thebase/ui@1.1.6` from jsDelivr: KPI `Card`s, an area `Chart`, top pages/sources/events `Table`s, site and period `NativeSelect`s, and a `ThemeButton`. It refreshes every 30 s and tracks its own visits through `@thebase/ui/analytics`, so a fresh backend has data straight away.
|
|
232
232
|
|
|
233
233
|
```sh
|
|
234
234
|
# Go (1.25+)
|
package/docs/blocks.md
CHANGED
|
@@ -13,7 +13,7 @@ Blocks are not standalone runtime components. Paste the markup and load the norm
|
|
|
13
13
|
<script src="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.js" defer></script>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
`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.
|
|
16
|
+
`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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production. Blocks are static markup, so they only need the static `b-ui` runtime above — see [Usage Guide](usage-guide.md) if the surrounding page is itself an application and you'd rather compose the equivalent layout from [Base Components](owl-components.md).
|
|
17
17
|
|
|
18
18
|
Use `b-block` to select the block style:
|
|
19
19
|
|
|
@@ -32,7 +32,7 @@ import { Combobox } from "@thebase/ui";
|
|
|
32
32
|
| `Combobox` | `className` | `String` | optional |
|
|
33
33
|
| `Combobox` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
34
34
|
| `Combobox` | `onChange` | `Function` | optional |
|
|
35
|
-
| `Combobox` | `label`, `labelBackground`, `supportingText`, `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`. |
|
|
35
|
+
| `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`. |
|
|
36
36
|
|
|
37
37
|
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
38
38
|
|
|
@@ -25,7 +25,7 @@ import { DatePicker } from "@thebase/ui";
|
|
|
25
25
|
| `DatePicker` | `disabled` | `Boolean` | optional |
|
|
26
26
|
| `DatePicker` | `className` | `String` | optional |
|
|
27
27
|
| `DatePicker` | `onChange` | `Function` | optional |
|
|
28
|
-
| `DatePicker` | `label`, `labelBackground`, `supportingText`, `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`. |
|
|
28
|
+
| `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`. |
|
|
29
29
|
|
|
30
30
|
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
31
31
|
|
package/docs/components/field.md
CHANGED
|
@@ -81,7 +81,7 @@ import {
|
|
|
81
81
|
|
|
82
82
|
### Outlined controls
|
|
83
83
|
|
|
84
|
-
`Field` accepts `label`, `labelBackground`, `description`, `error` and `invalid`, and hands them to the control inside it. `Input`, `Textarea`, `NativeSelect`, `Select`, `Combobox` and `DatePicker` draw them in the Material outlined style (floating label, helper text, error text and icon). A control's own `label`/`supportingText`/`errorText` props win over the `Field` values.
|
|
84
|
+
`Field` accepts `label`, `labelBackground`, `description`, `useTip` (1 = show the description in a tooltip), `error` and `invalid`, and hands them to the control inside it. `Input`, `Textarea`, `NativeSelect`, `Select`, `Combobox` and `DatePicker` draw them in the Material outlined style (floating label, helper text, error text and icon). A control's own `label`/`supportingText`/`errorText` props win over the `Field` values.
|
|
85
85
|
|
|
86
86
|
```base-ui
|
|
87
87
|
<div class="d-grid gap-4" style="max-width: 28rem; width: 100%">
|
|
@@ -42,7 +42,7 @@ import {
|
|
|
42
42
|
| Component | Prop | Type | Notes |
|
|
43
43
|
| --- | --- | --- | --- |
|
|
44
44
|
| `InputGroup` | `className` | `String` | optional |
|
|
45
|
-
| `InputGroup` | `label`, `labelBackground`, `supportingText`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined group, same label as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border once the control is focused or filled. Also inherited from a parent `Field`. |
|
|
45
|
+
| `InputGroup` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined group, same label as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border once the control is focused or filled. Also inherited from a parent `Field`. |
|
|
46
46
|
| `InputGroupAddon` | `align` | `String` | `inline-start` (default), `inline-end`, `block-start`, `block-end` |
|
|
47
47
|
| `InputGroupButton` | `variant` | `String` | `default`, `destructive`, `outline`, `secondary`, `ghost` (default), `link` |
|
|
48
48
|
| `InputGroupButton` | `size` | `String` | `xs` (default), `icon-xs`, `sm`, `icon-sm` |
|
package/docs/components/input.md
CHANGED
|
@@ -32,6 +32,7 @@ import { Input } from "@thebase/ui";
|
|
|
32
32
|
| `label` | `String` | Material-style outlined field: label rests inside, floats onto the border when focused/filled (or when `placeholder` is set) |
|
|
33
33
|
| `labelBackground` | `String` | any CSS colour for the floated label's background (default matches the field, `--bu-field-bg`); use it when the field sits on a surface of a different colour |
|
|
34
34
|
| `supportingText` | `String` | helper line under the field, linked via `aria-describedby` |
|
|
35
|
+
| `useTip` | `Number` | `0` (default) shows `supportingText` under the field; `1` hides it and shows it in a tooltip on an info icon (error text still shows under the field) |
|
|
35
36
|
| `errorText` | `String` | marks the field invalid, replaces `supportingText`, swaps the trailing icon for an error icon, sets `aria-invalid` |
|
|
36
37
|
| `leadingIcon` / `trailingIcon` | `String` | Lucide icon names (outlined mode only) |
|
|
37
38
|
| `maxLength` | `Number` | native limit; outlined mode also shows a `n/max` counter |
|
|
@@ -28,7 +28,7 @@ import { NativeSelect } from "@thebase/ui";
|
|
|
28
28
|
| `NativeSelect` | `ariaLabel` / `aria-label` | `String` | optional, accessible name for the control |
|
|
29
29
|
| `NativeSelect` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
30
30
|
| `NativeSelect` | `onChange` | `Function` | optional |
|
|
31
|
-
| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `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`. |
|
|
31
|
+
| `NativeSelect` | `label`, `labelBackground`, `supportingText`, `useTip`, `errorText`, `invalid` | `String` / `Boolean` | Material-style outlined field, same behaviour as [Input](/examples/blocks.html#/docs/components/input): the label floats onto the border, `errorText` replaces `supportingText`. Also inherited from a parent `Field`. |
|
|
32
32
|
|
|
33
33
|
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
34
34
|
|
|
@@ -24,7 +24,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@thebase/ui";
|
|
|
24
24
|
| `Select` | `value` | `String` | optional |
|
|
25
25
|
| `Select` | `onChange` | `Function` | optional |
|
|
26
26
|
| `Select` | `className` | `String` | optional |
|
|
27
|
-
| `Select` | `label`, `labelBackground`, `supportingText`, `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`. |
|
|
27
|
+
| `Select` | `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`. |
|
|
28
28
|
| `SelectContent` | `className` | `String` | optional |
|
|
29
29
|
| `SelectItem` | `value` | `String` | required |
|
|
30
30
|
| `SelectItem` | `className` | `String` | optional |
|
|
@@ -39,7 +39,7 @@ import { Textarea } from "@thebase/ui";
|
|
|
39
39
|
| `Textarea` | `id` | `String` | optional, e.g. for `Label`'s `for` |
|
|
40
40
|
| `Textarea` | `onInput` | `Function` | optional |
|
|
41
41
|
| `Textarea` | `onChange` | `Function` | optional |
|
|
42
|
-
| `Textarea` | `label`, `supportingText`, `errorText`, `maxLength`, `invalid`, `placeholder` | `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`. |
|
|
42
|
+
| `Textarea` | `label`, `supportingText`, `useTip`, `errorText`, `maxLength`, `invalid`, `placeholder` | `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`. |
|
|
43
43
|
|
|
44
44
|
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
45
45
|
|
package/docs/icons.md
CHANGED
|
@@ -22,7 +22,7 @@ Load the normal the Base UI assets. No separate icon script is required.
|
|
|
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.6`, 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
|
|
package/docs/installation.md
CHANGED
|
@@ -4,7 +4,7 @@ See the [Usage Guide](usage-guide.md) for the end-to-end integration path (choos
|
|
|
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.6`, 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
|
|
|
@@ -43,7 +43,7 @@ For static HTML, a server-rendered page, or a Base HUB website page that has no
|
|
|
43
43
|
|
|
44
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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
47
47
|
|
|
48
48
|
For npm/self-hosted usage:
|
|
49
49
|
|
package/docs/owl-components.md
CHANGED
|
@@ -55,7 +55,7 @@ Everything — the static `b-ui` runtime, the Owl framework, every Base componen
|
|
|
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.6`, or `@1` to take only non-breaking updates) in production so a new release can't change what your page loads.
|
|
59
59
|
|
|
60
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
|
|
package/docs/theming.md
CHANGED
|
@@ -38,7 +38,7 @@ 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.6`, 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
43
|
For a ready-made icon button, use the Base UI component instead of wiring your own click handler:
|
|
44
44
|
|
package/docs/usage-guide.md
CHANGED
|
@@ -32,7 +32,7 @@ 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.6`, 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
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
|
|
|
@@ -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.6`, or `@1` to take only non-breaking updates) instead of `@latest` for production.
|
|
67
67
|
|
|
68
68
|
```html
|
|
69
69
|
<script type="module">
|
|
@@ -103,7 +103,7 @@ Two rules that account for most integration failures — see [Base Components](o
|
|
|
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.6`, 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
|
|
|
@@ -120,7 +120,7 @@ import "@thebase/ui"; // side-effect import: registers window.thebase and auto-m
|
|
|
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.6` or `@thebase/ui@1`), never `@latest`.
|
|
124
124
|
|
|
125
125
|
Mount markup:
|
|
126
126
|
|
|
@@ -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.6", // 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
|
};
|