@fy-/fws-vue 2.2.69 → 2.2.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui/DefaultPaging.vue +132 -23
- package/package.json +1 -1
|
@@ -157,9 +157,10 @@ onMounted(() => {
|
|
|
157
157
|
>
|
|
158
158
|
<div class="paging-container w-full">
|
|
159
159
|
<nav aria-label="Pagination" class="mb-1 flex justify-center">
|
|
160
|
-
|
|
160
|
+
<!-- Desktop pagination -->
|
|
161
|
+
<ul class="pagination-list hidden sm:inline-flex">
|
|
161
162
|
<!-- Previous Button -->
|
|
162
|
-
<li v-if="items.page_no >= 2" class="pagination-item
|
|
163
|
+
<li v-if="items.page_no >= 2" class="pagination-item">
|
|
163
164
|
<button
|
|
164
165
|
type="button"
|
|
165
166
|
class="pagination-button pagination-nav-button"
|
|
@@ -171,14 +172,14 @@ onMounted(() => {
|
|
|
171
172
|
<span class="sr-only">{{ $t("previous_paging") }}</span>
|
|
172
173
|
</button>
|
|
173
174
|
</li>
|
|
174
|
-
<li v-else class="pagination-item invisible
|
|
175
|
+
<li v-else class="pagination-item invisible">
|
|
175
176
|
<div class="pagination-placeholder">
|
|
176
177
|
<ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
177
178
|
</div>
|
|
178
179
|
</li>
|
|
179
180
|
|
|
180
181
|
<!-- First Page -->
|
|
181
|
-
<li v-if="items.page_no - 2 > 1" class="pagination-item
|
|
182
|
+
<li v-if="items.page_no - 2 > 1" class="pagination-item">
|
|
182
183
|
<router-link
|
|
183
184
|
class="pagination-link"
|
|
184
185
|
:to="page(1)"
|
|
@@ -189,9 +190,9 @@ onMounted(() => {
|
|
|
189
190
|
</li>
|
|
190
191
|
|
|
191
192
|
<!-- Ellipsis after first page -->
|
|
192
|
-
<li v-if="items.page_no - 2 > 2" class="pagination-item
|
|
193
|
+
<li v-if="items.page_no - 2 > 2" class="pagination-item" aria-hidden="true">
|
|
193
194
|
<div class="pagination-ellipsis">
|
|
194
|
-
<span
|
|
195
|
+
<span>•</span>
|
|
195
196
|
</div>
|
|
196
197
|
</li>
|
|
197
198
|
|
|
@@ -200,7 +201,7 @@ onMounted(() => {
|
|
|
200
201
|
<li
|
|
201
202
|
v-if="items.page_no - (3 - i) >= 1"
|
|
202
203
|
:key="`page-${items.page_no - (3 - i)}`"
|
|
203
|
-
class="pagination-item
|
|
204
|
+
class="pagination-item"
|
|
204
205
|
>
|
|
205
206
|
<router-link
|
|
206
207
|
class="pagination-link"
|
|
@@ -228,7 +229,7 @@ onMounted(() => {
|
|
|
228
229
|
<li
|
|
229
230
|
v-if="items.page_no + i <= items.page_max"
|
|
230
231
|
:key="`page-x-${items.page_no + i}`"
|
|
231
|
-
class="pagination-item
|
|
232
|
+
class="pagination-item"
|
|
232
233
|
>
|
|
233
234
|
<router-link
|
|
234
235
|
class="pagination-link"
|
|
@@ -241,14 +242,14 @@ onMounted(() => {
|
|
|
241
242
|
</template>
|
|
242
243
|
|
|
243
244
|
<!-- Ellipsis before last page -->
|
|
244
|
-
<li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item
|
|
245
|
+
<li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item" aria-hidden="true">
|
|
245
246
|
<div class="pagination-ellipsis">
|
|
246
|
-
<span
|
|
247
|
+
<span>•</span>
|
|
247
248
|
</div>
|
|
248
249
|
</li>
|
|
249
250
|
|
|
250
251
|
<!-- Last Page -->
|
|
251
|
-
<li v-if="items.page_no + 2 < items.page_max" class="pagination-item
|
|
252
|
+
<li v-if="items.page_no + 2 < items.page_max" class="pagination-item">
|
|
252
253
|
<router-link
|
|
253
254
|
class="pagination-link"
|
|
254
255
|
:to="page(items.page_max)"
|
|
@@ -259,7 +260,7 @@ onMounted(() => {
|
|
|
259
260
|
</li>
|
|
260
261
|
|
|
261
262
|
<!-- Next Button -->
|
|
262
|
-
<li v-if="items.page_no < items.page_max" class="pagination-item
|
|
263
|
+
<li v-if="items.page_no < items.page_max" class="pagination-item">
|
|
263
264
|
<button
|
|
264
265
|
type="button"
|
|
265
266
|
class="pagination-button pagination-nav-button"
|
|
@@ -271,20 +272,123 @@ onMounted(() => {
|
|
|
271
272
|
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
272
273
|
</button>
|
|
273
274
|
</li>
|
|
274
|
-
<li v-else class="pagination-item invisible
|
|
275
|
+
<li v-else class="pagination-item invisible">
|
|
275
276
|
<div class="pagination-placeholder">
|
|
276
277
|
<ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
277
278
|
</div>
|
|
278
279
|
</li>
|
|
279
280
|
</ul>
|
|
280
|
-
</nav>
|
|
281
281
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
282
|
+
<!-- Mobile pagination - Compact version -->
|
|
283
|
+
<ul class="pagination-list sm:hidden inline-flex">
|
|
284
|
+
<!-- Previous Button -->
|
|
285
|
+
<li v-if="items.page_no >= 2" class="pagination-item">
|
|
286
|
+
<button
|
|
287
|
+
type="button"
|
|
288
|
+
class="pagination-button pagination-nav-button"
|
|
289
|
+
:aria-label="$t('previous_paging')"
|
|
290
|
+
title="Previous page"
|
|
291
|
+
@click="prev()"
|
|
292
|
+
>
|
|
293
|
+
<ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
|
|
294
|
+
<span class="sr-only">{{ $t("previous_paging") }}</span>
|
|
295
|
+
</button>
|
|
296
|
+
</li>
|
|
297
|
+
<li v-else class="pagination-item invisible">
|
|
298
|
+
<div class="pagination-placeholder">
|
|
299
|
+
<ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
300
|
+
</div>
|
|
301
|
+
</li>
|
|
302
|
+
|
|
303
|
+
<!-- First Page (only if not near start) -->
|
|
304
|
+
<li v-if="items.page_no > 2" class="pagination-item">
|
|
305
|
+
<router-link
|
|
306
|
+
class="pagination-link"
|
|
307
|
+
:to="page(1)"
|
|
308
|
+
aria-label="Go to page 1"
|
|
309
|
+
>
|
|
310
|
+
1
|
|
311
|
+
</router-link>
|
|
312
|
+
</li>
|
|
313
|
+
|
|
314
|
+
<!-- Simple Ellipsis (only if not near start) -->
|
|
315
|
+
<li v-if="items.page_no > 3" class="pagination-item" aria-hidden="true">
|
|
316
|
+
<div class="pagination-ellipsis">
|
|
317
|
+
<span>•</span>
|
|
318
|
+
</div>
|
|
319
|
+
</li>
|
|
320
|
+
|
|
321
|
+
<!-- Page before current (only show if not first page) -->
|
|
322
|
+
<li v-if="items.page_no > 1 && items.page_no <= 3" class="pagination-item">
|
|
323
|
+
<router-link
|
|
324
|
+
class="pagination-link"
|
|
325
|
+
:to="page(items.page_no - 1)"
|
|
326
|
+
:aria-label="`Go to page ${items.page_no - 1}`"
|
|
327
|
+
>
|
|
328
|
+
{{ items.page_no - 1 }}
|
|
329
|
+
</router-link>
|
|
330
|
+
</li>
|
|
331
|
+
|
|
332
|
+
<!-- Current Page -->
|
|
333
|
+
<li class="pagination-item">
|
|
334
|
+
<div
|
|
335
|
+
aria-current="page"
|
|
336
|
+
class="pagination-current"
|
|
337
|
+
:aria-label="`Current page, Page ${items.page_no}`"
|
|
338
|
+
>
|
|
339
|
+
{{ items.page_no }}
|
|
340
|
+
</div>
|
|
341
|
+
</li>
|
|
342
|
+
|
|
343
|
+
<!-- Page after current (only if not last page and not near end) -->
|
|
344
|
+
<li v-if="items.page_no < items.page_max && (items.page_max - items.page_no) <= 2" class="pagination-item">
|
|
345
|
+
<router-link
|
|
346
|
+
class="pagination-link"
|
|
347
|
+
:to="page(items.page_no + 1)"
|
|
348
|
+
:aria-label="`Go to page ${items.page_no + 1}`"
|
|
349
|
+
>
|
|
350
|
+
{{ items.page_no + 1 }}
|
|
351
|
+
</router-link>
|
|
352
|
+
</li>
|
|
353
|
+
|
|
354
|
+
<!-- Simple Ellipsis (only if far from end) -->
|
|
355
|
+
<li v-if="items.page_max - items.page_no > 3" class="pagination-item" aria-hidden="true">
|
|
356
|
+
<div class="pagination-ellipsis">
|
|
357
|
+
<span>•</span>
|
|
358
|
+
</div>
|
|
359
|
+
</li>
|
|
360
|
+
|
|
361
|
+
<!-- Last Page (only if not near end) -->
|
|
362
|
+
<li v-if="items.page_max - items.page_no > 2" class="pagination-item">
|
|
363
|
+
<router-link
|
|
364
|
+
class="pagination-link"
|
|
365
|
+
:to="page(items.page_max)"
|
|
366
|
+
:aria-label="`Go to page ${items.page_max}`"
|
|
367
|
+
>
|
|
368
|
+
{{ items.page_max }}
|
|
369
|
+
</router-link>
|
|
370
|
+
</li>
|
|
371
|
+
|
|
372
|
+
<!-- Next Button -->
|
|
373
|
+
<li v-if="items.page_no < items.page_max" class="pagination-item">
|
|
374
|
+
<button
|
|
375
|
+
type="button"
|
|
376
|
+
class="pagination-button pagination-nav-button"
|
|
377
|
+
:aria-label="$t('next_paging')"
|
|
378
|
+
title="Next page"
|
|
379
|
+
@click="next()"
|
|
380
|
+
>
|
|
381
|
+
<ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
|
|
382
|
+
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
383
|
+
</button>
|
|
384
|
+
</li>
|
|
385
|
+
<li v-else class="pagination-item invisible">
|
|
386
|
+
<div class="pagination-placeholder">
|
|
387
|
+
<ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
388
|
+
</div>
|
|
389
|
+
</li>
|
|
390
|
+
</ul>
|
|
391
|
+
</nav>
|
|
288
392
|
|
|
289
393
|
<!-- Results summary - Now defaults to not showing -->
|
|
290
394
|
<p
|
|
@@ -354,14 +458,19 @@ onMounted(() => {
|
|
|
354
458
|
|
|
355
459
|
@media (max-width: 640px) {
|
|
356
460
|
.pagination-list {
|
|
357
|
-
@apply gap-
|
|
461
|
+
@apply gap-0.5;
|
|
358
462
|
}
|
|
359
463
|
|
|
360
464
|
.pagination-link,
|
|
361
465
|
.pagination-button,
|
|
362
466
|
.pagination-current {
|
|
363
|
-
min-width: 1.
|
|
364
|
-
height: 1.
|
|
467
|
+
min-width: 1.5rem;
|
|
468
|
+
height: 1.5rem;
|
|
469
|
+
@apply px-1 py-0.5 text-2xs;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.pagination-nav-button {
|
|
473
|
+
@apply p-1;
|
|
365
474
|
}
|
|
366
475
|
}
|
|
367
476
|
</style>
|