Skip to content

Commit 22fc6eb

Browse files
committed
Add support for customizing prev/next nav using slots
1 parent 190c6c5 commit 22fc6eb

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

src/laravel-vue-pagination.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,21 @@ module.exports = {
2525
template: '<ul class="pagination" v-if="data.total > data.per_page">\
2626
<li class="page-item pagination-prev-nav" v-if="data.prev_page_url">\
2727
<a class="page-link" href="#" aria-label="Previous" @click.prevent="selectPage(--data.current_page)">\
28+
<slot name="prev-nav">\
2829
<span aria-hidden="true">&laquo;</span>\
2930
<span class="sr-only">Previous</span>\
31+
</slot>\
3032
</a>\
3133
</li>\
3234
<li class="page-item pagination-page-nav" v-for="n in getPages()" :class="{ \'active\': n == data.current_page }">\
3335
<a class="page-link" href="#" @click.prevent="selectPage(n)">{{ n }}</a>\
3436
</li>\
3537
<li class="page-item pagination-next-nav" v-if="data.next_page_url">\
3638
<a class="page-link" href="#" aria-label="Next" @click.prevent="selectPage(++data.current_page)">\
39+
<slot name="next-nav">\
3740
<span aria-hidden="true">&raquo;</span>\
3841
<span class="sr-only">Next</span>\
42+
</slot>\
3943
</a>\
4044
</li>\
4145
</ul>',

tests/laravel-vue-pagination.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,4 +99,17 @@ describe('LaravelVuePagination', function() {
9999

100100
vm.selectPage(2);
101101
});
102+
103+
it('has correct DOM structure when using slots', function() {
104+
const wrapper = mount(LaravelVuePagination, {
105+
propsData: { data: exampleData },
106+
slots: {
107+
'prev-nav': '<span class="custom-prev-nav">Previous</span>',
108+
'next-nav': '<span>Next</span>'
109+
}
110+
});
111+
112+
expect(wrapper.html()).toContain('<span class="custom-prev-nav">Previous</span>');
113+
expect(wrapper.html()).toContain('<span>Next</span>');
114+
});
102115
});

0 commit comments

Comments
 (0)