feat(Pagination): allow using links for pagination buttons (#1682)

docs/components/content/examples/PaginationExampleTo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const page = ref(1)
+const items = ref(Array(50))
+</script>
+
+<template>
+  <UPagination
+    v-model="page"
+    :page-count="5"
+    :total="items.length"
+    :to="(page: number) => ({
+      query: { page },
+      // Hash is specified here to prevent the page from scrolling to the top
+      hash: '#links',
+    })"
+  />
+</template>

docs/content/2.components/pagination.md

@@ -46,6 +46,12 @@ props:
 ---
 ::
 
+### Links
+
+Use the `to` property to transform buttons into links. Note that it must be a function that receives the page number and returns a route destination.
+
+:component-example{component="pagination-example-to"}
+
 ### Disabled
 
 Use the `disabled` prop to disable all the buttons.

src/runtime/components/navigation/Pagination.vue

@@ -29,6 +29,7 @@
     <UButton
       v-for="(page, index) of displayedPages"
       :key="`${page}-${index}`"
+      :to="typeof page === 'number' ? to?.(page) : null"
       :size="size"
       :disabled="disabled"
       :label="`${page}`"
@@ -69,6 +70,7 @@
 <script lang="ts">
 import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import type { RouteLocationRaw } from '#vue-router'
 import UButton from '../elements/Button.vue'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
@@ -117,6 +119,10 @@ export default defineComponent({
         return Object.keys(buttonConfig.size).includes(value)
       }
     },
+    to: {
+      type: Function as PropType<(page: number) => RouteLocationRaw>,
+      default: null
+    },
     activeButton: {
       type: Object as PropType<Button>,
       default: () => config.default.activeButton as Button