-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpagination.html
More file actions
134 lines (127 loc) · 5.98 KB
/
Copy pathpagination.html
File metadata and controls
134 lines (127 loc) · 5.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<div
class="flex flex-col md:flex-row items-center justify-between gap-3 px-4 py-3 bg-white dark:bg-slate-800 border-t border-gray-200/80 dark:border-slate-700/80 rounded-b-[12px] text-xs text-gray-600 dark:text-slate-400 select-none shadow-2xs"
>
<!-- Left side: Items count & Page Size Selector -->
<div class="flex flex-wrap items-center justify-center md:justify-start gap-3 w-full md:w-auto">
@if (showItemRange()) {
<div class="text-gray-600 dark:text-slate-300">
Mostrando
<span class="font-semibold text-gray-900 dark:text-slate-100">
{{ startItemFormatted() }}
</span>
a
<span class="font-semibold text-gray-900 dark:text-slate-100">{{ endItemFormatted() }}</span>
de
<span class="font-semibold text-gray-900 dark:text-slate-100">
{{ totalItemsFormatted() }}
</span>
registros
</div>
} @if (showPageSize()) {
<div class="flex items-center gap-1.5 text-gray-500 dark:text-slate-400">
<span class="hidden sm:inline">Exibir</span>
<div class="relative">
<select
[value]="pageSize()"
(change)="onPageSizeChange($event)"
class="appearance-none pl-2.5 pr-7 py-1 bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-semibold text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-[#4F8A6B]/30 hover:border-gray-300 dark:hover:border-slate-500 transition-all cursor-pointer"
title="Itens por página"
>
@for (opt of optionsSizes(); track opt) {
<option [value]="opt" [selected]="opt === pageSize()">{{ opt }} por pág.</option>
}
</select>
<div
class="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400 dark:text-slate-400"
>
<app-icon name="chevron-down" size="w-3 h-3" />
</div>
</div>
</div>
}
</div>
<!-- Right side: Page Navigation Controls -->
<div class="flex items-center justify-center gap-1 w-full md:w-auto">
<!-- First Page Button -->
<button
type="button"
[disabled]="pagination().current_page <= 1"
(click)="goToPage(1)"
class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
title="Primeira Página"
>
<app-icon name="chevrons-left" size="w-4 h-4" />
</button>
<!-- Previous Page Button -->
<button
type="button"
[disabled]="pagination().current_page <= 1"
(click)="goToPage(pagination().from || 0)"
class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
title="Página Anterior"
>
<app-icon name="chevron-left" size="w-4 h-4" />
</button>
<!-- Mobile current page badge -->
<div
class="sm:hidden px-3 py-1 bg-[#EAF4EE] dark:bg-slate-700 text-[#4F8A6B] dark:text-[#5BAE6A] font-semibold rounded-lg text-xs"
>
{{ pagination().current_page }} / {{ pagination().total }}
</div>
<!-- Desktop Page Number Buttons -->
<div class="hidden sm:flex items-center gap-1 mx-1">
@for (item of visiblePages(); track $index) { @if (item.type === 'page') {
<button
type="button"
(click)="goToPage(item.page!)"
[class]="item.page === pagination().current_page
? 'bg-[#4F8A6B] text-white font-bold border-[#4F8A6B] shadow-xs'
: 'border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-700 dark:text-slate-200 font-medium'"
class="min-w-[32px] h-[32px] px-2 rounded-lg flex items-center justify-center text-xs transition-all cursor-pointer"
>
{{ item.page }}
</button>
} @else {
<span class="px-1 text-gray-400 dark:text-slate-500 font-semibold select-none">...</span>
} }
</div>
<!-- Next Page Button -->
<button
type="button"
[disabled]="pagination().current_page >= pagination().last_page"
(click)="goToPage(pagination().current_page + 1)"
class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
title="Próxima Página"
>
<app-icon name="chevron-right" size="w-4 h-4" />
</button>
<!-- Last Page Button -->
<button
type="button"
[disabled]="pagination().current_page >= pagination().last_page"
(click)="goToPage(pagination().last_page)"
class="p-1.5 rounded-lg border border-gray-200 dark:border-slate-700 hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 disabled:opacity-35 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all"
title="Última Página"
>
<app-icon name="chevrons-right" size="w-4 h-4" />
</button>
<!-- Quick Jump to Page (Optional Input) -->
@if (pagination().last_page > 5) {
<div
class="hidden lg:flex items-center gap-1.5 ml-2 pl-2 border-l border-gray-200 dark:border-slate-700"
>
<span class="text-[11px] text-gray-400 dark:text-slate-500">Ir p/:</span>
<input
type="number"
min="1"
[max]="pagination().last_page"
[value]="pagination().current_page"
(keydown.enter)="onDirectJump($event)"
(blur)="onDirectJump($event)"
class="w-11 px-1.5 py-1 text-center bg-gray-50 dark:bg-slate-700/80 border border-gray-200 dark:border-slate-600 rounded-lg text-xs font-medium text-gray-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-[#4F8A6B]"
title="Pressione Enter para ir até a página"
/>
</div>
}
</div>
</div>