[UPagination] Add canGoXXX into slots props on buttons

[offich]

For what version of Nuxt UI are you suggesting this?

v2.x

Description

Description

I would love to have a way to know that custom buttons passed to button slots can go to the previous, next, first or next page. Currently I know it by defining computed properties that calculate based on current page, per, and total pages like below

<script setup lang="ts">
// defineProps defines page, per, and allCount props above...

// I define below by myself
const canGoFirstOrPrev = computed(() => props.page > 1)
const canGoLastOrNext = computed(() => props.page < Math.ceil(props.allCount / props.per))
</script>

<template>
  <UPagination
    v-model="page"
    size="2xs"
    :page-count="2"
    :total="10"
  >
    <template #prev="{ onClick }">
      <UButton
        :disabled="!canGoFirstOrPrev"
        @click="onClick"
      />
    </template>

    <template #next="{ onClick }">
      <UButton
        :disabled="!canGoLastOrNext"
        @click="onClick"
      />
    </template>
  </UPagination>
</template>

Then, I found UPagination itself already has them in it. I would like to reuse them in my component to avoid redundant declaration by letting them exposed through slot props.

ui/src/runtime/components/navigation/Pagination.vue

Lines 252 to 253 in 912ec15

	const canGoFirstOrPrev = computed(() => currentPage.value > 1)
	const canGoLastOrNext = computed(() => currentPage.value < pages.value.length)

I've attached a sample below of how I would like to use the computed properties.

diff --git a/src/components/ExamplePagination.vue b/src/components/ExamplePagination.vue
index 43072bf..b48ca9f 100644
--- a/src/components/ExamplePagination.vue
+++ b/src/components/ExamplePagination.vue
@@ -25,30 +25,30 @@ 
   >
-    <template #first="{ onClick }">
+    <template #first="{ onClick, canGoFirst }">
       <UButton
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoFirst"
         @click="onClick"
       />
     </template>

-    <template #prev="{ onClick }">
+    <template #prev="{ onClick, canGoPrev }">
       <UButton
-        :disabled="!canGoFirstOrPrev"
+        :disabled="!canGoPrev"
         @click="onClick"
       />
     </template>

-    <template #next="{ onClick }">
+    <template #next="{ onClick, canGoNext }">
       <UButton
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoNext"
         @click="onClick"
       />
     </template>

-    <template #last="{ onClick }">
+    <template #last="{ onClick, canGoLast }">
       <UButton
-        :disabled="!canGoLastOrNext"
+        :disabled="!canGoLast"
         @click="onClick"
       />
     </template>

Additional context

No response