From c71fdc8795812bed779ab247451efd3db031e4cd Mon Sep 17 00:00:00 2001
From: offich <baymax.blackandwhite@gmail.com>
Date: Wed, 6 Nov 2024 00:06:49 +0900
Subject: [PATCH] feat(Pagination): improve slot props (#2522)

---
 .../PaginationExampleFirstLastSlots.vue       | 22 +++++++++++++++----
 .../PaginationExamplePrevNextSlots.vue        | 22 +++++++++++++++----
 .../components/navigation/Pagination.vue      |  8 +++----
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue b/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
index 95841e15..50cdd580 100644
--- a/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
+++ b/docs/components/content/examples/PaginationExampleFirstLastSlots.vue
@@ -5,15 +5,29 @@ const items = ref(Array(55))
 
 <template>
   <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
-    <template #first="{ onClick }">
+    <template #first="{ onClick, canGoFirst }">
       <UTooltip text="First page">
-        <UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
+        <UButton
+          icon="i-heroicons-arrow-uturn-left"
+          color="primary"
+          :ui="{ rounded: 'rounded-full' }"
+          class="rtl:[&_span:first-child]:rotate-180 me-2"
+          :disabled="!canGoFirst"
+          @click="onClick"
+        />
       </UTooltip>
     </template>
 
-    <template #last="{ onClick }">
+    <template #last="{ onClick, canGoLast }">
       <UTooltip text="Last page">
-        <UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
+        <UButton
+          icon="i-heroicons-arrow-uturn-right-20-solid"
+          color="primary"
+          :ui="{ rounded: 'rounded-full' }"
+          class="rtl:[&_span:last-child]:rotate-180 ms-2"
+          :disabled="!canGoLast"
+          @click="onClick"
+        />
       </UTooltip>
     </template>
   </UPagination>
diff --git a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue b/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
index 7a1a2fed..1d17ffed 100644
--- a/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
+++ b/docs/components/content/examples/PaginationExamplePrevNextSlots.vue
@@ -5,15 +5,29 @@ const items = ref(Array(55))
 
 <template>
   <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
-    <template #prev="{ onClick }">
+    <template #prev="{ onClick, canGoPrev }">
       <UTooltip text="Previous page">
-        <UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
+        <UButton
+          icon="i-heroicons-arrow-small-left-20-solid"
+          color="primary"
+          :ui="{ rounded: 'rounded-full' }"
+          class="rtl:[&_span:first-child]:rotate-180 me-2"
+          :disabled="!canGoPrev"
+          @click="onClick"
+        />
       </UTooltip>
     </template>
 
-    <template #next="{ onClick }">
+    <template #next="{ onClick, canGoNext }">
       <UTooltip text="Next page">
-        <UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
+        <UButton
+          icon="i-heroicons-arrow-small-right-20-solid"
+          color="primary"
+          :ui="{ rounded: 'rounded-full' }"
+          class="rtl:[&_span:last-child]:rotate-180 ms-2"
+          :disabled="!canGoNext"
+          @click="onClick"
+        />
       </UTooltip>
     </template>
   </UPagination>
diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue
index 9385fad0..be7a7674 100644
--- a/src/runtime/components/navigation/Pagination.vue
+++ b/src/runtime/components/navigation/Pagination.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
-    <slot name="first" :on-click="onClickFirst">
+    <slot name="first" :on-click="onClickFirst" :can-go-first="canGoFirstOrPrev">
       <UButton
         v-if="firstButton && showFirst"
         :size="size"
@@ -14,7 +14,7 @@
       />
     </slot>
 
-    <slot name="prev" :on-click="onClickPrev">
+    <slot name="prev" :on-click="onClickPrev" :can-go-prev="canGoFirstOrPrev">
       <UButton
         v-if="prevButton"
         :size="size"
@@ -41,7 +41,7 @@
       @click="() => onClickPage(page)"
     />
 
-    <slot name="next" :on-click="onClickNext">
+    <slot name="next" :on-click="onClickNext" :can-go-next="canGoLastOrNext">
       <UButton
         v-if="nextButton"
         :size="size"
@@ -55,7 +55,7 @@
       />
     </slot>
 
-    <slot name="last" :on-click="onClickLast">
+    <slot name="last" :on-click="onClickLast" :can-go-last="canGoLastOrNext">
       <UButton
         v-if="lastButton && showLast"
         :size="size"