From 38744708f6e0910127221dbdcdd31b82274f0b53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Tue, 14 Jan 2020 16:26:32 +0100
Subject: [PATCH 01/12] feat(b-pagination): add page button class props and
 option to show first/last page numbers

---
 src/components/dropdown/dropdown.js |   6 +-
 src/mixins/dropdown.js              |   2 +-
 src/mixins/pagination.js            | 161 ++++++++++++++++++----------
 src/utils/config-set.js             |   7 +-
 4 files changed, 114 insertions(+), 62 deletions(-)

diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
index 11ed0a4ed28..1c119d5c1dc 100644
--- a/src/components/dropdown/dropdown.js
+++ b/src/components/dropdown/dropdown.js
@@ -29,7 +29,7 @@ export const props = {
     default: false
   },
   menuClass: {
-    type: [String, Array],
+    type: [String, Array, Object],
     default: null
   },
   toggleTag: {
@@ -37,7 +37,7 @@ export const props = {
     default: 'button'
   },
   toggleClass: {
-    type: [String, Array],
+    type: [String, Array, Object],
     default: null
   },
   noCaret: {
@@ -61,7 +61,7 @@ export const props = {
     default: () => getComponentConfig(NAME, 'splitVariant')
   },
   splitClass: {
-    type: [String, Array],
+    type: [String, Array, Object],
     default: null
   },
   splitButtonType: {
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
index e7906d5cb77..33e6d055f0e 100644
--- a/src/mixins/dropdown.js
+++ b/src/mixins/dropdown.js
@@ -213,7 +213,7 @@ export default {
       if (!this.inNavbar) {
         if (typeof Popper === 'undefined') {
           /* istanbul ignore next */
-          warn('b-dropdown: Popper.js not found. Falling back to CSS positioning.')
+          warn('Popper.js not found. Falling back to CSS positioning', 'BDropdown')
         } else {
           // for dropup with alignment we use the parent element as popper container
           let element = (this.dropup && this.right) || this.split ? this.$el : this.$refs.toggle
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 99ed0bbd9eb..9f3a37fdc76 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -55,9 +55,9 @@ export const props = {
     type: [Number, String],
     default: null,
     validator(value) /* istanbul ignore next */ {
-      const num = toInteger(value)
-      if (!isNull(value) && (isNaN(num) || num < 1)) {
-        warn('pagination: v-model value must be a number greater than 0')
+      const number = toInteger(value)
+      if (!isNull(value) && (isNaN(number) || number < 1)) {
+        warn('"v-model" value must be a number greater than "0"', 'BPagination')
         return false
       }
       return true
@@ -67,9 +67,9 @@ export const props = {
     type: [Number, String],
     default: DEFAULT_LIMIT,
     validator(value) /* istanbul ignore next */ {
-      const num = toInteger(value)
-      if (isNaN(num) || num < 1) {
-        warn('pagination: prop "limit" must be a number greater than 0')
+      const number = toInteger(value)
+      if (isNaN(number) || number < 1) {
+        warn('Prop "limit" must be a number greater than "0"', 'BPagination')
         return false
       }
       return true
@@ -99,6 +99,14 @@ export const props = {
     type: String,
     default: '\u00AB' // '«'
   },
+  firstNumber: {
+    type: Boolean,
+    default: false
+  },
+  firstClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   labelPrevPage: {
     type: String,
     default: 'Go to previous page'
@@ -107,6 +115,10 @@ export const props = {
     type: String,
     default: '\u2039' // '‹'
   },
+  prevClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   labelNextPage: {
     type: String,
     default: 'Go to next page'
@@ -115,6 +127,10 @@ export const props = {
     type: String,
     default: '\u203A' // '›'
   },
+  nextClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   labelLastPage: {
     type: String,
     default: 'Go to last page'
@@ -123,10 +139,22 @@ export const props = {
     type: String,
     default: '\u00BB' // '»'
   },
+  lastNumber: {
+    type: Boolean,
+    default: false
+  },
+  lastClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   labelPage: {
     type: [String, Function],
     default: 'Go to page'
   },
+  pageClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   hideEllipsis: {
     type: Boolean,
     default: false
@@ -134,6 +162,10 @@ export const props = {
   ellipsisText: {
     type: String,
     default: '\u2026' // '…'
+  },
+  ellipsisClass: {
+    type: [String, Array, Object],
+    default: null
   }
 }
 
@@ -165,8 +197,8 @@ export default {
       } else if (align === 'end' || align === 'right') {
         return 'justify-content-end'
       } else if (align === 'fill') {
-        // The page-items will also have 'flex-fill' added.
-        // We ad text centering to make the button appearance better in fill mode.
+        // The page-items will also have 'flex-fill' added
+        // We add text centering to make the button appearance better in fill mode
         return 'text-center'
       }
       return ''
@@ -289,14 +321,13 @@ export default {
   },
   methods: {
     handleKeyNav(evt) {
-      const keyCode = evt.keyCode
-      const shift = evt.shiftKey
+      const { keyCode, shiftKey } = evt
       if (keyCode === KeyCodes.LEFT || keyCode === KeyCodes.UP) {
         evt.preventDefault()
-        shift ? this.focusFirst() : this.focusPrev()
+        shiftKey ? this.focusFirst() : this.focusPrev()
       } else if (keyCode === KeyCodes.RIGHT || keyCode === KeyCodes.DOWN) {
         evt.preventDefault()
-        shift ? this.focusLast() : this.focusNext()
+        shiftKey ? this.focusLast() : this.focusNext()
       }
     },
     getButtons() {
@@ -307,7 +338,7 @@ export default {
       btn.focus()
     },
     focusCurrent() {
-      // We do this in next tick to ensure buttons have finished rendering
+      // We do this in `$nextTick()` to ensure buttons have finished rendering
       this.$nextTick(() => {
         const btn = this.getButtons().find(
           el => toInteger(getAttr(el, 'aria-posinset')) === this.computedCurrentPage
@@ -321,7 +352,7 @@ export default {
       })
     },
     focusFirst() {
-      // We do this in next tick to ensure buttons have finished rendering
+      // We do this in `$nextTick()` to ensure buttons have finished rendering
       this.$nextTick(() => {
         const btn = this.getButtons().find(el => !isDisabled(el))
         if (btn && btn.focus && btn !== document.activeElement) {
@@ -330,7 +361,7 @@ export default {
       })
     },
     focusLast() {
-      // We do this in next tick to ensure buttons have finished rendering
+      // We do this in `$nextTick()` to ensure buttons have finished rendering
       this.$nextTick(() => {
         const btn = this.getButtons()
           .reverse()
@@ -341,7 +372,7 @@ export default {
       })
     },
     focusPrev() {
-      // We do this in next tick to ensure buttons have finished rendering
+      // We do this in `$nextTick()` to ensure buttons have finished rendering
       this.$nextTick(() => {
         const buttons = this.getButtons()
         const idx = buttons.indexOf(document.activeElement)
@@ -351,7 +382,7 @@ export default {
       })
     },
     focusNext() {
-      // We do this in next tick to ensure buttons have finished rendering
+      // We do this in `$nextTick()` to ensure buttons have finished rendering
       this.$nextTick(() => {
         const buttons = this.getButtons()
         const idx = buttons.indexOf(document.activeElement)
@@ -365,6 +396,7 @@ export default {
   render(h) {
     const buttons = []
     const numberOfPages = this.localNumberOfPages
+    const pageNumbers = this.pageList.map(p => p.number)
     const disabled = this.disabled
     const { showFirstDots, showLastDots } = this.paginationParams
     const currentPage = this.computedCurrentPage
@@ -372,12 +404,12 @@ export default {
 
     // Helper function and flag
     const isActivePage = pageNum => pageNum === currentPage
-    const noCurrPage = this.currentPage < 1
+    const noCurrentPage = this.currentPage < 1
 
     // Factory function for prev/next/first/last buttons
-    const makeEndBtn = (linkTo, ariaLabel, btnSlot, btnText, pageTest, key) => {
+    const makeEndBtn = (linkTo, ariaLabel, btnSlot, btnText, btnClass, pageTest, key) => {
       const isDisabled =
-        disabled || isActivePage(pageTest) || noCurrPage || linkTo < 1 || linkTo > numberOfPages
+        disabled || isActivePage(pageTest) || noCurrentPage || linkTo < 1 || linkTo > numberOfPages
       const pageNum = linkTo < 1 ? 1 : linkTo > numberOfPages ? numberOfPages : linkTo
       const scope = { disabled: isDisabled, page: pageNum, index: pageNum - 1 }
       const btnContent = this.normalizeSlot(btnSlot, scope) || toString(btnText) || h()
@@ -409,7 +441,7 @@ export default {
         {
           key,
           staticClass: 'page-item',
-          class: { disabled: isDisabled, 'flex-fill': fill },
+          class: [{ disabled: isDisabled, 'flex-fill': fill }, btnClass],
           attrs: {
             role: 'presentation',
             'aria-hidden': isDisabled ? 'true' : null
@@ -426,7 +458,7 @@ export default {
         {
           key: `ellipsis-${isLast ? 'last' : 'first'}`,
           staticClass: 'page-item',
-          class: ['disabled', 'bv-d-xs-down-none', fill ? 'flex-fill' : ''],
+          class: ['disabled', 'bv-d-xs-down-none', fill ? 'flex-fill' : '', this.ellipsisClass],
           attrs: { role: 'separator' }
         },
         [
@@ -437,33 +469,47 @@ export default {
       )
     }
 
-    // Goto First Page button bookend
-    buttons.push(
-      this.hideGotoEndButtons
+    // Goto first page button bookend
+    // Don't render button when `hideGotoEndButtons` is set or when
+    // `firstNumber` is enabled and the first page is in the page list
+    const $firstPageBtn =
+      this.hideGotoEndButtons || (this.firstNumber && pageNumbers.indexOf(1) !== -1)
         ? h()
-        : makeEndBtn(1, this.labelFirstPage, 'first-text', this.firstText, 1, 'bookend-goto-first')
+        : makeEndBtn(
+            1,
+            this.labelFirstPage,
+            'first-text',
+            this.firstNumber ? '1' : this.firstText,
+            this.firstClass,
+            1,
+            'bookend-goto-first'
+          )
+
+    // Goto previous page button bookend
+    const $prevPageBtn = makeEndBtn(
+      currentPage - 1,
+      this.labelPrevPage,
+      'prev-text',
+      this.prevText,
+      this.prevClass,
+      1,
+      'bookend-goto-prev'
     )
 
-    // Goto Previous page button bookend
+    // When `firstNumber` prop is set we move the previous page button
+    // before the first page button
     buttons.push(
-      makeEndBtn(
-        currentPage - 1,
-        this.labelPrevPage,
-        'prev-text',
-        this.prevText,
-        1,
-        'bookend-goto-prev'
-      )
+      ...(this.firstNumber ? [$prevPageBtn, $firstPageBtn] : [$firstPageBtn, $prevPageBtn])
     )
 
     // First Ellipsis Bookend
     buttons.push(showFirstDots ? makeEllipsis(false) : h())
 
-    // Individual Page links
+    // Individual page links
     this.pageList.forEach((page, idx) => {
-      const active = isActivePage(page.number) && !noCurrPage
+      const active = isActivePage(page.number) && !noCurrentPage
       // Active page will have tabindex of 0, or if no current page and first page button
-      const tabIndex = disabled ? null : active || (noCurrPage && idx === 0) ? '0' : '-1'
+      const tabIndex = disabled ? null : active || (noCurrentPage && idx === 0) ? '0' : '-1'
       const attrs = {
         role: 'menuitemradio',
         'aria-disabled': disabled ? 'true' : null,
@@ -508,7 +554,7 @@ export default {
           {
             key: `page-${page.number}`,
             staticClass: 'page-item',
-            class: [{ disabled, active, 'flex-fill': fill }, page.classes],
+            class: [{ disabled, active, 'flex-fill': fill }, page.classes, this.pageClass],
             attrs: { role: 'presentation' }
           },
           [inner]
@@ -516,34 +562,39 @@ export default {
       )
     })
 
-    // Last Ellipsis Bookend
+    // Last ellipsis bookend
     buttons.push(showLastDots ? makeEllipsis(true) : h())
 
-    // Goto Next page button bookend
-    buttons.push(
-      makeEndBtn(
-        currentPage + 1,
-        this.labelNextPage,
-        'next-text',
-        this.nextText,
-        numberOfPages,
-        'bookend-goto-next'
-      )
+    // Goto next page button bookend
+    const $nextPageBtn = makeEndBtn(
+      currentPage + 1,
+      this.labelNextPage,
+      'next-text',
+      this.nextText,
+      this.nextClass,
+      numberOfPages,
+      'bookend-goto-next'
     )
 
-    // Goto Last Page button bookend
-    buttons.push(
-      this.hideGotoEndButtons
+    // Goto last page button bookend
+    // Don't render button when `hideGotoEndButtons` is set or when
+    // `lastNumber` is enabled and the last page is in the page list
+    const $lastPageBtn =
+      this.hideGotoEndButtons || (this.lastNumber && pageNumbers.indexOf(numberOfPages) !== -1)
         ? h()
         : makeEndBtn(
             numberOfPages,
             this.labelLastPage,
             'last-text',
-            this.lastText,
+            this.lastNumber ? toString(numberOfPages) : this.lastText,
+            this.lastClass,
             numberOfPages,
             'bookend-goto-last'
           )
-    )
+
+    // When `lastNumber` prop is set we move the next page button
+    // after the last page button
+    buttons.push(...(this.lastNumber ? [$lastPageBtn, $nextPageBtn] : [$nextPageBtn, $lastPageBtn]))
 
     // Assemble the pagination buttons
     const pagination = h(
diff --git a/src/utils/config-set.js b/src/utils/config-set.js
index f74fc069bbd..4a19d872696 100644
--- a/src/utils/config-set.js
+++ b/src/utils/config-set.js
@@ -8,6 +8,7 @@ import DEFAULTS from './config-defaults'
 
 // --- Constants ---
 
+const NAME = 'BvConfig'
 const PROP_NAME = '$bvConfig'
 
 // Config manager class
@@ -42,7 +43,7 @@ class BvConfig {
     configKeys.forEach(cmpName => {
       /* istanbul ignore next */
       if (!hasOwnProperty(DEFAULTS, cmpName)) {
-        warn(`config: unknown config property "${cmpName}"`)
+        warn(`Unknown config property "${cmpName}"`, NAME)
         return
       }
       const cmpConfig = config[cmpName]
@@ -55,7 +56,7 @@ class BvConfig {
           breakpoints.length < 2 ||
           breakpoints.some(b => !isString(b) || b.length === 0)
         ) {
-          warn('config: "breakpoints" must be an array of at least 2 breakpoint names')
+          warn('"breakpoints" must be an array of at least 2 breakpoint names', NAME)
         } else {
           this.$_config.breakpoints = cloneDeep(breakpoints)
         }
@@ -65,7 +66,7 @@ class BvConfig {
         props.forEach(prop => {
           /* istanbul ignore if */
           if (!hasOwnProperty(DEFAULTS[cmpName], prop)) {
-            warn(`config: unknown config property "${cmpName}.${prop}"`)
+            warn(`Unknown config property "${cmpName}.${prop}"`, NAME)
           } else {
             // TODO: If we pre-populate the config with defaults, we can skip this line
             this.$_config[cmpName] = this.$_config[cmpName] || {}

From baf5b6f46a04b566d1d7fce2614a02c649b3a2d8 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 14 Jan 2020 20:26:49 -0400
Subject: [PATCH 02/12] Update package.json

---
 src/components/pagination/package.json | 30 ++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
index ced5d34854b..4ca4cb5f775 100644
--- a/src/components/pagination/package.json
+++ b/src/components/pagination/package.json
@@ -88,6 +88,36 @@
           {
             "prop": "lastText",
             "description": "Content to place in the goto last page button"
+          },
+          {
+            "prop": "firstClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to first page' button"
+          },
+          {
+            "prop": "prevClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to previous page' button"
+          },
+          {
+            "prop": "pageClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to page #' buttons"
+          },
+          {
+            "prop": "nextClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to next page' button"
+          },
+          {
+            "prop": "lastClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to last page' button"
+          },
+          {
+            "prop": "ellipsisClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'ellipsis' placeholders"
           }
         ],
         "events": [

From 62a6448eb4326b4c90274f6acd774fb89f85f73e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 14 Jan 2020 20:28:39 -0400
Subject: [PATCH 03/12] Update package.json

---
 src/components/pagination-nav/package.json | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
index 1731e51b01d..7e65b3f6bcc 100644
--- a/src/components/pagination-nav/package.json
+++ b/src/components/pagination-nav/package.json
@@ -104,6 +104,36 @@
           {
             "prop": "lastText",
             "description": "Content to place in the goto last page button"
+          },
+          {
+            "prop": "firstClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to first page' button"
+          },
+          {
+            "prop": "prevClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to previous page' button"
+          },
+          {
+            "prop": "pageClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to page #' buttons"
+          },
+          {
+            "prop": "nextClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to next page' button"
+          },
+          {
+            "prop": "lastClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'Go to last page' button"
+          },
+          {
+            "prop": "ellipsisClass",
+            "version": "2.3.0",
+            "description": "Class(es) to appply to the 'ellipsis' placeholders"
           }
         ],
         "events": [

From 9d24362e77a624f3a07ced90682003853e215600 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 14 Jan 2020 20:38:10 -0400
Subject: [PATCH 04/12] Update package.json

---
 src/components/pagination-nav/package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
index 7e65b3f6bcc..9eeb09173e7 100644
--- a/src/components/pagination-nav/package.json
+++ b/src/components/pagination-nav/package.json
@@ -61,6 +61,10 @@
             "prop": "hideEllipsis",
             "description": "Do not show ellipsis buttons"
           },
+          {
+            "prop": "ellipsisText",
+            "description": "Content to place in the ellipsis placeholder"
+          },
           {
             "prop": "size",
             "description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"

From dd7eb5261068b01c76ea6f3bbf418fb3ecd6823e Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Tue, 14 Jan 2020 20:38:37 -0400
Subject: [PATCH 05/12] Update package.json

---
 src/components/pagination/package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
index 4ca4cb5f775..045f7d89f6f 100644
--- a/src/components/pagination/package.json
+++ b/src/components/pagination/package.json
@@ -45,6 +45,10 @@
             "prop": "hideEllipsis",
             "description": "Do not show ellipsis buttons"
           },
+          {
+            "prop": "ellipsisText",
+            "description": "Content to place in the ellipsis placeholder"
+          },
           {
             "prop": "size",
             "description": "Size of the rendered buttons: 'sm', 'md' (default), or 'lg'"

From 538ea8e868bbcd0c4350ab2f28e9adafe6f80341 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 23 Jan 2020 17:47:39 -0400
Subject: [PATCH 06/12] chore(pagination): tweaks to pagination PR #4622
 (#4667)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
---
 src/components/pagination/pagination.spec.js | 124 ++++++++++
 src/mixins/pagination.js                     | 225 +++++++++++--------
 2 files changed, 255 insertions(+), 94 deletions(-)

diff --git a/src/components/pagination/pagination.spec.js b/src/components/pagination/pagination.spec.js
index 67950191b7e..a11fa24ce9f 100644
--- a/src/components/pagination/pagination.spec.js
+++ b/src/components/pagination/pagination.spec.js
@@ -814,6 +814,130 @@ describe('pagination', () => {
     wrapper.destroy()
   })
 
+  it('fist-number and last-number props work', async () => {
+    // To be added...
+
+    const wrapper = mount(BPagination, {
+      propsData: {
+        value: 1,
+        totalRows: 10,
+        perPage: 1,
+        limit: 5,
+        firstNumber: true,
+        lastNumber: true
+      }
+    })
+
+    wrapper.setProps({
+      value: 2
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 3
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 4
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 5
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 6
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 7
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 8
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 9
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 10
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.destroy()
+  })
+
+  it('fist-number and last-number props work with limit <=3', async () => {
+    // To be added...
+
+    const wrapper = mount(BPagination, {
+      propsData: {
+        value: 1,
+        totalRows: 10,
+        perPage: 1,
+        limit: 3,
+        firstNumber: true,
+        lastNumber: true
+      }
+    })
+
+    wrapper.setProps({
+      value: 2
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 3
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 4
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 5
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 6
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 7
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 8
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 9
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.setProps({
+      value: 10
+    })
+    await waitNT(wrapper.vm)
+
+    wrapper.destroy()
+  })
+
   // These tests are wrapped in a new describe to limit the scope of the getBCR Mock
   describe('pagination keyboard navigation', () => {
     const origGetBCR = Element.prototype.getBoundingClientRect
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
index 9f3a37fdc76..81e5d4da46e 100644
--- a/src/mixins/pagination.js
+++ b/src/mixins/pagination.js
@@ -9,7 +9,9 @@ import normalizeSlotMixin from '../mixins/normalize-slot'
 import { BLink } from '../components/link/link'
 
 // Common props, computed, data, render function, and methods
-// for <b-pagination> and <b-pagination-nav>
+// for `<b-pagination>` and `<b-pagination-nav>`
+
+// --- Constants ---
 
 // Threshold of limit size when we start/stop showing ellipsis
 const ELLIPSIS_THRESHOLD = 3
@@ -17,6 +19,8 @@ const ELLIPSIS_THRESHOLD = 3
 // Default # of buttons limit
 const DEFAULT_LIMIT = 5
 
+// --- Helper methods ---
+
 // Make an array of N to N+X
 const makePageArray = (startNumber, numberOfPages) =>
   range(numberOfPages).map((val, i) => ({ number: startNumber + i, classes: null }))
@@ -46,6 +50,7 @@ const onSpaceKey = evt => {
   }
 }
 
+// --- Props ---
 export const props = {
   disabled: {
     type: Boolean,
@@ -211,46 +216,70 @@ export default {
     },
     paginationParams() {
       // Determine if we should show the the ellipsis
-      const limit = this.limit
+      const limit = this.localLimit
       const numberOfPages = this.localNumberOfPages
       const currentPage = this.computedCurrentPage
       const hideEllipsis = this.hideEllipsis
+      const firstNumber = this.firstNumber
+      const lastNumber = this.lastNumber
       let showFirstDots = false
       let showLastDots = false
       let numberOfLinks = limit
       let startNumber = 1
 
       if (numberOfPages <= limit) {
-        // Special Case: Less pages available than the limit of displayed pages
+        // Special case: Less pages available than the limit of displayed pages
         numberOfLinks = numberOfPages
       } else if (currentPage < limit - 1 && limit > ELLIPSIS_THRESHOLD) {
-        // We are near the beginning of the page list
-        if (!hideEllipsis) {
+        if (!hideEllipsis || lastNumber) {
           showLastDots = true
-          numberOfLinks = limit - 1
+          numberOfLinks = limit - (firstNumber ? 0 : 1)
         }
+        numberOfLinks = Math.min(numberOfLinks, limit)
       } else if (numberOfPages - currentPage + 2 < limit && limit > ELLIPSIS_THRESHOLD) {
-        // We are near the end of the list
-        if (!hideEllipsis) {
-          numberOfLinks = limit - 1
+        if (!hideEllipsis || firstNumber) {
           showFirstDots = true
+          numberOfLinks = limit - (lastNumber ? 0 : 1)
         }
         startNumber = numberOfPages - numberOfLinks + 1
       } else {
         // We are somewhere in the middle of the page list
-        if (limit > ELLIPSIS_THRESHOLD && !hideEllipsis) {
+        if (limit > ELLIPSIS_THRESHOLD) {
           numberOfLinks = limit - 2
-          showFirstDots = showLastDots = true
+          showFirstDots = !!(!hideEllipsis || firstNumber)
+          showLastDots = !!(!hideEllipsis || lastNumber)
         }
         startNumber = currentPage - Math.floor(numberOfLinks / 2)
       }
       // Sanity checks
+      /* istanbul ignore if */
       if (startNumber < 1) {
-        /* istanbul ignore next */
         startNumber = 1
+        showFirstDots = false
       } else if (startNumber > numberOfPages - numberOfLinks) {
         startNumber = numberOfPages - numberOfLinks + 1
+        showLastDots = false
+      }
+      if (showFirstDots && firstNumber && startNumber < 4) {
+        numberOfLinks = numberOfLinks + 2
+        startNumber = 1
+        showFirstDots = false
+      }
+      const lastPageNumber = startNumber + numberOfLinks - 1
+      if (showLastDots && lastNumber && lastPageNumber > numberOfPages - 3) {
+        numberOfLinks = numberOfLinks + (lastPageNumber === numberOfPages - 2 ? 2 : 3)
+        showLastDots = false
+      }
+      // Special handling for lower limits (where ellipsis are never shown)
+      if (limit <= ELLIPSIS_THRESHOLD) {
+        if (firstNumber && startNumber === 1) {
+          numberOfLinks = Math.min(numberOfLinks + 1, numberOfPages, limit + 1)
+        } else if (lastNumber && numberOfPages === startNumber + numberOfLinks - 1) {
+          startNumber = Math.max(startNumber - 1, 1)
+          numberOfLinks = Math.min(numberOfPages - startNumber + 1, numberOfPages, limit + 1)
+        }
       }
+      numberOfLinks = Math.min(numberOfLinks, numberOfPages - startNumber + 1)
       return { showFirstDots, showLastDots, numberOfLinks, startNumber }
     },
     pageList() {
@@ -469,44 +498,8 @@ export default {
       )
     }
 
-    // Goto first page button bookend
-    // Don't render button when `hideGotoEndButtons` is set or when
-    // `firstNumber` is enabled and the first page is in the page list
-    const $firstPageBtn =
-      this.hideGotoEndButtons || (this.firstNumber && pageNumbers.indexOf(1) !== -1)
-        ? h()
-        : makeEndBtn(
-            1,
-            this.labelFirstPage,
-            'first-text',
-            this.firstNumber ? '1' : this.firstText,
-            this.firstClass,
-            1,
-            'bookend-goto-first'
-          )
-
-    // Goto previous page button bookend
-    const $prevPageBtn = makeEndBtn(
-      currentPage - 1,
-      this.labelPrevPage,
-      'prev-text',
-      this.prevText,
-      this.prevClass,
-      1,
-      'bookend-goto-prev'
-    )
-
-    // When `firstNumber` prop is set we move the previous page button
-    // before the first page button
-    buttons.push(
-      ...(this.firstNumber ? [$prevPageBtn, $firstPageBtn] : [$firstPageBtn, $prevPageBtn])
-    )
-
-    // First Ellipsis Bookend
-    buttons.push(showFirstDots ? makeEllipsis(false) : h())
-
-    // Individual page links
-    this.pageList.forEach((page, idx) => {
+    // Page button factory
+    const makePageButton = (page, idx) => {
       const active = isActivePage(page.number) && !noCurrentPage
       // Active page will have tabindex of 0, or if no current page and first page button
       const tabIndex = disabled ? null : active || (noCurrentPage && idx === 0) ? '0' : '-1'
@@ -548,56 +541,100 @@ export default {
         },
         [this.normalizeSlot('page', scope) || btnContent]
       )
-      buttons.push(
-        h(
-          'li',
-          {
-            key: `page-${page.number}`,
-            staticClass: 'page-item',
-            class: [{ disabled, active, 'flex-fill': fill }, page.classes, this.pageClass],
-            attrs: { role: 'presentation' }
-          },
-          [inner]
-        )
+      return h(
+        'li',
+        {
+          key: `page-${page.number}`,
+          staticClass: 'page-item',
+          class: [{ disabled, active, 'flex-fill': fill }, page.classes, this.pageClass],
+          attrs: { role: 'presentation' }
+        },
+        [inner]
+      )
+    }
+
+    // Goto first page button
+    // Don't render button when `hideGotoEndButtons` or `firstNumber` is set
+    let $firstPageBtn = h()
+    if (!this.firstNumber && !this.hideGotoEndButtons) {
+      $firstPageBtn = makeEndBtn(
+        1,
+        this.labelFirstPage,
+        'first-text',
+        this.firstText,
+        this.firstClass,
+        1,
+        'pagination-goto-first'
+      )
+    }
+    buttons.push($firstPageBtn)
+
+    // Goto previous page button
+    buttons.push(
+      makeEndBtn(
+        currentPage - 1,
+        this.labelPrevPage,
+        'prev-text',
+        this.prevText,
+        this.prevClass,
+        1,
+        'pagination-goto-prev'
       )
+    )
+
+    // Show first (1) button?
+    buttons.push(this.firstNumber && pageNumbers[0] !== 1 ? makePageButton({ number: 1 }, 0) : h())
+
+    // First ellipsis
+    buttons.push(showFirstDots ? makeEllipsis(false) : h())
+
+    // Individual page links
+    this.pageList.forEach((page, idx) => {
+      const offset = showFirstDots && this.firstNumber && pageNumbers[0] !== 1 ? 1 : 0
+      buttons.push(makePageButton(page, idx + offset))
     })
 
-    // Last ellipsis bookend
+    // Last ellipsis
     buttons.push(showLastDots ? makeEllipsis(true) : h())
 
-    // Goto next page button bookend
-    const $nextPageBtn = makeEndBtn(
-      currentPage + 1,
-      this.labelNextPage,
-      'next-text',
-      this.nextText,
-      this.nextClass,
-      numberOfPages,
-      'bookend-goto-next'
+    // Show last page button?
+    buttons.push(
+      this.lastNumber && pageNumbers[pageNumbers.length - 1] !== numberOfPages
+        ? makePageButton({ number: numberOfPages }, -1)
+        : h()
     )
 
-    // Goto last page button bookend
-    // Don't render button when `hideGotoEndButtons` is set or when
-    // `lastNumber` is enabled and the last page is in the page list
-    const $lastPageBtn =
-      this.hideGotoEndButtons || (this.lastNumber && pageNumbers.indexOf(numberOfPages) !== -1)
-        ? h()
-        : makeEndBtn(
-            numberOfPages,
-            this.labelLastPage,
-            'last-text',
-            this.lastNumber ? toString(numberOfPages) : this.lastText,
-            this.lastClass,
-            numberOfPages,
-            'bookend-goto-last'
-          )
+    // Goto next page button
+    buttons.push(
+      makeEndBtn(
+        currentPage + 1,
+        this.labelNextPage,
+        'next-text',
+        this.nextText,
+        this.nextClass,
+        numberOfPages,
+        'pagination-goto-next'
+      )
+    )
 
-    // When `lastNumber` prop is set we move the next page button
-    // after the last page button
-    buttons.push(...(this.lastNumber ? [$lastPageBtn, $nextPageBtn] : [$nextPageBtn, $lastPageBtn]))
+    // Goto last page button
+    // Don't render button when `hideGotoEndButtons` or `lastNumber` is set
+    let $lastPageBtn = h()
+    if (!this.lastNumber && !this.hideGotoEndButtons) {
+      $lastPageBtn = makeEndBtn(
+        numberOfPages,
+        this.labelLastPage,
+        'last-text',
+        this.lastText,
+        this.lastClass,
+        numberOfPages,
+        'pagination-goto-last'
+      )
+    }
+    buttons.push($lastPageBtn)
 
     // Assemble the pagination buttons
-    const pagination = h(
+    const $pagination = h(
       'ul',
       {
         ref: 'ul',
@@ -613,7 +650,7 @@ export default {
       buttons
     )
 
-    // if we are pagination-nav, wrap in '<nav>' wrapper
+    // If we are `<b-pagination-nav>`, wrap in `<nav>` wrapper
     if (this.isNav) {
       return h(
         'nav',
@@ -623,10 +660,10 @@ export default {
             'aria-hidden': disabled ? 'true' : 'false'
           }
         },
-        [pagination]
+        [$pagination]
       )
-    } else {
-      return pagination
     }
+
+    return $pagination
   }
 }

From 5fab7e08384c8d808a38d31a3f817b2df5119e94 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 23 Jan 2020 18:23:59 -0400
Subject: [PATCH 07/12] Update pagination.spec.js

---
 src/components/pagination/pagination.spec.js | 62 +++++++++++++++++++-
 1 file changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/pagination/pagination.spec.js b/src/components/pagination/pagination.spec.js
index a11fa24ce9f..ce64436b235 100644
--- a/src/components/pagination/pagination.spec.js
+++ b/src/components/pagination/pagination.spec.js
@@ -3,6 +3,14 @@ import { waitNT } from '../../../tests/utils'
 import { isVisible, getBCR, contains } from '../../utils/dom'
 import { BPagination } from './pagination'
 
+const wrapperArrayToArray = wrapperArray => {
+  const array = []
+  for (let i = 0; i < wrapperArray.length; i++) {
+    array.push(wrapperArray.at(i))
+  }
+  return array
+}
+
 describe('pagination', () => {
   it('renders with correct basic structure for root element', async () => {
     const wrapper = mount(BPagination, {
@@ -815,7 +823,8 @@ describe('pagination', () => {
   })
 
   it('fist-number and last-number props work', async () => {
-    // To be added...
+    const selector = '.page-item .page-link'
+    let items = []
 
     const wrapper = mount(BPagination, {
       propsData: {
@@ -828,56 +837,81 @@ describe('pagination', () => {
       }
     })
 
+    expect(wrapper.isVueInstance()).toBe(true)
+    await waitNT(wrapper.vm)
+    expect(wrapper.findAll(selector).length).toBe(9)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
+
     wrapper.setProps({
       value: 2
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
 
     wrapper.setProps({
       value: 3
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
 
     wrapper.setProps({
       value: 4
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
 
     wrapper.setProps({
       value: 5
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "4", "5", "6", "…", "10", "›"])
 
     wrapper.setProps({
       value: 6
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "5", "6", "7", "…", "10", "›"])
 
     wrapper.setProps({
       value: 7
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
 
     wrapper.setProps({
       value: 8
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
 
     wrapper.setProps({
       value: 9
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
 
     wrapper.setProps({
       value: 10
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
 
     wrapper.destroy()
   })
 
   it('fist-number and last-number props work with limit <=3', async () => {
-    // To be added...
+    const selector = '.page-item .page-link'
+    let items = []
 
     const wrapper = mount(BPagination, {
       propsData: {
@@ -890,50 +924,74 @@ describe('pagination', () => {
       }
     })
 
+    expect(wrapper.isVueInstance()).toBe(true)
+    await waitNT(wrapper.vm)
+    expect(wrapper.findAll(selector).length).toBe(9)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
+
     wrapper.setProps({
       value: 2
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
 
     wrapper.setProps({
       value: 3
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
 
     wrapper.setProps({
       value: 4
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "3", "4", "5", "10", "›"])
 
     wrapper.setProps({
       value: 5
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "4", "5", "6", "10", "›"])
 
     wrapper.setProps({
       value: 6
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "5", "6", "7", "10", "›"])
 
     wrapper.setProps({
       value: 7
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "6", "7", "8", "10", "›"])
 
     wrapper.setProps({
       value: 8
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
 
     wrapper.setProps({
       value: 9
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
 
     wrapper.setProps({
       value: 10
     })
     await waitNT(wrapper.vm)
+    items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
+    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
 
     wrapper.destroy()
   })

From 788574ae424bc72c89b27380fb0cb510f97ee91c Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 23 Jan 2020 18:34:03 -0400
Subject: [PATCH 08/12] Update pagination.spec.js

---
 src/components/pagination/pagination.spec.js | 42 ++++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/pagination/pagination.spec.js b/src/components/pagination/pagination.spec.js
index ce64436b235..52d2b4c9bfd 100644
--- a/src/components/pagination/pagination.spec.js
+++ b/src/components/pagination/pagination.spec.js
@@ -841,70 +841,70 @@ describe('pagination', () => {
     await waitNT(wrapper.vm)
     expect(wrapper.findAll(selector).length).toBe(9)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '5', '…', '10', '›'])
 
     wrapper.setProps({
       value: 2
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '5', '…', '10', '›'])
 
     wrapper.setProps({
       value: 3
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '5', '…', '10', '›'])
 
     wrapper.setProps({
       value: 4
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "5", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '5', '…', '10', '›'])
 
     wrapper.setProps({
       value: 5
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "4", "5", "6", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '4', '5', '6', '…', '10', '›'])
 
     wrapper.setProps({
       value: 6
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "5", "6", "7", "…", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '5', '6', '7', '…', '10', '›'])
 
     wrapper.setProps({
       value: 7
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '6', '7', '8', '9', '10', '›'])
 
     wrapper.setProps({
       value: 8
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '6', '7', '8', '9', '10', '›'])
 
     wrapper.setProps({
       value: 9
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '6', '7', '8', '9', '10', '›'])
 
     wrapper.setProps({
       value: 10
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "…", "6", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '…', '6', '7', '8', '9', '10', '›'])
 
     wrapper.destroy()
   })
@@ -926,72 +926,72 @@ describe('pagination', () => {
 
     expect(wrapper.isVueInstance()).toBe(true)
     await waitNT(wrapper.vm)
-    expect(wrapper.findAll(selector).length).toBe(9)
+    expect(wrapper.findAll(selector).length).toBe(7)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '10', '›'])
 
     wrapper.setProps({
       value: 2
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '10', '›'])
 
     wrapper.setProps({
       value: 3
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "2", "3", "4", "10", "›"])
+    expect(items).toEqual(['‹', '1', '2', '3', '4', '10', '›'])
 
     wrapper.setProps({
       value: 4
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "3", "4", "5", "10", "›"])
+    expect(items).toEqual(['‹', '1', '3', '4', '5', '10', '›'])
 
     wrapper.setProps({
       value: 5
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "4", "5", "6", "10", "›"])
+    expect(items).toEqual(['‹', '1', '4', '5', '6', '10', '›'])
 
     wrapper.setProps({
       value: 6
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "5", "6", "7", "10", "›"])
+    expect(items).toEqual(['‹', '1', '5', '6', '7', '10', '›'])
 
     wrapper.setProps({
       value: 7
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "6", "7", "8", "10", "›"])
+    expect(items).toEqual(['‹', '1', '6', '7', '8', '10', '›'])
 
     wrapper.setProps({
       value: 8
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '7', '8', '9', '10', '›'])
 
     wrapper.setProps({
       value: 9
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '7', '8', '9', '10', '›'])
 
     wrapper.setProps({
       value: 10
     })
     await waitNT(wrapper.vm)
     items = wrapperArrayToArray(wrapper.findAll(selector)).map(w => w.text())
-    expect(items).toEqual(["‹", "1", "7", "8", "9", "10", "›"])
+    expect(items).toEqual(['‹', '1', '7', '8', '9', '10', '›'])
 
     wrapper.destroy()
   })

From ef4fc140310d3abda6a2595d17c9baf5d75ec236 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 23 Jan 2020 18:45:21 -0400
Subject: [PATCH 09/12] Update package.json

---
 src/components/pagination-nav/package.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
index 9eeb09173e7..98800a1a5cf 100644
--- a/src/components/pagination-nav/package.json
+++ b/src/components/pagination-nav/package.json
@@ -138,6 +138,16 @@
             "prop": "ellipsisClass",
             "version": "2.3.0",
             "description": "Class(es) to appply to the 'ellipsis' placeholders"
+          },
+          {
+            "prop": "firstNumber",
+            "version": "2.3.0",
+            "description": "Display first page number instead of Goto First button"
+          },
+          {
+            "prop": "lastNumber",
+            "version": "2.3.0",
+            "description": "Display last page number instead of Goto Last button"
           }
         ],
         "events": [

From 65b899419b2b17b5dfd19ea51af93539f61f4d57 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Thu, 23 Jan 2020 18:45:44 -0400
Subject: [PATCH 10/12] Update package.json

---
 src/components/pagination/package.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
index 045f7d89f6f..61ed29b11cc 100644
--- a/src/components/pagination/package.json
+++ b/src/components/pagination/package.json
@@ -122,6 +122,16 @@
             "prop": "ellipsisClass",
             "version": "2.3.0",
             "description": "Class(es) to appply to the 'ellipsis' placeholders"
+          },
+          {
+            "prop": "firstNumber",
+            "version": "2.3.0",
+            "description": "Display first page number instead of Goto First button"
+          },
+          {
+            "prop": "lastNumber",
+            "version": "2.3.0",
+            "description": "Display last page number instead of Goto Last button"
           }
         ],
         "events": [

From d310883981e58d79d526c217f24907c3f9665ba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 24 Jan 2020 00:43:10 +0100
Subject: [PATCH 11/12] Correct typos

---
 src/components/pagination-nav/package.json | 12 ++++++------
 src/components/pagination/package.json     | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
index 98800a1a5cf..ca1b8a59b9f 100644
--- a/src/components/pagination-nav/package.json
+++ b/src/components/pagination-nav/package.json
@@ -112,32 +112,32 @@
           {
             "prop": "firstClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to first page' button"
+            "description": "Class(es) to apply to the 'Go to first page' button"
           },
           {
             "prop": "prevClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to previous page' button"
+            "description": "Class(es) to apply to the 'Go to previous page' button"
           },
           {
             "prop": "pageClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to page #' buttons"
+            "description": "Class(es) to apply to the 'Go to page #' buttons"
           },
           {
             "prop": "nextClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to next page' button"
+            "description": "Class(es) to apply to the 'Go to next page' button"
           },
           {
             "prop": "lastClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to last page' button"
+            "description": "Class(es) to apply to the 'Go to last page' button"
           },
           {
             "prop": "ellipsisClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'ellipsis' placeholders"
+            "description": "Class(es) to apply to the 'ellipsis' placeholders"
           },
           {
             "prop": "firstNumber",
diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
index 61ed29b11cc..f62dfe87453 100644
--- a/src/components/pagination/package.json
+++ b/src/components/pagination/package.json
@@ -96,32 +96,32 @@
           {
             "prop": "firstClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to first page' button"
+            "description": "Class(es) to apply to the 'Go to first page' button"
           },
           {
             "prop": "prevClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to previous page' button"
+            "description": "Class(es) to apply to the 'Go to previous page' button"
           },
           {
             "prop": "pageClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to page #' buttons"
+            "description": "Class(es) to apply to the 'Go to page #' buttons"
           },
           {
             "prop": "nextClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to next page' button"
+            "description": "Class(es) to apply to the 'Go to next page' button"
           },
           {
             "prop": "lastClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'Go to last page' button"
+            "description": "Class(es) to apply to the 'Go to last page' button"
           },
           {
             "prop": "ellipsisClass",
             "version": "2.3.0",
-            "description": "Class(es) to appply to the 'ellipsis' placeholders"
+            "description": "Class(es) to apply to the 'ellipsis' placeholders"
           },
           {
             "prop": "firstNumber",

From cfe717aba7c1c9c693a235f8243ec2abfa017801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Fri, 24 Jan 2020 01:08:02 +0100
Subject: [PATCH 12/12] Add docs

---
 docs/markdown/intro/README.md           |  4 +-
 src/components/modal/README.md          |  4 +-
 src/components/pagination-nav/README.md | 55 ++++++++++++++++++++++++
 src/components/pagination/README.md     | 56 +++++++++++++++++++++++++
 4 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
index 27c79fa6f01..e25b2a76ee6 100644
--- a/docs/markdown/intro/README.md
+++ b/docs/markdown/intro/README.md
@@ -36,8 +36,8 @@ some good starting points would be:
 - [Vue Guide](https://vuejs.org/v2/guide/)
 - [Vue API](https://vuejs.org/v2/api/)
 - [Bootstrap v{{bootstrapVersionMinor}} documentation](https://getbootstrap.com/)
-- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped styles
-  in SFC (Single File Component) `.vue` files
+- [Vue loader scoped CSS](https://vue-loader.vuejs.org/guide/scoped-css.html), if using scoped
+  styles in SFC (Single File Component) `.vue` files
 
 ## Documentation information
 
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index 0dbef2d4f6c..12f00e32166 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -930,8 +930,8 @@ Example Confirm Message boxes
   by default. You can enable the header close button by setting `hideHeaderClose: false` in the
   options.
 - Message Boxes will throw an error (promise rejection) if they are closed/destroyed before they are
-  hidden. Always include a `.catch(errHandler)` reject handler, event if using
-  the async `await` style code.
+  hidden. Always include a `.catch(errHandler)` reject handler, event if using the async `await`
+  style code.
 - When using Vue Router (or similar), Message Boxes will close and reject if the route changes
   before the modal hides. If you wish for the message box to remain open when the route changes, use
   `this.$root.$bvModal` instead of `this.$bvModal`.
diff --git a/src/components/pagination-nav/README.md b/src/components/pagination-nav/README.md
index 0dd4d94ce03..7c198285417 100644
--- a/src/components/pagination-nav/README.md
+++ b/src/components/pagination-nav/README.md
@@ -322,6 +322,61 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
 | `index`    | Number  | Page number (indexed from `0` to `numberOfPages -1`) |
 | `disabled` | Boolean | If the page button is disabled                       |
 
+### Goto first/last button type
+
+If you prefer to have buttons with the first and last page number to go to the corresponding page,
+use the `first-number` and `last-number` props.
+
+```html
+<template>
+  <div class="overflow-auto">
+    <div>
+      <h6>Goto first button number</h6>
+      <b-pagination-nav
+        v-model="currentPage"
+        :number-of-pages="pages"
+        base-url="#"
+        first-number
+      ></b-pagination-nav>
+    </div>
+
+    <div class="mt-3">
+      <h6>Goto last button number</h6>
+      <b-pagination-nav
+        v-model="currentPage"
+        :number-of-pages="pages"
+        base-url="#"
+        last-number
+      ></b-pagination-nav>
+    </div>
+
+    <div class="mt-3">
+      <h6>Goto first and last button number</h6>
+      <b-pagination-nav
+        v-model="currentPage"
+        :number-of-pages="pages"
+        base-url="#"
+        first-number
+        last-number
+      ></b-pagination-nav>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        pages: 100,
+        currentPage: 5
+      }
+    }
+  }
+</script>
+
+<!-- b-pagination-nav-goto-first-last-number.vue -->
+```
+
 ### Button size
 
 Optionally change from the default button size by setting the `size` prop to either `'sm'` for
diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
index 936acc570be..42f8fbf7fba 100644
--- a/src/components/pagination/README.md
+++ b/src/components/pagination/README.md
@@ -185,6 +185,62 @@ The slot `page` is always scoped, while the slots `first-text`, `prev-text`, `ne
 | `index`    | Number  | Page number (indexed from `0` to `numberOfPages -1`) |
 | `disabled` | Boolean | If the page button is disabled                       |
 
+### Goto first/last button type
+
+If you prefer to have buttons with the first and last page number to go to the corresponding page,
+use the `first-number` and `last-number` props.
+
+```html
+<template>
+  <div class="overflow-auto">
+    <div>
+      <h6>Goto first button number</h6>
+      <b-pagination
+        v-model="currentPage"
+        :total-rows="rows"
+        :per-page="perPage"
+        first-number
+      ></b-pagination>
+    </div>
+
+    <div class="mt-3">
+      <h6>Goto last button number</h6>
+      <b-pagination
+        v-model="currentPage"
+        :total-rows="rows"
+        :per-page="perPage"
+        last-number
+      ></b-pagination>
+    </div>
+
+    <div class="mt-3">
+      <h6>Goto first and last button number</h6>
+      <b-pagination
+        v-model="currentPage"
+        :total-rows="rows"
+        :per-page="perPage"
+        first-number
+        last-number
+      ></b-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        rows: 100,
+        perPage: 1,
+        currentPage: 5
+      }
+    }
+  }
+</script>
+
+<!-- b-pagination-goto-first-last-number.vue -->
+```
+
 ### Button size
 
 Optionally change from the default button size by setting the `size` prop to either `'sm'` for