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

feat(Pagination): improve slot props (#2522)

Browse Source
This commit is contained in:
offich
2024-11-06 00:06:49 +09:00
committed by GitHub
parent 6844f7bbd9
commit c71fdc8795
3 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/content/examples/PaginationExampleFirstLastSlots.vue
View File

@@ -5,15 +5,29 @@ const items = ref(Array(55))
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #first="{ onClick }">
<template #first="{ onClick, canGoFirst }">
<UTooltip text="First page">
<UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-uturn-left"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:first-child]:rotate-180 me-2"
:disabled="!canGoFirst"
@click="onClick"
/>
</UTooltip>
</template>
<template #last="{ onClick }">
<template #last="{ onClick, canGoLast }">
<UTooltip text="Last page">
<UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-uturn-right-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:last-child]:rotate-180 ms-2"
:disabled="!canGoLast"
@click="onClick"
/>
</UTooltip>
</template>
</UPagination>

22
docs/components/content/examples/PaginationExamplePrevNextSlots.vue
View File

@@ -5,15 +5,29 @@ const items = ref(Array(55))
<template>
<UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
<template #prev="{ onClick }">
<template #prev="{ onClick, canGoPrev }">
<UTooltip text="Previous page">
<UButton icon="i-heroicons-arrow-small-left-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-small-left-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:first-child]:rotate-180 me-2"
:disabled="!canGoPrev"
@click="onClick"
/>
</UTooltip>
</template>
<template #next="{ onClick }">
<template #next="{ onClick, canGoNext }">
<UTooltip text="Next page">
<UButton icon="i-heroicons-arrow-small-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
<UButton
icon="i-heroicons-arrow-small-right-20-solid"
color="primary"
:ui="{ rounded: 'rounded-full' }"
class="rtl:[&_span:last-child]:rotate-180 ms-2"
:disabled="!canGoNext"
@click="onClick"
/>
</UTooltip>
</template>
</UPagination>

8
src/runtime/components/navigation/Pagination.vue
View File

@@ -1,6 +1,6 @@
<template>
<div :class="ui.wrapper" v-bind="attrs">
<slot name="first" :on-click="onClickFirst">
<slot name="first" :on-click="onClickFirst" :can-go-first="canGoFirstOrPrev">
<UButton
v-if="firstButton && showFirst"
:size="size"
@@ -14,7 +14,7 @@
/>
</slot>
<slot name="prev" :on-click="onClickPrev">
<slot name="prev" :on-click="onClickPrev" :can-go-prev="canGoFirstOrPrev">
<UButton
v-if="prevButton"
:size="size"
@@ -41,7 +41,7 @@
@click="() => onClickPage(page)"
/>
<slot name="next" :on-click="onClickNext">
<slot name="next" :on-click="onClickNext" :can-go-next="canGoLastOrNext">
<UButton
v-if="nextButton"
:size="size"
@@ -55,7 +55,7 @@
/>
</slot>
<slot name="last" :on-click="onClickLast">
<slot name="last" :on-click="onClickLast" :can-go-last="canGoLastOrNext">
<UButton
v-if="lastButton && showLast"
:size="size"