Merge pull request #166 from lombervid/fix-current

Prevent current page button to emit event

src/RenderlessPagination.vue

@@ -115,7 +115,7 @@ export default {
             this.selectPage((this.currentPage + 1));
         },
         selectPage (page) {
-            if (page === '...') {
+            if (page === '...' || page === this.currentPage) {
                 return;
             }
 

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 }}
             </button>
@@ -70,7 +71,7 @@ export default {
     compatConfig: {
         MODE: 3
     },
-  
+
     inheritAttrs: false,
 
     emits: ['pagination-change-page'],

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 },

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 },

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 },