@kayord/ui 0.9.2 → 0.9.4
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.
|
@@ -145,15 +145,16 @@
|
|
|
145
145
|
</span>
|
|
146
146
|
{/if}
|
|
147
147
|
</div>
|
|
148
|
-
|
|
149
|
-
<div class="flex-1 text-sm text-muted-foreground
|
|
150
|
-
{
|
|
151
|
-
|
|
148
|
+
<div class="flex items-center">
|
|
149
|
+
<div class="flex-1 text-sm text-muted-foreground px-2">
|
|
150
|
+
{#if isSelectEnabled && showSelected}
|
|
151
|
+
{Object.keys($selectedDataIds).length} of {serverItemCount ?? $rows.length} row(s) selected.
|
|
152
|
+
{/if}
|
|
152
153
|
</div>
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
154
|
+
{#if isPagingEnabled}
|
|
155
|
+
<DataTablePagination tableModel={tableViewModel} {showRowsPerPage} />
|
|
156
|
+
{/if}
|
|
157
|
+
</div>
|
|
157
158
|
|
|
158
159
|
{#if $$slots.footer}
|
|
159
160
|
<div class="rounded-b-md overflow-hidden">
|
|
@@ -10,75 +10,68 @@
|
|
|
10
10
|
const { pageRows, pluginStates, rows } = tableModel;
|
|
11
11
|
|
|
12
12
|
const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;
|
|
13
|
-
|
|
14
|
-
const { selectedDataIds } = pluginStates.select;
|
|
15
13
|
</script>
|
|
16
14
|
|
|
17
|
-
<div class="flex items-center justify-
|
|
18
|
-
|
|
19
|
-
{Object.keys($selectedDataIds).length} of {$rows.length} row(s) selected.
|
|
20
|
-
</div>
|
|
21
|
-
<div class="flex items-center space-x-6 lg:space-x-8">
|
|
22
|
-
{#if showRowsPerPage}
|
|
23
|
-
<div class="flex items-center space-x-2">
|
|
24
|
-
<p class="text-sm font-medium">Rows per page</p>
|
|
25
|
-
<Select.Root
|
|
26
|
-
onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
|
|
27
|
-
selected={{ value: 10, label: "10" }}
|
|
28
|
-
>
|
|
29
|
-
<Select.Trigger class="h-8 w-[70px]">
|
|
30
|
-
<Select.Value placeholder="Select page size" />
|
|
31
|
-
</Select.Trigger>
|
|
32
|
-
<Select.Content>
|
|
33
|
-
<Select.Item value="10">10</Select.Item>
|
|
34
|
-
<Select.Item value="20">20</Select.Item>
|
|
35
|
-
<Select.Item value="30">30</Select.Item>
|
|
36
|
-
<Select.Item value="40">40</Select.Item>
|
|
37
|
-
<Select.Item value="50">50</Select.Item>
|
|
38
|
-
</Select.Content>
|
|
39
|
-
</Select.Root>
|
|
40
|
-
</div>
|
|
41
|
-
{/if}
|
|
42
|
-
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
|
|
43
|
-
Page {$pageIndex + 1} of {$pageCount}
|
|
44
|
-
</div>
|
|
15
|
+
<div class="flex items-center space-x-6 lg:space-x-8 justify-end px-2">
|
|
16
|
+
{#if showRowsPerPage}
|
|
45
17
|
<div class="flex items-center space-x-2">
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
disabled={!$hasPreviousPage}
|
|
51
|
-
>
|
|
52
|
-
<span class="sr-only">Go to first page</span>
|
|
53
|
-
<ChevronsLeftIcon size={15} />
|
|
54
|
-
</Button>
|
|
55
|
-
<Button
|
|
56
|
-
variant="outline"
|
|
57
|
-
class="h-8 w-8 p-0"
|
|
58
|
-
on:click={() => ($pageIndex = $pageIndex - 1)}
|
|
59
|
-
disabled={!$hasPreviousPage}
|
|
18
|
+
<p class="text-sm font-medium">Rows per page</p>
|
|
19
|
+
<Select.Root
|
|
20
|
+
onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
|
|
21
|
+
selected={{ value: 10, label: "10" }}
|
|
60
22
|
>
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</Button>
|
|
73
|
-
<Button
|
|
74
|
-
variant="outline"
|
|
75
|
-
class="hidden h-8 w-8 p-0 lg:flex"
|
|
76
|
-
disabled={!$hasNextPage}
|
|
77
|
-
on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
|
|
78
|
-
>
|
|
79
|
-
<span class="sr-only">Go to last page</span>
|
|
80
|
-
<ChevronsRightIcon size={15} />
|
|
81
|
-
</Button>
|
|
23
|
+
<Select.Trigger class="h-8 w-[70px]">
|
|
24
|
+
<Select.Value placeholder="Select page size" />
|
|
25
|
+
</Select.Trigger>
|
|
26
|
+
<Select.Content>
|
|
27
|
+
<Select.Item value="10">10</Select.Item>
|
|
28
|
+
<Select.Item value="20">20</Select.Item>
|
|
29
|
+
<Select.Item value="30">30</Select.Item>
|
|
30
|
+
<Select.Item value="40">40</Select.Item>
|
|
31
|
+
<Select.Item value="50">50</Select.Item>
|
|
32
|
+
</Select.Content>
|
|
33
|
+
</Select.Root>
|
|
82
34
|
</div>
|
|
35
|
+
{/if}
|
|
36
|
+
<div class="flex w-[100px] items-center justify-center text-sm font-medium">
|
|
37
|
+
Page {$pageIndex + 1} of {$pageCount}
|
|
38
|
+
</div>
|
|
39
|
+
<div class="flex items-center space-x-2">
|
|
40
|
+
<Button
|
|
41
|
+
variant="outline"
|
|
42
|
+
class="hidden h-8 w-8 p-0 lg:flex"
|
|
43
|
+
on:click={() => ($pageIndex = 0)}
|
|
44
|
+
disabled={!$hasPreviousPage}
|
|
45
|
+
>
|
|
46
|
+
<span class="sr-only">Go to first page</span>
|
|
47
|
+
<ChevronsLeftIcon size={15} />
|
|
48
|
+
</Button>
|
|
49
|
+
<Button
|
|
50
|
+
variant="outline"
|
|
51
|
+
class="h-8 w-8 p-0"
|
|
52
|
+
on:click={() => ($pageIndex = $pageIndex - 1)}
|
|
53
|
+
disabled={!$hasPreviousPage}
|
|
54
|
+
>
|
|
55
|
+
<span class="sr-only">Go to previous page</span>
|
|
56
|
+
<ChevronLeftIcon size={15} />
|
|
57
|
+
</Button>
|
|
58
|
+
<Button
|
|
59
|
+
variant="outline"
|
|
60
|
+
class="h-8 w-8 p-0"
|
|
61
|
+
disabled={!$hasNextPage}
|
|
62
|
+
on:click={() => ($pageIndex = $pageIndex + 1)}
|
|
63
|
+
>
|
|
64
|
+
<span class="sr-only">Go to next page</span>
|
|
65
|
+
<ChevronRightIcon size={15} />
|
|
66
|
+
</Button>
|
|
67
|
+
<Button
|
|
68
|
+
variant="outline"
|
|
69
|
+
class="hidden h-8 w-8 p-0 lg:flex"
|
|
70
|
+
disabled={!$hasNextPage}
|
|
71
|
+
on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
|
|
72
|
+
>
|
|
73
|
+
<span class="sr-only">Go to last page</span>
|
|
74
|
+
<ChevronsRightIcon size={15} />
|
|
75
|
+
</Button>
|
|
83
76
|
</div>
|
|
84
77
|
</div>
|