bootstrap-vue 2.0.0

v2.0.0

on Node.js NPM

Released: 2019-09-06

Please see the changelog for a complete list of commits, and the online documentation for usage.

BoootstrapVue 2.0.0 stable introduces several new features and bug fixes. Please note that this release also includes several breaking changes.

Notable improvements:

• Tooltips and popovers have been competely re-written for better reactivity and stability. The directive versions are now reactive to trigger element title attribute changes and configuration changes. The component versions now perform better when qucikly hovering/unhovering the trigger element. Component and directive versions now have a default delay of 50ms (affects 'hover' and 'focus' triggers only). They can now have a trigger of 'manual' (when used by itself) of which they can only be opened or closed programmatically. Users can now optionally specify the ID that the tooltip or popover uses. For accessibility reasons, the title attribute is removed from the trigger element (target) only when the tooltip or popover is showing, and is restored when hidden.
• Modals, tooltips, popovers, and toasts now work with scoped style classes (requires the use of vue-loader's /deep/, ::v-deep or >>> deep selectors for targeting inner elements, just like with any other component).
• New SVG background image based sorting indicator icons for <b-table>, with the ability to place them on either the right (default) or left of the table cell headers (via a new prop).
• Programmatic selection of <b-table> selctable rows.
• Ability to provide your own custom footer structure for <b-table> and <b-table-lite>.

Breaking changes and deprecated features removal v2.0.0

Please carefully read the following before upgrading to v2.0.0 stable!

• Vue 2.6+ is now required at a minimum, 2.6.10+ is recommended. Some components will fail to work as expected if using Vue 2.5 (notably tooltips and popovers, but other components may be affected as well).
• All deprecated features have been removed in v2.0.0 stable in order to reduce bundle size and simplify code.

Two notable breaking changes are:

• changes to the table slot naming syntax: the table slot syntax introduced in rc.28 has been modified in v2.0.0 stable for better compatibility with the new Vue v-slot syntax and its limitations (which currently are not documented in the Vue.JS docs).
• the removal of the deprecated /es build directory: Users should now be importing the new top-level named exports when importing individual components, directives, and plugins.

Read the following migration guide for more details.

Migration guide v2.0.0

• Removal of the deprecated /es build directory. Users should now be using the new simplified import syntax introduced in v2.0.0-rc.22. Users should be importing the top-level named exports instead.
• b-dropdown: removal of deprecated text slot. Use the button-content slot instead.
• b-form-* controls, b-form-group, b-form-invalid-feedback and b-form-valid-feedback: validation prop state now only accepts true, false, or null values. Passing the strings 'invalid' or 'valid' will no longer work.
• b-form-group: removal of the deprecated horizontal and breakpoint props. Use props label-cols{-{breakpoint}} instead.
• b-img-lazy, b-card-img-lazy: now rely only on IntersectionObserver support (native or via a polyfill) to determine when to show the image. If IntersectionObserver support is not detected, then the image will always be shown. Use a polyfill if you need to support older browsers (e.g. IE11)
• b-modal: the deprecated BvModalEvent method cancel() has been removed. Use the method preventDefault() instead.
• b-modal: the deprecated BvModalEvent property modalId has been removed. Use the property componentId instead.
• b-nav: removal of the deprecated is-nav prop. Use b-navbar-nav component instead when placing navs in b-navbar.
• b-nav-item-dropdown: deprecated props extra-menu-classes and extra-toggle-classes have been removed. Used props menu-class and toggle-class (respectively) instead.
• b-table and b-table-lite: table cell field, header and footer scoped slot naming convention has changed. Users should be using the new table round bracketed slot naming syntax: use slot cell(field) instead of field or [field], use slot head(field) instead of HEAD_field or HEAD[field], use foot(field) instead of FOOT_field or FOOT[field]. This change was required for better compatibility with the new Vue v-slot syntax. The square bracket syntax introduced in 2.0.0-rc.28 has been replaced with the round bracket syntax to reduce possible confusion and potential future issues with Vue 2.6's new dynamic slot name syntax.
• b-table: the filter prop will no longer accept a function reference (previously deprecated). Instead, pass a function to the filter-function prop when using a custom filter function. The prop filter is only to be used for the filter's criteria (i.e. the search value, search RegExpr, etc).
• b-table: passing an object as a fields definition will no longer work. Use the array of strings or array of objects (or a combination of the two) fields definition format instead.
• b-table: sorting icon SASS variables have been changed to handle the new SVG backgrounds. If you previously had custom CSS styling/icons, they will not work as expected - but sorting will still work. the SVG backgrounds can be controlled via SASS variables.
• b-tab: removal of deprecated href prop. Use <b-nav> for controlling panes that change with URL changes.
• b-tabs: removal of deprecated tabs slot. Use slot tabs-end instead.
• b-tabs: removal of deprecated bottom prop. Use the end prop instead.
• Tooltip SCSS: deprecated variable $bv-tooltip-bg-level has been removed. Use variable $b-tooltip-bg-level instead.
• Popover SCSS: deprecated variables $bv-popover-bg-level, $bv-popover-border-level, and $bv-popover-color-level have been removed. Use variables $b-popover-bg-level, $b-popover-border-level, and $b-popover-color-level (respectively) instead.

Please refer to the documentation for the latest usage and examples, and below for a list of fixes and new features.

Bug Fixes v2.0.0

• b-dropdown-*: ensure class bindings are placed on root element for all dropdown sub-components (closes #4022) (#4024) (81efb89)
• b-form-textarea: handle initial auto-height when in modal, tabs, or other component with transition or which uses v-show (fixes #3936, #3702) (#3937) (be3ac62)
• b-link: only add the nativeOn property to componentData when rendering a router link (#3976) (62fb0b6)
• b-modal: ensure non-prop attributes are transferred to the modal outer wrapper div (closes #3896) (#3921) (8bf3a55)
• b-modal: fix scroll to top issue when modal has no-fade set (#4004) (332b79f)
• b-table, b-table-lite: handle edge case where field slot returns no vNodes (fixes #3919) (#3920) (a392059)
• b-table, b-table-lite: render header when not always stacked mode (fixes #3886) (#3887) (2302b31)
• b-table, b-table-lite: generate :key for row-details row based on the primary-key field value if available (#4025) (c7cb16f)
• v-b-toggle: don't override role if element has a role assigned (#3889) (5d155ba)
• tooltip, popover: overall code refactor for better reactivity and performance (fixes: #1990, #2937, #3480,
  #3717, #3854, closes #3451) (#3908) (eebab43)

Features v2.0.0

• b-carousel: add prop no-wrap for disabling wrapping to start/end (closes #3902) (#3905) (2c8bd23)
• b-dropdown: add role=presentation to <li> elements for improved a11y (#3996) (464d257)
• b-img-lazy: switch IntersectionObserver to use private v-b-visible directive (#3977) (249ccfa)
• b-modal: add scoped style support when portalled (non-static modal) (#3962) (77ad6b9)
• b-nav: add card header support (#3883)
  (4046a53)
• b-pagination: if number of pages changes, try and keep current page active (closes #3716) (#3990) (ae8ce78)
• b-modal: add prop for auto focusing one of the built in-buttons once shown (closes #3945) (#3979) (6f2827e)
• b-table: allow field definition properties filterByFormatted and sortByFormatted to accept a formatter function reference (closes #3892) (#3898) (5492b38)
• b-table: new sorting icons using SVG, plus option to place icon on left of header cell (closes #3687, #3696, #3918, #3966) (#3968) (c4442f4)
• b-table: add filter-debounce prop for debouncing filter updates (#3891) (03536a5)
• b-table: add selectAllRows() and clearSelected() to thead/tfoot slot scopes (addresses #3901) (#3907) (86c53dd)
• b-table, b-table-lite: switch slot name syntax to use round brackets instead of square brackets (#3986) (fca7bd5)
• b-table, b-table-lite: remove deprecated slot names, introduce new slot names (#3866) (249efd9)
• b-table, b-table-lite: use aria-details rather than aria-describedby when details row showing (addresses #3801) (#3992) (f6f73c7)
• b-table, b-table-lite: add support for custom header attributes (closes #2244) (#3876) (8784f31)
• b-table, b-table-lite: add new scoped slot custom-foot to allow user to create their own table footer (closes #3960) (#4027) (cbeeef9)
• b-table, b-table-lite, b-table-simple: add no-border-collapse prop and SCSS (#3987) (253b4f6)
• b-toast: add support for scoped styles (#3963) (ca1b5de)
• tooltip, popover: overall code refactor for better reactivity and performance (fixes: #1990, #2937, #3480, #3717, #3854, closes #3451) (#3908) (eebab43)

Depreaction removals v2.0.0

• b-dropdown: remove deprecated slot text (#3868) (29eb8b1)
• b-form-group: remove deprecated prop horizontal and breakpoint (#3879) (b301822)
• b-nav, b-nav-item-dropdown: remove deprecated slot and props (#3867) (21fab35)
• b-modal: remove BvModalEvent deprecations (#3864) (90c299c)
• b-table, b-table-lite: switch slot name syntax to use round brackets instead of square brackets (#3986) (fca7bd5)
• b-table, b-table-lite: remove deprecated slot names, introduce new slot names (#3866) (249efd9)
• b-tabs: remove deprecations (#3863) (0edac49)
• tooltip/popover: remove SCSS deprecations (#3869) (bea49d4)
• build: remove deprecated es/ build (#3604) (3828f59)