From 13bd4de60054cd5aafc3cae8fb88e5f391359524 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Fri, 22 Sep 2023 23:21:53 +0300
Subject: [PATCH 01/10] fix(Pagination): correct `displayedPages()`

---
 .../components/navigation/Pagination.vue      | 67 ++++++++-----------
 1 file changed, 28 insertions(+), 39 deletions(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index ed02753c57..890f06f86c 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -127,53 +127,42 @@ export default defineComponent({
     const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1))
 
     const displayedPages = computed(() => {
-      if (!props.max || pages.value.length <= 5) {
-        return pages.value
-      } else {
-        const current = currentPage.value
-        const max = pages.value.length
-        const r = Math.floor((Math.min(props.max, max) - 5) / 2)
-        const r1 = current - r
-        const r2 = current + r
-        const beforeWrapped = r1 - 1 > 1
-        const afterWrapped = r2 + 1 < max
-        const items: Array<number | string> = [1]
-
-        if (beforeWrapped) items.push(props.divider)
-
-        if (!afterWrapped) {
-          const addedItems = (current + r + 2) - max
-          for (let i = current - r - addedItems; i <= current - r - 1; i++) {
-            items.push(i)
-          }
-        }
+      const totalItems = props.total
+      const current = currentPage.value
+      const perPage = props.pageCount
+      const lastPage = Math.ceil(totalItems / perPage)
 
-        for (let i = r1 > 2 ? (r1) : 2; i <= Math.min(max, r2); i++) {
-          items.push(i)
-        }
+      const maxDisplayedPages = Math.min(props.max, perPage)
+      const halfDisplayedPages = Math.floor(maxDisplayedPages / 2)
+      const startDisplayedPage = Math.max(2, current - halfDisplayedPages)
+      const endDisplayedPage = Math.min(startDisplayedPage + maxDisplayedPages - 2, Math.ceil(totalItems / perPage))
+
+      const items = []
 
-        if (!beforeWrapped) {
-          const addedItems = 1 - (current - r - 2)
-          for (let i = current + r + 1; i <= current + r + addedItems; i++) {
-            items.push(i)
-          }
+      if (totalItems <= maxDisplayedPages) {
+        for (let i = 1; i <= totalItems; i++) {
+          items.push(i)
         }
+        return items
+      }
 
-        if (afterWrapped) items.push(props.divider)
+      items.push(1)
 
-        if (r2 < max) items.push(max)
+      if (current > halfDisplayedPages + 1) {
+        items.push(props.divider)
+      }
 
-        // Replace divider by number on start edge case [1, '…', 3, ...]
-        if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
-          items[1] = 2
-        }
-        // Replace divider by number on end edge case [..., 48, '…', 50]
-        if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
-          items[items.length - 2] = items.length - 1
-        }
+      for (let i = startDisplayedPage; i < endDisplayedPage; i++) {
+        items.push(i)
+      }
 
-        return items
+      if (current < lastPage - halfDisplayedPages) {
+        items.push(props.divider)
       }
+
+      items.push(lastPage)
+
+      return items
     })
 
     const canGoPrev = computed(() => currentPage.value > 1)

From 9f3d5fd7e9e3634e54fab50447d9e2e3d30275a9 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Sat, 23 Sep 2023 00:06:41 +0300
Subject: [PATCH 02/10] up

---
 src/runtime/components/navigation/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 890f06f86c..a33f59f944 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -132,7 +132,7 @@ export default defineComponent({
       const perPage = props.pageCount
       const lastPage = Math.ceil(totalItems / perPage)
 
-      const maxDisplayedPages = Math.min(props.max, perPage)
+      const maxDisplayedPages = props.max
       const halfDisplayedPages = Math.floor(maxDisplayedPages / 2)
       const startDisplayedPage = Math.max(2, current - halfDisplayedPages)
       const endDisplayedPage = Math.min(startDisplayedPage + maxDisplayedPages - 2, Math.ceil(totalItems / perPage))

From 12290ae475b099027a19043bc91cc957b03adc75 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Sat, 23 Sep 2023 00:11:11 +0300
Subject: [PATCH 03/10] up

---
 src/runtime/components/navigation/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index a33f59f944..2992b8d40f 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -156,7 +156,7 @@ export default defineComponent({
         items.push(i)
       }
 
-      if (current < lastPage - halfDisplayedPages) {
+      if (current < lastPage - halfDisplayedPages && endDisplayedPage < lastPage) {
         items.push(props.divider)
       }
 

From a0b7286b6cd3a8cdf9da4032f874b5f6f59228f7 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Sat, 23 Sep 2023 01:34:27 +0300
Subject: [PATCH 04/10] up

---
 src/runtime/components/navigation/Pagination.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 2992b8d40f..44db3044d3 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -128,19 +128,20 @@ export default defineComponent({
 
     const displayedPages = computed(() => {
       const totalItems = props.total
+      const totalPages = pages.value.length
       const current = currentPage.value
       const perPage = props.pageCount
       const lastPage = Math.ceil(totalItems / perPage)
 
       const maxDisplayedPages = props.max
       const halfDisplayedPages = Math.floor(maxDisplayedPages / 2)
-      const startDisplayedPage = Math.max(2, current - halfDisplayedPages)
-      const endDisplayedPage = Math.min(startDisplayedPage + maxDisplayedPages - 2, Math.ceil(totalItems / perPage))
+      const startDisplayedPage = Math.max(2, current + 1 - halfDisplayedPages)
+      const endDisplayedPage = Math.min(startDisplayedPage + maxDisplayedPages - 2, lastPage)
 
       const items = []
 
-      if (totalItems <= maxDisplayedPages) {
-        for (let i = 1; i <= totalItems; i++) {
+      if (totalPages <= maxDisplayedPages) {
+        for (let i = 1; i <= totalPages; i++) {
           items.push(i)
         }
         return items
@@ -148,7 +149,7 @@ export default defineComponent({
 
       items.push(1)
 
-      if (current > halfDisplayedPages + 1) {
+      if (current > halfDisplayedPages + 1 && startDisplayedPage > 2) {
         items.push(props.divider)
       }
 

From c20140c30472712ee17dc2fb6441cd22e4d720be Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 27 Sep 2023 23:10:54 +0300
Subject: [PATCH 05/10] up

---
 .../components/navigation/Pagination.vue      | 54 ++++++++++++++-----
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 44db3044d3..d14d546ead 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -1,4 +1,5 @@
 <template>
+  {{ displayedPages.length }}
   <div :class="ui.wrapper" v-bind="attrs">
     <slot name="prev" :on-click="onClickPrev">
       <UButton
@@ -49,6 +50,7 @@ import type { Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'
+import { end } from '@popperjs/core'
 
 const config = mergeConfig<typeof pagination>(appConfig.ui.strategy, appConfig.ui.pagination, pagination)
 
@@ -127,18 +129,18 @@ export default defineComponent({
     const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1))
 
     const displayedPages = computed(() => {
-      const totalItems = props.total
       const totalPages = pages.value.length
       const current = currentPage.value
-      const perPage = props.pageCount
-      const lastPage = Math.ceil(totalItems / perPage)
+      const maxDisplayedPages = Math.max(props.max, 5)
 
-      const maxDisplayedPages = props.max
-      const halfDisplayedPages = Math.floor(maxDisplayedPages / 2)
-      const startDisplayedPage = Math.max(2, current + 1 - halfDisplayedPages)
-      const endDisplayedPage = Math.min(startDisplayedPage + maxDisplayedPages - 2, lastPage)
+      const r = Math.floor((Math.min(maxDisplayedPages, totalPages) - 5) / 2)
+      const r1 = current - r
+      const r2 = current + r
 
-      const items = []
+      const hasStartDivider = r1 - 1 > 1
+      const hasEndDivider = r2 + 1 < totalPages
+
+      const items: Array<number | string> = []
 
       if (totalPages <= maxDisplayedPages) {
         for (let i = 1; i <= totalPages; i++) {
@@ -149,19 +151,47 @@ export default defineComponent({
 
       items.push(1)
 
-      if (current > halfDisplayedPages + 1 && startDisplayedPage > 2) {
+      if (hasStartDivider) {
         items.push(props.divider)
       }
 
-      for (let i = startDisplayedPage; i < endDisplayedPage; i++) {
+      if (!hasEndDivider) {
+        const addedItems = (current + r + 2) - totalPages
+
+        for (let i = current - r - addedItems; i <= current - r - 1; i++) {
+          items.push(i)
+        }
+      }
+
+      for (let i = Math.max(2, r1); i <= Math.min(totalPages, r2); i++) {
         items.push(i)
       }
 
-      if (current < lastPage - halfDisplayedPages && endDisplayedPage < lastPage) {
+      if (!hasStartDivider) {
+        const addedItems = 1 - (current - r - 2)
+
+        for (let i = current + r + 1; i <= current + r + addedItems; i++) {
+          items.push(i)
+        }
+      }
+
+      if (hasEndDivider) {
         items.push(props.divider)
       }
 
-      items.push(lastPage)
+      if (r2 < totalPages) {
+        items.push(totalPages)
+      }
+
+      // Replace divider by number on start edge case [1, '…', 3, ...]
+      if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
+        items[1] = 2
+      }
+
+      // Replace divider by number on end edge case [..., 48, '…', 50]
+      if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
+        items[items.length - 2] = items.length - 1
+      }
 
       return items
     })

From db5fece9aecae48995025b3e764f148fddd3cd75 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 27 Sep 2023 23:12:00 +0300
Subject: [PATCH 06/10] up

---
 src/runtime/components/navigation/Pagination.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index d14d546ead..bf386688ec 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -1,5 +1,4 @@
 <template>
-  {{ displayedPages.length }}
   <div :class="ui.wrapper" v-bind="attrs">
     <slot name="prev" :on-click="onClickPrev">
       <UButton

From 55100f102801895d9f3690bc1a49ac4c0976a8a4 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 27 Sep 2023 23:12:56 +0300
Subject: [PATCH 07/10] up

---
 src/runtime/components/navigation/Pagination.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index bf386688ec..c57d87eead 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -49,7 +49,6 @@ import type { Button, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { pagination, button } from '#ui/ui.config'
-import { end } from '@popperjs/core'
 
 const config = mergeConfig<typeof pagination>(appConfig.ui.strategy, appConfig.ui.pagination, pagination)
 

From 6d639d36b84b596a155f4cd1d88de578fefc987d Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 27 Sep 2023 23:21:59 +0300
Subject: [PATCH 08/10] up

---
 src/runtime/components/navigation/Pagination.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index c57d87eead..8c571a3f18 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -149,13 +149,10 @@ export default defineComponent({
 
       items.push(1)
 
-      if (hasStartDivider) {
-        items.push(props.divider)
-      }
+      if (hasStartDivider) items.push(props.divider)
 
       if (!hasEndDivider) {
         const addedItems = (current + r + 2) - totalPages
-
         for (let i = current - r - addedItems; i <= current - r - 1; i++) {
           items.push(i)
         }
@@ -167,15 +164,12 @@ export default defineComponent({
 
       if (!hasStartDivider) {
         const addedItems = 1 - (current - r - 2)
-
         for (let i = current + r + 1; i <= current + r + addedItems; i++) {
           items.push(i)
         }
       }
 
-      if (hasEndDivider) {
-        items.push(props.divider)
-      }
+      if (hasEndDivider) items.push(props.divider)
 
       if (r2 < totalPages) {
         items.push(totalPages)

From 1108748bcab7791c2c4481602b2c6b7b96c4d0a1 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Wed, 27 Sep 2023 23:25:28 +0300
Subject: [PATCH 09/10] up

---
 src/runtime/components/navigation/Pagination.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 8c571a3f18..5b750c8831 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -135,8 +135,8 @@ export default defineComponent({
       const r1 = current - r
       const r2 = current + r
 
-      const hasStartDivider = r1 - 1 > 1
-      const hasEndDivider = r2 + 1 < totalPages
+      const beforeWrapped = r1 - 1 > 1
+      const afterWrapped = r2 + 1 < totalPages
 
       const items: Array<number | string> = []
 
@@ -149,9 +149,9 @@ export default defineComponent({
 
       items.push(1)
 
-      if (hasStartDivider) items.push(props.divider)
+      if (beforeWrapped) items.push(props.divider)
 
-      if (!hasEndDivider) {
+      if (!afterWrapped) {
         const addedItems = (current + r + 2) - totalPages
         for (let i = current - r - addedItems; i <= current - r - 1; i++) {
           items.push(i)
@@ -162,14 +162,14 @@ export default defineComponent({
         items.push(i)
       }
 
-      if (!hasStartDivider) {
+      if (!beforeWrapped) {
         const addedItems = 1 - (current - r - 2)
         for (let i = current + r + 1; i <= current + r + addedItems; i++) {
           items.push(i)
         }
       }
 
-      if (hasEndDivider) items.push(props.divider)
+      if (afterWrapped) items.push(props.divider)
 
       if (r2 < totalPages) {
         items.push(totalPages)

From 13f5a4b1776260d1b614f26cb5b9ccfd3e32cef1 Mon Sep 17 00:00:00 2001
From: Haytham Salama <haythamasalama@gmail.com>
Date: Thu, 28 Sep 2023 13:23:43 +0300
Subject: [PATCH 10/10] refactor: update max value to 5

---
 src/runtime/components/navigation/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 5b750c8831..a1f20b6180 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -76,7 +76,7 @@ export default defineComponent({
       type: Number,
       default: 7,
       validate (value) {
-        return value >= 7 && value < Number.MAX_VALUE
+        return value >= 5 && value < Number.MAX_VALUE
       }
     },
     size: {