keep the current page selected when list changes (fix #58)

src/components/Paginate.js

@@ -44,6 +44,10 @@ export default {
       const first = this.currentPage * this.per + 1
       const last = Math.min((this.currentPage * this.per) + this.per, numOfItems)
       return `${first}-${last} of ${numOfItems}`
+    },
+
+    lastPage () {
+      return Math.ceil(this.list.length / this.per)
     }
   },
   mounted () {
@@ -61,9 +65,8 @@ export default {
       this.paginateList()
     },
     list () {
-      if (this.initialListSize !== this.list.length) {
-        // On list change, refresh the paginated list only if list size has changed
-        this.currentPage = 0
+      if (this.currentPage >= this.lastPage) {
+        this.currentPage = this.lastPage - 1
       }
       this.paginateList()
     },
@@ -79,9 +82,9 @@ export default {
       this.$parent.paginate[this.name].list = paginatedList
     },
     goToPage (page) {
-      const maxPage = Math.ceil(this.list.length / this.per)
-      if (page > maxPage) {
-        warn(`You cannot go to page ${page}. The last page is ${maxPage}.`, this.$parent)
+      const lastPage = Math.ceil(this.list.length / this.per)
+      if (page > lastPage) {
+        warn(`You cannot go to page ${page}. The last page is ${lastPage}.`, this.$parent)
         return
       }
       this.currentPage = page - 1

src/components/PaginateLinks.js

@@ -206,8 +206,8 @@ function getLimitedLinks (vm, h) {
     )
     // If the link is a number,
     // then incremented by 1 (since it's 0 based).
-    // otherwise, do nothing (so, it's a symbol). 
-    const text = Number.isInteger(link) ? link + 1 : link
+    // otherwise, do nothing (so, it's a symbol).
+    const text = (link === parseInt(link, 10)) ? link + 1 : link
     return h('li', { class: liClasses }, [h('a', data, text)])
   })
 }

test/Paginate.js

@@ -47,15 +47,14 @@ describe('Paginate.vue', () => {
     })
   })
 
-  it('refreshes the paginated list and start from first page when the full list is changed', done => {
+  it('refreshes the paginated list and make sure the current page is not out of scope when the full list is changed', done => {
     vm.paginate.langs.page = 1
     vm.langs = ['foo', 'bar', 'baz', 'quix']
     Vue.nextTick(() => {
-      expect(vm.paginate.langs.list).to.include.members(['foo', 'bar'])
+      expect(vm.paginate.langs.list).to.include.members(['baz', 'quix'])
       expect(vm.paginate.langs.list).to.not.include.members(['JavaScript', 'PHP'])
       done()
     })
-
   })
 
   it('allows `per` prop to be dynamic', (done) => {