diff --git a/README.md b/README.md index 300f483..71799b4 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Vue.component('pagination', require('laravel-vue-pagination')); Use the component: ```html - + ``` ```javascript @@ -72,6 +72,7 @@ Vue.component('example-component', { | Name | Type | Description | | --- | --- | --- | +| `limit` | Number | Limit of pages to be rendered. Default `0` (unlimited links) `-1` will hide numeric pages and leave only arrow navigation. `3` will show 3 previous and 3 next numeric pages from current page. | | `data` | Object | An object containing the structure of a [Laravel paginator](https://laravel.com/docs/5.3/pagination) response. See below for default value. | ```javascript diff --git a/package.json b/package.json index e412167..5bf07fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "laravel-vue-pagination", - "version": "1.0.2", + "version": "1.0.3", "description": "Vue.js pagination component for Laravel paginators and Bootstrap styles", "author": "Gilbert Pellegrom ", "homepage": "https://github.com/gilbitron/laravel-vue-pagination", diff --git a/src/laravel-vue-pagination.js b/src/laravel-vue-pagination.js index 749b855..1615b7e 100644 --- a/src/laravel-vue-pagination.js +++ b/src/laravel-vue-pagination.js @@ -15,22 +15,50 @@ module.exports = { total: 0, } } + }, + limit: { + type: Number, + default: 0 } }, - template: '', + template: ` + `, methods: { selectPage(page) { this.$emit('pagination-change-page', page); + }, + getPages() { + if (this.limit === -1) { + return 0; + } + + if (this.limit === 0) { + return this.data.last_page; + } + + let start = this.data.current_page - this.limit, + end = this.data.current_page + this.limit + 1, + pages = [], + index; + + start = start < 1 ? 1 : start; + end = end >= this.data.last_page ? this.data.last_page + 1 : end; + + for (index = start; index < end; index++) { + pages.push(index); + } + + return pages; } } }; diff --git a/test/laravel-vue-pagination.spec.js b/test/laravel-vue-pagination.spec.js index accd3e5..9e71b71 100644 --- a/test/laravel-vue-pagination.spec.js +++ b/test/laravel-vue-pagination.spec.js @@ -14,14 +14,20 @@ var exampleData = { { id: 3 }, { id: 4 }, { id: 5 }, + { id: 6 }, + { id: 7 }, + { id: 8 }, + { id: 9 }, + { id: 10 }, + { id: 11 }, ], from: 1, - last_page: 3, + last_page: 6, next_page_url: 'http://example.com/page/2', per_page: 2, prev_page_url: null, to: 3, - total: 5, + total: 11, }; describe('LaravelVuePagination', function() { @@ -31,20 +37,35 @@ describe('LaravelVuePagination', function() { }); expect(vm.$el.nodeName).toBe('UL'); - expect(vm.$el.getElementsByTagName('li').length).toBe(4); + expect(vm.$el.getElementsByTagName('li').length).toBe(7); expect(vm.$el.getElementsByTagName('li')[0].classList).toContain('active'); }); + it('has correct DOM structure with 1 link limit on page 3', function() { + exampleData.current_page = 3; + exampleData.next_page_url = 'http://example.com/page/4'; + exampleData.prev_page_url = 'http://example.com/page/2'; + + const vm = getComponent(LaravelVuePagination, { + data: exampleData, + limit: 1 + }); + + expect(vm.$el.nodeName).toBe('UL'); + expect(vm.$el.getElementsByTagName('li').length).toBe(5); + expect(vm.$el.getElementsByTagName('li')[2].classList).toContain('active'); + }); + it('has correct DOM structure when on page 2', function() { exampleData.current_page = 2; - exampleData.next_page_url = 'http://example.com/page/1'; - exampleData.prev_page_url = 'http://example.com/page/3'; + exampleData.next_page_url = 'http://example.com/page/3'; + exampleData.prev_page_url = 'http://example.com/page/1'; const vm = getComponent(LaravelVuePagination, { data: exampleData }); - expect(vm.$el.getElementsByTagName('li').length).toBe(5); + expect(vm.$el.getElementsByTagName('li').length).toBe(8); expect(vm.$el.getElementsByTagName('li')[2].classList).toContain('active'); });