@fy-/fws-vue 2.2.74 → 2.2.76
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 -250
- package/package.json +1 -1
|
@@ -18,7 +18,7 @@ const props = withDefaults(
|
|
|
18
18
|
showLegend?: boolean
|
|
19
19
|
}>(),
|
|
20
20
|
{
|
|
21
|
-
showLegend:
|
|
21
|
+
showLegend: true,
|
|
22
22
|
hash: '',
|
|
23
23
|
},
|
|
24
24
|
)
|
|
@@ -156,245 +156,137 @@ onMounted(() => {
|
|
|
156
156
|
class="flex flex-col items-center justify-center"
|
|
157
157
|
>
|
|
158
158
|
<div class="paging-container w-full">
|
|
159
|
-
<nav aria-label="Pagination" class="mb-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
<
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
159
|
+
<nav aria-label="Pagination" class="mb-2 flex justify-center">
|
|
160
|
+
<ul class="pagination-list">
|
|
161
|
+
<!-- Previous Button -->
|
|
162
|
+
<li v-if="items.page_no >= 2" class="pagination-item md:block">
|
|
163
|
+
<button
|
|
164
|
+
type="button"
|
|
165
|
+
class="pagination-button pagination-nav-button"
|
|
166
|
+
:aria-label="$t('previous_paging')"
|
|
167
|
+
title="Previous page"
|
|
168
|
+
@click="prev()"
|
|
169
|
+
>
|
|
170
|
+
<ChevronLeftIcon class="w-5 h-5" aria-hidden="true" />
|
|
171
|
+
<span class="sr-only">{{ $t("previous_paging") }}</span>
|
|
172
|
+
</button>
|
|
173
|
+
</li>
|
|
174
|
+
<li v-else class="pagination-item invisible md:hidden">
|
|
175
|
+
<div class="pagination-placeholder">
|
|
176
|
+
<ChevronLeftIcon class="w-5 h-5 invisible" aria-hidden="true" />
|
|
177
|
+
</div>
|
|
178
|
+
</li>
|
|
179
|
+
|
|
180
|
+
<!-- First Page -->
|
|
181
|
+
<li v-if="items.page_no - 2 > 1" class="pagination-item hidden md:block">
|
|
182
|
+
<router-link
|
|
183
|
+
class="pagination-link"
|
|
184
|
+
:to="page(1)"
|
|
185
|
+
aria-label="Go to page 1"
|
|
186
|
+
>
|
|
187
|
+
1
|
|
188
|
+
</router-link>
|
|
189
|
+
</li>
|
|
190
|
+
|
|
191
|
+
<!-- Ellipsis after first page -->
|
|
192
|
+
<li v-if="items.page_no - 2 > 2" class="pagination-item hidden md:block" aria-hidden="true">
|
|
193
|
+
<div class="pagination-ellipsis">
|
|
194
|
+
<span>•••</span>
|
|
195
|
+
</div>
|
|
196
|
+
</li>
|
|
197
|
+
|
|
198
|
+
<!-- Pages before current page -->
|
|
199
|
+
<template v-for="i in 2">
|
|
200
|
+
<li
|
|
201
|
+
v-if="items.page_no - (3 - i) >= 1"
|
|
202
|
+
:key="`page-${items.page_no - (3 - i)}`"
|
|
203
|
+
class="pagination-item hidden sm:block"
|
|
204
|
+
>
|
|
184
205
|
<router-link
|
|
185
206
|
class="pagination-link"
|
|
186
|
-
:to="page(
|
|
187
|
-
aria-label="Go to page
|
|
207
|
+
:to="page(items.page_no - (3 - i))"
|
|
208
|
+
:aria-label="`Go to page ${items.page_no - (3 - i)}`"
|
|
188
209
|
>
|
|
189
|
-
|
|
210
|
+
{{ items.page_no - (3 - i) }}
|
|
190
211
|
</router-link>
|
|
191
212
|
</li>
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
{{ items.page_no - (3 - i) }}
|
|
213
|
-
</router-link>
|
|
214
|
-
</li>
|
|
215
|
-
</template>
|
|
216
|
-
|
|
217
|
-
<!-- Current Page -->
|
|
218
|
-
<li class="pagination-item">
|
|
219
|
-
<div
|
|
220
|
-
aria-current="page"
|
|
221
|
-
class="pagination-current"
|
|
222
|
-
:aria-label="`Current page, Page ${items.page_no}`"
|
|
223
|
-
>
|
|
224
|
-
{{ items.page_no }}
|
|
225
|
-
</div>
|
|
226
|
-
</li>
|
|
227
|
-
|
|
228
|
-
<!-- Pages after current page -->
|
|
229
|
-
<template v-for="i in 2">
|
|
230
|
-
<li
|
|
231
|
-
v-if="items.page_no + i <= items.page_max"
|
|
232
|
-
:key="`page-x-${items.page_no + i}`"
|
|
233
|
-
class="pagination-item"
|
|
234
|
-
>
|
|
235
|
-
<router-link
|
|
236
|
-
class="pagination-link"
|
|
237
|
-
:to="page(items.page_no + i)"
|
|
238
|
-
:aria-label="`Go to page ${items.page_no + i}`"
|
|
239
|
-
>
|
|
240
|
-
{{ items.page_no + i }}
|
|
241
|
-
</router-link>
|
|
242
|
-
</li>
|
|
243
|
-
</template>
|
|
244
|
-
|
|
245
|
-
<!-- Ellipsis before last page -->
|
|
246
|
-
<li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item" aria-hidden="true">
|
|
247
|
-
<div class="pagination-ellipsis">
|
|
248
|
-
<span>•</span>
|
|
249
|
-
</div>
|
|
250
|
-
</li>
|
|
251
|
-
|
|
252
|
-
<!-- Last Page -->
|
|
253
|
-
<li v-if="items.page_no + 2 < items.page_max" class="pagination-item">
|
|
213
|
+
</template>
|
|
214
|
+
|
|
215
|
+
<!-- Current Page -->
|
|
216
|
+
<li class="pagination-item">
|
|
217
|
+
<div
|
|
218
|
+
aria-current="page"
|
|
219
|
+
class="pagination-current"
|
|
220
|
+
:aria-label="`Current page, Page ${items.page_no}`"
|
|
221
|
+
>
|
|
222
|
+
{{ items.page_no }}
|
|
223
|
+
</div>
|
|
224
|
+
</li>
|
|
225
|
+
|
|
226
|
+
<!-- Pages after current page -->
|
|
227
|
+
<template v-for="i in 2">
|
|
228
|
+
<li
|
|
229
|
+
v-if="items.page_no + i <= items.page_max"
|
|
230
|
+
:key="`page-x-${items.page_no + i}`"
|
|
231
|
+
class="pagination-item hidden sm:block"
|
|
232
|
+
>
|
|
254
233
|
<router-link
|
|
255
234
|
class="pagination-link"
|
|
256
|
-
:to="page(items.
|
|
257
|
-
:aria-label="`Go to page ${items.
|
|
235
|
+
:to="page(items.page_no + i)"
|
|
236
|
+
:aria-label="`Go to page ${items.page_no + i}`"
|
|
258
237
|
>
|
|
259
|
-
{{ items.
|
|
238
|
+
{{ items.page_no + i }}
|
|
260
239
|
</router-link>
|
|
261
240
|
</li>
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
<div class="pagination-placeholder">
|
|
302
|
-
<ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
303
|
-
</div>
|
|
304
|
-
</li>
|
|
305
|
-
|
|
306
|
-
<!-- First Page (only if not near start) -->
|
|
307
|
-
<li v-if="items.page_no > 2" class="pagination-item">
|
|
308
|
-
<router-link
|
|
309
|
-
class="pagination-link"
|
|
310
|
-
:to="page(1)"
|
|
311
|
-
aria-label="Go to page 1"
|
|
312
|
-
>
|
|
313
|
-
1
|
|
314
|
-
</router-link>
|
|
315
|
-
</li>
|
|
316
|
-
|
|
317
|
-
<!-- Simple Ellipsis (only if not near start) -->
|
|
318
|
-
<li v-if="items.page_no > 3" class="pagination-item" aria-hidden="true">
|
|
319
|
-
<div class="pagination-ellipsis">
|
|
320
|
-
<span>•</span>
|
|
321
|
-
</div>
|
|
322
|
-
</li>
|
|
323
|
-
|
|
324
|
-
<!-- Page before current (only show if not first page) -->
|
|
325
|
-
<li v-if="items.page_no > 1 && items.page_no <= 3" class="pagination-item">
|
|
326
|
-
<router-link
|
|
327
|
-
class="pagination-link"
|
|
328
|
-
:to="page(items.page_no - 1)"
|
|
329
|
-
:aria-label="`Go to page ${items.page_no - 1}`"
|
|
330
|
-
>
|
|
331
|
-
{{ items.page_no - 1 }}
|
|
332
|
-
</router-link>
|
|
333
|
-
</li>
|
|
334
|
-
|
|
335
|
-
<!-- Current Page -->
|
|
336
|
-
<li class="pagination-item">
|
|
337
|
-
<div
|
|
338
|
-
aria-current="page"
|
|
339
|
-
class="pagination-current"
|
|
340
|
-
:aria-label="`Current page, Page ${items.page_no}`"
|
|
341
|
-
>
|
|
342
|
-
{{ items.page_no }}
|
|
343
|
-
</div>
|
|
344
|
-
</li>
|
|
345
|
-
|
|
346
|
-
<!-- Page after current (only if not last page and not near end) -->
|
|
347
|
-
<li v-if="items.page_no < items.page_max && (items.page_max - items.page_no) <= 2" class="pagination-item">
|
|
348
|
-
<router-link
|
|
349
|
-
class="pagination-link"
|
|
350
|
-
:to="page(items.page_no + 1)"
|
|
351
|
-
:aria-label="`Go to page ${items.page_no + 1}`"
|
|
352
|
-
>
|
|
353
|
-
{{ items.page_no + 1 }}
|
|
354
|
-
</router-link>
|
|
355
|
-
</li>
|
|
356
|
-
|
|
357
|
-
<!-- Simple Ellipsis (only if far from end) -->
|
|
358
|
-
<li v-if="items.page_max - items.page_no > 3" class="pagination-item" aria-hidden="true">
|
|
359
|
-
<div class="pagination-ellipsis">
|
|
360
|
-
<span>•</span>
|
|
361
|
-
</div>
|
|
362
|
-
</li>
|
|
363
|
-
|
|
364
|
-
<!-- Last Page (only if not near end) -->
|
|
365
|
-
<li v-if="items.page_max - items.page_no > 2" class="pagination-item">
|
|
366
|
-
<router-link
|
|
367
|
-
class="pagination-link"
|
|
368
|
-
:to="page(items.page_max)"
|
|
369
|
-
:aria-label="`Go to page ${items.page_max}`"
|
|
370
|
-
>
|
|
371
|
-
{{ items.page_max }}
|
|
372
|
-
</router-link>
|
|
373
|
-
</li>
|
|
374
|
-
|
|
375
|
-
<!-- Next Button -->
|
|
376
|
-
<li v-if="items.page_no < items.page_max" class="pagination-item">
|
|
377
|
-
<button
|
|
378
|
-
type="button"
|
|
379
|
-
class="pagination-button pagination-nav-button"
|
|
380
|
-
:aria-label="$t('next_paging')"
|
|
381
|
-
title="Next page"
|
|
382
|
-
@click="next()"
|
|
383
|
-
>
|
|
384
|
-
<ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
|
|
385
|
-
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
386
|
-
</button>
|
|
387
|
-
</li>
|
|
388
|
-
<li v-else class="pagination-item invisible">
|
|
389
|
-
<div class="pagination-placeholder">
|
|
390
|
-
<ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
|
|
391
|
-
</div>
|
|
392
|
-
</li>
|
|
393
|
-
</ul>
|
|
394
|
-
</div>
|
|
241
|
+
</template>
|
|
242
|
+
|
|
243
|
+
<!-- Ellipsis before last page -->
|
|
244
|
+
<li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item hidden md:block" aria-hidden="true">
|
|
245
|
+
<div class="pagination-ellipsis">
|
|
246
|
+
<span>•••</span>
|
|
247
|
+
</div>
|
|
248
|
+
</li>
|
|
249
|
+
|
|
250
|
+
<!-- Last Page -->
|
|
251
|
+
<li v-if="items.page_no + 2 < items.page_max" class="pagination-item hidden md:block">
|
|
252
|
+
<router-link
|
|
253
|
+
class="pagination-link"
|
|
254
|
+
:to="page(items.page_max)"
|
|
255
|
+
:aria-label="`Go to page ${items.page_max}`"
|
|
256
|
+
>
|
|
257
|
+
{{ items.page_max }}
|
|
258
|
+
</router-link>
|
|
259
|
+
</li>
|
|
260
|
+
|
|
261
|
+
<!-- Next Button -->
|
|
262
|
+
<li v-if="items.page_no < items.page_max" class="pagination-item md:block">
|
|
263
|
+
<button
|
|
264
|
+
type="button"
|
|
265
|
+
class="pagination-button pagination-nav-button"
|
|
266
|
+
:aria-label="$t('next_paging')"
|
|
267
|
+
title="Next page"
|
|
268
|
+
@click="next()"
|
|
269
|
+
>
|
|
270
|
+
<ChevronRightIcon class="w-5 h-5" aria-hidden="true" />
|
|
271
|
+
<span class="sr-only">{{ $t("next_paging") }}</span>
|
|
272
|
+
</button>
|
|
273
|
+
</li>
|
|
274
|
+
<li v-else class="pagination-item invisible md:hidden">
|
|
275
|
+
<div class="pagination-placeholder">
|
|
276
|
+
<ChevronRightIcon class="w-5 h-5 invisible" aria-hidden="true" />
|
|
277
|
+
</div>
|
|
278
|
+
</li>
|
|
279
|
+
</ul>
|
|
395
280
|
</nav>
|
|
396
281
|
|
|
397
|
-
<!--
|
|
282
|
+
<!-- Mobile page indication (x of y) -->
|
|
283
|
+
<div class="sm:hidden text-center mb-2">
|
|
284
|
+
<span class="text-sm font-medium text-fv-neutral-700 dark:text-fv-neutral-200">
|
|
285
|
+
Page {{ items.page_no }} of {{ items.page_max }}
|
|
286
|
+
</span>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<!-- Results summary -->
|
|
398
290
|
<p
|
|
399
291
|
v-if="showLegend"
|
|
400
292
|
class="text-xs text-center text-fv-neutral-700 dark:text-fv-neutral-400"
|
|
@@ -414,12 +306,7 @@ onMounted(() => {
|
|
|
414
306
|
|
|
415
307
|
<style scoped>
|
|
416
308
|
.pagination-list {
|
|
417
|
-
@apply inline-flex items-center justify-center gap-
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
.desktop-pagination,
|
|
421
|
-
.mobile-pagination {
|
|
422
|
-
@apply flex items-center justify-center mx-auto;
|
|
309
|
+
@apply inline-flex items-center justify-center gap-1 shadow-sm rounded-lg;
|
|
423
310
|
}
|
|
424
311
|
|
|
425
312
|
.pagination-item {
|
|
@@ -432,14 +319,14 @@ onMounted(() => {
|
|
|
432
319
|
.pagination-ellipsis,
|
|
433
320
|
.pagination-placeholder {
|
|
434
321
|
@apply flex items-center justify-center;
|
|
435
|
-
min-width:
|
|
436
|
-
height:
|
|
322
|
+
min-width: 2.25rem;
|
|
323
|
+
height: 2.25rem;
|
|
437
324
|
}
|
|
438
325
|
|
|
439
326
|
.pagination-link {
|
|
440
|
-
@apply px-
|
|
327
|
+
@apply px-3 py-2 rounded-md text-sm font-medium bg-white border border-fv-neutral-200
|
|
441
328
|
text-fv-neutral-700 hover:bg-fv-neutral-50 hover:text-fv-primary-600
|
|
442
|
-
focus:z-10 focus:outline-none focus:ring-
|
|
329
|
+
focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
|
|
443
330
|
transition-colors duration-200
|
|
444
331
|
dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-200
|
|
445
332
|
dark:hover:bg-fv-neutral-700 dark:hover:text-white
|
|
@@ -447,39 +334,34 @@ onMounted(() => {
|
|
|
447
334
|
}
|
|
448
335
|
|
|
449
336
|
.pagination-current {
|
|
450
|
-
@apply px-
|
|
337
|
+
@apply px-3 py-2 rounded-md text-sm font-bold
|
|
451
338
|
bg-fv-primary-100 text-fv-primary-700 border border-fv-primary-300
|
|
452
339
|
dark:bg-fv-primary-900 dark:text-fv-primary-100 dark:border-fv-primary-700;
|
|
453
340
|
}
|
|
454
341
|
|
|
455
342
|
.pagination-nav-button {
|
|
456
|
-
@apply p-
|
|
343
|
+
@apply p-2 rounded-md text-fv-neutral-600 bg-white border border-fv-neutral-200
|
|
457
344
|
hover:bg-fv-neutral-50 hover:text-fv-primary-600
|
|
458
|
-
focus:z-10 focus:outline-none focus:ring-
|
|
345
|
+
focus:z-10 focus:outline-none focus:ring-2 focus:ring-fv-primary-500 focus:ring-offset-1
|
|
459
346
|
transition-colors duration-200
|
|
460
347
|
dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300
|
|
461
348
|
dark:hover:bg-fv-neutral-700 dark:hover:text-white;
|
|
462
349
|
}
|
|
463
350
|
|
|
464
351
|
.pagination-ellipsis {
|
|
465
|
-
@apply px-
|
|
352
|
+
@apply px-2 py-1 text-fv-neutral-500 dark:text-fv-neutral-400;
|
|
466
353
|
}
|
|
467
354
|
|
|
468
355
|
@media (max-width: 640px) {
|
|
469
356
|
.pagination-list {
|
|
470
|
-
@apply gap-
|
|
357
|
+
@apply gap-2;
|
|
471
358
|
}
|
|
472
359
|
|
|
473
360
|
.pagination-link,
|
|
474
361
|
.pagination-button,
|
|
475
362
|
.pagination-current {
|
|
476
|
-
min-width:
|
|
477
|
-
height:
|
|
478
|
-
@apply px-1 py-0.5 text-[10px];
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
.pagination-nav-button {
|
|
482
|
-
@apply p-1;
|
|
363
|
+
min-width: 2rem;
|
|
364
|
+
height: 2rem;
|
|
483
365
|
}
|
|
484
366
|
}
|
|
485
367
|
</style>
|