arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Neil Richter
2024-05-21 17:51:52 +02:00
committed by GitHub
parent e8dee1efe1
commit 5c5676edf9
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
playground/pages/pagination.vue
View File

@@ -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>

11
src/runtime/components/Pagination.vue
View File

@@ -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>