Skip to content

Commit 8b5a96e

Browse files
SqrczSqrcz
authored
fix: behavior of first and last buttons in FwbPagination component
Fix: Improved first last buttons behavior in pagination component
2 parents 197aeb5 + a914a13 commit 8b5a96e

File tree

5 files changed

+236
-0
lines changed

5 files changed

+236
-0
lines changed

‎docs/components/pagination.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import FwbPaginationExampleIcons from './pagination/examples/FwbPaginationExampl
44
import FwbPaginationExampleNavigation from './pagination/examples/FwbPaginationExampleNavigation.vue';
55
import FwbPaginationExampleNavigationIcons from './pagination/examples/FwbPaginationExampleNavigationIcons.vue';
66
import FwbPaginationExampleSlots from './pagination/examples/FwbPaginationExampleSlots.vue';
7+
import FwbPaginationExampleSlotsAdvanced from './pagination/examples/FwbPaginationExampleSlotsAdvanced.vue';
78
import FwbPaginationExampleTable from './pagination/examples/FwbPaginationExampleTable.vue';
89
import FwbPaginationExampleCustomLength from './pagination/examples/FwbPaginationExampleCustomLength.vue';
910
import FwbPaginationExampleCustomLabels from './pagination/examples/FwbPaginationExampleCustomLabels.vue';
11+
import FwbPaginationExampleFirstLast from './pagination/examples/FwbPaginationExampleFirstLast.vue';
1012
</script>
1113

1214
# Vue Pagination - Flowbite
@@ -145,6 +147,40 @@ const currentPage = ref(1)
145147
</script>
146148
```
147149

150+
## First and last
151+
152+
<fwb-pagination-example-first-last />
153+
```vue
154+
<template>
155+
<fwb-pagination
156+
v-model="currentPage"
157+
:total-pages="100"
158+
enable-first-last
159+
/>
160+
<fwb-pagination
161+
v-model="currentPage"
162+
:total-pages="100"
163+
large
164+
enable-first-last
165+
/>
166+
<fwb-pagination
167+
v-model="currentPage"
168+
:total-pages="100"
169+
large
170+
enable-first-last
171+
show-icons
172+
/>
173+
</template>
174+
175+
<script setup>
176+
import { FwbPagination } from 'flowbite-vue'
177+
import { ref } from 'vue'
178+
179+
const currentPage = ref(1)
180+
</script>
181+
```
182+
183+
148184
## Table data pagination
149185
You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.
150186
To use that layout you have to pass required props:
@@ -233,6 +269,84 @@ const currentPage = ref(1)
233269
</script>
234270
```
235271

272+
## Advanced slots example
273+
274+
<fwb-pagination-example-slots-advanced />
275+
276+
```vue
277+
<template>
278+
<fwb-pagination
279+
v-model="currentPage"
280+
:total-items="100"
281+
enable-first-last
282+
>
283+
<template #first-button="{ disabled, setPage }">
284+
<button
285+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
286+
:disabled="disabled"
287+
@click="setPage()"
288+
>
289+
First page
290+
</button>
291+
</template>
292+
293+
<template #last-button="{ disabled, setPage, page }">
294+
<button
295+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
296+
:disabled="disabled"
297+
@click="setPage()"
298+
>
299+
Last page ({{ page }})
300+
</button>
301+
</template>
302+
303+
<template #prev-button="{ disabled, decreasePage }">
304+
<button
305+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
306+
:disabled="disabled"
307+
@click="decreasePage()"
308+
>
309+
Prev page
310+
</button>
311+
</template>
312+
313+
<template #next-button="{ disabled, increasePage }">
314+
<button
315+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
316+
:disabled="disabled"
317+
@click="increasePage()"
318+
>
319+
Next page
320+
</button>
321+
</template>
322+
323+
<template #page-button="{ disabled, page, setPage }">
324+
<button
325+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
326+
:class="{
327+
'bg-purple-200 hover:bg-purple-300': !disabled,
328+
'bg-purple-300': disabled
329+
}"
330+
:disabled="disabled"
331+
@click="setPage(page)"
332+
>
333+
{{ page }}
334+
</button>
335+
</template>
336+
</fwb-pagination>
337+
Current page: {{ currentPage }}
338+
</template>
339+
340+
<script lang="ts" setup>
341+
import { ref } from 'vue'
342+
343+
import { FwbPagination } from '../../../../src/index'
344+
345+
const currentPage = ref<number>(1)
346+
</script>
347+
348+
```
349+
236350
## API
237351

238352
### Props

‎docs/components/pagination/examples/FwbPaginationExampleFirstLast.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="vp-raw flex flex-col items-center gap-4">
3+
<fwb-pagination
4+
v-model="currentPage"
5+
:total-pages="100"
6+
enable-first-last
7+
/>
8+
<fwb-pagination
9+
v-model="currentPage"
10+
:total-pages="100"
11+
large
12+
enable-first-last
13+
/>
14+
15+
<fwb-pagination
16+
v-model="currentPage"
17+
:total-pages="100"
18+
large
19+
enable-first-last
20+
show-icons
21+
/>
22+
</div>
23+
</template>
24+
25+
<script lang="ts" setup>
26+
import { ref } from 'vue'
27+
28+
import { FwbPagination } from '../../../../src/index'
29+
30+
const currentPage = ref<number>(1)
31+
</script>

