fix(pagination pagination-nav): v-model active class fix + keypress click fix (Fixes #1985, #1629) (#2299)

Author: tmorehouse

src/components/pagination-nav/README.md

@@ -1,8 +1,12 @@
 # Pagination Navigation
 
-> Quick first, previous, next, last, and page buttons for pagination based navigation, supporting
+> Quick first, previous, next, last, and page buttons for navigation based pagination, supporting
 regular links or router links.
 
+`<b-pagination-nav>` is used for navigating to new page URLs. For controlling in page component
+pagination (such as table or list pagination), use the [`<b-pagination>`](/docs/components/pagination)
+component instead.
+
 ```html
 <template>
 <div>
@@ -86,7 +90,7 @@ buttons. You can override this behaviour by supplying a function reference to
 the `page-gen` property. The function reference should accept a single argument
 which is a page number (1-N). The `page-gen` function should return a string.
 
-Note HTML strings are currently not supported.
+**Note:** HTML content in generated page number strings is **not** supported.
 
 **Example: Using an array of links to generate pagination:**
 
@@ -131,6 +135,7 @@ export default {
 
 <!-- pagination-nav-links.vue -->
 ```
+
 ## Button Size
 Optionally change from the default button size by setting the `size`
 prop to eiter `'am` for smaller buttons or `'lg'` for larger buttons.
@@ -162,6 +167,7 @@ export default {
 <!-- pagination-size.vue -->
 ```
 
+
 ## Customizing
 
 `<b-pagination-nav>` supports several props that allow you to customize the appearance.
@@ -170,18 +176,27 @@ export default {
 | ---- | -----------
 | `limit` | Limit the maximum number of displayed page buttons (including ellipsis if present, and excluding first/prev/next/last buttons)
 | `number-of-pages` | The total number of pages
+| `hide-ellipsis` | never show ellipsis indicators
+| `hide-goto-end-buttons` | never display goto first/last buttons
+
+And provides several props for setting the content of the bookend buttons:
+
+| Prop | Description
+| ---- | -----------
 | `first-text` | The "goto first page" button text (plain html supported)
 | `prev-text` | The "goto previous page" button text (plain html supported)
 | `next-text` | The "goto next page" button text (plain html supported)
 | `last-text` | The "goto last page" button text (plain html supported)
 | `ellipsis-text` | the `...` indicator text (plain html supported)
-| `hide-ellipsis` | never show ellipsis indicators
-| `hide-goto-end-buttons` | never display goto first/last buttons
 
 Ellipsis indicator(s) will only be ever shown at the front and/or end of
 the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
 indicator(s) will never be shown for practical display reasons.
 
+**Note:** HTML is supported via the bookend content props. If allowing user supplied content
+to populate these props, you should use named slots (see below) instead to avoid possible XSS attacks.
+
+
 ### Named slots
 
 `<b-pagination-nav>` supports several slots that allow you to customize the appearance.
@@ -194,6 +209,7 @@ indicator(s) will never be shown for practical display reasons.
 | `last-text` | The "goto last page" button text (html/sub-components supported)
 | `ellipsis-text` | the `...` indicator text (html/sub-components supported)
 
+
 ## Alignment
 
 By default the pagination component is left aligned. Change the alignment to
@@ -274,7 +290,7 @@ list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (c
 ## See also
 
 For pagination control of a component (such as `<b-table>`), use the
-[`<b-pagination>`](./pagination) component instead.
+[`<b-pagination>`](/docs/components/pagination) component instead.
 
 
 <!-- Component reference added automatically from component package.json -->

src/components/pagination-nav/fixtures/pagination-nav.html

@@ -1,8 +1,20 @@
 <div id="app">
-    <div>
-        <h6>Default</h6>
-        <b-pagination-nav :number-of-pages="10" base-url="#" v-model="currentPage" />
-        <br>
-        <div>currentPage: {{currentPage}}</div>
-    </div>
+  <div>
+    <h6>Default</h6>
+    <b-pagination-nav :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
+  <div>
+    <h6>Link/Page Generation Fns</h6>
+    <b-pagination-nav :link-gen="linkGen" :page-gen="pageGen" :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
+  <div>
+    <h6>Router Links</h6>
+    <b-pagination-nav use-router :number-of-pages="10" base-url="#" v-model="currentPage" />
+    <br>
+    <div>currentPage: {{currentPage}}</div>
+  </div>
 </div>

src/components/pagination-nav/fixtures/pagination-nav.js

@@ -2,5 +2,18 @@ window.app = new Vue({
   el: '#app',
   data: {
     currentPage: 1
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.currentPage = 2
+    })
+  },
+  methods: {
+    pageGen (num) {
+      return `Page ${num})`
+    },
+    linkGen (num) {
+      return `#page/${num})`
+    }
   }
 })

