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');
});