@thebase/ui 1.1.3 → 1.1.4
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 +18 -18
- package/README.md +20 -20
- package/bin/create-baseui-app.mjs +7 -7
- package/dist/baseui.apidoc.esm.js +935 -0
- package/dist/baseui.apidoc.min.js +936 -0
- package/dist/baseui.esm.js +1 -1
- package/dist/baseui.min.js +1 -1
- package/dist/baseui.registry.json +3 -3
- package/dist/baseui.templates.xml +1 -1
- package/dist/types/apidoc.d.ts +27 -0
- package/docs/analytics.md +3 -3
- 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 +5 -5
- 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 +5 -5
- 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 +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-group.md +2 -2
- package/docs/components/input-otp.md +5 -5
- package/docs/components/input.md +5 -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 +2 -2
- 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 +2 -2
- 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 +3 -3
- 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 +12 -11
- package/docs/owl-components.md +16 -16
- package/docs/registry.md +8 -8
- package/docs/runtime-api.md +3 -3
- package/docs/theming.md +4 -4
- package/docs/usage-guide.md +21 -21
- package/package.json +8 -1
|
@@ -1699,10 +1699,10 @@
|
|
|
1699
1699
|
"integrity": {
|
|
1700
1700
|
"baseui.min.css": "sha384-RP2d04etuqh6nmVNHdJFYqK79B7N55jITUg52YrEXI3lyla5kJA4AHa2hUq79v0m",
|
|
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-6WmmDQaq2vveoleqTuVjap7gNc/1I9cKo+GmkXdLpgKwap8gwo8P5Yw80YWT+Cuj",
|
|
1703
|
+
"baseui.esm.js": "sha384-9haHF/FrXo5MXP2GQGK33GkmwAXQAde21ogM5mvCuWyOHwhyEwSw8isxrzgaHrs7",
|
|
1704
1704
|
"baseui.icons.esm.js": "sha384-hj39VMhzcFvmYnjob2hlioMOAqwAXCURGreF6s9RitXFp/iYi7rUdqtfCI+ICQeS",
|
|
1705
|
-
"baseui.templates.xml": "sha384-
|
|
1705
|
+
"baseui.templates.xml": "sha384-4pEOfbxiBDpMq0vJHvl9+ZFNcnTDhvZGdTZcmCFOELE0vXQrateo0qlO8VeuoKdq",
|
|
1706
1706
|
"baseui.block-viewer.esm.js": "sha384-6GNPYUTwsoi1ZsfOWhVWqw4vI328WX6Xb5f7A4HygyT5s+fmJaEbL7ZQmPamoyJz",
|
|
1707
1707
|
"baseui.analytics.esm.js": "sha384-M6TVmchmceTvpSzgI+DNA6zAn9xmz9a+YEexCLslSo/Ngxyp2kmzs9fm+PxWy+Da",
|
|
1708
1708
|
"baseui.analytics.min.js": "sha384-B0hBkVDbT7gmDmUMazlN4Nc1KnYGSpL+IcW2hd8840knx73HGImPgGs84MvS3hKE",
|
|
@@ -731,7 +731,7 @@
|
|
|
731
731
|
<section t-att-class="state.mode === 'code' ? 'bu-block-code-panel is-active' : 'bu-block-code-panel'">
|
|
732
732
|
<div class="bu-block-code-toolbar" role="group" aria-label="Code source">
|
|
733
733
|
<Button variant="'ghost'" type="'button'" ariaPressed="state.codeVariant === 'owl' ? 'true' : 'false'" onClick="() => this.setCodeVariant('owl')">
|
|
734
|
-
|
|
734
|
+
Base Component
|
|
735
735
|
</Button>
|
|
736
736
|
<Button variant="'ghost'" type="'button'" ariaPressed="state.codeVariant === 'template' ? 'true' : 'false'" onClick="() => this.setCodeVariant('template')">
|
|
737
737
|
Template
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/** Standalone ApiDoc: renders an OpenAPI 3.x document. Load dist/baseui.min.css for styling. */
|
|
2
|
+
export interface ApiDocProps {
|
|
3
|
+
src?: string;
|
|
4
|
+
spec?: object;
|
|
5
|
+
title?: string;
|
|
6
|
+
serverUrl?: string;
|
|
7
|
+
theme?: "light" | "dark" | "auto";
|
|
8
|
+
themeToggle?: boolean;
|
|
9
|
+
hash?: boolean;
|
|
10
|
+
operation?: string;
|
|
11
|
+
tryIt?: boolean;
|
|
12
|
+
authorize?: boolean;
|
|
13
|
+
languages?: string[];
|
|
14
|
+
language?: string;
|
|
15
|
+
assetBase?: string;
|
|
16
|
+
oauthRedirectUri?: string;
|
|
17
|
+
height?: string;
|
|
18
|
+
className?: string;
|
|
19
|
+
style?: string | Record<string, string>;
|
|
20
|
+
onLoad?(doc: unknown): void;
|
|
21
|
+
onError?(error: unknown): void;
|
|
22
|
+
onNavigate?(id: string): void;
|
|
23
|
+
}
|
|
24
|
+
export interface ApiDocApp { destroy(): void }
|
|
25
|
+
export const ApiDoc: unknown;
|
|
26
|
+
/** Mounts ApiDoc into an element (or selector) and returns the application. */
|
|
27
|
+
export function mountApiDoc(target: Element | string, props?: ApiDocProps): Promise<ApiDocApp> | ApiDocApp;
|
package/docs/analytics.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Analytics
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Base UI ships a cookieless web-analytics service, ported from [`@plausible-analytics/tracker`](https://www.npmjs.com/package/@plausible-analytics/tracker) 0.4.6 (MIT; notice in `LICENSE`). Nothing is collected until the page calls `init({ backendUrl })`. Available from `@thebase/ui` 1.1.0.
|
|
4
4
|
|
|
5
|
-
It is an optional, standalone feature: it is **not** part of `dist/baseui.min.js`/`dist/baseui.esm.js`, and it needs neither of them (no Owl, Bootstrap or component runtime). Load it on its own, with or without the rest of
|
|
5
|
+
It is an optional, standalone feature: it is **not** part of `dist/baseui.min.js`/`dist/baseui.esm.js`, and it needs neither of them (no Owl, Bootstrap or component runtime). Load it on its own, with or without the rest of the Base UI (~5.6 KB minified):
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
// npm / bundler
|
|
@@ -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
|
|
231
|
+
The dashboard ([`dashboard/`](../examples/analytics/dashboard/?backend=http://localhost:8080)) is a pure application that loads `@thebase/ui@1.1.3` 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
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Blocks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Base UI blocks are static HTML compositions styled by the same shadcn-aligned tokens as the component library. They are based on the public shadcn/ui blocks page and keep the same sizing landmarks: `min-height: 100svh`, sidebar widths, header heights, `gap-4`/`gap-6`, muted backgrounds, and auth-card widths.
|
|
4
4
|
|
|
5
5
|
Each block has its own source stylesheet in `examples/blocks/<block-name>.css`. Shared helpers live in `examples/blocks/shared.css`; new blocks should not be folded into an all-in-one block stylesheet.
|
|
6
6
|
|
|
7
|
-
Block navigation icons must use
|
|
7
|
+
Block navigation icons must use the Base UI's built-in Lucide icon component, for example `<span b-icon="layout-dashboard" b-block-icon></span>`. Do not use placeholder letters inside `b-block-icon`.
|
|
8
8
|
|
|
9
|
-
Blocks are not standalone runtime components. Paste the markup and load the normal
|
|
9
|
+
Blocks are not standalone runtime components. Paste the markup and load the normal the Base UI assets:
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
12
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@thebase/ui@latest/dist/baseui.min.css">
|
|
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.3`, 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
|
|
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.3`, 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
|
|
|
@@ -30,7 +30,7 @@ The docs/dev server serves the block gallery at `/blocks` through the shared `ex
|
|
|
30
30
|
|
|
31
31
|
## Included Blocks
|
|
32
32
|
|
|
33
|
-
- `apidoc-01`: full-page API reference built from an OpenAPI 3 file with the pure
|
|
33
|
+
- `apidoc-01`: full-page API reference built from an OpenAPI 3 file with the pure Base `ApiDoc` component (sidebar, schemas, Try It, Authorize); see [ApiDoc](components/apidoc.md).
|
|
34
34
|
- `chart-01`: copyable usage block showing how to compose `b-ui="chart"` with chart slots, SVG primitives, tokens, and footer copy.
|
|
35
35
|
- `dashboard-01`: dashboard shell with inset sidebar, header, metric cards, chart surface, and table area.
|
|
36
36
|
- `sidebar-01` through `sidebar-16`: static conversions of the current shadcn/ui sidebar block family, including documentation sidebars, collapsible groups, inset navigation, mail, workspace, file explorer, calendar, dialog, right TOC, dual-sidebar, and sticky-header variants.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="accordion"` for grouped disclosure panels.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@thebase/ui";
|
|
@@ -37,7 +37,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@t
|
|
|
37
37
|
| `AccordionItem` | `className` | `String` | optional |
|
|
38
38
|
| `AccordionTrigger` | `className` | `String` | optional |
|
|
39
39
|
|
|
40
|
-
See [
|
|
40
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
41
41
|
|
|
42
42
|
## Static component
|
|
43
43
|
|
|
@@ -67,6 +67,6 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
67
67
|
</div>
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="bu-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure
|
|
70
|
+
Options: `b-att-multiple="true"` allows more than one item to stay open. Events: `baseui:change`. Keyboard: buttons use native activation and focus behavior. The static adapter only wires ARIA/toggle behavior onto author-provided markup — add your own trailing chevron icon (`b-icon="chevron-down" class="bu-accordion-trigger-icon"`) inside the trigger for the rotating-chevron look the pure Base `AccordionTrigger` renders automatically, and set `b-att-state="open"` on an item to have it expanded by default.
|
|
71
71
|
|
|
72
72
|
Each panel (`b-accordion-panel` / `AccordionContent`'s root) is driven by its own live `bootstrap.Collapse` instance: it always carries the Bootstrap `collapse` class (plus `show` while open), and Bootstrap itself manages the `collapsing`/height transition and the `show` class across toggles — don't rely on `hidden`/node removal to detect open state. In single-open mode (the default, without `multiple`), opening one item hides every other open item's own `bootstrap.Collapse` instance before showing the clicked item's.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Alert Dialog
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, Icon } from "@thebase/ui";
|
|
@@ -41,7 +41,7 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
|
|
|
41
41
|
| `AlertDialogTitle` | `className` | `String` | optional |
|
|
42
42
|
| `AlertDialogTrigger` | `className` | `String` | optional |
|
|
43
43
|
|
|
44
|
-
See [
|
|
44
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
45
45
|
|
|
46
46
|
## Static component
|
|
47
47
|
|
package/docs/components/alert.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Alert
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Alert, AlertAction, AlertDescription, AlertTitle, Button, Icon } from "@thebase/ui";
|
|
@@ -30,7 +30,7 @@ import { Alert, AlertAction, AlertDescription, AlertTitle, Button, Icon } from "
|
|
|
30
30
|
| `AlertDescription` | `className` | `String` | optional |
|
|
31
31
|
| `AlertAction` | `className` | `String` | optional |
|
|
32
32
|
|
|
33
|
-
See [
|
|
33
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
34
34
|
|
|
35
35
|
## Static component
|
|
36
36
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# ApiDoc
|
|
2
2
|
|
|
3
|
-
Use `b-ui="apidoc"` (or the pure
|
|
3
|
+
Use `b-ui="apidoc"` (or the pure Base `ApiDoc` component) to render an **OpenAPI 3.0+ JSON** document as browsable API documentation: a grouped sidebar, per-operation parameters / request body / responses / callbacks, a **Try It** panel with request code samples in 17 languages, and an **Authorize** dialog (API key, HTTP basic, bearer, OpenID Connect token, OAuth2 implicit / authorization-code / password / client-credentials).
|
|
4
4
|
|
|
5
5
|
Swagger 2.0 documents still render, but OpenAPI 3.x is the supported input: `requestBody`, `components.securitySchemes` (`http`, `apiKey`, `oauth2` `flows`, `openIdConnect`, `mutualTLS`), `servers` with variables, `webhooks`, `callbacks`, `links`, tag `parent`/`kind`, and `$ref` to components are all understood.
|
|
6
6
|
|
|
7
7
|
Markdown in `info.description`, tag and operation descriptions is rendered with the [Markdown](markdown.md) component (fenced ` ```mermaid ` blocks become diagrams). The spec is trusted content — descriptions are rendered as Markdown/HTML, so do not point ApiDoc at a spec you do not control.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { ApiDoc } from "@base/component";
|
|
@@ -22,13 +22,26 @@ Pass an already-parsed document with `spec` instead of `src`:
|
|
|
22
22
|
<ApiDoc spec="state.spec" serverUrl="'https://api.example.com'" tryIt="false"/>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
+
## Standalone (`@thebase/ui/apidoc`)
|
|
26
|
+
|
|
27
|
+
Like the analytics service, ApiDoc also ships as its own bundle that needs neither the full the Base UI script nor a templates file (Owl and ApiDoc's templates are embedded). Load `baseui.min.css` for styling.
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import { mountApiDoc } from "@thebase/ui/apidoc";
|
|
31
|
+
|
|
32
|
+
const app = await mountApiDoc("#docs", { src: "/openapi.json", hash: true, assetBase: "/node_modules/@thebase/ui/dist/apidoc" });
|
|
33
|
+
// app.destroy() removes it
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
`mountApiDoc(target, props)` takes an element or selector plus the props below. Without a bundler, import `dist/baseui.apidoc.esm.js` from a CDN, or load `dist/baseui.apidoc.min.js`, which sets `window.thebase.apidoc.mountApiDoc`.
|
|
37
|
+
|
|
25
38
|
## Static component
|
|
26
39
|
|
|
27
40
|
```html
|
|
28
41
|
<div b-ui="apidoc" b-att-src="/openapi.json" b-att-height="100vh" b-att-hash="true"></div>
|
|
29
42
|
```
|
|
30
43
|
|
|
31
|
-
The static adapter fetches `baseui.templates.xml` from the folder the
|
|
44
|
+
The static adapter fetches `baseui.templates.xml` from the folder the Base UI script was loaded from; set `b-att-templates` to override.
|
|
32
45
|
|
|
33
46
|
## Props / attributes
|
|
34
47
|
|
|
@@ -46,7 +59,7 @@ The static adapter fetches `baseui.templates.xml` from the folder the BaseUI scr
|
|
|
46
59
|
| `authorize` | `b-att-authorize` | `true` | Show the Authorize button when the spec defines security schemes. |
|
|
47
60
|
| `languages` | `b-att-languages` | all 17 | Which code-sample languages to offer, e.g. `['curl', 'node', 'python']` / `curl,node,python`. |
|
|
48
61
|
| `language` | `b-att-language` | `curl` | Language selected first. |
|
|
49
|
-
| `assetBase` | `b-att-asset-base` | `dist/apidoc` beside the
|
|
62
|
+
| `assetBase` | `b-att-asset-base` | `dist/apidoc` beside the Base UI script | Folder that holds `img/*.svg` language logos. Empty string hides the logos. |
|
|
50
63
|
| `oauthRedirectUri` | `b-att-oauth-redirect-uri` | `oauth2-redirect.html` next to the page | Popup landing page for the implicit / authorization-code flows (see `src/components/apidoc/oauth2-redirect.html`). |
|
|
51
64
|
| `height` | `b-att-height` | `100vh` | CSS height of the component. |
|
|
52
65
|
| `className`, `style` | — | — | Standard root class / inline style. |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Aspect Ratio
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { AspectRatio } from "@thebase/ui";
|
|
@@ -21,7 +21,7 @@ import { AspectRatio } from "@thebase/ui";
|
|
|
21
21
|
| `AspectRatio` | `height` | `Number` | optional |
|
|
22
22
|
| `AspectRatio` | `className` | `String` | optional |
|
|
23
23
|
|
|
24
|
-
See [
|
|
24
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
25
25
|
|
|
26
26
|
## Static component
|
|
27
27
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="attachment"` for a CDN-ready attachment card with media, metadata, up
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base 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
12
|
import {
|
|
@@ -121,7 +121,7 @@ import {
|
|
|
121
121
|
| `AttachmentDropzone` | `disabled` | `Boolean` | disables click/drag/drop |
|
|
122
122
|
| `AttachmentDropzone` | `onFilesSelected` | `Function` | receives the picked/dropped `File[]` |
|
|
123
123
|
|
|
124
|
-
See [
|
|
124
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
125
125
|
|
|
126
126
|
## Static component
|
|
127
127
|
|
|
@@ -4,9 +4,9 @@ Use `b-ui="avatar"` for a CDN-ready avatar component.
|
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base 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
12
|
import { Avatar } from "@thebase/ui";
|
|
@@ -27,7 +27,7 @@ import { Avatar } from "@thebase/ui";
|
|
|
27
27
|
| `Avatar` | `title` | `String` | optional, native hover tooltip |
|
|
28
28
|
| `Avatar` | `className` | `String` | optional |
|
|
29
29
|
|
|
30
|
-
See [
|
|
30
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
31
31
|
|
|
32
32
|
## Static component
|
|
33
33
|
|
|
@@ -53,7 +53,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
53
53
|
|
|
54
54
|
## CSS variables
|
|
55
55
|
|
|
56
|
-
The component inherits
|
|
56
|
+
The component inherits the Base UI semantic tokens such as `--b-surface`, `--b-border`, `--b-primary`, and `--b-radius`.
|
|
57
57
|
|
|
58
58
|
## Accessibility behavior
|
|
59
59
|
|
|
@@ -65,7 +65,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
65
65
|
|
|
66
66
|
## Browser support
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
69
69
|
|
|
70
70
|
## Test checklist
|
|
71
71
|
|
package/docs/components/badge.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Small status label for counts, states, and metadata.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Badge } from "@thebase/ui";
|
|
@@ -24,7 +24,7 @@ import { Badge } from "@thebase/ui";
|
|
|
24
24
|
| `label` | `String` | alternative to default-slot children |
|
|
25
25
|
| `className` | `String` | appended to the generated `badge ...` classes |
|
|
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
29
|
## Static component
|
|
30
30
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Block Viewer
|
|
2
2
|
|
|
3
|
-
`BlockViewer` is the page-root component used by the
|
|
3
|
+
`BlockViewer` is the page-root component used by the Base UI block gallery detail pages (`examples/blocks/*.html`). It reads a title/description from `document.body.dataset`, renders a sample block's markup from a `[b-block-code-template]` script tag into a live preview panel, and offers a preview/code toggle with desktop/tablet/mobile viewport switching and a "copy code" action.
|
|
4
4
|
|
|
5
5
|
## CDN install requirements
|
|
6
6
|
|
|
7
|
-
Load the pinned
|
|
7
|
+
Load the pinned the Base UI CSS and JavaScript files, plus the block-viewer adapter bundle (it is not part of `baseui.min.js`, since it pulls in the full component export surface only when a block sample needs it — but it's self-contained, no import map required):
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<link rel="stylesheet" href="/dist/baseui.min.css">
|
|
@@ -12,7 +12,7 @@ Load the pinned BaseUI CSS and JavaScript files, plus the block-viewer adapter b
|
|
|
12
12
|
<script src="/dist/baseui.min.js" defer></script>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Base component
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
18
|
import { BlockViewer } from "@base/component";
|
|
@@ -37,7 +37,7 @@ import { BlockViewer } from "@base/component";
|
|
|
37
37
|
</body>
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
`thebase.mountAll()` (called automatically on `DOMContentLoaded`) mounts the `b-ui="block-viewer"` element as a full
|
|
40
|
+
`thebase.mountAll()` (called automatically on `DOMContentLoaded`) mounts the `b-ui="block-viewer"` element as a full application, using the block's own inline template as its live preview and its serialized text as the "Code" panel.
|
|
41
41
|
|
|
42
42
|
## Options and attributes
|
|
43
43
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Displays the path to the current resource using a hierarchy of links.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import {
|
|
@@ -48,7 +48,7 @@ import {
|
|
|
48
48
|
| `BreadcrumbSeparator` | `className` | `String` | optional; custom children override the chevron |
|
|
49
49
|
| `BreadcrumbEllipsis` | `className` | `String` | optional |
|
|
50
50
|
|
|
51
|
-
See [
|
|
51
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
52
52
|
|
|
53
53
|
## Static component
|
|
54
54
|
|
|
@@ -63,7 +63,7 @@ See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for
|
|
|
63
63
|
</nav>
|
|
64
64
|
```
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
The Base UI adds the shadcn/Nova breadcrumb classes, inserts chevron separators when none are authored, styles links and the current page, and marks the current page with `aria-current="page"`.
|
|
67
67
|
|
|
68
68
|
## Dropdown
|
|
69
69
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Bubble
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Bubble } from "@thebase/ui";
|
|
@@ -39,7 +39,7 @@ import { Bubble } from "@thebase/ui";
|
|
|
39
39
|
| --- | --- | --- | --- |
|
|
40
40
|
| `Bubble` | `className` | `String` | optional |
|
|
41
41
|
|
|
42
|
-
See [
|
|
42
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
43
43
|
|
|
44
44
|
## Static component
|
|
45
45
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Groups related buttons while preserving native button semantics.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@thebase/ui";
|
|
@@ -88,7 +88,7 @@ import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@thebase/ui"
|
|
|
88
88
|
| `ButtonGroupSeparator` | `className` | `String` | optional |
|
|
89
89
|
| `ButtonGroupText` | `className` | `String` | optional |
|
|
90
90
|
|
|
91
|
-
See [
|
|
91
|
+
See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
92
92
|
|
|
93
93
|
## Static component
|
|
94
94
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Use `b-ui="button"` on a native button or link.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Button } from "@thebase/ui";
|
|
@@ -55,7 +55,7 @@ import { Button } from "@thebase/ui";
|
|
|
55
55
|
| `getRef` | `Function` | called with the rendered root element after mount, and with `null` on unmount |
|
|
56
56
|
| `onClick` | `Function` | called with the native click event |
|
|
57
57
|
|
|
58
|
-
Also accepts default slot content instead of `label`. Every pure
|
|
58
|
+
Also accepts default slot content instead of `label`. Every pure Base the Base UI component that renders a clickable control (dialog close, tab triggers, toast action, select trigger, ...) renders it through `Button`, usually with `unstyled`, so those controls share one click/disabled/`href` implementation. See [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
59
59
|
|
|
60
60
|
## Static component
|
|
61
61
|
|
|
@@ -4,9 +4,9 @@ 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 the Base 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
12
|
import { Calendar } from "@thebase/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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
30
30
|
|
|
31
31
|
## Static component
|
|
32
32
|
|
|
@@ -52,7 +52,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
52
52
|
|
|
53
53
|
## CSS variables
|
|
54
54
|
|
|
55
|
-
The component inherits
|
|
55
|
+
The component inherits the Base 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
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
68
68
|
|
|
69
69
|
## Test checklist
|
|
70
70
|
|
package/docs/components/card.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Card
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## Base component
|
|
4
4
|
|
|
5
5
|
```js
|
|
6
6
|
import { Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle } from "@thebase/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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
36
36
|
|
|
37
37
|
## Static component
|
|
38
38
|
|
|
@@ -4,9 +4,9 @@ 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 the Base 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
12
|
import { Carousel, CarouselNext, CarouselPrevious, CarouselSlide } from "@thebase/ui";
|
|
@@ -67,7 +67,7 @@ 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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
71
71
|
|
|
72
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; Bootstrap's `wrap: true` handles wrap-around at both ends and `interval: false` keeps autoplay off.
|
|
73
73
|
|
|
@@ -102,7 +102,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
102
102
|
|
|
103
103
|
## CSS variables
|
|
104
104
|
|
|
105
|
-
The component inherits
|
|
105
|
+
The component inherits the Base 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
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
118
118
|
|
|
119
119
|
## Test checklist
|
|
120
120
|
|
package/docs/components/chart.md
CHANGED
|
@@ -4,9 +4,9 @@ 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 the Base UI CSS and JavaScript files. No extra dependency is required for static charts. If you provide a `canvas` and a global `window.Chart`, the Base UI will initialize Chart.js v3 from JSON config without bundling Chart.js into the Base UI.
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Base component
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
12
|
import { Chart } from "@thebase/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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
54
54
|
|
|
55
55
|
## Static component
|
|
56
56
|
|
|
@@ -110,7 +110,7 @@ Interactive components emit documented `baseui:*` events from their root element
|
|
|
110
110
|
|
|
111
111
|
## CSS variables
|
|
112
112
|
|
|
113
|
-
The component inherits
|
|
113
|
+
The component inherits the Base 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
|
## Accessibility behavior
|
|
116
116
|
|
|
@@ -122,7 +122,7 @@ See `examples/index.html` for a working CDN-style page.
|
|
|
122
122
|
|
|
123
123
|
## Browser support
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
The Base UI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.
|
|
126
126
|
|
|
127
127
|
## Test checklist
|
|
128
128
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Native checkbox input or label wrapper.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Base component
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
import { Checkbox } from "@thebase/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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
26
26
|
|
|
27
27
|
## Static component
|
|
28
28
|
|
|
@@ -8,7 +8,7 @@ Use `b-ui="clipboard-button"` on a native button to copy specific data to the cl
|
|
|
8
8
|
<pre id="snippet">const x = 1;</pre>
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Base component
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import { ClipboardButton } from "@thebase/ui";
|
|
@@ -35,7 +35,7 @@ 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 [Base Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.
|
|
39
39
|
|
|
40
40
|
## Static component
|
|
41
41
|
|