diff --git a/docs/components/content/examples/PaginationExampleTo.vue b/docs/components/content/examples/PaginationExampleTo.vue new file mode 100644 index 00000000..afa35a8a --- /dev/null +++ b/docs/components/content/examples/PaginationExampleTo.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/content/2.components/pagination.md b/docs/content/2.components/pagination.md index f2890e8a..4860f734 100644 --- a/docs/content/2.components/pagination.md +++ b/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. diff --git a/src/runtime/components/navigation/Pagination.vue b/src/runtime/components/navigation/Pagination.vue index 0d3f202f..736e7eaa 100644 --- a/src/runtime/components/navigation/Pagination.vue +++ b/src/runtime/components/navigation/Pagination.vue @@ -29,6 +29,7 @@ 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