src/components/pagination-nav/pagination-nav.js

@@ -1,38 +1,46 @@
-import { assign } from '../../utils/object'
+import warn from '../../utils/warn'
 import paginationMixin from '../../mixins/pagination'
 import { pickLinkProps } from '../link/link'
 
 // Props needed for router links
 const routerProps = pickLinkProps('activeClass', 'exactActiveClass', 'append', 'exact', 'replace', 'target', 'rel')
 
 // Props object
-const props = assign(
+const props = {
   // pagination-nav specific props
-  {
-    numberOfPages: {
-      type: Number,
-      default: 1
-    },
-    baseUrl: {
-      type: String,
-      default: '/'
-    },
-    useRouter: {
-      type: Boolean,
-      default: false
-    },
-    linkGen: {
-      type: Function,
-      default: null
-    },
-    pageGen: {
-      type: Function,
-      default: null
+  numberOfPages: {
+    type: [Number, String],
+    default: 1,
+    validator (value) {
+      const num = parseInt(value, 10)
+      /* istanbul ignore if */
+      if (isNaN(num) || num < 1) {
+        warn('b-pagination: prop "number-of-pages" must be a number greater than 0')
+        return false
+      }
+      return true
     }
   },
+  baseUrl: {
+    type: String,
+    default: '/'
+  },
+  useRouter: {
+    type: Boolean,
+    default: false
+  },
+  linkGen: {
+    type: Function,
+    default: null
+  },
+  pageGen: {
+    type: Function,
+    default: null
+  },
   // Router specific props
-  routerProps
-)
+  ...routerProps
+}
+
 // Our render function is brought in via the pagination mixin
 // @vue/component
 export default {
@@ -46,7 +54,16 @@ export default {
   },
   methods: {
     onClick (pageNum, evt) {
+      // Update the v-model
       this.currentPage = pageNum
+      this.$nextTick(() => {
+        try {
+          // Emulate native link click page reloading behaviour by bluring the
+          // paginator and returing focus to the document
+          const target = evt.currentTarget || evt.target
+          target.blur()
+        } catch (e) {}
+      })
     },
     makePage (pagenum) {
       if (this.pageGen && typeof this.pageGen === 'function') {
@@ -70,14 +87,15 @@ export default {
         disabled: this.disabled
       }
       if (this.useRouter || typeof link === 'object') {
-        props = assign(props, {
+        props = {
+          ...props,
           to: link,
           exact: this.exact,
           activeClass: this.activeClass,
           exactActiveClass: this.exactActiveClass,
           append: this.append,
           replace: this.replace
-        })
+        }
       }
       return props
     }

src/components/pagination/README.md

@@ -1,7 +1,10 @@
 # Pagination
 
 > Quick first, previous, next, last, and page buttons for pagination control
-of another component (such as `<b-table>`).
+of another component (such as `<b-table>` or lists).
+
+For pagination that navigates to a new URL, use the [`<b-pagination-nav>`](/docs/components/pagination-nav)
+component instead.
 
 ```html
 <template>
@@ -49,21 +52,33 @@ values for `total-rows` and `per-page`.
 `<b-pagination>` supports several props that allow you to customize the appearance.
 
 ### Props
+
 | Prop | Description
 | ---- | -----------
 | `limit` | Limit the maximum number of displayed page buttons (including ellipsis if present, and excluding first/prev/next/last buttons)
-| `total-rows` | The total number of records in your data
-| `per-page` | The maximum number of data records per page
+| `number-of-pages` | The total number of pages
+| `hide-ellipsis` | never show ellipsis indicators
+| `hide-goto-end-buttons` | never display goto first/last buttons
+
+And provides several props for setting the content of the bookend buttons:
+
+| Prop | Description
+| ---- | -----------
 | `first-text` | The "goto first page" button text (plain html supported)
 | `prev-text` | The "goto previous page" button text (plain html supported)
 | `next-text` | The "goto next page" button text (plain html supported)
 | `last-text` | The "goto last page" button text (plain html supported)
 | `ellipsis-text` | the `...` indicator text (plain html supported)
-| `hide-ellipsis` | never show ellipsis indicators
-| `hide-goto-end-buttons` | never display goto first/last buttons
 
+Ellipsis indicator(s) will only be ever shown at the front and/or end of
+the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
+indicator(s) will never be shown for practical display reasons.
+
+**Note:** HTML is supported via the bookend content props. If allowing user supplied content
+to populate these props, you should use named slots (see below) instead to avoid possible XSS attacks.
 
 ### Named slots
+
 | Slot | Description
 |----- | -----------
 | `first-text` | The "goto first page" button text (html/sub-components supported)
@@ -72,7 +87,6 @@ values for `total-rows` and `per-page`.
 | `last-text` | The "goto last page" button text (html/sub-components supported)
 | `ellipsis-text` | the `...` indicator text (html/sub-components supported)
 
-
 Ellipsis inidcator(s) will only be ever shown at the front and/or end of
 the page number buttons. For `limit` values less than or equal to `3`, the ellipsis
 indicator(s) will never be shown for practical display reasons.
@@ -168,7 +182,7 @@ list, respectively, and <kbd>ENTER</kbd> or <kbd>SPACE</kbd> keys will select (c
 Both events provide the single argument of the current page number (starting from 1)
 
 ## See Also
-For navigation based pagination, please see the [`<b-pagination-nav>`](./pagination-nav)
+For navigation based pagination, please see the [`<b-pagination-nav>`](/docs/components/pagination-nav)
 component.
 
 

src/components/pagination/fixtures/pagination.html

@@ -6,7 +6,7 @@ <h6>Default</h6>
 
         <br><br>
 
-        <b-pagination size="md" :total-rows="100" v-model="currentPage"  :limit="10" :per-page="10">
+        <b-pagination size="md" total-rows="100" v-model="currentPage"  limit="10" per-page="10">
         </b-pagination>
 
         <br><br>
@@ -39,7 +39,42 @@ <h6>Default</h6>
           <template slot="ellipsis-text">...</template>
         </b-pagination>
 
+        <br><br>
+
+        <b-pagination :total-rows="100" v-model="currentPage" limit="-1" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="center" :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="right" hide-goto-end-buttons :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination align="end" hide-goto-end-buttons :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+        </b-pagination>
+
         <br><br>
         <div>currentPage: {{currentPage}}</div>
+        <br><br>
+
+        <b-pagination total-rows="100" v-model="currentPage2" limit="4" per-page="20">
+        </b-pagination>
+        <div>currentPage: {{currentPage2}}</div>
+
+        <br><br>
+
+        <b-pagination total-rows="100" value="10" limit="4" per-page="10">
+        </b-pagination>
+
+        <br><br>
+
+        <b-pagination total-rows="100" value="20" limit="4" per-page="10">
+        </b-pagination>
     </div>
 </div>

src/components/pagination/fixtures/pagination.js

@@ -1,6 +1,7 @@
 window.app = new Vue({
   el: '#app',
   data: {
-    currentPage: 3
+    currentPage: 3,
+    currentPage2: 2
   }
 })