From 1958aeedcc3d8c6e9596937269004007802c88fa Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Mon, 26 Aug 2024 11:07:01 -0700 Subject: [PATCH 1/2] fix(BPagination): Correctly position ellipses when hideGotoEndButtons=true --- .../components/BPagination/BPagination.vue | 30 ++++++++++--------- .../components/BPagination/pagination.spec.ts | 18 +++++++++++ 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue index 3e5790b0c..57bd52e25 100644 --- a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue +++ b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue @@ -344,7 +344,7 @@ watch(pagination, (oldValue, newValue) => { const buttons = computed(() => { // The idea here is to create an array of all the buttons on the page control. - // This was we can keep the invariants in one place and the template code just + // This way we can keep the invariants in one place and the template code just // iterates over the array. const pages = numberOfPages.value @@ -354,10 +354,11 @@ const buttons = computed(() => { const lastPage = props.lastNumber ? 1 : 0 const hideEllipsis = props.hideEllipsis || limit <= ELLIPSIS_THRESHOLD const hideEndButtons = props.hideGotoEndButtons ? 1 : 0 + const showEndButtons = props.hideGotoEndButtons ? 0 : 1 // The first case is when all of the page buttons fit on the control, this is // the simplest case and the only one that will create an array smaller than - // Limit + 4 - hideEndButtons *2 (the [first, last,] prev, next buttons) + // Limit + 4 - hideEndButtons * 2 (the [first, last,] prev, next buttons) if (pages < limit + firstPage + lastPage) { return [ @@ -394,7 +395,7 @@ const buttons = computed(() => { buttons[buttons.length - 1] = NEXT_BUTTON } - // The next case is where the buttons page buttons start at the begginning, with + // The next case is where the page buttons start at the begginning, with // no ellipsis at the beginning, but one at the end const halfLimit = Math.floor(limit / 2) @@ -404,7 +405,7 @@ const buttons = computed(() => { } if (!hideEllipsis) { - buttons[buttons.length - 3] = ELLIPSIS_BUTTON + buttons[buttons.length - (2 + showEndButtons)] = ELLIPSIS_BUTTON } } @@ -418,7 +419,7 @@ const buttons = computed(() => { } if (!hideEllipsis) { - buttons[2] = ELLIPSIS_BUTTON + buttons[1 + showEndButtons] = ELLIPSIS_BUTTON } } @@ -431,19 +432,20 @@ const buttons = computed(() => { } if (!hideEllipsis) { - buttons[2] = ELLIPSIS_BUTTON - buttons[buttons.length - 3] = ELLIPSIS_BUTTON + buttons[1 + showEndButtons] = ELLIPSIS_BUTTON + buttons[buttons.length - (2 + showEndButtons)] = ELLIPSIS_BUTTON } } // Enable sanity check for debugging purposes - // for (let i = 0; i < buttons.length; i++) { - // if (!buttons[i]) { - // console.log( - // `Failed: button == ${i}, limit=${limit}, pages=${pages}, firstPage=${firstPage}, lastPage=${lastPage}, value=${value}` - // ) - // } - // } + for (let i = 0; i < buttons.length; i++) { + if (!buttons[i]) { + // eslint-disable-next-line no-console + console.log( + `Failed: button == ${i}, limit=${limit}, pages=${pages}, firstPage=${firstPage}, lastPage=${lastPage}, value=${value}` + ) + } + } return buttons as number[] }) diff --git a/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts b/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts index 2c92112aa..eb1435b4c 100644 --- a/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts +++ b/packages/bootstrap-vue-next/src/components/BPagination/pagination.spec.ts @@ -133,6 +133,24 @@ describe('pagination', () => { expect(wrapper.find('[aria-label="Go to last page"]').exists()).toBeFalsy() }) + it('has end ellipses in correct place when hideGotoEndButtons="true"', () => { + const wrapper = mount(BPagination, { + props: {totalRows: 100, perPage: 1, modelValue: 5, hideGotoEndButtons: true}, + }) + const buttons = wrapper.findAll('li') + const ellipses = buttons[buttons.length - 2] + expect(ellipses.attributes('role')).toBe('separator') + }) + + it('has start ellipses in correct place when hideGotoEndButtons="true"', () => { + const wrapper = mount(BPagination, { + props: {totalRows: 100, perPage: 1, modelValue: 5, hideGotoEndButtons: true}, + }) + const buttons = wrapper.findAll('li') + const [, ellipses] = buttons + expect(ellipses.attributes('role')).toBe('separator') + }) + it('does not have first button when firstNumber="true"', () => { const wrapper = mount(BPagination, { props: {totalRows: 100, perPage: 1, modelValue: 5, firstNumber: true}, From 5ca47450c1c9b1c631c1131220e86cde9ce0646a Mon Sep 17 00:00:00 2001 From: "David W. Gray" Date: Mon, 26 Aug 2024 11:34:38 -0700 Subject: [PATCH 2/2] fix(BPagination): Re-comment diagnostic code --- .../src/components/BPagination/BPagination.vue | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue index 57bd52e25..34d63d37d 100644 --- a/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue +++ b/packages/bootstrap-vue-next/src/components/BPagination/BPagination.vue @@ -438,14 +438,14 @@ const buttons = computed(() => { } // Enable sanity check for debugging purposes - for (let i = 0; i < buttons.length; i++) { - if (!buttons[i]) { - // eslint-disable-next-line no-console - console.log( - `Failed: button == ${i}, limit=${limit}, pages=${pages}, firstPage=${firstPage}, lastPage=${lastPage}, value=${value}` - ) - } - } + // for (let i = 0; i < buttons.length; i++) { + // if (!buttons[i]) { + // // eslint-disable-next-line no-console + // console.log( + // `Failed: button == ${i}, limit=${limit}, pages=${pages}, firstPage=${firstPage}, lastPage=${lastPage}, value=${value}` + // ) + // } + // } return buttons as number[] })