diff --git a/src/RenderlessPagination.vue b/src/RenderlessPagination.vue index b16a7b1..1a6cc25 100644 --- a/src/RenderlessPagination.vue +++ b/src/RenderlessPagination.vue @@ -115,7 +115,7 @@ export default { this.selectPage((this.currentPage + 1)); }, selectPage (page) { - if (page === '...') { + if (page === '...' || page === this.currentPage) { return; } diff --git a/src/TailwindPagination.vue b/src/TailwindPagination.vue index 02f79c8..bd0c03a 100644 --- a/src/TailwindPagination.vue +++ b/src/TailwindPagination.vue @@ -39,6 +39,7 @@ v-for="(page, key) in slotProps.computed.pageRange" :key="key" v-on="slotProps.pageButtonEvents(page)" + :disabled="page === slotProps.computed.currentPage" > {{ page }} @@ -70,7 +71,7 @@ export default { compatConfig: { MODE: 3 }, - + inheritAttrs: false, emits: ['pagination-change-page'], diff --git a/tests/unit/Bootstrap4Pagination.spec.mjs b/tests/unit/Bootstrap4Pagination.spec.mjs index d375426..3b481e9 100644 --- a/tests/unit/Bootstrap4Pagination.spec.mjs +++ b/tests/unit/Bootstrap4Pagination.spec.mjs @@ -146,6 +146,7 @@ test('has correct DOM structure when on page 2', function () { }); test('emits correct event', function () { + exampleData.current_page = 1; const wrapper = mount(Bootstrap4Pagination, { props: { data: exampleData, @@ -159,6 +160,20 @@ test('emits correct event', function () { expect(event[0]).toEqual([2]); }); +test('does not emit event on current page', function () { + exampleData.current_page = 1; + const wrapper = mount(Bootstrap4Pagination, { + props: { + data: exampleData, + }, + }); + + wrapper.findAll('li').at(1).find('a').trigger('click'); + + const event = wrapper.emitted('pagination-change-page'); + expect(event).toBeUndefined(); +}); + test('has correct DOM structure when using slots', function () { const wrapper = mount(Bootstrap4Pagination, { props: { data: exampleData }, diff --git a/tests/unit/Bootstrap5Pagination.spec.mjs b/tests/unit/Bootstrap5Pagination.spec.mjs index 4bb4992..c193a92 100644 --- a/tests/unit/Bootstrap5Pagination.spec.mjs +++ b/tests/unit/Bootstrap5Pagination.spec.mjs @@ -146,6 +146,7 @@ test('has correct DOM structure when on page 2', function () { }); test('emits correct event', function () { + exampleData.current_page = 1; const wrapper = mount(Bootstrap5Pagination, { props: { data: exampleData, @@ -159,6 +160,20 @@ test('emits correct event', function () { expect(event[0]).toEqual([2]); }); +test('does not emit event on current page', function () { + exampleData.current_page = 1; + const wrapper = mount(Bootstrap5Pagination, { + props: { + data: exampleData, + }, + }); + + wrapper.findAll('li').at(1).find('a').trigger('click'); + + const event = wrapper.emitted('pagination-change-page'); + expect(event).toBeUndefined(); +}); + test('has correct DOM structure when using slots', function () { const wrapper = mount(Bootstrap5Pagination, { props: { data: exampleData }, diff --git a/tests/unit/TailwindPagination.spec.mjs b/tests/unit/TailwindPagination.spec.mjs index 077deef..5d45aef 100644 --- a/tests/unit/TailwindPagination.spec.mjs +++ b/tests/unit/TailwindPagination.spec.mjs @@ -118,6 +118,7 @@ test('has correct DOM structure when on page 2', function () { }); test('emits correct event', function () { + exampleData.current_page = 1; const wrapper = mount(TailwindPagination, { props: { data: exampleData, @@ -131,6 +132,32 @@ test('emits correct event', function () { expect(event[0]).toEqual([2]); }); +test('does not emit event on current page', function () { + exampleData.current_page = 1; + const wrapper = mount(TailwindPagination, { + props: { + data: exampleData, + }, + }); + + wrapper.findAll('button').at(1).trigger('click'); + + const event = wrapper.emitted('pagination-change-page'); + expect(event).toBeUndefined(); +}); + +test('current page button is disabled', function () { + exampleData.current_page = 1; + const wrapper = mount(TailwindPagination, { + props: { + data: exampleData, + }, + }); + + const button = wrapper.findAll('button').at(1); + expect(button.attributes('disabled')).toBe(''); +}); + test('has correct DOM structure when using slots', function () { const wrapper = mount(TailwindPagination, { props: { data: exampleData },