bootstrap-vue · tmorehouse · Sep 20, 2019 · Sep 13, 2019 · Sep 14, 2019 · Sep 14, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,35 @@
 > [standard-version](https://github.com/conventional-changelog/standard-version) for commit
 > guidelines.
 
+<a name="2.0.2"></a>
+
+## [v2.0.2](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.0.1...v2.0.2)
+
+Released: 2019-09-20
+
+This patch release includes a few minor bug fixes and documentation updates.
+
+### Bug Fixes v2.0.2
+
+- **b-popover, b-tooltip:** ensure prop `boundary-padding` is passed to popper instance (fixes
+  [#4131](https://github.com/bootstrap-vue/bootstrap-vue/issues/4131))
+  ([#4133](https://github.com/bootstrap-vue/bootstrap-vue/issues/4133))
+  ([a54a647](https://github.com/bootstrap-vue/bootstrap-vue/commit/a54a647))
+- **b-collapse:** make `id` prop not required
+  ([#4109](https://github.com/bootstrap-vue/bootstrap-vue/issues/4109))
+  ([4f935ce](https://github.com/bootstrap-vue/bootstrap-vue/commit/4f935ce))
+- **tables:** add in missing Bootstrap variant class `bg-active` for dark tables
+  ([#4098](https://github.com/bootstrap-vue/bootstrap-vue/issues/4098))
+  ([d9900ab](https://github.com/bootstrap-vue/bootstrap-vue/commit/d9900ab))
+- **tables:** ensure row variant `active` (class `table-active`) takes precedence over other row
+  variants (addresses [#3008](https://github.com/bootstrap-vue/bootstrap-vue/issues/3008))
+  ([#4127](https://github.com/bootstrap-vue/bootstrap-vue/issues/4127))
+  ([fdb8bb6](https://github.com/bootstrap-vue/bootstrap-vue/commit/fdb8bb6))
+- **tooltips, popovers:** hide trigger element `title` attribute during show delay (fixes
+  [#4114](https://github.com/bootstrap-vue/bootstrap-vue/issues/4114))
+  ([#4120](https://github.com/bootstrap-vue/bootstrap-vue/issues/4120))
+  ([2dd8d5a](https://github.com/bootstrap-vue/bootstrap-vue/commit/2dd8d5a))
+
 <a name="2.0.1"></a>
 
 ## [v2.0.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.0.0...v2.0.1)
@@ -18,8 +47,8 @@ This patch release includes a few minor bug fixes and documentation updates.
   [#4052](https://github.com/bootstrap-vue/bootstrap-vue/issues/4052))
   ([#4055](https://github.com/bootstrap-vue/bootstrap-vue/issues/4055))
   ([9ccfe4c](https://github.com/bootstrap-vue/bootstrap-vue/commit/9ccfe4c))
-- **b-table:** handle filter as an object when using items provider, and prevent duplicate provider calls
-  on mount (fixes [#4065](https://github.com/bootstrap-vue/bootstrap-vue/issues/4065))
+- **b-table:** handle filter as an object when using items provider, and prevent duplicate provider
+  calls on mount (fixes [#4065](https://github.com/bootstrap-vue/bootstrap-vue/issues/4065))
   ([#4068](https://github.com/bootstrap-vue/bootstrap-vue/issues/4068))
   ([9ddd115](https://github.com/bootstrap-vue/bootstrap-vue/commit/9ddd115))
 - **b-table:** remove extra slashes in mixins imports

diff --git a/docs/markdown/misc/third-party/README.md b/docs/markdown/misc/third-party/README.md
@@ -0,0 +1,55 @@
+# Third party libraries
+
+> There are several 3rd party modules that you can use to add additional functionality and features
+> to your BootstrapVue project.
+
+Notes:
+
+- The components and libraries listed here are not directly endorsed by BootstrapVue, and are listed
+  here only for convenience, and is by no means a complete list.
+- These libraries may have additional dependencies.
+
+## Components
+
+Note: Many of the 3rd party components listed are lacking accessibility features and may not be
+fully WAI-ARIA compliant, nor accessible to keyboard-only and/or screen-reader users.
+
+### Type Ahead
+
+- [Vue Bootstrap TypeAhead](https://github.com/alexurquhart/vue-bootstrap-typeahead) _Note: This
+  component is keyboard accessible, but is not fully WAI-ARIA compliant_
+
+### Date and Time Pickers
+
+- [Vue AirBnB Style Datepicker](https://mikaeledebro.gitbooks.io/vue-airbnb-style-datepicker/)
+- [Vue Datepicker](https://livelybone.github.io/vue/vue-datepicker/) _Note: Not WAI-ARIA compliant_
+- [Vue date pick](https://dbrekalo.github.io/vue-date-pick/) _Note: Not WAI-ARIA compliant_
+- [Vue2 date range picker](https://innologica.github.io/vue2-daterange-picker/) _Note: Not WAI-ARIA
+  compliant_
+
+### Commenting and discussion
+
+- [Vue Disqus](https://github.com/ktquez/vue-disqus)
+
+### Icons
+
+- [Vue Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs)
+- [Vue Icon](https://github.com/qinshenxue/vue-icon)
+- [Vue Ionicons](https://mazipan.github.io/vue-ionicons/)
+- [Vue Unicons](https://antonreshetov.github.io/vue-unicons/)
+
+### Charting
+
+- [Vue Chart.js](https://vue-chartjs.org/)
+- [Vue Highcharts](https://github.com/weizhenye/vue-highcharts)
+- [Vue Graph](https://github.com/juijs/vue-graph)
+
+## Form validation
+
+- [VeeValidate](https://logaretm.github.io/vee-validate/)
+- [Vuelidate](https://github.com/vuelidate/vuelidate/)
+
+## Site generation
+
+- [NuxtJS](https://nuxtjs.org) - Static + SPA+ PWA + SSR
+- [Gridsome](https://gridsome.org) - Static + SPA + PWA
diff --git a/docs/markdown/misc/third-party/meta.json b/docs/markdown/misc/third-party/meta.json
@@ -0,0 +1,5 @@
+{
+  "title": "Third party libraries",
+  "slug": "third-party",
+  "description": "There are several 3rd party libraries that you can use to add additional functionality and features to your BootstrapVue project."
+}
diff --git a/docs/markdown/reference/color-variants/README.md b/docs/markdown/reference/color-variants/README.md
@@ -16,18 +16,18 @@
 - `dark` - <span class="text-dark">Dark</span>
 
 The base variants will translate to various Bootstrap v4 contextual class names based on the
-component (and variant purpose) where they are used.
+component (and variant purpose) where they are used. See the sections below for details.
 
 ## Background and border variants
 
 All the **base variants** plus:
 
 - `transparent`
 
-These translate to class names `bg-<variant>` for backgrounds and `border-<variant>` for borders.
+These translate to class names `bg-{variant}` for backgrounds and `border-{variant}` for borders.
 
-These variants are used by components (such as `<b-card>`, `<b-jumbotron>` and `<b-modal>`) that
-provide `bg-variant`, `*-bg-variant`, `border-variant` and `*-border-variant` props
+These variants are used by components (such as `<b-card>`, `<b-jumbotron>`, `<b-modal>`, etc.) that
+provide `bg-variant`, `*-bg-variant`, `border-variant` and `*-border-variant` props.
 
 ## Text variants
 
@@ -37,10 +37,10 @@ All the **base variants** plus:
 - `white`
 - `black`
 
-These translate to class names `text-<variant>`
+These translate to class names `text-{variant}`
 
-These variants are used by components (such as `<b-card>`, `<b-jumbotron>` and `<b-modal>`) that
-provide `text-variant` and `*-text-variant` props
+These variants are used by components (such as `<b-card>`, `<b-jumbotron>`, `<b-modal>`, etc.) that
+provide `text-variant` and `*-text-variant` props.
 
 ## Component specific variants
 
@@ -51,22 +51,22 @@ Some Bootstrap v4 components require additional CSS styling, or additional pseud
 
 All the **base variants**
 
-These translate to class names `alert-<variant>`.
+These translate to class names `alert-{variant}`.
 
 ### Badge variants
 
 All the **base variants**
 
-These translate to class names `badge-<variant>`.
+These translate to class names `badge-{variant}`.
 
 ### Button variants
 
 All the **base variants** plus:
 
-- `outline-<base variant>`
-- `link` which renders the button with the look of a link but retains button padding and margins.
+- `outline-{base variant}` which generates an outline button version of the base variant
+- `link` which renders the button with the look of a link but retains button padding and margins
 
-These translate to class names `btn-<variant>` and `btn-outline-<variant>`.
+These translate to class names `btn-{variant}` and `btn-outline-{variant}`.
 
 Note the `link` variant does not have an outline version.
 
@@ -76,27 +76,30 @@ All the **base variants** plus:
 
 - `active`
 
-These variants translate to class names `table-<variant>`.
+These variants translate to class names `table-{variant}`.
 
-When the table has the `dark` prop set, the variants translate to the `bg-<variant>` classes.
+When the table has the `dark` prop set, the variants translate to the `bg-{variant}` classes.
+
+Note that the `active` variant is only applicable to `<tr>` elements within the `<tbody>`, and can
+not be applied to individual table cells or used as the `table-variant`.
 
 ### Popover variants
 
 All the **base variants**
 
-These translate to BootstrapVue custom class names `b-popover-<variant>`.
+These translate to BootstrapVue custom class names `b-popover-{variant}`.
 
 ### Tooltip variants
 
 All the **base variants**
 
-These translate to BootstrapVue custom class names `b-tooltip-<variant>`.
+These translate to BootstrapVue custom class names `b-tooltip-{variant}`.
 
 ### Toast variants
 
 All the **base variants**
 
-These translate to BootstrapVue custom class names `b-toast-<variant>`.
+These translate to BootstrapVue custom class names `b-toast-{variant}`.
 
 ## Using variant classes
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "BootstrapVue, with over 40 plugins and more than 80 custom components, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.",
   "main": "dist/bootstrap-vue.common.js",
   "web": "dist/bootstrap-vue.js",
@@ -93,20 +93,20 @@
     "babel-jest": "^24.9.0",
     "babel-plugin-istanbul": "^5.2.0",
     "clean-css-cli": "^4.3.0",
-    "codecov": "^3.5.0",
-    "codemirror": "^5.48.4",
+    "codecov": "^3.6.1",
+    "codemirror": "^5.49.0",
     "codesandbox": "^2.1.10",
     "core-js": ">=2.6.5 <3.0.0",
-    "cross-env": "^5.2.1",
-    "eslint": "^6.3.0",
+    "cross-env": "^6.0.0",
+    "eslint": "^6.4.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-config-standard": "^14.1.0",
     "eslint-config-vue": "^2.0.2",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.17.0",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^5.2.3",
@@ -123,7 +123,7 @@
     "nuxt": "^2.9.2",
     "postcss-cli": "^6.1.3",
     "prettier": "1.14.3",
-    "rollup": "^1.21.2",
+    "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -88,6 +88,10 @@ $bv-enable-table-stacked: true !default;
 $b-table-stacked-heading-width: 40% !default;
 $b-table-stacked-gap: 1rem !default;
 
+// Bootstrap v4.3 is missing the "active" variant for dark tables
+// Which translates to `bg-active`, but only for tables
+$table-dark-active-bg: $table-dark-hover-bg !default;
+
 // --- Toasts ---
 
 // Toaster defaults

diff --git a/src/components/collapse/README.md b/src/components/collapse/README.md
@@ -63,7 +63,8 @@ the `visible` prop.
 
 Note, when using `v-model` to control `<b-collapse>`, the `aria-*` attributes and class `collapsed`
 are not automatically placed on the trigger button (as is the case when using the `v-b-toggle`
-directive). In this example we must control them ourselves.
+directive). In this example we **must control the attributes ourselves** for proper accessibility
+support.
 
 ```html
 <template>
@@ -120,7 +121,8 @@ multiple target IDs using modifiers:
 ## Accordion support
 
 Turn a group of `<b-collapse>` components into an accordion by supplying an accordion group
-identifier via the `accordion` prop:
+identifier via the `accordion` prop. Note that only one collapse in an accordion group can be open
+at a time.
 
 ```html
 <template>
@@ -192,7 +194,7 @@ identifier via the `accordion` prop:
 - If using the `v-model` feature of `<b-collapse>` in accordion mode, do not bind the `v-model` or
   `visible` prop of all the collapses in the accordion group to the same variable!
 - Ensure, at most, only one `<b-collapse>` in the accordion group has the `visible` prop and/or
-  `v-model` set to `true`.
+  `v-model` set to `true`. Only one collapse in an accordion group can be open at a time.
 
 ## Hiding and showing content in the toggle button based on collapse state
 

diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
@@ -1,4 +1,5 @@
 import Vue from '../../utils/vue'
+import idMixin from '../../mixins/id'
 import listenOnRootMixin from '../../mixins/listen-on-root'
 import normalizeSlotMixin from '../../mixins/normalize-slot'
 import { isBrowser } from '../../utils/env'
@@ -32,16 +33,12 @@ const EventOptions = { passive: true, capture: false }
 // @vue/component
 export const BCollapse = /*#__PURE__*/ Vue.extend({
   name: 'BCollapse',
-  mixins: [listenOnRootMixin, normalizeSlotMixin],
+  mixins: [idMixin, listenOnRootMixin, normalizeSlotMixin],
   model: {
     prop: 'visible',
     event: 'input'
   },
   props: {
-    id: {
-      type: String,
-      required: true
-    },
     isNav: {
       type: Boolean,
       default: false
@@ -105,7 +102,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
     })
     // Listen for "Sync state" requests from `v-b-toggle`
     this.listenOnRoot(EVENT_STATE_REQUEST, id => {
-      if (id === this.id) {
+      if (id === this.safeId()) {
         this.$nextTick(this.emitSync)
       }
     })
@@ -174,17 +171,17 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
     emitState() {
       this.$emit('input', this.show)
       // Let v-b-toggle know the state of this collapse
-      this.$root.$emit(EVENT_STATE, this.id, this.show)
+      this.$root.$emit(EVENT_STATE, this.safeId(), this.show)
       if (this.accordion && this.show) {
         // Tell the other collapses in this accordion to close
-        this.$root.$emit(EVENT_ACCORDION, this.id, this.accordion)
+        this.$root.$emit(EVENT_ACCORDION, this.safeId(), this.accordion)
       }
     },
     emitSync() {
       // Emit a private event every time this component updates to ensure
       // the toggle button is in sync with the collapse's state
       // It is emitted regardless if the visible state changes
-      this.$root.$emit(EVENT_STATE_SYNC, this.id, this.show)
+      this.$root.$emit(EVENT_STATE_SYNC, this.safeId(), this.show)
     },
     checkDisplayBlock() {
       // Check to see if the collapse has `display: block !important;` set.
@@ -211,7 +208,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       }
     },
     handleToggleEvt(target) {
-      if (target !== this.id) {
+      if (target !== this.safeId()) {
         return
       }
       this.toggle()
@@ -220,7 +217,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       if (!this.accordion || accordion !== this.accordion) {
         return
       }
-      if (openedId === this.id) {
+      if (openedId === this.safeId()) {
         // Open this collapse if not shown
         if (!this.show) {
           this.toggle()
@@ -243,7 +240,7 @@ export const BCollapse = /*#__PURE__*/ Vue.extend({
       {
         class: this.classObject,
         directives: [{ name: 'show', value: this.show }],
-        attrs: { id: this.id || null },
+        attrs: { id: this.safeId() },
         on: { click: this.clickHandler }
       },
       [this.normalizeSlot('default')]