Merge pull request #1 from mihaliak/master

Added limit prop

README.md

@@ -28,7 +28,7 @@ Vue.component('pagination', require('laravel-vue-pagination'));
 Use the component:
 
 ```html
-<pagination :data="laravelData" v-on:pagination-change-page="getResults"></pagination>
+<pagination :data="laravelData" :limit="3" v-on:pagination-change-page="getResults"></pagination>
 ```
 
 ```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

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 <[email protected]>",
   "homepage": "https://github.com/gilbitron/laravel-vue-pagination",

src/laravel-vue-pagination.js

@@ -15,22 +15,50 @@ module.exports = {
 					total: 0,
 				}
 			}
+		},
+		limit: {
+			type: Number,
+			default: 0
 		}
 	},
 
-	template: '<ul class="pagination" v-if="data.total > data.per_page">' +
-	'	<li v-if="data.prev_page_url">' +
-	'		<a href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)"><span aria-hidden="true">&laquo;</span></a>' +
-	'	</li>' +
-	'	<li v-for="n in data.last_page" :class="{ \'active\': n == data.current_page }"><a href="#" @click.prevent="selectPage(n)">{{ n }}</a></li>' +
-	'	<li v-if="data.next_page_url">' +
-	'		<a href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)"><span aria-hidden="true">&raquo;</span></a>' +
-	'	</li>' +
-	'</ul>',
+	template: `
+	<ul class="pagination" v-if="data.total > data.per_page">
+		<li v-if="data.prev_page_url">
+			<a href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)"><span aria-hidden="true">&laquo;</span></a>
+		</li>
+		<li v-for="n in getPages()" :class="{ 'active': n == data.current_page }"><a href="#" @click.prevent="selectPage(n)">{{ n }}</a></li>
+		<li v-if="data.next_page_url">
+			<a href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)"><span aria-hidden="true">&raquo;</span></a>
+		</li>
+	</ul>`,
 
 	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;
 		}
 	}
 };

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