@fy-/fws-vue 2.2.71 → 2.2.73

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 +231 -222
  2. package/package.json +1 -1
package/components/ui/DefaultPaging.vue CHANGED
@@ -157,237 +157,241 @@ onMounted(() => {
157
157
  >
158
158
  <div class="paging-container w-full">
159
159
  <nav aria-label="Pagination" class="mb-1 flex justify-center">
160
- <!-- Desktop pagination -->
161
- <ul class="pagination-list hidden sm:inline-flex">
162
- <!-- Previous Button -->
163
- <li v-if="items.page_no >= 2" class="pagination-item">
164
- <button
165
- type="button"
166
- class="pagination-button pagination-nav-button"
167
- :aria-label="$t('previous_paging')"
168
- title="Previous page"
169
- @click="prev()"
170
- >
171
- <ChevronLeftIcon class="w-4 h-4" aria-hidden="true" />
172
- <span class="sr-only">{{ $t("previous_paging") }}</span>
173
- </button>
174
- </li>
175
- <li v-else class="pagination-item invisible">
176
- <div class="pagination-placeholder">
177
- <ChevronLeftIcon class="w-4 h-4 invisible" aria-hidden="true" />
178
- </div>
179
- </li>
180
-
181
- <!-- First Page -->
182
- <li v-if="items.page_no - 2 > 1" class="pagination-item">
183
- <router-link
184
- class="pagination-link"
185
- :to="page(1)"
186
- aria-label="Go to page 1"
187
- >
188
- 1
189
- </router-link>
190
- </li>
191
-
192
- <!-- Ellipsis after first page -->
193
- <li v-if="items.page_no - 2 > 2" class="pagination-item" aria-hidden="true">
194
- <div class="pagination-ellipsis">
195
- <span>•</span>
196
- </div>
197
- </li>
198
-
199
- <!-- Pages before current page -->
200
- <template v-for="i in 2">
201
- <li
202
- v-if="items.page_no - (3 - i) >= 1"
203
- :key="`page-${items.page_no - (3 - i)}`"
204
- class="pagination-item"
205
- >
160
+ <!-- Desktop pagination - only visible on sm screens and up -->
161
+ <div class="hidden sm: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">
254
+ <router-link
255
+ class="pagination-link"
256
+ :to="page(items.page_max)"
257
+ :aria-label="`Go to page ${items.page_max}`"
258
+ >
259
+ {{ items.page_max }}
260
+ </router-link>
261
+ </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 - only visible on xs screens -->
285
+ <div class="block sm: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">
206
308
  <router-link
207
309
  class="pagination-link"
208
- :to="page(items.page_no - (3 - i))"
209
- :aria-label="`Go to page ${items.page_no - (3 - i)}`"
310
+ :to="page(1)"
311
+ aria-label="Go to page 1"
210
312
  >
211
- {{ items.page_no - (3 - i) }}
313
+ 1
212
314
  </router-link>
213
315
  </li>
214
- </template>
215
-
216
- <!-- Current Page -->
217
- <li class="pagination-item">
218
- <div
219
- aria-current="page"
220
- class="pagination-current"
221
- :aria-label="`Current page, Page ${items.page_no}`"
222
- >
223
- {{ items.page_no }}
224
- </div>
225
- </li>
226
-
227
- <!-- Pages after current page -->
228
- <template v-for="i in 2">
229
- <li
230
- v-if="items.page_no + i <= items.page_max"
231
- :key="`page-x-${items.page_no + i}`"
232
- class="pagination-item"
233
- >
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">
234
348
  <router-link
235
349
  class="pagination-link"
236
- :to="page(items.page_no + i)"
237
- :aria-label="`Go to page ${items.page_no + i}`"
350
+ :to="page(items.page_no + 1)"
351
+ :aria-label="`Go to page ${items.page_no + 1}`"
238
352
  >
239
- {{ items.page_no + i }}
353
+ {{ items.page_no + 1 }}
240
354
  </router-link>
241
355
  </li>
242
- </template>
243
-
244
- <!-- Ellipsis before last page -->
245
- <li v-if="items.page_no + 2 < items.page_max - 1" class="pagination-item" aria-hidden="true">
246
- <div class="pagination-ellipsis">
247
- <span>•</span>
248
- </div>
249
- </li>
250
-
251
- <!-- Last Page -->
252
- <li v-if="items.page_no + 2 < items.page_max" class="pagination-item">
253
- <router-link
254
- class="pagination-link"
255
- :to="page(items.page_max)"
256
- :aria-label="`Go to page ${items.page_max}`"
257
- >
258
- {{ items.page_max }}
259
- </router-link>
260
- </li>
261
-
262
- <!-- Next Button -->
263
- <li v-if="items.page_no < items.page_max" class="pagination-item">
264
- <button
265
- type="button"
266
- class="pagination-button pagination-nav-button"
267
- :aria-label="$t('next_paging')"
268
- title="Next page"
269
- @click="next()"
270
- >
271
- <ChevronRightIcon class="w-4 h-4" aria-hidden="true" />
272
- <span class="sr-only">{{ $t("next_paging") }}</span>
273
- </button>
274
- </li>
275
- <li v-else class="pagination-item invisible">
276
- <div class="pagination-placeholder">
277
- <ChevronRightIcon class="w-4 h-4 invisible" aria-hidden="true" />
278
- </div>
279
- </li>
280
- </ul>
281
-
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>
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>
391
395
  </nav>
392
396
 
393
397
  <!-- Results summary - Now defaults to not showing -->
@@ -413,6 +417,11 @@ onMounted(() => {
413
417
  @apply inline-flex items-center justify-center gap-0.5 shadow-sm rounded-lg;
414
418
  }
415
419
 
420
+ .desktop-pagination,
421
+ .mobile-pagination {
422
+ @apply flex justify-center;
423
+ }
424
+
416
425
  .pagination-item {
417
426
  @apply flex items-center justify-center;
418
427
  }
@@ -466,7 +475,7 @@ onMounted(() => {
466
475
  .pagination-current {
467
476
  min-width: 1.5rem;
468
477
  height: 1.5rem;
469
- @apply px-1 py-0.5 text-2xs;
478
+ @apply px-1 py-0.5 text-[10px];
470
479
  }
471
480
 
472
481
  .pagination-nav-button {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fy-/fws-vue",
3
- "version": "2.2.71",
3
+ "version": "2.2.73",
4
4
  "author": "Florian 'Fy' Gasquez <m@fy.to>",
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/fy-to/FWJS#readme",