bitboss-ui Component Library

Use BbTable for displaying rows of records with columns, such as order listings, member administration, or audit logs. The component manages extraction, formatting, sorting indicators, selection controls, skeletons, empty states, detail rows, and keyboard navigation.

Key Architectural Note: In v3, the table is implemented as a CSS grid of <div> elements with ARIA roles rather than a native <table> element. It reports intent via v-models for sorting, selection, paging, expansion, and highlighting, which the application should apply via computed properties or API calls.

Use bb-smooth-height to wrap regions where the height changes dynamically, such as panels that grow when data loads, validation messages appearing under fields, or lists gaining/losing rows. Unlike accordions or collapsibles, this component does not hide content; elements inside remain mounted, focusable, and announced to screen readers even at near-zero height.

Constraints and Caveats:

• Do not apply height: 100% to the wrapper from the outside.
• Do not attempt to read the element's height during an active animation, as the wrapper uses a fixed inline height while animating.
• It clips vertically only; horizontal elements like shadows or popovers will still be visible.

Use BbNumberInput when a user needs to type a numeric value such as quantities, prices, ages, thresholds, or rate limits. It automatically cleans user input, clamps values to specified minimums and maximums, and returns a real number.

Avoid using BbNumberInput in the following cases:

• Use BbSlider for bounded values that are better suited for dragging.
• Use BbRating for scores on a fixed scale.
• Use BbTextInput with a mask for numeric identifiers where leading zeros matter (e.g., postcodes or order numbers).

Use BbRadioGroup when a user must select exactly one option from a small, visible set (typically up to seven options) that they need to compare at a glance, such as priority levels, shipping speeds, or subscription plans.

Alternative Components:

• Use BbSelect for larger lists, searchable lists, or paged/fetched data.
• Use BbCheckboxGroup when choices are not exclusive (multiple selection allowed).
• Use BbRadio for custom markup where options cannot be grouped by the component.

Use BbSwitchGroup to manage related states, such as storefront sections, feature flags, or notification channels.

Choose an alternative component if:

• The rows are answers to a question: use BbCheckboxGroup.
• There is only one standalone state: use BbSwitch.
• Exactly one answer must be selected: use BbRadioGroup.

Use BbTabs to divide a single screen into peer sections (e.g., Overview, Activity, Members) where exactly one section is visible at a time.

Avoid using BbTabs if:

• You need multiple sections open at once (use BbAccordion).
• There is one region but the trigger is located elsewhere (use BbCollapsible).
• The sections represent a hierarchy (use BbBreadcrumbs).
• You are paging a result set (use BbPagination).
• The sections are steps in a flow (use a wizard).
• The sections are genuinely separate destinations (use separate pages).

Use BbOffCanvas for content that provides additional context beside the main task rather than replacing it. Common use cases include filter panels, record detail views, and settings drawers.

Contrast with other components:

• Use BbDialog for a single task that must be completed before returning to the main page.
• Use BbPopover for panels anchored to the control that opened them.
• Use BbDropdown for menus of actions.
• Use BbConfirm for simple yes/no confirmations.
• Use a full page if the drawer requires tabs, lists, and sub-navigation.

Use the BbProgress component to visualize the progress of a task where the completion can be measured (e.g., bytes uploaded, steps completed, or quota consumed).

When to use alternatives:

• Use BbSpinner when the wait time cannot be measured (indeterminate state).
• Use BbTable skeleton rows when a table is fetching data.

Note: The progress bar is display-only; it does not emit events and v-model does not write back to the state.