Badin Atlas

# June '21 Breaking changes

On June 16th 2021. global components imports importBasic and importAll are deprecated and removed. Now it's required to create your own imports per project, so we could keep the bundle size at minimum and use only the components that you need in project.

To ease the migration process, these are the steps necessary to restore your project without the global imports.

  1. Import components global css
    Require the index.scss file from bdn-library in your main.js file:
require('./bdn-library/styles/index.scss')
  1. If you were using the full screen loader component, also in main.js file add following lines:
import loaderFull from '@/bdn-library/components/bdnLoader/bdnLoaderPlugin'

Vue.use(loaderFull)
  1. If you were using the $message and $confirm prototypes, add following in main.js
import bdnMessage from '@/bdn-library/components/bdnMessage/main.js'

Vue.prototype.$message = bdnMessage.showMessage
Vue.prototype.$confirm = bdnMessage.showConfirmation
  1. If you need some components enabled globally, import them in separate .js file and then require it in main.js, or import components where needed.

As a reference, here's the previous importAll.js file, you can copy it in your project and adjust the paths to components as necessary:

import Vue from 'vue'

import appLayout from './appLayout/appLayout'
import bdnAvatar from './bdnAvatar/bdnAvatar'
import bdnBadge from './bdnBadge/bdnBadge'
import bdnButton from './bdnButton/bdnButton'
import bdnButtonGroup from './bdnButtonGroup/bdnButtonGroup'
import bdnCard from './bdnCard/bdnCard'
import bdnCheckbox from './bdnCheckbox/bdnCheckbox'
import bdnCheckboxGroup from './bdnCheckboxGroup/bdnCheckboxGroup'
import bdnDatePicker from './bdnDatePicker/bdnDatePicker'
import bdnDivider from './bdnDivider/bdnDivider'
import bdnDropdown from './bdnDropdown/bdnDropdown'
import bdnFastEnter from './bdnFastEnter/bdnFastEnter'
import bdnGroup from './bdnGroup/bdnGroup'
import bdnInlineLoader from './bdnInlineLoader/bdnInlineLoader'
import bdnInput from './bdnInput/bdnInput'
import bdnKeyboardControl from './bdnKeyboardControl/bdnKeyboardControl'
import bdnLoader from './bdnLoader/bdnLoader'
import bdnMenu from './bdnMenu/bdnMenu'
import bdnModal from './bdnModal/bdnModal'
import bdnPagination from './bdnPagination/bdnPagination'
import bdnTooltip from './bdnTooltip/bdnTooltip'
import bdnMessage from './bdnMessage/main.js'
import bdnMenuGroup from './bdnMenu/bdnMenuGroup'
import bdnMenuItem from './bdnMenu/bdnMenuItem'
import bdnSubmenu from './bdnMenu/bdnSubmenu'
import bdnRadio from './bdnRadio/bdnRadio'
import bdnRadioGroup from './bdnRadioGroup/bdnRadioGroup'
import bdnSelect from './bdnSelect/bdnSelect'
import bdnSkeletonLoader from './bdnSkeletonLoader/bdnSkeletonLoader'
import bdnTabs from '@/bdn-library/components/bdnTabs/bdnTabs'
import bdnTabPage from '@/bdn-library/components/bdnTabs/bdnTabPage'
import bdnTable from './bdnTable/bdnTable'
import bdnTableSimple from './bdnTableSimple/bdnTableSimple'
import bdnContainer from './grid/bdnContainer'
import bdnRow from './grid/bdnRow'
import bdnColumn from './grid/bdnCol'

import loaderFull from './bdnLoader/bdnLoaderPlugin'

Vue.component('bdnAppLayout', appLayout)
Vue.component('bdnAvatar', bdnAvatar)
Vue.component('bdnBadge', bdnBadge)
Vue.component('bdnButton', bdnButton)
Vue.component('bdnButtonGroup', bdnButtonGroup)
Vue.component('bdnCard', bdnCard)
Vue.component('bdnCheckbox', bdnCheckbox)
Vue.component('bdnCheckboxGroup', bdnCheckboxGroup)
Vue.component('bdnDatePicker', bdnDatePicker)
Vue.component('bdnDivider', bdnDivider)
Vue.component('bdnDropdown', bdnDropdown)
Vue.component('bdnFastEnter', bdnFastEnter)
Vue.component('bdnGroup', bdnGroup)
Vue.component('bdnInlineLoader', bdnInlineLoader)
Vue.component('bdnInput', bdnInput)
Vue.component('bdnKeyboardControl', bdnKeyboardControl)
Vue.component('bdnLoader', bdnLoader)
Vue.component('bdnMenu', bdnMenu)
Vue.component('bdnMenuGroup', bdnMenuGroup)
Vue.component('bdnMenuItem', bdnMenuItem)
Vue.component('bdnModal', bdnModal)
Vue.component('bdnPagination', bdnPagination)
Vue.component('bdnTooltip', bdnTooltip)
Vue.component('bdnSubmenu', bdnSubmenu)
Vue.component('bdnRadio', bdnRadio)
Vue.component('bdnRadioGroup', bdnRadioGroup)
Vue.component('bdnSelect', bdnSelect)
Vue.component('bdnSkeletonLoader', bdnSkeletonLoader)
Vue.component('bdnTabs', bdnTabs)
Vue.component('bdnTabPage', bdnTabPage)
Vue.component('bdnTable', bdnTable)
Vue.component('bdnTableSimple', bdnTableSimple)
Vue.component('bdnContainer', bdnContainer)
Vue.component('bdnRow', bdnRow)
Vue.component('bdnCol', bdnColumn)

Vue.use(loaderFull)

Vue.prototype.$message = bdnMessage.showMessage
Vue.prototype.$confirm = bdnMessage.showConfirmation

require('../styles/index.scss')

This was imported in main.js as:

require('./bdn-library/components/importAll')

← Components overview →