feat(Pagination): allow using pagination buttons as links (#114)

playground/pages/pagination.vue

@@ -3,5 +3,15 @@ const page = ref(5)
 </script>
 
 <template>
-  <UPagination v-model:page="page" :total="100" :sibling-count="1" show-edges />
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <p>With buttons (default)</p>
+      <UPagination v-model:page="page" :total="100" :sibling-count="1" show-edges />
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <p>With links</p>
+      <UPagination v-model:page="page" :total="100" :to="page => ({ query: { page } })" :sibling-count="1" show-edges />
+    </div>
+  </div>
 </template>

src/runtime/components/Pagination.vue

@@ -2,6 +2,7 @@
 import { tv } from 'tailwind-variants'
 import type { PaginationRootProps, PaginationRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
+import type { RouteLocationRaw } from '#vue-router'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/pagination'
 import type { ButtonProps } from '#ui/types'
@@ -23,6 +24,7 @@ export interface PaginationProps extends Omit<PaginationRootProps, 'asChild'> {
   showControls?: boolean
   size?: ButtonProps['size']
   class?: any
+  to?: (page: number) => RouteLocationRaw
   ui?: Partial<typeof pagination.slots>
 }
 
@@ -76,12 +78,12 @@ const ui = computed(() => tv({ extend: pagination, slots: props.ui })())
     <PaginationList v-slot="{ items }" :class="ui.list()">
       <PaginationFirst v-if="showControls || !!slots.first" as-child>
         <slot name="first">
-          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon || appConfig.ui.icons.chevronDoubleLeft" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon || appConfig.ui.icons.chevronDoubleLeft" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
       <PaginationPrev v-if="showControls || !!slots.prev" as-child>
         <slot name="prev">
-          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon || appConfig.ui.icons.chevronLeft" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon || appConfig.ui.icons.chevronLeft" :to="page > 1 ? to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
@@ -94,6 +96,7 @@ const ui = computed(() => tv({ extend: pagination, slots: props.ui })())
               :size="size"
               :label="String(item.value)"
               :ui="{ label: ui.label() }"
+              :to="to?.(item.value)"
               square
             />
           </slot>
@@ -108,12 +111,12 @@ const ui = computed(() => tv({ extend: pagination, slots: props.ui })())
 
       <PaginationNext v-if="showControls || !!slots.next" as-child>
         <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon || appConfig.ui.icons.chevronRight" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon || appConfig.ui.icons.chevronRight" :to="page < pageCount ? to?.(pageCount) : undefined" />
         </slot>
       </PaginationNext>
       <PaginationLast v-if="showControls || !!slots.last" as-child>
         <slot name="last">
-          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon || appConfig.ui.icons.chevronDoubleRight" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon || appConfig.ui.icons.chevronDoubleRight" :to=" to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>