feat: add pageItemsCount computed property (#35)

Author: TahaSh

examples/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <h1>Vue-Paginate v3.0</h1>
-    <paginate name="items" :list="items" class="paginate-list">
+    <paginate name="items" :list="items" ref="paginator" class="paginate-list">
       <li v-for="item in paginated('items')">
         {{ item }}
       </li>
@@ -21,6 +21,9 @@
       next: 'Next »',
       prev: '« Back'
     }"></paginate-links>
+    <span v-if="$refs.paginator">
+      Viewing {{$refs.paginator.pageItemsCount}} results
+    </span>
   </div>
 </template>
 

package.json

@@ -73,7 +73,7 @@
     "uglify-js": "^2.6.2",
     "vue-loader": "^10.0.2",
     "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.1.8",
+    "vue-template-compiler": "2.3.3",
     "watchify": "^3.7.0",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2"

src/components/Paginate.js

@@ -36,6 +36,12 @@ export default {
       set (page) {
         this.$parent.paginate[this.name].page = page
       }
+    },
+    pageItemsCount () {
+      const numOfItems = this.list.length
+      const first = this.currentPage * this.per + 1
+      const last = Math.min((this.currentPage * this.per) + this.per, numOfItems)
+      return `${first}-${last} of ${numOfItems}`
     }
   },
   mounted () {

test/Paginate.js

@@ -160,4 +160,32 @@ describe('Paginate.vue', () => {
       done()
     })
   })
+
+  it('has page items count descripiton', (done) => {
+    vm = new Vue({
+      template: `
+      <div>
+        <paginate ref="paginate"
+          name="langs"
+          :list="langs"
+          :per="2"
+          class="test-paginate"
+        ></paginate>
+      </div>`,
+      data: {
+        langs: LANGS,
+        paginate: {langs: { list: [], page: 0 }}
+      },
+      components: { Paginate }
+    }).$mount()
+    const paginator = vm.$refs.paginate
+    Vue.nextTick(() => {
+      expect(paginator.pageItemsCount).to.equal('1-2 of 8')
+      vm.paginate.langs.page = 1
+      Vue.nextTick(() => {
+        expect(paginator.pageItemsCount).to.equal('3-4 of 8')
+        done()
+      })
+    })
+  })
 })

yarn.lock

@@ -5045,9 +5045,9 @@ vue-style-loader@^1.0.0:
   dependencies:
     loader-utils "^0.2.7"
 
-vue-template-compiler@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.1.8.tgz#12dd1cc63793f59be580c694a61610cb9369d629"
+vue-template-compiler@2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.3.tgz#b5bab9ec57309c906b82a78c81a02179dbc2f470"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"