bootstrap-vue · jacobmllr95 · Dec 16, 2020 · Oct 22, 2020 · Oct 22, 2020 · Oct 22, 2020
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           node-version: ${{ matrix.node }}
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           node-version: ${{ matrix.node }}
 
@@ -61,7 +61,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           node-version: ${{ matrix.node }}
 
@@ -98,7 +98,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set Node.js version
-        uses: actions/[email protected].2
+        uses: actions/[email protected].3
         with:
           node-version: ${{ matrix.node }}
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file. See
 [standard-version](https://github.com/conventional-changelog/standard-version) for commit
 guidelines.
 
+<a name="2.21.1"></a>
+
+## [v2.21.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.21.0...v2.21.1)
+
+Released: 2020-12-16
+
+### Bug Fixes v2.21.1
+
+- **b-badge:** attribute inheritance
+  ([#6217](https://github.com/bootstrap-vue/bootstrap-vue/issues/6217))
+  ([2d31f31](https://github.com/bootstrap-vue/bootstrap-vue/commit/2d31f31909c002faa2a9d8bd8620115ddf8ce603))
+- **b-dropdown:** root events ([#6198](https://github.com/bootstrap-vue/bootstrap-vue/issues/6198))
+  ([6dcd233](https://github.com/bootstrap-vue/bootstrap-vue/commit/6dcd23334f2870220ed5c4d8b30bd556e57c03d5))
+- **b-pagination:** don't set initial page count twice
+  ([#6200](https://github.com/bootstrap-vue/bootstrap-vue/issues/6200))
+  ([d7394e3](https://github.com/bootstrap-vue/bootstrap-vue/commit/d7394e3426e5b06797caef070137ec47b25ef62a))
+- **b-tabs:** restore correct active tab detection logic (closes
+  [#6205](https://github.com/bootstrap-vue/bootstrap-vue/issues/6205))
+  ([#6208](https://github.com/bootstrap-vue/bootstrap-vue/issues/6208))
+  ([6d92a43](https://github.com/bootstrap-vue/bootstrap-vue/commit/6d92a4376c227a02a7c24e19c04e437bb8909c1c))
+
 <a name="2.21.0"></a>
 
 ## [v2.21.0](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.20.1...v2.21.0)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.",
   "main": "dist/bootstrap-vue.common.js",
   "web": "dist/bootstrap-vue.js",
@@ -95,8 +95,8 @@
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.10",
-    "@babel/standalone": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/standalone": "^7.12.11",
     "@nuxt/content": "^1.11.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.2",
@@ -126,7 +126,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.2.0",
+    "eslint-plugin-vue": "^7.3.0",
     "esm": "^3.2.25",
     "execa": "^5.0.0",
     "highlight.js": "^10.4.1",
@@ -137,13 +137,13 @@
     "lint-staged": "^10.5.3",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.20",
-    "marked": "^1.2.6",
+    "marked": "^1.2.7",
     "nuxt": "^2.14.11",
     "postcss": "^8.2.1",
     "postcss-cli": "^8.3.1",
     "prettier": "1.14.3",
     "require-context": "^1.1.0",
-    "rollup": "^2.35.0",
+    "rollup": "^2.35.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

diff --git a/src/components/badge/badge.js b/src/components/badge/badge.js
@@ -1,10 +1,9 @@
-import { Vue } from '../../vue'
+import { Vue, mergeData } from '../../vue'
 import { NAME_BADGE } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { omit, sortKeys } from '../../utils/object'
 import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props'
 import { isLink } from '../../utils/router'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BLink, props as BLinkProps } from '../link/link'
 
 // --- Props ---
@@ -28,28 +27,29 @@ export const props = makePropsConfigurable(
 // @vue/component
 export const BBadge = /*#__PURE__*/ Vue.extend({
   name: NAME_BADGE,
-  mixins: [normalizeSlotMixin],
+  functional: true,
   props,
-  render(h) {
-    const { variant, $props } = this
-    const link = isLink($props)
-    const tag = link ? BLink : this.tag
+  render(h, { props, data, children }) {
+    const { active, disabled } = props
+    const link = isLink(props)
+    const tag = link ? BLink : props.tag
+    const variant = props.variant || 'secondary'
 
     return h(
       tag,
-      {
+      mergeData(data, {
         staticClass: 'badge',
         class: [
-          variant ? `badge-${variant}` : 'badge-secondary',
+          `badge-${variant}`,
           {
-            'badge-pill': this.pill,
-            active: this.active,
-            disabled: this.disabled
+            'badge-pill': props.pill,
+            active,
+            disabled
           }
         ],
-        props: link ? pluckProps(linkProps, $props) : {}
-      },
-      this.normalizeSlot()
+        props: link ? pluckProps(linkProps, props) : {}
+      }),
+      children
     )
   }
 })
diff --git a/src/components/form-timepicker/README.md b/src/components/form-timepicker/README.md
@@ -251,7 +251,7 @@ In the following simple example, we are placing the timepicker (button only mode
           locale="en"
           aria-controls="example-input"
         ></b-form-timepicker>
-      </b-input-group-append">
+      </b-input-group-append>
     </b-input-group>
     <p>Value: '{{ value }}'</p>
   </div>

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -588,13 +588,12 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         this.emitEvent(this.buildEvent(EVENT_NAME_HIDDEN))
       })
     },
-    // Event emitter
-    emitEvent(bvModalEvt) {
-      const type = bvModalEvt.type
-      // We emit on root first incase a global listener wants to cancel
+    emitEvent(bvEvent) {
+      const { type } = bvEvent
+      // We emit on `$root` first in case a global listener wants to cancel
       // the event first before the instance emits its event
-      this.emitOnRoot(getRootEventName(NAME_MODAL, type), bvModalEvt, bvModalEvt.componentId)
-      this.$emit(type, bvModalEvt)
+      this.emitOnRoot(getRootEventName(NAME_MODAL, type), bvEvent, bvEvent.componentId)
+      this.$emit(type, bvEvent)
     },
     // UI event handlers
     onDialogMousedown() {

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
@@ -49,8 +49,8 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
       const result = mathCeil(sanitizeTotalRows(this.totalRows) / sanitizePerPage(this.perPage))
       return result < 1 ? 1 : result
     },
+    // Used for watching changes to `perPage` and `numberOfPages`
     pageSizeNumberOfPages() {
-      // Used for watching changes to `perPage` and `numberOfPages`
       return {
         perPage: sanitizePerPage(this.perPage),
         totalRows: sanitizeTotalRows(this.totalRows),
@@ -91,10 +91,6 @@ export const BPagination = /*#__PURE__*/ Vue.extend({
       })
     }
   },
-  mounted() {
-    // Set the initial page count
-    this.localNumberOfPages = this.numberOfPages
-  },
   methods: {
     // These methods are used by the render function
     onClick(event, pageNumber) {

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -33,7 +33,7 @@ import {
 } from '../../constants/slots'
 import { arrayIncludes } from '../../utils/array'
 import { BvEvent } from '../../utils/bv-event.class'
-import { attemptFocus, selectAll } from '../../utils/dom'
+import { attemptFocus, selectAll, requestAF } from '../../utils/dom'
 import { stopEvent } from '../../utils/events'
 import { identity } from '../../utils/identity'
 import { isEvent } from '../../utils/inspect'
@@ -280,14 +280,14 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
       // Update the v-model
       this.$emit(MODEL_EVENT_NAME, index)
     },
+    // If tabs added, removed, or re-ordered, we emit a `changed` event
     tabs(newValue, oldValue) {
-      // If tabs added, removed, or re-ordered, we emit a `changed` event
-      // We use `tab._uid` instead of `tab.safeId()`, as the later is changed
-      // in a `$nextTick()` if no explicit ID is provided, causing duplicate emits
+      // We use `_uid` instead of `safeId()`, as the later is changed in a `$nextTick()`
+      // if no explicit ID is provided, causing duplicate emits
       if (
         !looseEqual(
-          newValue.map(t => t[COMPONENT_UID_KEY]),
-          oldValue.map(t => t[COMPONENT_UID_KEY])
+          newValue.map($tab => $tab[COMPONENT_UID_KEY]),
+          oldValue.map($tab => $tab[COMPONENT_UID_KEY])
         )
       ) {
         // In a `$nextTick()` to ensure `currentTab` has been set first
@@ -298,6 +298,9 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         })
       }
     },
+    // Each `<b-tab>` will register/unregister itself
+    // We use this to detect when tabs are added/removed
+    // to trigger the update of the tabs
     registeredTabs() {
       this.updateTabs()
     }
@@ -332,7 +335,9 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
         /* istanbul ignore next: difficult to test mutation observer in JSDOM */
         const handler = () => {
           this.$nextTick(() => {
-            this.updateTabs()
+            requestAF(() => {
+              this.updateTabs()
+            })
           })
         }
 
@@ -352,8 +357,9 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
 
       // DOM Order of Tabs
       let order = []
+      /* istanbul ignore next: too difficult to test */
       if (IS_BROWSER && $tabs.length > 0) {
-        // We rely on the DOM when mounted to get the 'true' order of the `<b-tab>` children
+        // We rely on the DOM when mounted to get the "true" order of the `<b-tab>` children
         // `querySelectorAll()` always returns elements in document order, regardless of
         // order specified in the selector
         const selector = $tabs.map($tab => `#${$tab.safeId()}`).join(', ')
@@ -369,29 +375,44 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     updateTabs() {
       const $tabs = this.getTabs()
 
-      // Normalize `currentTab`
-      let { currentTab } = this
-      const $tab = $tabs[currentTab]
-      if (!$tab || $tab.disabled) {
-        currentTab = $tabs.indexOf(
-          $tabs
-            .slice()
-            .reverse()
-            .find($tab => $tab.localActive && !$tab.disabled)
-        )
+      // Find last active non-disabled tab in current tabs
+      // We trust tab state over `currentTab`, in case tabs were added/removed/re-ordered
+      let tabIndex = $tabs.indexOf(
+        $tabs
+          .slice()
+          .reverse()
+          .find($tab => $tab.localActive && !$tab.disabled)
+      )
 
-        if (currentTab === -1) {
-          currentTab = $tabs.indexOf($tabs.find(notDisabled))
+      // Else try setting to `currentTab`
+      if (tabIndex < 0) {
+        const { currentTab } = this
+        if (currentTab >= $tabs.length) {
+          // Handle last tab being removed, so find the last non-disabled tab
+          tabIndex = $tabs.indexOf(
+            $tabs
+              .slice()
+              .reverse()
+              .find(notDisabled)
+          )
+        } else if ($tabs[currentTab] && !$tabs[currentTab].disabled) {
+          // Current tab is not disabled
+          tabIndex = currentTab
         }
       }
 
+      // Else find first non-disabled tab in current tabs
+      if (tabIndex < 0) {
+        tabIndex = $tabs.indexOf($tabs.find(notDisabled))
+      }
+
       // Ensure only one tab is active at a time
       $tabs.forEach(($tab, index) => {
-        $tab.localActive = index === currentTab
+        $tab.localActive = index === tabIndex
       })
 
       this.tabs = $tabs
-      this.currentTab = currentTab
+      this.currentTab = tabIndex
     },
     // Find a button that controls a tab, given the tab reference
     // Returns the button vm instance