bitboss-ui 3.0.0-beta.15 → 3.0.0-beta.19
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/README.md +39 -7
- package/dist/ai/BbAccordion.md +1 -1
- package/dist/ai/BbAlert.md +1 -1
- package/dist/ai/BbBadge.md +2 -2
- package/dist/ai/BbBadgeButton.md +15 -15
- package/dist/ai/BbBaseButton.md +15 -15
- package/dist/ai/BbBaseCheckbox.md +8 -8
- package/dist/ai/BbBaseCheckboxGroup.md +12 -12
- package/dist/ai/BbBaseCheckboxIcon.md +7 -7
- package/dist/ai/BbBaseColorInput.md +11 -11
- package/dist/ai/BbBaseDatePicker.md +6 -6
- package/dist/ai/BbBaseDatePickerInput.md +15 -15
- package/dist/ai/BbBaseInputContainer.md +12 -12
- package/dist/ai/BbBaseNumberInput.md +8 -8
- package/dist/ai/BbBaseRadio.md +5 -5
- package/dist/ai/BbBaseRadioGroup.md +7 -7
- package/dist/ai/BbBaseRadioIcon.md +6 -6
- package/dist/ai/BbBaseRating.md +5 -5
- package/dist/ai/BbBaseSelect.md +21 -21
- package/dist/ai/BbBaseSlider.md +9 -9
- package/dist/ai/BbBaseSwitch.md +8 -8
- package/dist/ai/BbBaseSwitchGroup.md +12 -12
- package/dist/ai/BbBaseSwitchIcon.md +7 -7
- package/dist/ai/BbBaseTag.md +10 -10
- package/dist/ai/BbBaseTextInput.md +9 -9
- package/dist/ai/BbBaseTextarea.md +9 -9
- package/dist/ai/BbBaseTimePickerInput.md +13 -13
- package/dist/ai/BbBreadcrumbs.md +1 -1
- package/dist/ai/BbButton.md +14 -14
- package/dist/ai/BbCheckbox.md +10 -10
- package/dist/ai/BbCheckboxGroup.md +10 -10
- package/dist/ai/BbCollapsible.md +1 -1
- package/dist/ai/BbColorInput.md +15 -15
- package/dist/ai/BbColorPalette.md +5 -5
- package/dist/ai/BbDatePicker.md +12 -12
- package/dist/ai/BbDatePickerInput.md +20 -20
- package/dist/ai/BbDialog.md +69 -6
- package/dist/ai/BbDropdown.md +7 -7
- package/dist/ai/BbDropdownButton.md +11 -11
- package/dist/ai/BbDropzone.md +4 -4
- package/dist/ai/BbIndicator.md +3 -3
- package/dist/ai/BbNumberInput.md +11 -11
- package/dist/ai/BbOffCanvas.md +63 -5
- package/dist/ai/BbPagination.md +3 -3
- package/dist/ai/BbPopover.md +3 -3
- package/dist/ai/BbProgress.md +1 -1
- package/dist/ai/BbRadio.md +8 -8
- package/dist/ai/BbRadioGroup.md +11 -11
- package/dist/ai/BbRating.md +11 -11
- package/dist/ai/BbSelect.md +35 -29
- package/dist/ai/BbSelectPopover.md +26 -21
- package/dist/ai/BbSlider.md +13 -13
- package/dist/ai/BbSwitch.md +23 -10
- package/dist/ai/BbSwitchGroup.md +10 -10
- package/dist/ai/BbTable.md +24 -21
- package/dist/ai/BbTabs.md +9 -9
- package/dist/ai/BbTabsRoot.md +9 -9
- package/dist/ai/BbTag.md +13 -13
- package/dist/ai/BbTextInput.md +12 -12
- package/dist/ai/BbTextarea.md +12 -12
- package/dist/ai/BbTimePicker.md +9 -9
- package/dist/ai/BbTimePickerInput.md +17 -17
- package/dist/ai/BbTooltip.md +3 -3
- package/dist/ai/BbTree.md +1 -1
- package/dist/ai/ChipsBox.md +1 -1
- package/dist/ai/CommonInputWrapper.md +10 -10
- package/dist/ai/CommonPopover.md +5 -5
- package/dist/ai/FlatListBox.md +4 -4
- package/dist/ai/GroupedListBox.md +4 -4
- package/dist/ai/ListBox.md +4 -4
- package/dist/ai/OptionsContainer.md +4 -4
- package/dist/ai/changelog.json +8 -2
- package/dist/ai/components.json +639 -42
- package/dist/ai/composables/useBbConfig.md +47 -6
- package/dist/ai/guides/ai-router.md +9 -4
- package/dist/ai/guides/fetch-items-playbook.md +1 -1
- package/dist/ai/guides/installation-and-plugin-setup.md +19 -5
- package/dist/ai/guides/migration/components/bb-checkbox.md +35 -2
- package/dist/ai/guides/migration/components/bb-dialog.md +27 -7
- package/dist/ai/guides/migration/components/bb-offcanvas.md +11 -10
- package/dist/ai/guides/migration/v2-to-v3.md +10 -10
- package/dist/ai/guides/ssr-prefill.md +120 -0
- package/dist/ai/index.md +3 -2
- package/dist/ai/source/BbBaseCheckboxGroup.md +5 -1
- package/dist/ai/source/BbBaseRadioGroup.md +4 -0
- package/dist/ai/source/BbBaseSwitchGroup.md +4 -0
- package/dist/ai/source/BbCheckbox.md +15 -1
- package/dist/ai/source/BbDialog.md +110 -7
- package/dist/ai/source/BbDropdown.md +31 -0
- package/dist/ai/source/BbDropdownGroup.md +11 -0
- package/dist/ai/source/BbOffCanvas.md +107 -4
- package/dist/ai/source/BbPopover.md +8 -8
- package/dist/ai/source/BbRadio.md +15 -1
- package/dist/ai/source/BbSelect.md +8 -0
- package/dist/ai/source/BbSelectPopover.md +4 -0
- package/dist/ai/source/BbSwitch.md +15 -1
- package/dist/ai/source/BbTable.md +4 -0
- package/dist/components/BbBaseCheckboxGroup/BbBaseCheckboxGroup.vue_vue_type_script_setup_true_lang.js +28 -26
- package/dist/components/BbBaseCheckboxGroup/types.d.ts +1 -1
- package/dist/components/BbBaseRadioGroup/BbBaseRadioGroup.vue_vue_type_script_setup_true_lang.js +22 -20
- package/dist/components/BbBaseSwitchGroup/BbBaseSwitchGroup.vue_vue_type_script_setup_true_lang.js +28 -26
- package/dist/components/BbDialog/BbDialog.vue_vue_type_script_setup_true_lang.js +116 -95
- package/dist/components/BbDialog/types.d.ts +28 -1
- package/dist/components/BbDropdown/BbDropdown.vue_vue_type_script_setup_true_lang.js +112 -112
- package/dist/components/BbOffCanvas/BbOffCanvas.vue_vue_type_script_setup_true_lang.js +162 -143
- package/dist/components/BbOffCanvas/types.d.ts +26 -1
- package/dist/components/BbPopover/BbPopover.vue_vue_type_script_setup_true_lang.js +4 -4
- package/dist/components/BbSelect/types.d.ts +8 -0
- package/dist/components/BbSelectPopover/BbSelectPopover.vue_vue_type_script_setup_true_lang.js +82 -80
- package/dist/components/BbTable/BbTable.vue_vue_type_script_setup_true_lang.js +204 -202
- package/dist/composables/useBbConfig.d.ts +11 -5
- package/dist/composables/useBbConfig.js +5 -6
- package/dist/composables/useConfig.d.ts +13 -4
- package/dist/composables/useConfig.js +1 -1
- package/dist/composables/useItemsGetter.d.ts +11 -0
- package/dist/composables/useItemsGetter.js +44 -18
- package/dist/composables/usePrefill.d.ts +21 -2
- package/dist/composables/usePrefill.js +25 -19
- package/dist/composables/useSsrState.d.ts +20 -0
- package/dist/composables/useSsrState.js +13 -0
- package/dist/deprecation/ai-deprecations.json.d.ts +0 -22
- package/dist/deprecation/ai-deprecations.json.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +63 -62
- package/dist/llms-full.txt +1245 -856
- package/dist/llms-medium.txt +37 -18
- package/dist/llms.txt +5 -4
- package/dist/runtime/nuxt-plugin.js +28 -21
- package/dist/styles.css +1 -1
- package/dist/utilities/misc/ssrStateInjectionKey.d.ts +42 -0
- package/dist/utilities/misc/ssrStateInjectionKey.js +4 -0
- package/dist/vite.js +6 -2
- package/llms.txt +6 -5
- package/package.json +2 -2
- package/scripts/lib/eslint-plugin.d.ts +19 -1
- package/scripts/lib/eslint-plugin.mjs +146 -0
- package/scripts/lib/html-attributes.mjs +91 -0
- package/scripts/lib/validate-bb-markup.mjs +59 -4
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Vue 3 component library used across BitBoss products. It ships typed building bl
|
|
|
6
6
|
|
|
7
7
|
## What’s in the package
|
|
8
8
|
|
|
9
|
-
Published artifacts are **`dist/`** (ESM JavaScript, `.d.ts`, the two stylesheets **`styles.css`** and **`reset.css`**, and the `dist/ai/` knowledge base), plus the **`bin/`** CLI, **`scripts/lib/`** (ESLint plugin and markup validator), the root **`llms.txt`**, and this **README**. The sections below match how the library is organised in code and in the [documentation](https://ui-components
|
|
9
|
+
Published artifacts are **`dist/`** (ESM JavaScript, `.d.ts`, the two stylesheets **`styles.css`** and **`reset.css`**, and the `dist/ai/` knowledge base), plus the **`bin/`** CLI, **`scripts/lib/`** (ESLint plugin and markup validator), the root **`llms.txt`**, and this **README**. The sections below match how the library is organised in code and in the [documentation](https://ui-components.bitboss.it/).
|
|
10
10
|
|
|
11
11
|
### Styles
|
|
12
12
|
|
|
@@ -90,7 +90,7 @@ For the public **Bb\*** components, the package exports matching **props**, **ev
|
|
|
90
90
|
|
|
91
91
|
**Primary docs (components, props, guides):**
|
|
92
92
|
|
|
93
|
-
- [BitBoss UI documentation](https://ui-components
|
|
93
|
+
- [BitBoss UI documentation](https://ui-components.bitboss.it/) — site with guides and API reference.
|
|
94
94
|
|
|
95
95
|
**For AI coding agents:**
|
|
96
96
|
|
|
@@ -100,10 +100,10 @@ v3 prerelease; pin an exact version (`bitboss-ui@3.0.0-alpha.5`) for stable
|
|
|
100
100
|
links. Sizes grow with the catalogue — treat them as the current order of
|
|
101
101
|
magnitude, not a contract.
|
|
102
102
|
|
|
103
|
-
- [Core knowledge base](https://
|
|
104
|
-
- [Index](https://
|
|
105
|
-
- [components.json](https://
|
|
106
|
-
- [Complete knowledge base](https://
|
|
103
|
+
- [Core knowledge base](https://llms-bitboss-ui.bitboss.it/dist/llms-medium.txt) (~110 KB) — **start here if you can only fetch one file.** Hard rules, setup, component picker, design language, and the full component catalogue.
|
|
104
|
+
- [Index](https://llms-bitboss-ui.bitboss.it/llms.txt) (~19 KB) — link index into every document.
|
|
105
|
+
- [components.json](https://llms-bitboss-ui.bitboss.it/dist/ai/components.json) — machine-readable API surface, for programmatic validation.
|
|
106
|
+
- [Complete knowledge base](https://llms-bitboss-ui.bitboss.it/dist/llms-full.txt) (~3.2 MB) — everything concatenated. Bulk ingestion only; too large to prompt with.
|
|
107
107
|
|
|
108
108
|
Already installed? Prefer the local copy under `node_modules/bitboss-ui/dist/ai/`,
|
|
109
109
|
run `npx bitboss-ui ai-init` to write agent pointers, and
|
|
@@ -328,6 +328,38 @@ migrations — a value that must move to a slot, directive, or CSS — are repor
|
|
|
328
328
|
with a migration-guide link but left for you. Run `eslint --fix`, then the
|
|
329
329
|
remaining reports are exactly the by-hand cases.
|
|
330
330
|
|
|
331
|
+
#### The one v2 break a codemod cannot own: `reverse`
|
|
332
|
+
|
|
333
|
+
`reverse` on `BbCheckbox` / `BbRadio` / `BbSwitch` kept its **name** and
|
|
334
|
+
inverted its **meaning** in v3. Both versions render the same default layout,
|
|
335
|
+
so only explicit values moved:
|
|
336
|
+
|
|
337
|
+
| v2 | v3 |
|
|
338
|
+
| ----------------------------- | --------- |
|
|
339
|
+
| `:reverse="false"` | `reverse` |
|
|
340
|
+
| `reverse` / `:reverse="true"` | delete it |
|
|
341
|
+
|
|
342
|
+
That is invisible to every other check — `:reverse="false"` is a declared prop,
|
|
343
|
+
correctly typed, holding its own default value — and it cannot go in the
|
|
344
|
+
rename table above, because the table is keyed by prop _name_: an entry for
|
|
345
|
+
`reverse` would rewrite the legitimate v3 spellings too.
|
|
346
|
+
|
|
347
|
+
So it has its own rule, `bitboss-ui/no-reverse-false` (in `recommended`). It
|
|
348
|
+
flags only a **literal** `:reverse="false"` and offers both corrections as
|
|
349
|
+
editor suggestions — a dynamic `:reverse="isRtl"` that merely evaluates false
|
|
350
|
+
is left alone. For a bulk sweep of a v2 codebase, opt into the fix:
|
|
351
|
+
|
|
352
|
+
```js
|
|
353
|
+
{
|
|
354
|
+
rules: {
|
|
355
|
+
'bitboss-ui/no-reverse-false': ['error', { assumeV2: true }],
|
|
356
|
+
},
|
|
357
|
+
}
|
|
358
|
+
```
|
|
359
|
+
|
|
360
|
+
`assumeV2` is off by default because the two readings produce opposite
|
|
361
|
+
layouts — turn it on only for files you know came from v2, then turn it off.
|
|
362
|
+
|
|
331
363
|
Every real HTML attribute (plus `aria-*` / `data-*`) falls through untouched, so
|
|
332
364
|
attribute inheritance is never flagged. Escape hatches when you do need one:
|
|
333
365
|
|
|
@@ -406,7 +438,7 @@ MIT — see [`LICENSE`](LICENSE).
|
|
|
406
438
|
|
|
407
439
|
## Support
|
|
408
440
|
|
|
409
|
-
- **Usage and APIs:** see the [documentation](https://ui-components
|
|
441
|
+
- **Usage and APIs:** see the [documentation](https://ui-components.bitboss.it/).
|
|
410
442
|
- **Company / licensing / commercial:** [BitBoss](https://www.bitboss.it/).
|
|
411
443
|
|
|
412
444
|
### Reporting a bug
|
package/dist/ai/BbAccordion.md
CHANGED
|
@@ -529,7 +529,7 @@ is generated for you.
|
|
|
529
529
|
|
|
530
530
|
| Prop | Type | Default | Required | Description |
|
|
531
531
|
| --- | --- | --- | --- | --- |
|
|
532
|
-
| `eager` | `boolean \| undefined` |
|
|
532
|
+
| `eager` | `boolean \| undefined` | `false` | | Prevents rendering content before it's made visible. |
|
|
533
533
|
| `id` | `string \| undefined` | | | The identifier of the component. |
|
|
534
534
|
| `modelValue` | `boolean \| undefined` | `false` | | Used by v-model to trigger opening / closing the collapsible. An accordion with no `v-model` starts closed. |
|
|
535
535
|
| `transitionDuration` | `number \| undefined` | `250` | | How long the transition has to last in milliseconds |
|
package/dist/ai/BbAlert.md
CHANGED
|
@@ -396,7 +396,7 @@ const publish = () => {
|
|
|
396
396
|
| --- | --- | --- | --- | --- |
|
|
397
397
|
| `ariaLive` | `"off" \| "polite" \| "assertive" \| undefined` | | | ARIA live region politeness. Defaults to `'assertive'` for destructive/warning variants, otherwise `'polite'`. |
|
|
398
398
|
| `closeLabel` | `string \| undefined` | | | Visually hidden string used to label the close button. |
|
|
399
|
-
| `hideClose` | `boolean \| undefined` |
|
|
399
|
+
| `hideClose` | `boolean \| undefined` | `false` | | Defines whether to hide the close button. |
|
|
400
400
|
| `icon` | `string \| undefined` | | | Name of a registered icon to use, or a full raw `<svg>` string (e.g. an SVG file imported with `?raw`). |
|
|
401
401
|
| `iconSize` | `number \| ({ size?: any; } & string) \| keyof Sizes \| undefined` | `"16"` | | Size of the icon to use. |
|
|
402
402
|
| `modelValue` | `any` | `true` | | Used by v-model, set type to any to avoid Vue casting it as false. Alerts are visible on mount; the model dismisses them. |
|
package/dist/ai/BbBadge.md
CHANGED
|
@@ -714,10 +714,10 @@ selectors like `.bb-badge > .bb-badge__content`, which no longer match.
|
|
|
714
714
|
| Prop | Type | Default | Required | Description |
|
|
715
715
|
| --- | --- | --- | --- | --- |
|
|
716
716
|
| `append:icon` | `string \| undefined` | | | Icon rendered after the label. On a `clearable` badge it shares the trailing slot with the clear button: the icon shows at rest and the clear button reveals over it on hover/focus. |
|
|
717
|
-
| `clearable` | `boolean \| undefined` |
|
|
717
|
+
| `clearable` | `boolean \| undefined` | `false` | | Renders a trailing clear button and emits `click:clear` when pressed — turns the badge into a dismissible token (the pattern formerly served by `BbChip`). |
|
|
718
718
|
| `clearableLabel` | `string \| undefined` | | | Accessible label for the clear button. Rarely needed: unset, the name is **composed** from the localized `badge.clearLabel` verb and the badge's own text — "Remove Italy", not a bare "Remove" — which is already the right name in almost ever… |
|
|
719
719
|
| `icon` | `string \| undefined` | | | Renders an icon-only badge. When set, `prepend:icon` / `append:icon` are ignored and the default slot becomes the badge's visually hidden accessible label — always provide it. |
|
|
720
|
-
| `loading` | `boolean \| undefined` |
|
|
720
|
+
| `loading` | `boolean \| undefined` | `false` | | Shows a spinner in place of the leftmost icon, mirroring `BbButton`: it replaces the `icon` glyph or the `prepend:icon` when one is set; when the `append:icon` is the sole icon it replaces that instead (e.g. a select-activator chevron while… |
|
|
721
721
|
| `prepend:icon` | `string \| undefined` | | | Icon rendered before the label. |
|
|
722
722
|
| `size` | `keyof Sizes \| undefined` | `"md"` | | Preset size of the badge. |
|
|
723
723
|
| `variant` | `keyof BadgeVariantRegistry \| undefined` | `"primary"` | | Visual variant: `primary`, `secondary`, `destructive`, or `outline`. Register more via the vite plugin `badgeVariants` option and style `.bb-badge--<variant>` (set `--bg` / `--color`). |
|
package/dist/ai/BbBadgeButton.md
CHANGED
|
@@ -12,21 +12,21 @@
|
|
|
12
12
|
|
|
13
13
|
| Prop | Type | Default | Required | Description |
|
|
14
14
|
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `activeClass` | `string \| undefined` |
|
|
16
|
-
| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` |
|
|
17
|
-
| `async` | `boolean \| undefined` |
|
|
15
|
+
| `activeClass` | `string \| undefined` | `'router-link-active'` | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
|
|
16
|
+
| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
|
|
17
|
+
| `async` | `boolean \| undefined` | `false` | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
|
|
18
18
|
| `cacheFor` | `string \| number \| (string \| number)[] \| undefined` | | | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be in… |
|
|
19
19
|
| `cacheTags` | `string \| string[] \| undefined` | | | Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group. |
|
|
20
20
|
| `component` | `string \| undefined` | | | Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it. |
|
|
21
21
|
| `data` | `object \| undefined` | | | Request payload forwarded to Inertia when navigating via `href` in an Inertia-enabled app. Ignored when not using Inertia. |
|
|
22
|
-
| `disabled` | `boolean \| undefined` |
|
|
22
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
|
|
23
23
|
| `download` | `string \| boolean \| undefined` | | | Marks an `href` link as a download. Renders a plain `<a download>` doing a native navigation — never an Inertia/router visit — so file downloads (including same-origin, `blob:` and `data:` URLs) work. Pass a string to set the suggested file… |
|
|
24
|
-
| `exactActiveClass` | `string \| undefined` |
|
|
24
|
+
| `exactActiveClass` | `string \| undefined` | `'router-link-exact-active'` | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
|
|
25
25
|
| `except` | `string[] \| undefined` | | | Inertia: the inverse of `only` — properties to EXCLUDE from a partial reload. Pass one or the other, not both. |
|
|
26
|
-
| `external` | `boolean \| undefined` |
|
|
26
|
+
| `external` | `boolean \| undefined` | `false` | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
|
|
27
27
|
| `headers` | `object \| undefined` | | | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
|
|
28
28
|
| `href` | `string \| undefined` | | | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. |
|
|
29
|
-
| `instant` | `boolean \| undefined` |
|
|
29
|
+
| `instant` | `boolean \| undefined` | `false` | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
|
|
30
30
|
| `method` | `"get" \| "post" \| "put" \| "patch" \| "delete" \| undefined` | | | HTTP method used for Inertia navigation when `href` is provided in an Inertia-enabled app. Ignored otherwise. |
|
|
31
31
|
| `onBefore` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia right before the request is sent. |
|
|
32
32
|
| `onCancel` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request is cancelled. |
|
|
@@ -41,17 +41,17 @@
|
|
|
41
41
|
| `onSuccess` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request succeeds. |
|
|
42
42
|
| `pageProps` | `Record<string, unknown> \| ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) \| null \| undefined` | | | Inertia: props to merge into the next page optimistically, before the server responds. Either an object or a function of the current props. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue… |
|
|
43
43
|
| `prefetch` | `string \| boolean \| string[] \| undefined` | | | Inertia: fetch and cache this link's page ahead of the click. `true` uses the default trigger; a string or list of strings picks them (`'mount'`, `'hover'`, `'click'`). |
|
|
44
|
-
| `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` |
|
|
45
|
-
| `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` |
|
|
46
|
-
| `preserveUrl` | `boolean \| undefined` |
|
|
47
|
-
| `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` |
|
|
44
|
+
| `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | `false` | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
|
|
45
|
+
| `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | `false` | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
|
|
46
|
+
| `preserveUrl` | `boolean \| undefined` | `false` | | Inertia: keep the current URL in the address bar even though the page content changes. |
|
|
47
|
+
| `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | `'brackets'` | | Format to use when serializing array values into the query string for Inertia requests. |
|
|
48
48
|
| `rel` | `string \| undefined` | | | Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. `noopener noreferrer`). |
|
|
49
|
-
| `replace` | `boolean \| undefined` |
|
|
50
|
-
| `tag` | `ButtonTag \| undefined` |
|
|
49
|
+
| `replace` | `boolean \| undefined` | `false` | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
|
|
50
|
+
| `tag` | `ButtonTag \| undefined` | `'button'` | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
|
|
51
51
|
| `target` | `string \| undefined` | | | Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`). Ignored when rendering as a native button. |
|
|
52
52
|
| `to` | `string \| wt \| bt \| undefined` | | | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
|
|
53
|
-
| `type` | `"button" \| "submit" \| "reset" \| undefined` |
|
|
54
|
-
| `viewTransition` | `boolean \| undefined` |
|
|
53
|
+
| `type` | `"button" \| "submit" \| "reset" \| undefined` | `'button'` | | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
|
|
54
|
+
| `viewTransition` | `boolean \| undefined` | `false` | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
|
|
55
55
|
|
|
56
56
|
## Events
|
|
57
57
|
|
package/dist/ai/BbBaseButton.md
CHANGED
|
@@ -455,22 +455,22 @@ const sent = ref(false);
|
|
|
455
455
|
|
|
456
456
|
| Prop | Type | Default | Required | Description |
|
|
457
457
|
| --- | --- | --- | --- | --- |
|
|
458
|
-
| `activeClass` | `string \| undefined` |
|
|
459
|
-
| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` |
|
|
460
|
-
| `async` | `boolean \| undefined` |
|
|
461
|
-
| `block` | `boolean \| undefined` |
|
|
458
|
+
| `activeClass` | `string \| undefined` | `'router-link-active'` | | CSS class applied when the component renders as a link and the target of the link is the current route or the url matches partially. Ported for Inertia compatibility. |
|
|
459
|
+
| `ariaCurrentValue` | `"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false" \| undefined` | `'page'` | | Value forwarded to the `aria-current` attribute when the component renders as a router link and the target route is an exact match. Use to communicate the current location to assistive technologies. |
|
|
460
|
+
| `async` | `boolean \| undefined` | `false` | | Inertia: runs the visit without blocking — the page stays interactive and several async visits can be in flight at once. |
|
|
461
|
+
| `block` | `boolean \| undefined` | `false` | | Makes the component take the full available width (block-level layout). Adds the `bb-base-button--block` modifier class. |
|
|
462
462
|
| `cacheFor` | `string \| number \| (string \| number)[] \| undefined` | | | Inertia: how long a prefetched response stays fresh before it is re-fetched. A single duration, or `[staleAfter, expiresAfter]`. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue3` to be in… |
|
|
463
463
|
| `cacheTags` | `string \| string[] \| undefined` | | | Inertia: tags to file this visit's prefetch cache under, so a later request can invalidate the whole tagged group. |
|
|
464
464
|
| `component` | `string \| undefined` | | | Inertia: the page component this visit resolves to. Rarely set by hand — the server normally decides it. |
|
|
465
465
|
| `data` | `object \| undefined` | | | Request payload forwarded to Inertia when navigating via `href` in an Inertia-enabled app. Ignored when not using Inertia. |
|
|
466
|
-
| `disabled` | `boolean \| undefined` |
|
|
466
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. - When rendering as a native button, sets the `disabled` attribute. - When rendering as a link (anchor/Inertia), removes `href`, adds `aria-disabled="true"`, and prevents navigation while keeping focusable semanti… |
|
|
467
467
|
| `download` | `string \| boolean \| undefined` | | | Marks an `href` link as a download. Renders a plain `<a download>` doing a native navigation — never an Inertia/router visit — so file downloads (including same-origin, `blob:` and `data:` URLs) work. Pass a string to set the suggested file… |
|
|
468
|
-
| `exactActiveClass` | `string \| undefined` |
|
|
468
|
+
| `exactActiveClass` | `string \| undefined` | `'router-link-exact-active'` | | CSS class applied when the component renders as a link and the target of the link and the url matches exactly. Ported for Inertia compatibility. |
|
|
469
469
|
| `except` | `string[] \| undefined` | | | Inertia: the inverse of `only` — properties to EXCLUDE from a partial reload. Pass one or the other, not both. |
|
|
470
|
-
| `external` | `boolean \| undefined` |
|
|
470
|
+
| `external` | `boolean \| undefined` | `false` | | Forces an `href` link to render as a plain `<a>` (native navigation), bypassing Inertia/router interception — the same intent as Nuxt's `NuxtLink` `external`. Use for links outside the SPA. One of the native-anchor signals alongside `target… |
|
|
471
471
|
| `headers` | `object \| undefined` | | | Additional HTTP headers forwarded to Inertia when navigating via `href` in an Inertia-enabled app. |
|
|
472
472
|
| `href` | `string \| undefined` | | | Hyperlink reference used when rendering as an anchor (or as an Inertia link in Inertia-enabled apps). If provided and not disabled, the component renders as an anchor/Inertia link. |
|
|
473
|
-
| `instant` | `boolean \| undefined` |
|
|
473
|
+
| `instant` | `boolean \| undefined` | `false` | | Inertia: navigate optimistically on click and reconcile when the response lands, instead of waiting for the round trip. |
|
|
474
474
|
| `method` | `"get" \| "post" \| "put" \| "patch" \| "delete" \| undefined` | | | HTTP method used for Inertia navigation when `href` is provided in an Inertia-enabled app. Ignored otherwise. |
|
|
475
475
|
| `onBefore` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia right before the request is sent. |
|
|
476
476
|
| `onCancel` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request is cancelled. |
|
|
@@ -485,18 +485,18 @@ const sent = ref(false);
|
|
|
485
485
|
| `onSuccess` | `(() => void) \| undefined` | | | Lifecycle hook invoked by Inertia when a request succeeds. |
|
|
486
486
|
| `pageProps` | `Record<string, unknown> \| ((currentProps: Record<string, unknown>, sharedProps: Record<string, unknown>) => Record<string, unknown>) \| null \| undefined` | | | Inertia: props to merge into the next page optimistically, before the server responds. Either an object or a function of the current props. Typed platform-agnostically (matching BbButton) so the library's types never require `@inertiajs/vue… |
|
|
487
487
|
| `prefetch` | `string \| boolean \| string[] \| undefined` | | | Inertia: fetch and cache this link's page ahead of the click. `true` uses the default trigger; a string or list of strings picks them (`'mount'`, `'hover'`, `'click'`). |
|
|
488
|
-
| `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` |
|
|
489
|
-
| `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` |
|
|
490
|
-
| `preserveUrl` | `boolean \| undefined` |
|
|
491
|
-
| `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` |
|
|
488
|
+
| `preserveScroll` | `boolean \| ((props: Record<string, unknown>) => boolean) \| undefined` | `false` | | Controls whether Inertia should preserve the current scroll position after navigation. Can be a boolean or a predicate receiving the visit props. |
|
|
489
|
+
| `preserveState` | `boolean \| ((props: Record<string, unknown>) => boolean) \| null \| undefined` | `false` | | Controls whether Inertia should preserve the current state after navigation. Can be a boolean or a predicate receiving the visit props. |
|
|
490
|
+
| `preserveUrl` | `boolean \| undefined` | `false` | | Inertia: keep the current URL in the address bar even though the page content changes. |
|
|
491
|
+
| `queryStringArrayFormat` | `"brackets" \| "indices" \| undefined` | `'brackets'` | | Format to use when serializing array values into the query string for Inertia requests. |
|
|
492
492
|
| `rel` | `string \| undefined` | | | Relationship between the current document and the linked resource. Useful for security when opening new tabs (e.g. `noopener noreferrer`). |
|
|
493
|
-
| `replace` | `boolean \| undefined` |
|
|
494
|
-
| `tag` | `ButtonTag \| undefined` |
|
|
493
|
+
| `replace` | `boolean \| undefined` | `false` | | Uses history replacement instead of push navigation. - With Vue Router (`to`), calls `router.replace`. - With Inertia (`href`), performs a replace visit. |
|
|
494
|
+
| `tag` | `ButtonTag \| undefined` | `'button'` | | Element to render for the plain (non-link, non-router) button: - `'button'` (default) — real button semantics and keyboard behavior - `'div'` / `'span'` — a clickable box nested inside another button or link, where a nested `<button>` would… |
|
|
495
495
|
| `target` | `string \| undefined` | | | Target browsing context for anchor/Inertia links (e.g. `_self`, `_blank`). Ignored when rendering as a native button. |
|
|
496
496
|
| `text` | `string \| undefined` | | | Fallback text content rendered when no default slot is provided. |
|
|
497
497
|
| `to` | `string \| wt \| bt \| undefined` | | | Route location to navigate to. When provided (and not disabled), the component renders as a Vue Router link. |
|
|
498
498
|
| `type` | `"button" \| "submit" \| "reset" \| undefined` | `"button"` | | Native `type` attribute used when rendering as a button (e.g. `button`, `submit`, `reset`). |
|
|
499
|
-
| `viewTransition` | `boolean \| undefined` |
|
|
499
|
+
| `viewTransition` | `boolean \| undefined` | `false` | | Inertia: run the page swap inside a View Transition, where the browser supports one. |
|
|
500
500
|
|
|
501
501
|
## Events
|
|
502
502
|
|
|
@@ -17,19 +17,19 @@
|
|
|
17
17
|
| Prop | Type | Default | Required | Description |
|
|
18
18
|
| --- | --- | --- | --- | --- |
|
|
19
19
|
| `ariaDescribedby` | `string \| undefined` | | | ID of the element that describes this checkbox for assistive technologies. Forwarded to the input as `aria-describedby`. |
|
|
20
|
-
| `autofocus` | `Booleanish \| undefined` |
|
|
20
|
+
| `autofocus` | `Booleanish \| undefined` | `false` | | Automatically focuses the checkbox when the page/component loads. Use sparingly to avoid usability issues. |
|
|
21
21
|
| `checked` | `boolean \| undefined` | `undefined` | | Forces the checkbox checked state (controlled prop). When omitted, the checked state is derived from `modelValue === trueValue`. Deliberately `undefined` rather than `false`, so "unset" stays distinguishable from an explicit `:checked="fals… |
|
|
22
|
-
| `disabled` | `boolean \| undefined` |
|
|
22
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables user interaction. Also applied when `readonly` is set, since native checkboxes do not support `readonly`. |
|
|
23
23
|
| `falseValue` | `any` | `false` | | Value submitted/emitted when the checkbox is unchecked. Accepts any serializable value. Serialized to a string for form submission. |
|
|
24
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
25
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
24
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Puts the component into an error state (adds error styling class `bb-base-checkbox--errors`). |
|
|
25
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Puts the component into a warning state (adds `bb-base-checkbox--warnings`). Errors take priority when both are set. |
|
|
26
26
|
| `id` | `string \| undefined` | | | Identifier forwarded to the input. |
|
|
27
|
-
| `indeterminate` | `boolean \| undefined` |
|
|
27
|
+
| `indeterminate` | `boolean \| undefined` | `false` | | Renders the checkbox in the indeterminate state (neither checked nor unchecked). Note: the native `indeterminate` state resets on user click; this component re-applies it to keep UI and prop aligned. |
|
|
28
28
|
| `modelValue` | `any` | | | Bound value for `v-model`. When it equals `trueValue` the checkbox is considered checked, otherwise unchecked. |
|
|
29
29
|
| `name` | `string \| undefined` | | | Name attribute of the input, used during form submission. |
|
|
30
|
-
| `readonly` | `boolean \| undefined` |
|
|
31
|
-
| `required` | `boolean \| undefined` |
|
|
32
|
-
| `submitWhenFalse` | `boolean \| undefined` |
|
|
30
|
+
| `readonly` | `boolean \| undefined` | `false` | | Puts the input in a read-only state. Since checkboxes do not support native `readonly`, the input is disabled while styled as read-only. |
|
|
31
|
+
| `required` | `boolean \| undefined` | `false` | | Marks the input as required for form validation. |
|
|
32
|
+
| `submitWhenFalse` | `boolean \| undefined` | `false` | | When unchecked, submits a hidden input with `falseValue` so that a value is still posted with the form. When checked, the visible input submits `trueValue` as usual. |
|
|
33
33
|
| `trueValue` | `any` | `true` | | Value submitted/emitted when the checkbox is checked. Accepts any serializable value. Serialized to a string for form submission. |
|
|
34
34
|
|
|
35
35
|
## Events
|
|
@@ -17,27 +17,27 @@
|
|
|
17
17
|
| Prop | Type | Default | Required | Description |
|
|
18
18
|
| --- | --- | --- | --- | --- |
|
|
19
19
|
| `ariaDescribedby` | `string \| undefined` | | | ID of the element that describes the entire checkbox group for assistive technologies. Forwarded to each generated input as `aria-describedby`. |
|
|
20
|
-
| `autofocus` | `Booleanish \| undefined` |
|
|
21
|
-
| `dependencies` | `unknown[] \| undefined` |
|
|
20
|
+
| `autofocus` | `Booleanish \| undefined` | `false` | | Automatically focuses the first checkbox on mount when true. Applied only to the first option. |
|
|
21
|
+
| `dependencies` | `unknown[] \| undefined` | `[]` | | List of reactive values which, when changed, trigger items re-fetching. Useful to reload options based on external inputs. |
|
|
22
22
|
| `depsDebounceTime` | `number \| undefined` | `0` | | Debounce delay (ms) applied when reacting to `dependencies` changes. |
|
|
23
23
|
| `direction` | `"horizontal" \| "vertical" \| undefined` | `"horizontal"` | | Direction of the group layout. - `horizontal`: options flow in rows - `vertical`: options stack in a column |
|
|
24
|
-
| `disabled` | `boolean \| undefined` |
|
|
25
|
-
| `enforceCoherence` | `boolean \| undefined` |
|
|
26
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
27
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
28
|
-
| `hideLabel` | `boolean \| undefined` |
|
|
24
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables interaction for the whole group. |
|
|
25
|
+
| `enforceCoherence` | `boolean \| undefined` | `false` | | Enforces that `modelValue` contains only values present in `items`. Incoherent values are removed and `update:modelValue` is emitted with a coherent array. Please check out {@link https://ui-components.bitboss.it/it/guides/coherence the doc… |
|
|
26
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Puts the component into an error state adds the error styling class. |
|
|
27
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Puts the component into a warning state. Errors take priority when both are set. |
|
|
28
|
+
| `hideLabel` | `boolean \| undefined` | `false` | | Visually hides each option's label text (the text rendered next to every input) while keeping it accessible to screen readers. |
|
|
29
29
|
| `id` | `string \| undefined` | | | Identifier of the group. Used to derive per-option IDs for accessible labeling. |
|
|
30
30
|
| `items` | `T[] \| ((prefill: boolean, modelValue?: any) => T[] \| Promise<T[]>)` | `[]` | yes | Items provider. Can be: - An array of items - A sync/async function `(prefill, modelValue) => items` When a function is provided, it is invoked on prefill and when dependencies change to load options dynamically. |
|
|
31
|
-
| `itemText` | `(T extends object ? string \| ((item: T) => string) : (item: T) => string) \| undefined` |
|
|
32
|
-
| `itemValue` | `(T extends object ? string \| ((item: T) => string) : (item: T) => any) \| undefined` |
|
|
33
|
-
| `loadingText` | `string \| undefined` |
|
|
31
|
+
| `itemText` | `(T extends object ? string \| ((item: T) => string) : (item: T) => string) \| undefined` | `JSON.stringify(item)` | | Defines how to derive the display text from an item. Accepts a nested key path into the item or a function `(item) => string`. |
|
|
32
|
+
| `itemValue` | `(T extends object ? string \| ((item: T) => string) : (item: T) => any) \| undefined` | `JSON.stringify(item)` | | Defines how to derive the value from an item. Accepts a nested key path into the item or a function `(item) => any`. |
|
|
33
|
+
| `loadingText` | `string \| undefined` | `'Loading...'` | | Text displayed while items are loading. |
|
|
34
34
|
| `max` | `number \| undefined` | `Infinity` | | Maximum number of selectable items. |
|
|
35
35
|
| `modelValue` | `any` | | yes | Selected values for the group. Used with `v-model`. Single value when `multiple` is false, array when `multiple` is true. |
|
|
36
36
|
| `modelValueDebounceTime` | `number \| undefined` | `0` | | Debounce delay (ms) applied when reacting to `modelValue` changes. |
|
|
37
37
|
| `multiple` | `boolean \| undefined` | `true` | | Enables multi-selection behavior. When `true`, `modelValue` must be an array and emitted updates are arrays. When `false`, `modelValue` must be a single value (or `null`) and emitted updates are single values. |
|
|
38
38
|
| `name` | `string \| undefined` | | | Name attribute applied to each input for form submission. |
|
|
39
|
-
| `noDataText` | `string \| undefined` |
|
|
40
|
-
| `readonly` | `boolean \| undefined` |
|
|
39
|
+
| `noDataText` | `string \| undefined` | `'No data to display'` | | Text displayed when there are no items to show. |
|
|
40
|
+
| `readonly` | `boolean \| undefined` | `false` | | Makes all checkboxes read-only. Since checkboxes do not support native `readonly`, inputs are disabled while styled as read-only. |
|
|
41
41
|
| `selectable` | `boolean \| ((item: T) => boolean) \| undefined` | `true` | | Defines whether options are selectable. Can be a global boolean that affects all options or a function that accepts an item and returns a boolean that only affects that item. Non-selectable options are rendered disabled. |
|
|
42
42
|
|
|
43
43
|
## Events
|
|
@@ -169,13 +169,13 @@ from an ancestor — so `--size` set on a wrapper `div` is simply ignored
|
|
|
169
169
|
|
|
170
170
|
| Prop | Type | Default | Required | Description |
|
|
171
171
|
| --- | --- | --- | --- | --- |
|
|
172
|
-
| `checked` | `boolean \| undefined` |
|
|
173
|
-
| `disabled` | `boolean \| undefined` |
|
|
174
|
-
| `focusVisible` | `boolean \| undefined` |
|
|
175
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
176
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
177
|
-
| `indeterminate` | `boolean \| undefined` |
|
|
178
|
-
| `readonly` | `boolean \| undefined` |
|
|
172
|
+
| `checked` | `boolean \| undefined` | `false` | | Renders the checked state (fills the box and draws the checkmark). |
|
|
173
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables the glyph (muted fill, not-allowed cursor). Purely visual. |
|
|
174
|
+
| `focusVisible` | `boolean \| undefined` | `false` | | Whether keyboard focus is visible (`:focus-visible`). Draws the focus ring. |
|
|
175
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Puts the glyph into the error state (danger border and ring color). |
|
|
176
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Puts the glyph into the warning state (warn border and ring color). Errors take priority when both are set. |
|
|
177
|
+
| `indeterminate` | `boolean \| undefined` | `false` | | Renders the indeterminate state (filled box with a dash instead of the checkmark). Takes visual precedence over `checked`. |
|
|
178
|
+
| `readonly` | `boolean \| undefined` | `false` | | Renders the read-only affordance (default cursor instead of pointer). |
|
|
179
179
|
|
|
180
180
|
## Events
|
|
181
181
|
|
|
@@ -16,28 +16,28 @@
|
|
|
16
16
|
|
|
17
17
|
| Prop | Type | Default | Required | Description |
|
|
18
18
|
| --- | --- | --- | --- | --- |
|
|
19
|
-
| `adaptive` | `boolean \| undefined` | `
|
|
19
|
+
| `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` | | When `true`, the palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover. Forwarded to `BbColorPalette`, which resolves the fallback. When unset, falls back to the global `config.adaptive`. |
|
|
20
20
|
| `alpha` | `boolean \| undefined` | `false` | | Enable the alpha channel. When true the picker shows an opacity slider and emits / accepts `#RRGGBBAA` hex8 values. |
|
|
21
21
|
| `append:icon` | `string \| undefined` | | | Name of the icon to render at the right hand side of the input. |
|
|
22
22
|
| `ariaDescribedby` | `string \| undefined` | | | Id(s) of element(s) describing this input for assistive tech (space-separated). Typically includes the container hint id if used within a BaseInputContainer. |
|
|
23
23
|
| `autocomplete` | `string \| undefined` | `"off"` | | Autocomplete hint for the browser. |
|
|
24
24
|
| `autofocus` | `Booleanish \| undefined` | | | Focus the input on mount. |
|
|
25
|
-
| `clearable` | `boolean \| undefined` |
|
|
26
|
-
| `compact` | `boolean \| undefined` |
|
|
27
|
-
| `disabled` | `boolean \| undefined` |
|
|
28
|
-
| `eyeDropper` | `boolean \| undefined` |
|
|
29
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
30
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
25
|
+
| `clearable` | `boolean \| undefined` | `false` | | Show a clear button when the input has a value. |
|
|
26
|
+
| `compact` | `boolean \| undefined` | `false` | | Display the component in a compact layout. |
|
|
27
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disable all interactions. |
|
|
28
|
+
| `eyeDropper` | `boolean \| undefined` | `false` | | Show an eyedropper button to sample any color on screen. Uses the native EyeDropper API — hidden automatically on unsupported browsers. |
|
|
29
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Visually mark the component as invalid (also sets aria-invalid on the input). |
|
|
30
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
|
|
31
31
|
| `id` | `string \| undefined` | | | The id attribute for the input element. Defaults to a generated `bb_<unique>` id when omitted. |
|
|
32
|
-
| `loading` | `boolean \| undefined` |
|
|
32
|
+
| `loading` | `boolean \| undefined` | `false` | | Display the loading state. |
|
|
33
33
|
| `modelValue` | `string \| null` | | yes | v-model value: `#RRGGBB` hex string or `null` when empty. Example: `#1A2B3C` |
|
|
34
34
|
| `name` | `string \| undefined` | | | Name attribute of the input. |
|
|
35
35
|
| `placeholder` | `string \| undefined` | | | Placeholder text when there is no value. |
|
|
36
36
|
| `prepend:icon` | `string \| undefined` | | | Name of the icon to render at the start of the input. |
|
|
37
|
-
| `readonly` | `boolean \| undefined` |
|
|
38
|
-
| `required` | `boolean \| undefined` |
|
|
37
|
+
| `readonly` | `boolean \| undefined` | `false` | | Make the input read-only. |
|
|
38
|
+
| `required` | `boolean \| undefined` | `false` | | Mark the input as required. |
|
|
39
39
|
| `swatches` | `boolean \| string[][] \| undefined` | | | Controls swatches display in the picker: - `true` — show the built-in Material-palette swatches - `string[][]` — show custom swatches (each inner array = a column of shades) - `false` / omitted — no swatches section |
|
|
40
|
-
| `transitionDuration` | `number \| undefined` |
|
|
40
|
+
| `transitionDuration` | `number \| undefined` | `250` | | Transition duration (ms) of the palette popover. Forwarded to `BbColorPalette`, which supplies the default. |
|
|
41
41
|
|
|
42
42
|
## Events
|
|
43
43
|
|
|
@@ -16,19 +16,19 @@
|
|
|
16
16
|
|
|
17
17
|
| Prop | Type | Default | Required | Description |
|
|
18
18
|
| --- | --- | --- | --- | --- |
|
|
19
|
-
| `disabled` | `boolean \| undefined` |
|
|
19
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables the component. |
|
|
20
20
|
| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `1` | | Defines the first day of the week with `0` meaning Sunday and `6` meaning Saturday. |
|
|
21
|
-
| `floating` | `boolean \| undefined` |
|
|
21
|
+
| `floating` | `boolean \| undefined` | `false` | | If true the value is a plain calendar string (`YYYY-MM-DD`, or the shape `type` dictates) instead of the default ISO instant. |
|
|
22
22
|
| `id` | `string \| undefined` | | | The identifier of the component. |
|
|
23
23
|
| `max` | `string \| undefined` | | | Maximum selectable date. |
|
|
24
24
|
| `min` | `string \| undefined` | | | Minimum selectable date. |
|
|
25
25
|
| `modelValue` | `string \| string[] \| null` | | yes | Used by v-model. Can be null, a single string, or an array of strings based on whether a range or single date is needed. |
|
|
26
|
-
| `multiple` | `boolean \| undefined` |
|
|
27
|
-
| `range` | `boolean \| undefined` |
|
|
28
|
-
| `readonly` | `boolean \| undefined` |
|
|
26
|
+
| `multiple` | `boolean \| undefined` | `false` | | Allows the selection of multiple items. |
|
|
27
|
+
| `range` | `boolean \| undefined` | `false` | | Selects a range of dates between two dates. It selects all of the days between start and end. |
|
|
28
|
+
| `readonly` | `boolean \| undefined` | `false` | | Sets the input in a readonly state. |
|
|
29
29
|
| `selectable` | `((date: string) => boolean) \| undefined` | | | Function that accepts a date string and returns a boolean. Returning `false` means the date cannot be selected. The string is shaped by `type`: `YYYY-MM` under `month`, `YYYY` under `year`. |
|
|
30
30
|
| `type` | `DatePickerType \| undefined` | `"date"` | | What the grid selects: a day (`date`/`datetime`), a month, or a year. The coarse types make the month/year panel terminal instead of a navigation step, and emit `YYYY-MM` / `YYYY`. |
|
|
31
|
-
| `utc` | `boolean \| undefined` |
|
|
31
|
+
| `utc` | `boolean \| undefined` | `false` | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. I… |
|
|
32
32
|
|
|
33
33
|
## Events
|
|
34
34
|
|
|
@@ -17,23 +17,23 @@
|
|
|
17
17
|
|
|
18
18
|
| Prop | Type | Default | Required | Description |
|
|
19
19
|
| --- | --- | --- | --- | --- |
|
|
20
|
-
| `adaptive` | `boolean \| undefined` | `
|
|
21
|
-
| `ampm` | `boolean \| undefined` |
|
|
20
|
+
| `adaptive` | `boolean \| undefined` | ``config.adaptive` (`true`)` | | On mobile the calendar opens inside a bottom off-canvas sheet instead of a floating popover, mirroring the adaptive behaviour of `BbPopover`/`BbSelectPopover`. When unset, falls back to the global `config.adaptive`. |
|
|
21
|
+
| `ampm` | `boolean \| undefined` | `false` | | 12-hour display with an AM/PM segment (requires `type="datetime"`). Purely a field-composition concern: `modelValue` and the `time` model stay 24-hour regardless. Type `A`/`P` (or ArrowUp/Down) to set the meridiem. |
|
|
22
22
|
| `append:icon` | `string \| undefined` | | | Name of the icon to render at the right hand side of the input. |
|
|
23
23
|
| `ariaDescribedby` | `string \| undefined` | | | Additional description id(s) announced by assistive technologies. Usually provided by an outer input container to link hint/error text. |
|
|
24
24
|
| `autocomplete` | `string \| undefined` | `"off"` | | Browser autocomplete hint for the input. |
|
|
25
25
|
| `autofocus` | `Booleanish \| undefined` | | | Focus the first text field automatically when the component mounts. |
|
|
26
|
-
| `clearable` | `boolean \| undefined` |
|
|
27
|
-
| `compact` | `boolean \| undefined` |
|
|
26
|
+
| `clearable` | `boolean \| undefined` | `false` | | Displays a clear button whenever a value is present and the control is interactive. |
|
|
27
|
+
| `compact` | `boolean \| undefined` | `false` | | Applies the compact density styles to the control. |
|
|
28
28
|
| `disableCalendar` | `boolean \| "mobile" \| "desktop" \| undefined` | `false` | | Disables the calendar: hides the trigger button and prevents the popover from opening. Use `'desktop'` to disable it on desktop only (keyboard-first there, calendar-first on mobile — complementing `disableWriting: 'mobile'`) or `'mobile'` t… |
|
|
29
|
-
| `disabled` | `boolean \| undefined` |
|
|
29
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disables the input, calendar trigger, and popover. |
|
|
30
30
|
| `disableWriting` | `boolean \| "mobile" \| "desktop" \| undefined` | `false` | | Controls whether manual typing is disabled inside the text fields. Use `'mobile'` to disable typing only on mobile, `'desktop'` to disable typing only on desktop. Applies to both single and range modes. |
|
|
31
31
|
| `firstDayOfWeek` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | | | Sets the first day of the week for the calendar (0 = Sunday, 6 = Saturday). |
|
|
32
|
-
| `floating` | `boolean \| undefined` |
|
|
33
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
34
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
32
|
+
| `floating` | `boolean \| undefined` | `false` | | Emit dates formatted as `YYYY-MM-DD` instead of ISO strings. |
|
|
33
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Marks the control as invalid, applying error styles and setting `aria-invalid`. |
|
|
34
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
|
|
35
35
|
| `id` | `string \| undefined` | | | Explicit id for the input element. Falls back to an auto-generated `bdpi-<uid>` value. |
|
|
36
|
-
| `loading` | `boolean \| undefined` |
|
|
36
|
+
| `loading` | `boolean \| undefined` | `false` | | Shows loading visuals on the input. |
|
|
37
37
|
| `max` | `string \| undefined` | | | Maximum selectable date in `YYYY-MM-DD` format — or, with `type="datetime"`, `YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes. |
|
|
38
38
|
| `min` | `string \| undefined` | | | Minimum selectable date in `YYYY-MM-DD` format — or, with `type="datetime"`, `YYYY-MM-DDTHH:mm` to tighten the boundary day to a minute. Values outside both patterns throw during setup to surface configuration mistakes. |
|
|
39
39
|
| `modelValue` | `string \| string[] \| null` | | yes | v-model value. Use `null` for empty, a single string for single selection, or a two-element string array (`[start, end]`) when `range` is true. |
|
|
@@ -41,16 +41,16 @@
|
|
|
41
41
|
| `offCanvasProps` | `Partial<BbOffCanvasProps> \| undefined` | | | Extra props forwarded to the `BbOffCanvas` sheet when `adaptive` is active on mobile (e.g. `title`, `size`, `persistent`). |
|
|
42
42
|
| `placeholder` | `string \| undefined` | | | Placeholder text displayed when no value is present. Defaults to the localized format hint (`baseDatePickerInput.dateFormatSingle` / `dateFormatRange` — e.g. `MM/DD/YYYY` for `en`, `GG/MM/AAAA` for `it`). |
|
|
43
43
|
| `prepend:icon` | `string \| undefined` | | | Icon name rendered before the input field. |
|
|
44
|
-
| `range` | `boolean \| undefined` |
|
|
45
|
-
| `readonly` | `boolean \| undefined` |
|
|
46
|
-
| `required` | `boolean \| undefined` |
|
|
47
|
-
| `seconds` | `boolean \| undefined` |
|
|
44
|
+
| `range` | `boolean \| undefined` | `false` | | Enables range selection. When active, v-model expects a two-element array `[start, end]`. Users can still type into the start and end segments unless `disableWriting` disables typing. |
|
|
45
|
+
| `readonly` | `boolean \| undefined` | `false` | | Makes the text fields read-only and prevents opening the calendar. |
|
|
46
|
+
| `required` | `boolean \| undefined` | `false` | | Marks the inputs as required to the browser. |
|
|
47
|
+
| `seconds` | `boolean \| undefined` | `false` | | Adds the seconds segment (requires `type="datetime"`). Without it, an incoming value carrying seconds displays truncated and is left untouched until the user commits an edit, at which point seconds zero out. |
|
|
48
48
|
| `selectable` | `((date: string) => boolean) \| undefined` | | | Predicate invoked for each candidate date. Return `false` to disable selection for that value. |
|
|
49
|
-
| `step` | `number \| undefined` |
|
|
49
|
+
| `step` | `number \| undefined` | `1` | | Minute granularity for the calendar's minute column and arrow stepping (requires `type="datetime"`). Constrains what the component produces, never what it accepts: a typed off-grid value (e.g. `10:07` with `step: 15`) is emitted verbatim, a… |
|
|
50
50
|
| `time` | `string \| string[] \| null \| undefined` | | | Companion model for the time part (`v-model:time`), always 24-hour `HH:mm` / `HH:mm:ss` regardless of display. With `floating` it is the only carrier of the time; otherwise it mirrors the time inside `modelValue` (same digits) and writing i… |
|
|
51
51
|
| `transitionDuration` | `number \| undefined` | | | Transition duration, in milliseconds, for the popover appearance. |
|
|
52
52
|
| `type` | `DatePickerType \| undefined` | `"date"` | | What the field edits, and therefore its segments and emitted shape. - `date` (default) — `DD/MM/YYYY`. - `datetime` — adds the time segments and the calendar's time rail. - `month` — `MM/YYYY`, emitting `YYYY-MM`. - `year` — `YYYY`, emittin… |
|
|
53
|
-
| `utc` | `boolean \| undefined` |
|
|
53
|
+
| `utc` | `boolean \| undefined` | `false` | | Emits values as UTC ISO strings (`...Z`) instead of ISO strings carrying the local offset (`...+01:00`). Emission-only: incoming values are parsed identically either way, so the prop can be added or removed without touching stored values. F… |
|
|
54
54
|
|
|
55
55
|
## Events
|
|
56
56
|
|
|
@@ -12,29 +12,29 @@
|
|
|
12
12
|
|
|
13
13
|
| Prop | Type | Default | Required | Description |
|
|
14
14
|
| --- | --- | --- | --- | --- |
|
|
15
|
-
| `clearable` | `boolean \| undefined` |
|
|
16
|
-
| `compact` | `boolean \| undefined` |
|
|
15
|
+
| `clearable` | `boolean \| undefined` | `false` | | Whether the inner control exposes a clear action. |
|
|
16
|
+
| `compact` | `boolean \| undefined` | `false` | | Apply the compact density variant to the container. |
|
|
17
17
|
| `description` | `string \| undefined` | | | Always-visible descriptive text rendered below the label and above the input, in muted foreground color. When present, its id is exposed to the input slot via `ariaDescribedby`, after any error/warning ids and before the hint id. In `floati… |
|
|
18
18
|
| `direction` | `InputDirection \| undefined` | `"vertical"` | | Controls label/input layout. Accepts `'vertical'`, `'horizontal'`, `'auto'`, or a two-token ratio pattern such as `"xx xxxxx"` that sizes the label/input columns by token length. An unrecognized value warns and falls back to `'auto'`. |
|
|
19
|
-
| `disabled` | `boolean \| undefined` |
|
|
19
|
+
| `disabled` | `boolean \| undefined` | `false` | | Whether the inner control is disabled. |
|
|
20
20
|
| `errors` | `string \| string[] \| undefined` | | | Messages displayed beneath the input. Accepts a string or array; values are rendered one per line. They render in an `aria-live="polite"` region (announced when they appear) and, while the list is non-empty, their container id is also expos… |
|
|
21
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
22
|
-
| `hasValue` | `boolean \| undefined` |
|
|
23
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
24
|
-
| `hideLabel` | `boolean \| undefined` |
|
|
21
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Forces the error state independently of `errors`, useful to pre-style the container. |
|
|
22
|
+
| `hasValue` | `boolean \| undefined` | `false` | | Whether the inner control currently contains a value. |
|
|
23
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Forces the warning state independently of `warnings`. Same chrome as errors but with `--bb-warn`; errors take priority when both are set. |
|
|
24
|
+
| `hideLabel` | `boolean \| undefined` | `false` | | Hide the visual label while keeping it available to assistive technology. |
|
|
25
25
|
| `hint` | `string \| undefined` | | | Hint text rendered below the input. While shown, its id is exposed to the input slot via `ariaDescribedby` — last in the list, after any error/warning ids and the description id. |
|
|
26
26
|
| `id` | `string \| undefined` | | | Explicit id for the container and associated input. Falls back to an auto-generated id when omitted. |
|
|
27
|
-
| `inputPosition` | `"left" \| "center" \| "right" \| undefined` |
|
|
27
|
+
| `inputPosition` | `"left" \| "center" \| "right" \| undefined` | `'left'` | | Horizontal alignment of the input column when direction is horizontal or custom. Unset, it follows the layout: `'right'` in a horizontal/ratio split (beside the left-hand label), `'left'` otherwise — and `direction` is `'vertical'` by defau… |
|
|
28
28
|
| `label` | `string` | | yes | Visible label text for the field. Also used to derive a fallback name. |
|
|
29
29
|
| `labelMode` | `"floating" \| "outside" \| "inside" \| undefined` | | | Label rendering mode. |
|
|
30
30
|
| `labelPosition` | `"left" \| "center" \| "right" \| undefined` | `"left"` | | Horizontal alignment for the label column. |
|
|
31
31
|
| `labelTag` | `LabelTag \| undefined` | `"label"` | | Element used for the label: `label` (default), `legend` inside a `fieldset` container, or `span` when the text must not steal the click because the control already carries its own label. |
|
|
32
|
-
| `loading` | `boolean \| undefined` |
|
|
33
|
-
| `mobile` | `boolean \| undefined` |
|
|
32
|
+
| `loading` | `boolean \| undefined` | `false` | | Whether the inner control is in a loading state. |
|
|
33
|
+
| `mobile` | `boolean \| undefined` | `false` | | Whether the inner control is in mobile viewport mode. |
|
|
34
34
|
| `name` | `string \| undefined` | | | Explicit name attribute forwarded to the input. When omitted, a slug derived from `label` is used. |
|
|
35
|
-
| `readonly` | `boolean \| undefined` |
|
|
35
|
+
| `readonly` | `boolean \| undefined` | `false` | | Whether the inner control is readonly. |
|
|
36
36
|
| `reverse` | `boolean \| undefined` | `false` | | Swap the label and input columns. |
|
|
37
|
-
| `showHint` | `boolean \| undefined` |
|
|
37
|
+
| `showHint` | `boolean \| undefined` | `false` | | Keep the hint permanently visible, regardless of focus. |
|
|
38
38
|
| `tag` | `ContainerTag \| undefined` | `"span"` | | Element used for the inner wrapper: `span` (default) to remain inline, `div` for a block wrapper, `fieldset` for grouped controls (pair it with `labelTag="legend"`), or `label` to make the whole wrapper activate the control. |
|
|
39
39
|
| `warnings` | `string \| string[] \| undefined` | | | Warning messages displayed beneath the input, in their own `aria-live` region. Accepts a string or array; values are rendered one per line, in `--bb-text-warn` amber (the text-contrast half of the warning pair — the chrome stays on `--bb-wa… |
|
|
40
40
|
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
| `ariaDescribedby` | `string \| undefined` | | | Id(s) of descriptive elements announced by screen readers. |
|
|
21
21
|
| `autocomplete` | `string \| undefined` | `"off"` | | Browser autocomplete hint for the field. |
|
|
22
22
|
| `autofocus` | `Booleanish \| undefined` | | | Focus the input automatically after mount. |
|
|
23
|
-
| `clearable` | `boolean \| undefined` |
|
|
24
|
-
| `compact` | `boolean \| undefined` |
|
|
25
|
-
| `disabled` | `boolean \| undefined` |
|
|
26
|
-
| `hasErrors` | `boolean \| undefined` |
|
|
27
|
-
| `hasWarning` | `boolean \| undefined` |
|
|
23
|
+
| `clearable` | `boolean \| undefined` | `false` | | Show a clear button whenever a value is present and the control is interactive. |
|
|
24
|
+
| `compact` | `boolean \| undefined` | `false` | | Apply the compact density variant. |
|
|
25
|
+
| `disabled` | `boolean \| undefined` | `false` | | Disable manual input and the exposed increase/decrease helpers. |
|
|
26
|
+
| `hasErrors` | `boolean \| undefined` | `false` | | Force the error state; also toggles `aria-invalid`. |
|
|
27
|
+
| `hasWarning` | `boolean \| undefined` | `false` | | Apply warning styling (same chrome as errors, `--bb-warn` color). Suppressed when `hasErrors` is also set. |
|
|
28
28
|
| `id` | `string \| undefined` | | | Explicit id forwarded to the native input. |
|
|
29
|
-
| `loading` | `boolean \| undefined` |
|
|
29
|
+
| `loading` | `boolean \| undefined` | `false` | | Display the loading state styles. |
|
|
30
30
|
| `max` | `number \| undefined` | `Number.MAX_SAFE_INTEGER` | | Upper bound for clamping user input and helper increments. |
|
|
31
31
|
| `maxPrecision` | `number \| undefined` | `8` | | Maximum number of decimal digits retained after processing. |
|
|
32
32
|
| `min` | `number \| undefined` | `Number.MIN_SAFE_INTEGER` | | Lower bound for clamping user input and helper decrements. |
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
| `name` | `string \| undefined` | | | Name attribute forwarded to the native input. |
|
|
35
35
|
| `placeholder` | `string \| undefined` | | | Placeholder text when no value is present. |
|
|
36
36
|
| `prepend:icon` | `string \| undefined` | | | Name of the icon to render at the left hand side of the input. |
|
|
37
|
-
| `readonly` | `boolean \| undefined` |
|
|
38
|
-
| `required` | `boolean \| undefined` |
|
|
37
|
+
| `readonly` | `boolean \| undefined` | `false` | | Make the input read-only while keeping its value visible. |
|
|
38
|
+
| `required` | `boolean \| undefined` | `false` | | Mark the input as required for form validation. |
|
|
39
39
|
| `step` | `number \| undefined` | `1` | | Increment used by the `increase`/`decrease` helpers. Manual typing is never forced to this step. |
|
|
40
40
|
|
|
41
41
|
## Events
|