Global configuration

Configure components' global props

For components that are used more frequently, you can set some global defaults to be used, and avoid setting the props for these components manually each time.

For example, if all your buttons need to be rounded, it would be tiring to set the pill modifier to each button. Instead, you can declare it in the global config, and it will be applied on all buttons.

Of course, if for some reason you don't want to use the set value, you can simply declare the prop on individual components, and it will take precedence over the default configuration.

How it works

In your entry js file (usually main.js), import the setComponentDefaults function from globalConfig.

import { setComponentDefaults } from '@/bdn-library/components/globalConfig'

Then, before initializing any components or your Vue app itself, pass the default values to be used by components as an object. Take a look at an example below:

setComponentDefaults({
  buttonPill: true,
  buttonVariant: 'primary',
  inputClearable: true,
  progressHeight: 18
})

List of properties

It's not possible to set ALL prop defaults this way, most of the props that components have are not suited for such a thing, these are just the ones where it made sense to have a global configuration.

Here's the list of possible settings and their default values:

avatarSize: 'normal',
badgePosition: 'top-right',
badgeVariant: 'primary',
buttonVariant: 'plain',
buttonPill: false,
buttonRipple: true,
buttonSquared: false,
buttonSize: 'normal',
buttonBlock: false,
buttonIdRequired: false,
dividerPosition: 'left',
dividerVariant: 'plain',
dividerSize: 'sm',
inlineLoaderWidth: 24,
inlineLoaderVariant: 'primary',
floatingLabel: true,
inputClearable: false,
inputBlock: false,
inputVariant: 'plain',
inputSize: 'md',
inputFormatLocale: 'sr-Latn-RS',
inputIdRequired: false,
textAreaRows: 4,
modalSize: 'md',
modalPreventBackdropClose: false,
modalHideCloseButton: false,
paginationRowCountText: '',
progressHeight: 15,
progressVariant: 'primary',
progressShowProgress: false,
progressPrecision: 0,
progressAlignLabel: 'center',
selectClearable: false,
selectBlock: false,
selectVariant: '',
selectSize: 'md',
selectIdRequired: false,
tableStriped: true,
tableHover: true,
tableTransparent: false,
tableBordered: false,
tooltipVariant: 'light',
tooltipPosition: 'top-right',
tooltipTrigger: 'click',
tooltipBlock: false,
tooltipPlacement: 'auto',
tooltipIdRequired: false,
expandIdRequired: false,
messageIdRequired: false,
tabIdRequired: false,
checkboxIdRequired: false,
radioIdRequired: false

Forcing adding IDs to components

One of the potential use cases of the global config is to force the developer to add IDs to components such as inputs, buttons, select etc. The example below will set the id props to required on the mentioned components, and if they are not provided it will throw an error on runtime.

TIP

Note that these errors will be shown on runtime in the browser console, they will not prevent the build

setComponentDefaults({
  inputIdRequired: true, // require id for inputs
  buttonIdRequired: true, // require id for buttons
  selectIdRequired: true, // require id for select
  checkboxIdRequired: true, // require id for single checkboxes or group checkboxes
  radioIdRequired: true, // require id for single radios
  tabIdRequired: true, // require id for tabs
  expandIdRequired: true, // require id for expand items
  messageIdRequired: true, // require id for messages called by $message or $confirm prototypes
  tooltipIdRequired: true // require id for buttons that open tooltips
})