Add support for customizing prev/next nav using slots

Author: gilbitron

src/laravel-vue-pagination.js

@@ -25,17 +25,21 @@ module.exports = {
 	template: '<ul class="pagination" v-if="data.total > data.per_page">\
 		<li class="page-item pagination-prev-nav" v-if="data.prev_page_url">\
 			<a class="page-link" href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)">\
+				<slot name="prev-nav">\
 					<span aria-hidden="true">&laquo;</span>\
 					<span class="sr-only">Previous</span>\
+				</slot>\
 			</a>\
 		</li>\
 		<li class="page-item pagination-page-nav" v-for="n in getPages()" :class="{ \'active\': n == data.current_page }">\
 			<a class="page-link" href="#" @click.prevent="selectPage(n)">{{ n }}</a>\
 		</li>\
 		<li class="page-item pagination-next-nav" v-if="data.next_page_url">\
 			<a class="page-link" href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)">\
+				<slot name="next-nav">\
 					<span aria-hidden="true">&raquo;</span>\
 					<span class="sr-only">Next</span>\
+				</slot>\
 			</a>\
 		</li>\
 	</ul>',

tests/laravel-vue-pagination.js

@@ -99,4 +99,17 @@ describe('LaravelVuePagination', function() {
 
 		vm.selectPage(2);
 	});
+
+	it('has correct DOM structure when using slots', function() {
+		const wrapper = mount(LaravelVuePagination, {
+			propsData: { data: exampleData },
+			slots: {
+				'prev-nav': '<span class="custom-prev-nav">Previous</span>',
+				'next-nav': '<span>Next</span>'
+			}
+		});
+
+		expect(wrapper.html()).toContain('<span class="custom-prev-nav">Previous</span>');
+		expect(wrapper.html()).toContain('<span>Next</span>');
+	});
 });