feat(b-pagination, b-pagination-nav): add page button class props and…

… option to show first/last page numbers (closes #4597, #4533) (#4622) Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
bootstrap-vue · Jan 24, 2020 · 3a3ee1d · 3a3ee1d
1 parent af0b6eb
commit 3a3ee1d
Show file tree

Hide file tree

Showing 11 changed files with 573 additions and 103 deletions.
diff --git 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/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -29,15 +29,15 @@ export const props = {
     default: false
   },
   menuClass: {
-    type: [String, Array],
+    type: [String, Array, Object],
     default: null
   },
   toggleTag: {
     type: String,
     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/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
@@ -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-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'"
@@ -104,6 +108,46 @@
           {
             "prop": "lastText",
             "description": "Content to place in the goto last page button"
+          },
+          {
+            "prop": "firstClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to first page' button"
+          },
+          {
+            "prop": "prevClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to previous page' button"
+          },
+          {
+            "prop": "pageClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to page #' buttons"
+          },
+          {
+            "prop": "nextClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to next page' button"
+          },
+          {
+            "prop": "lastClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to last page' button"
+          },
+          {
+            "prop": "ellipsisClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply 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": [

diff --git 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

diff --git 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'"
@@ -88,6 +92,46 @@
           {
             "prop": "lastText",
             "description": "Content to place in the goto last page button"
+          },
+          {
+            "prop": "firstClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to first page' button"
+          },
+          {
+            "prop": "prevClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to previous page' button"
+          },
+          {
+            "prop": "pageClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to page #' buttons"
+          },
+          {
+            "prop": "nextClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to next page' button"
+          },
+          {
+            "prop": "lastClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply to the 'Go to last page' button"
+          },
+          {
+            "prop": "ellipsisClass",
+            "version": "2.3.0",
+            "description": "Class(es) to apply 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": [