adminforth 4.1.0 → 4.1.1
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.
|
@@ -276,47 +276,52 @@
|
|
|
276
276
|
-->
|
|
277
277
|
<div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
|
|
278
278
|
|
|
279
|
-
|
|
279
|
+
<!-- one hairline frame around 26px buttons split by lighter dividers, the current page is an inset field -->
|
|
280
|
+
<div class="af-pagination-buttons-container af-button-shadow inline-flex overflow-hidden rounded-default border border-lightListTablePaginationBorder bg-lightListTablePaginationBackgoround divide-x rtl:divide-x-reverse divide-lightListTablePaginationBorder/60 dark:border-darkListTablePaginationBorder dark:bg-darkListTablePaginationBackgoround dark:divide-darkListTablePaginationBorder/60"
|
|
280
281
|
v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
|
|
281
282
|
>
|
|
282
283
|
<!-- Buttons -->
|
|
283
284
|
<button
|
|
284
|
-
class="af-pagination-prev-button
|
|
285
|
-
|
|
285
|
+
class="af-pagination-prev-button px-2"
|
|
286
|
+
:class="PAGINATION_BUTTON_CLASSES"
|
|
287
|
+
:aria-label="$t('Prev')"
|
|
288
|
+
@click="page--; pageInput = page.toString();"
|
|
286
289
|
:disabled="page <= 1"
|
|
287
290
|
>
|
|
288
|
-
<IconChevronLeft class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
|
|
289
|
-
<span class="hidden sm:inline">
|
|
290
|
-
{{ $t('Prev') }}
|
|
291
|
-
</span>
|
|
291
|
+
<IconChevronLeft class="w-4 h-4 rtl:rotate-180 text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText" aria-hidden="true" />
|
|
292
292
|
</button>
|
|
293
293
|
<button
|
|
294
|
-
class="af-pagination-first-page-button
|
|
295
|
-
|
|
296
|
-
|
|
294
|
+
class="af-pagination-first-page-button px-2.5"
|
|
295
|
+
:class="PAGINATION_BUTTON_CLASSES"
|
|
296
|
+
@click="page = 1;
|
|
297
|
+
pageInput = page.toString();"
|
|
297
298
|
:disabled="page <= 1"
|
|
298
299
|
>
|
|
299
300
|
1
|
|
300
301
|
</button>
|
|
301
|
-
<
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
302
|
+
<span class="flex items-center px-0.5">
|
|
303
|
+
<input
|
|
304
|
+
type="text"
|
|
305
|
+
v-model="pageInput"
|
|
306
|
+
:style="{ width: `${Math.max(1, pageInput.length+4)}ch` }"
|
|
307
|
+
class="af-pagination-input min-w-[34px] h-[22px] px-1 outline-none rounded-[4px] text-[13px] font-medium tabular-nums text-center text-lightListTablePaginationCurrentPageText bg-lightPrimaryOpacity border border-lightPrimary dark:border-darkPrimary dark:text-darkListTablePaginationCurrentPageText dark:bg-darkPrimaryOpacity focus:ring-2 focus:ring-lightListTablePaginationFocusRing dark:focus:ring-darkListTablePaginationFocusRing"
|
|
308
|
+
@keydown="onPageKeydown($event)"
|
|
309
|
+
@blur="validatePageInput()"
|
|
310
|
+
/>
|
|
311
|
+
</span>
|
|
309
312
|
|
|
310
313
|
<button
|
|
311
|
-
class="af-pagination-last-page-button
|
|
314
|
+
class="af-pagination-last-page-button px-2.5"
|
|
315
|
+
:class="PAGINATION_BUTTON_CLASSES"
|
|
312
316
|
@click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
|
|
313
317
|
{{ totalPages }}
|
|
314
318
|
</button>
|
|
315
319
|
<button
|
|
316
|
-
class="af-pagination-next-button
|
|
320
|
+
class="af-pagination-next-button px-2"
|
|
321
|
+
:class="PAGINATION_BUTTON_CLASSES"
|
|
322
|
+
:aria-label="$t('Next')"
|
|
317
323
|
@click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
|
|
318
|
-
<
|
|
319
|
-
<IconChevronRight class="w-4 h-4 rtl:rotate-180" aria-hidden="true" />
|
|
324
|
+
<IconChevronRight class="w-4 h-4 rtl:rotate-180 text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText" aria-hidden="true" />
|
|
320
325
|
</button>
|
|
321
326
|
</div>
|
|
322
327
|
|
|
@@ -411,6 +416,7 @@ import { Select } from '@/afcl';
|
|
|
411
416
|
|
|
412
417
|
const TABLE_CLASSES = 'w-full text-[13px] text-left rtl:text-right text-lightListTableText dark:text-darkListTableText rounded-default';
|
|
413
418
|
const HEADER_ROW_CLASSES = 'border-b border-lightListBorder dark:border-darkListBorder t-header sticky z-20 top-0 text-xs text-lightListTableHeadingText bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-darkListTableHeadingText';
|
|
419
|
+
const PAGINATION_BUTTON_CLASSES = 'flex items-center h-[26px] text-[13px] font-medium tabular-nums text-lightListTablePaginationText enabled:hover:bg-lightListTablePaginationBackgoroundHover enabled:hover:text-lightListTablePaginationTextHover focus:outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-lightListTablePaginationFocusRing dark:text-darkListTablePaginationText dark:enabled:hover:bg-darkListTablePaginationBackgoroundHover dark:enabled:hover:text-darkListTablePaginationTextHover dark:focus-visible:ring-darkListTablePaginationFocusRing disabled:opacity-50';
|
|
414
420
|
const SKELETON_COLUMNS_COUNT = 5;
|
|
415
421
|
|
|
416
422
|
const coreStore = useCoreStore();
|