‎docs/components/pagination/examples/FwbPaginationExampleSlots.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,20 @@
44
v-model="currentPage"
55
:total-items="100"
66
hide-labels
7+
enable-first-last
78
>
9+
<template #first-icon>
10+
⏪
11+
</template>
812
<template #prev-icon>
913
⬅️
1014
</template>
1115
<template #next-icon>
1216
➡️
1317
</template>
18+
<template #last-icon>
19+
⏩
20+
</template>
1421
<template #page-button="{ page, setPage }">
1522
<button
1623
class="ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"

‎docs/components/pagination/examples/FwbPaginationExampleSlotsAdvanced.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="vp-raw flex flex-col items-center mb-2">
3+
<fwb-pagination
4+
v-model="currentPage"
5+
:total-items="100"
6+
enable-first-last
7+
>
8+
<template #first-button="{ disabled, setPage }">
9+
<button
10+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
11+
:disabled="disabled"
12+
@click="setPage()"
13+
>
14+
First page
15+
</button>
16+
</template>
17+
18+
<template #last-button="{disabled, setPage, page }">
19+
<button
20+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
21+
:disabled="disabled"
22+
@click="setPage()"
23+
>
24+
Last page ({{ page }})
25+
</button>
26+
</template>
27+
28+
<template #prev-button="{disabled, decreasePage }">
29+
<button
30+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
31+
:disabled="disabled"
32+
@click="decreasePage()"
33+
>
34+
Prev page
35+
</button>
36+
</template>
37+
38+
<template #next-button="{disabled, increasePage }">
39+
<button
40+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 bg-purple-200 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:bg-purple-300 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
41+
:disabled="disabled"
42+
@click="increasePage()"
43+
>
44+
Next page
45+
</button>
46+
</template>
47+
48+
<template #page-button="{ disabled, page, setPage }">
49+
<button
50+
class="disabled:cursor-not-allowed ml-0 flex h-8 items-center justify-center border border-purple-300 px-3 leading-tight text-gray-500 first:rounded-l-lg last:rounded-r-lg hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
51+
:class="{
52+
'bg-purple-200 hover:bg-purple-300': !disabled,
53+
'bg-purple-300': disabled
54+
}"
55+
:disabled="disabled"
56+
@click="setPage(page)"
57+
>
58+
{{ page }}
59+
</button>
60+
</template>
61+
</fwb-pagination>
62+
Current page: {{ currentPage }}
63+
</div>
64+
</template>
65+
66+
<script lang="ts" setup>
67+
import { ref } from 'vue'
68+
69+
import { FwbPagination } from '../../../../src/index'
70+
71+
const currentPage = ref<number>(1)
72+
</script>

‎src/components/FwbPagination/FwbPagination.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,18 @@
2121
<slot
2222
v-if="enableFirstLast"
2323
name="first-button"
24+
:set-page="goToFirstPage"
25+
:disabled="isFirstPage"
2426
>
2527
<button
28+
v-if="!$slots['first-button']"
2629
:disabled="isFirstPage"
2730
:class="getNavigationButtonClasses(1)"
2831
@click="goToFirstPage"
2932
>
3033
<slot name="first-icon">
3134
<svg
35+
v-if="showIcons || $slots['first-icon']"
3236
stroke="currentColor"
3337
fill="none"
3438
stroke-width="0"
@@ -60,6 +64,7 @@
6064
:decrease-page="decreasePage"
6165
>
6266
<button
67+
v-if="!$slots['prev-button']"
6368
:disabled="isDecreaseDisabled"
6469
:class="getNavigationButtonClasses(modelValue - 1)"
6570
@click="decreasePage"
@@ -98,6 +103,7 @@
98103
:disabled="isSetPageDisabled(index)"
99104
>
100105
<button
106+
v-if="!$slots['page-button']"
101107
:disabled="isSetPageDisabled(index)"
102108
:class="getPageButtonClasses(index === modelValue)"
103109
@click="setPage(index)"
@@ -111,6 +117,7 @@
111117
:increase-page="increasePage"
112118
>
113119
<button
120+
v-if="!$slots['next-button']"
114121
:disabled="isIncreaseDisabled"
115122
:class="getNavigationButtonClasses(modelValue + 1)"
116123
@click="increasePage"
@@ -144,8 +151,12 @@
144151
<slot
145152
v-if="enableFirstLast"
146153
name="last-button"
154+
:page="computedTotalPages"
155+
:set-page="goToLastPage"
156+
:disabled="isLastPage"
147157
>
148158
<button
159+
v-if="!$slots['last-button']"
149160
:disabled="isLastPage"
150161
:class="getNavigationButtonClasses(computedTotalPages)"
151162
@click="goToLastPage"
@@ -155,6 +166,7 @@
155166
</template>
156167
<slot name="last-icon">
157168
<svg
169+
v-if="showIcons || $slots['last-icon']"
158170
stroke="currentColor"
159171
fill="none"
160172
stroke-width="0"

0 commit comments

Comments
 (0)