Types
BootstrapVueNext
is a complete rewrite that strives for full TypeScript compatibility. This is a list of types we use in this library and that you can use too.
Alignment
ts
type CommonAlignment = 'start' | 'end' | 'center' | 'fill'
type Vertical = CommonAlignment | 'baseline' | 'stretch'
type Horizontal = CommonAlignment | 'between' | 'around'
type Content = CommonAlignment | 'between' | 'around' | 'stretch'
type JustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
type TextHorizontal = 'start' | 'end' | 'center'
AriaInvalid
ts
type AriaInvalid = boolean | 'grammar' | 'spelling'
AttrsValue
ts
type AttrsValue = Record<string, any>
BodyProp
This type is only used for the Toast component.
ts
type BodyProp =
| string
| VNode<
RendererNode,
RendererElement,
{
[key: string]: any
}
>
| undefined
BreadcrumbItem
This type is only used for the Breadcrumb component.
ts
interface BreadcrumbItem {
active?: boolean
disabled?: boolean
href?: string
text: string
to?: string | Record<string, any>
}
type BreadcrumbItemRaw = BreadcrumbItem | string
Breakpoint
ts
type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
ButtonType
ts
type ButtonType = 'button' | 'submit' | 'reset'
ButtonVariant
ts
type ButtonVariant =
| ColorVariant
| 'link'
| 'outline-primary'
| 'outline-secondary'
| 'outline-success'
| 'outline-danger'
| 'outline-warning'
| 'outline-info'
| 'outline-light'
| 'outline-dark'
CheckboxOption
ts
type CheckboxOption = {
text: string
value: CheckboxValue
disabled?: boolean
}
CheckboxOptionRaw
ts
type CheckboxOptionRaw = string | number | (Partial<CheckboxOption> & Record<string, unknown>)
CheckboxValue
ts
type CheckboxValue =
| readonly unknown[]
| ReadonlySet<unknown>
| string
| boolean
| Readonly<Record<string, unknown>>
| number
| null
ClassValue
ts
export type ClassValue = any
ColorVariant
ts
type ColorVariant =
| 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'info'
| 'light'
| 'dark'
CombinedPlacement
ts
type CombinedPlacement = Placement | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
ContainerPosition
ts
type ContainerVerticalAlign = Exclude<VerticalAlign, 'baseline' | 'text-top' | 'text-bottom'>
type ContainerHorizontalAlign = 'left' | 'center' | 'right'
type ContainerPosition = `${ContainerVerticalAlign}-${ContainerHorizontalAlign}`
InputType
ts
type InputType =
| 'text'
| 'number'
| 'email'
| 'password'
| 'search'
| 'url'
| 'tel'
| 'date'
| 'time'
| 'range'
| 'color'
| 'datetime'
| 'datetime-local'
| 'month'
| 'week'
LinkTarget
ts
type LinkTarget = '_self' | '_blank' | '_parent' | '_top'
Placement
ts
type Placement = 'top' | 'bottom' | 'start' | 'end'
Position
ts
type Position =
| 'position-static'
| 'position-relative'
| 'position-absolute'
| 'position-fixed'
| 'position-sticky'
RadioOption
ts
type RadioOption = {
text: string
value: RadioValue
disabled?: boolean
}
RadioOptionRaw
ts
type RadioOptionRaw = string | number | (Partial<RadioOption> & Record<string, unknown>)
RadioValue
ts
type RadioValue =
| boolean
| string
| readonly unknown[]
| Readonly<Record<string, unknown>>
| number
| null
RadiusElement
ts
type RadiusElement =
| 'circle'
| 'pill'
| 'none'
| 'sm'
| 'lg'
| '0'
| '1'
| '2'
| '3'
| '4'
| '5'
| 0
| 1
| 2
| 3
| 4
| 5
SelectValue
ts
type SelectValue =
| boolean
| string
| readonly unknown[]
| Readonly<Record<string, unknown>>
| number
| null
Size
ts
type Size = 'sm' | 'md' | 'lg'
SpinnerType
ts
type SpinnerType = 'border' | 'grow'
TableField
ts
type TableFieldFormatter<T = any> =
| string
| ((value: unknown, key?: LiteralUnion<keyof T>, item?: T) => string)
type TableFieldAttribute<T = any> =
| Record<string, unknown>
| ((value: unknown, key?: LiteralUnion<keyof T>, item?: T) => Record<string, unknown>)
interface TableField<T = Record<string, unknown>> {
key: LiteralUnion<keyof T>
label?: string
headerTitle?: string
headerAbbr?: string
class?: ClassValue
formatter?: TableFieldFormatter<T>
sortable?: boolean
sortKey?: string
sortDirection?: string
sortByFormatted?: boolean | TableFieldFormatter<T>
filterByFormatted?: boolean | TableFieldFormatter<T>
tdClass?: ClassValue
thClass?: ClassValue
thStyle?: StyleValue
variant?: ColorVariant | null
tdAttr?: TableFieldAttribute<T>
thAttr?: TableFieldAttribute<T>
isRowHeader?: boolean
stickyColumn?: boolean
}
type TableFieldRaw<T = Record<string, unknown>> = string | TableField<T>
TableItem
ts
type TableItem<T = Record<string, unknown>> = T & {
_rowVariant?: ColorVariant
_cellVariants?: Partial<Record<keyof T, ColorVariant>>
_showDetails?: boolean
}
TextColorVariant
ts
type TextColorVariant =
| 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'info'
| 'light'
| 'dark'
| 'white'
| 'body'
| 'muted'
| 'black-50'
| 'white-50'
| 'reset'
TransitionMode
ts
type TransitionMode = 'in-out' | 'out-in'
VerticalAlign
ts
type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom'
Extending types
You can extend some types to use your own values (e.g. colors, sizes). This requires the use of interface augmentation. You can augment next interfaces:
- BaseColorVariant
- BaseButtonVariant (extends BaseColorVariant)
- BaseTextColorVariant (extends BaseColorVariant)
- BaseSize
Suppose we want to add a purple style and extra-large (xl) sizes. We need to create a declaration file in the root of vue project.
ts
// shims-bootstrap-vue-next.d.ts
import 'bootstrap-vue-next'
declare module 'bootstrap-vue-next/dist/src/types' {
export interface BaseColorVariant {
purple: unknown // we use unknown type because it does not matter here
}
export interface BaseButtonVariant {
// there is no need to add "purple" (it inherits from BaseColorVariant)
'outline-purple': unknown // outline purple button
}
export interface BaseTextColorVariant {
// there is no need to add "purple" (it inherits from BaseColorVariant)
}
export interface BaseSize {
xl: unknown // extra large
}
}
New values can be used now and the type check will be successful:
template
<BButton variant="purple" size="xl">Extra large purple button</BButton>
<BButton variant="outline-purple">Outline purple button</BButton>