@fy-/fws-vue 2.2.75 → 2.2.77

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.
Files changed (2) hide show
  1. package/components/ui/DefaultPaging.vue +83 -307
  2. package/package.json +1 -1
package/components/ui/DefaultPaging.vue CHANGED
@@ -18,7 +18,7 @@ const props = withDefaults(
18
18
  showLegend?: boolean
19
19
  }>(),
20
20
  {
21
- showLegend: false,
21
+ showLegend: true,
22
22
  hash: '',
23
23
  },
24
24
  )
@@ -153,252 +153,100 @@ onMounted(() => {
153
153
  <template>
154
154
  <div
155
155
  v-if="items && items.page_max > 1 && items.page_no"
156
- class="flex flex-col items-center justify-center"
156
+ class="flex items-center justify-center"
157
157
  >
158
- <div class="paging-container w-full">
159
- <nav aria-label="Pagination" class="mb-1 flex justify-center w-full">
160
- <!-- Desktop pagination - only visible on lg screens and up -->
161
- <div class="hidden lg:block w-full">
162
- <ul class="pagination-list desktop-pagination">
163
- <!-- Previous Button -->
164
- <li v-if="items.page_no >= 2" class="pagination-item">
165
- <button
166
- type="button"
167
- class="pagination-button pagination-nav-button"
168
- :aria-label="$t('previous_paging')"
169
- title="Previous page"
170
- @click="prev()"
171
- >
172
- <ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
173
- <span class="sr-only">{{ $t("previous_paging") }}</span>
174
- </button>
175
- </li>
176
- <li v-else class="pagination-item invisible">
177
- <div class="pagination-placeholder">
178
- <ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
179
- </div>
180
- </li>
181
-
182
- <!-- First Page -->
183
- <li v-if="items.page_no - 2 > 1" class="pagination-item">
184
- <router-link
185
- class="pagination-link"
186
- :to="page(1)"
187
- aria-label="Go to page 1"
188
- >
189
- 1
190
- </router-link>
191
- </li>
192
-
193
- <!-- Ellipsis after first page -->
194
- <li v-if="items.page_no - 2 > 2" class="pagination-item" aria-hidden="true">
195
- <div class="pagination-ellipsis">
196
- <span>•</span>
197
- </div>
198
- </li>
199
-
200
- <!-- Pages before current page -->
201
- <template v-for="i in 2">
202
- <li
203
- v-if="items.page_no - (3 - i) >= 1"
204
- :key="`page-${items.page_no - (3 - i)}`"
205
- class="pagination-item"
206
- >
207
- <router-link
208
- class="pagination-link"
209
- :to="page(items.page_no - (3 - i))"
210
- :aria-label="`Go to page ${items.page_no - (3 - i)}`"
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">
158
+ <div class="paging-container">
159
+ <nav aria-label="Pagination">
160
+ <ul class="flex items-center -space-x-px h-8 text-sm">
161
+ <li v-if="items.page_no >= 2">
162
+ <button
163
+ type="button"
164
+ class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
165
+ @click="prev()"
166
+ >
167
+ <span class="sr-only">{{ $t("previous_paging") }}</span>
168
+ <ChevronLeftIcon class="w-4 h-4" />
169
+ </button>
170
+ </li>
171
+ <li v-if="items.page_no - 2 > 1">
172
+ <router-link
173
+ class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
174
+ :to="page(1)"
175
+ >
176
+ 1
177
+ </router-link>
178
+ </li>
179
+ <li v-if="items.page_no - 2 > 2">
180
+ <div
181
+ class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
182
+ >
183
+ ...
184
+ </div>
185
+ </li>
186
+ <template v-for="i in 2">
187
+ <li
188
+ v-if="items.page_no - (3 - i) >= 1"
189
+ :key="`page-${items.page_no - (3 - i)}`"
190
+ >
254
191
  <router-link
255
- class="pagination-link"
256
- :to="page(items.page_max)"
257
- :aria-label="`Go to page ${items.page_max}`"
192
+ class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
193
+ :to="page(items.page_no - (3 - i))"
258
194
  >
259
- {{ items.page_max }}
195
+ {{ items.page_no - (3 - i) }}
260
196
  </router-link>
261
197
  </li>
262
-
263
- <!-- Next Button -->
264
- <li v-if="items.page_no < items.page_max" class="pagination-item">
265
- <button
266
- type="button"
267
- class="pagination-button pagination-nav-button"
268
- :aria-label="$t('next_paging')"
269
- title="Next page"
270
- @click="next()"
271
- >
272
- <ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
273
- <span class="sr-only">{{ $t("next_paging") }}</span>
274
- </button>
275
- </li>
276
- <li v-else class="pagination-item invisible">
277
- <div class="pagination-placeholder">
278
- <ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
279
- </div>
280
- </li>
281
- </ul>
282
- </div>
283
-
284
- <!-- Mobile pagination - Compact version - visible on xs, sm, and md screens -->
285
- <div class="block lg:hidden w-full">
286
- <ul class="pagination-list mobile-pagination">
287
- <!-- Previous Button -->
288
- <li v-if="items.page_no >= 2" class="pagination-item">
289
- <button
290
- type="button"
291
- class="pagination-button pagination-nav-button"
292
- :aria-label="$t('previous_paging')"
293
- title="Previous page"
294
- @click="prev()"
295
- >
296
- <ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
297
- <span class="sr-only">{{ $t("previous_paging") }}</span>
298
- </button>
299
- </li>
300
- <li v-else class="pagination-item invisible">
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">
198
+ </template>
199
+ <li>
200
+ <div
201
+ aria-current="page"
202
+ class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-primary-600 border border-primary-300 bg-primary-50 dark:border-fv-neutral-700 dark:bg-fv-neutral-700 dark:text-white"
203
+ >
204
+ {{ items.page_no }}
205
+ </div>
206
+ </li>
207
+ <template v-for="i in 2">
208
+ <li
209
+ v-if="items.page_no + i <= items.page_max"
210
+ :key="`page-x-${items.page_no + i}`"
211
+ >
326
212
  <router-link
327
- class="pagination-link"
328
- :to="page(items.page_no - 1)"
329
- :aria-label="`Go to page ${items.page_no - 1}`"
213
+ class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
214
+ :to="page(items.page_no + i)"
330
215
  >
331
- {{ items.page_no - 1 }}
216
+ {{ items.page_no + i }}
332
217
  </router-link>
333
218
  </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>
219
+ </template>
220
+ <li v-if="items.page_no + 2 < items.page_max - 1">
221
+ <div
222
+ class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400"
223
+ >
224
+ ...
225
+ </div>
226
+ </li>
227
+ <li v-if="items.page_no + 2 < items.page_max">
228
+ <router-link
229
+ class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
230
+ :to="page(items.page_max)"
231
+ >
232
+ {{ items.page_max }}
233
+ </router-link>
234
+ </li>
235
+ <li v-if="items.page_no < items.page_max">
236
+ <button
237
+ type="button"
238
+ class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
239
+ @click="next()"
240
+ >
241
+ <span class="sr-only">{{ $t("next_paging") }}</span>
242
+ <ChevronRightIcon class="w-4 h-4" />
243
+ </button>
244
+ </li>
245
+ </ul>
395
246
  </nav>
396
-
397
- <!-- Results summary - Now defaults to not showing -->
398
247
  <p
399
248
  v-if="showLegend"
400
- class="text-xs text-center text-fv-neutral-700 dark:text-fv-neutral-400"
401
- aria-live="polite"
249
+ class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
402
250
  >
403
251
  {{
404
252
  $t("global_paging", {
@@ -411,75 +259,3 @@ onMounted(() => {
411
259
  </div>
412
260
  </div>
413
261
  </template>
414
-
415
- <style scoped>
416
- .pagination-list {
417
- @apply inline-flex items-center justify-center gap-0.5 shadow-sm rounded-lg;
418
- }
419
-
420
- .desktop-pagination,
421
- .mobile-pagination {
422
- @apply flex items-center justify-center mx-auto;
423
- }
424
-
425
- .pagination-item {
426
- @apply flex items-center justify-center;
427
- }
428
-
429
- .pagination-link,
430
- .pagination-button,
431
- .pagination-current,
432
- .pagination-ellipsis,
433
- .pagination-placeholder {
434
- @apply flex items-center justify-center;
435
- min-width: 1.85rem;
436
- height: 1.85rem;
437
- }
438
-
439
- .pagination-link {
440
- @apply px-2 py-1 rounded-md text-xs font-medium bg-white border border-fv-neutral-200
441
- text-fv-neutral-700 hover:bg-fv-neutral-50 hover:text-fv-primary-600
442
- focus:z-10 focus:outline-none focus:ring-1 focus:ring-fv-primary-500 focus:ring-offset-1
443
- transition-colors duration-200
444
- dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-200
445
- dark:hover:bg-fv-neutral-700 dark:hover:text-white
446
- dark:focus:ring-fv-primary-500;
447
- }
448
-
449
- .pagination-current {
450
- @apply px-2 py-1 rounded-md text-xs font-bold
451
- bg-fv-primary-100 text-fv-primary-700 border border-fv-primary-300
452
- dark:bg-fv-primary-900 dark:text-fv-primary-100 dark:border-fv-primary-700;
453
- }
454
-
455
- .pagination-nav-button {
456
- @apply p-1.5 rounded-md text-fv-neutral-600 bg-white border border-fv-neutral-200
457
- hover:bg-fv-neutral-50 hover:text-fv-primary-600
458
- focus:z-10 focus:outline-none focus:ring-1 focus:ring-fv-primary-500 focus:ring-offset-1
459
- transition-colors duration-200
460
- dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-300
461
- dark:hover:bg-fv-neutral-700 dark:hover:text-white;
462
- }
463
-
464
- .pagination-ellipsis {
465
- @apply px-1 py-0.5 text-fv-neutral-500 dark:text-fv-neutral-400;
466
- }
467
-
468
- @media (max-width: 640px) {
469
- .pagination-list {
470
- @apply gap-0.5;
471
- }
472
-
473
- .pagination-link,
474
- .pagination-button,
475
- .pagination-current {
476
- min-width: 1.5rem;
477
- height: 1.5rem;
478
- @apply px-1 py-0.5 text-[10px];
479
- }
480
-
481
- .pagination-nav-button {
482
- @apply p-1;
483
- }
484
- }
485
- </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "2.2.75",
3
+ "version": "2.2.77",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/fy-to/FWJS#readme",