feat(pagination): added slots for first, prev, next, last, and ellipsis. Fixes #1870. (#1980)

toadkicker · mosinve · commit 1b7e7de928dd · 2018-10-13T11:52:09.000+07:00
diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
@@ -61,6 +61,15 @@ values for `total-rows` and `per-page`.
 | `hide-ellipsis` | never show ellipsis indicators
 | `hide-goto-end-buttons` | never display goto first/last buttons
 
+| Slot | Description
+|----- | -----------
+| `first-text` | The "goto first page" button text (html supported)
+| `prev-text` | The "goto previous page" button text (html supported)
+| `next-text` | The "goto next page" button text (html supported)
+| `last-text` | The "goto last page" button text (html supported)
+| `ellipsis-text` | the `...` indicator text (html 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.
diff --git a/src/components/pagination/fixtures/pagination.html b/src/components/pagination/fixtures/pagination.html
@@ -29,6 +29,16 @@ <h6>Default</h6>
         <b-pagination hide-goto-end-buttons :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
         </b-pagination>
 
+        <br><br>
+
+        <b-pagination :total-rows="100" v-model="currentPage" :limit="4" :per-page="10">
+          <template slot="first-text">First</template>
+          <template slot="prev-text">Prev</template>
+          <template slot="next-text">Next</template>
+          <template slot="last-text">Last</template>
+          <template slot="ellipsis-text">...</template>
+        </b-pagination>
+
         <br><br>
         <div>currentPage: {{currentPage}}</div>
     </div>
diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
@@ -178,6 +178,7 @@ export default {
           attrs: { role: 'separator' }
         },
         [
+          this.$slots['ellipsis-text'] ||
           h('span', {
             class: ['page-link'],
             domProps: { innerHTML: this.ellipsisText }
@@ -190,11 +191,11 @@ export default {
     buttons.push(
       this.hideGotoEndButtons
         ? h(false)
-        : makeEndBtns(1, this.labelFirstPage, this.firstText)
+        : makeEndBtns(1, this.labelFirstPage, this.$slots['first-text'] || this.firstText)
     )
 
     // Goto Previous page button
-    buttons.push(makeEndBtns(this.currentPage - 1, this.labelPrevPage, this.prevText, 1))
+    buttons.push(makeEndBtns(this.currentPage - 1, this.labelPrevPage, this.$slots['prev-text'] || this.prevText, 1))
 
     // First Ellipsis Bookend
     buttons.push(this.showFirstDots ? makeEllipsis() : h(false))
@@ -257,7 +258,7 @@ export default {
       makeEndBtns(
         this.currentPage + 1,
         this.labelNextPage,
-        this.nextText,
+        this.$slots['next-text'] || this.nextText,
         this.numberOfPages
       )
     )
@@ -266,7 +267,7 @@ export default {
     buttons.push(
       this.hideGotoEndButtons
         ? h(false)
-        : makeEndBtns(this.numberOfPages, this.labelLastPage, this.lastText)
+        : makeEndBtns(this.numberOfPages, this.labelLastPage, this.$slots['last-text'] || this.lastText)
     )
 
     // Assemble the paginatiom buttons
