@invopop/popui 0.1.91 → 0.1.92
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.
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import Button from '../button/button.svelte'
|
|
3
3
|
import InputSelect from '../InputSelect.svelte'
|
|
4
4
|
import InputText from '../InputText.svelte'
|
|
5
|
+
import Skeleton from '../skeleton/skeleton.svelte'
|
|
5
6
|
import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
|
|
6
7
|
import { cn } from '../utils.js'
|
|
7
8
|
import clsx from 'clsx'
|
|
@@ -21,7 +22,8 @@
|
|
|
21
22
|
rowCount,
|
|
22
23
|
manualPagination,
|
|
23
24
|
disabled = false,
|
|
24
|
-
disableJumpToPage = false
|
|
25
|
+
disableJumpToPage = false,
|
|
26
|
+
countLoading = false
|
|
25
27
|
}: DataTablePaginationProps<any> = $props()
|
|
26
28
|
|
|
27
29
|
let currentPage = $derived(table.getState().pagination.pageIndex + 1)
|
|
@@ -140,8 +142,13 @@
|
|
|
140
142
|
disabled={disableJumpToPage}
|
|
141
143
|
/>
|
|
142
144
|
</div>
|
|
143
|
-
<span class="text-base text-foreground-default-secondary whitespace-nowrap">
|
|
144
|
-
/
|
|
145
|
+
<span class="text-base text-foreground-default-secondary whitespace-nowrap flex items-center gap-1.5">
|
|
146
|
+
/
|
|
147
|
+
{#if countLoading}
|
|
148
|
+
<Skeleton class="h-4 w-8" />
|
|
149
|
+
{:else}
|
|
150
|
+
{formatNumber(totalPages)}
|
|
151
|
+
{/if}
|
|
145
152
|
</span>
|
|
146
153
|
</div>
|
|
147
154
|
<div class="flex items-center">
|
|
@@ -206,7 +213,12 @@
|
|
|
206
213
|
</div>
|
|
207
214
|
{/if}
|
|
208
215
|
</div>
|
|
209
|
-
{#if
|
|
216
|
+
{#if countLoading}
|
|
217
|
+
<span class="text-base text-foreground-default-secondary flex items-center gap-1.5">
|
|
218
|
+
<Skeleton class="h-4 w-10" />
|
|
219
|
+
{itemsLabel}
|
|
220
|
+
</span>
|
|
221
|
+
{:else if totalItems > 0}
|
|
210
222
|
<span class="text-base text-foreground-default-secondary">
|
|
211
223
|
{formatNumber(totalItems)}
|
|
212
224
|
{itemsLabel}
|
|
@@ -94,6 +94,7 @@ export interface DataTablePaginationProps<T> {
|
|
|
94
94
|
manualPagination?: boolean;
|
|
95
95
|
disabled?: boolean;
|
|
96
96
|
disableJumpToPage?: boolean;
|
|
97
|
+
countLoading?: boolean;
|
|
97
98
|
}
|
|
98
99
|
export interface DataTableRowProps<TData> {
|
|
99
100
|
row: Row<TData>;
|
|
@@ -152,6 +153,7 @@ export interface DataTableProps<TData> {
|
|
|
152
153
|
manualSorting?: boolean;
|
|
153
154
|
pageCount?: number;
|
|
154
155
|
rowCount?: number;
|
|
156
|
+
countLoading?: boolean;
|
|
155
157
|
onPageChange?: (pageIndex: number) => void;
|
|
156
158
|
onPageSizeChange?: (pageSize: number) => void;
|
|
157
159
|
onSortingChange?: (columnId: string, direction: TableSortBy) => void;
|
|
@@ -68,6 +68,7 @@
|
|
|
68
68
|
manualSorting = false,
|
|
69
69
|
pageCount,
|
|
70
70
|
rowCount,
|
|
71
|
+
countLoading = false,
|
|
71
72
|
onPageChange,
|
|
72
73
|
onPageSizeChange,
|
|
73
74
|
onSortingChange,
|
|
@@ -437,6 +438,7 @@
|
|
|
437
438
|
{onPageChange}
|
|
438
439
|
{onPageSizeChange}
|
|
439
440
|
{disableJumpToPage}
|
|
441
|
+
{countLoading}
|
|
440
442
|
disabled={disableControls || loading}
|
|
441
443
|
>
|
|
442
444
|
{#if paginationSlot}
|