@insymetri/styleguide 0.1.76 → 0.1.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.
|
@@ -19,9 +19,15 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
type Props = {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Legacy slot mode: pass your own `<thead>`/`<tbody>` as children and they are
|
|
24
|
+
* rendered inside the standard table container. When provided, the column/row
|
|
25
|
+
* props below are ignored. Prefer the `columns`/`rows` API for new tables.
|
|
26
|
+
*/
|
|
27
|
+
children?: Snippet
|
|
28
|
+
columns?: Column[]
|
|
29
|
+
rows?: T[]
|
|
30
|
+
rowKey?: (row: T) => string
|
|
25
31
|
loading?: boolean
|
|
26
32
|
loadingRows?: number
|
|
27
33
|
/** Rendered (spanning all columns) when there are no rows and not loading. */
|
|
@@ -39,8 +45,9 @@
|
|
|
39
45
|
}
|
|
40
46
|
|
|
41
47
|
let {
|
|
42
|
-
|
|
43
|
-
|
|
48
|
+
children,
|
|
49
|
+
columns = [],
|
|
50
|
+
rows = [],
|
|
44
51
|
rowKey,
|
|
45
52
|
loading = false,
|
|
46
53
|
loadingRows = 5,
|
|
@@ -64,6 +71,11 @@
|
|
|
64
71
|
</script>
|
|
65
72
|
|
|
66
73
|
<div class={cn('bg-surface border border-primary rounded-10 overflow-x-auto overflow-y-hidden', className)}>
|
|
74
|
+
{#if children}
|
|
75
|
+
<table class="w-full border-collapse">
|
|
76
|
+
{@render children()}
|
|
77
|
+
</table>
|
|
78
|
+
{:else}
|
|
67
79
|
<table class="w-full border-collapse">
|
|
68
80
|
<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
|
|
69
81
|
<tr>
|
|
@@ -93,7 +105,7 @@
|
|
|
93
105
|
</tr>
|
|
94
106
|
{/if}
|
|
95
107
|
{:else}
|
|
96
|
-
{#each rows as row (rowKey(row))}
|
|
108
|
+
{#each rows as row (rowKey?.(row) ?? row)}
|
|
97
109
|
<tr
|
|
98
110
|
class={cn(
|
|
99
111
|
'border-b border-primary last:border-b-0',
|
|
@@ -121,4 +133,5 @@
|
|
|
121
133
|
{/if}
|
|
122
134
|
</tbody>
|
|
123
135
|
</table>
|
|
136
|
+
{/if}
|
|
124
137
|
</div>
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
declare function $$render<T>(): {
|
|
3
3
|
props: {
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Legacy slot mode: pass your own `<thead>`/`<tbody>` as children and they are
|
|
6
|
+
* rendered inside the standard table container. When provided, the column/row
|
|
7
|
+
* props below are ignored. Prefer the `columns`/`rows` API for new tables.
|
|
8
|
+
*/
|
|
9
|
+
children?: Snippet;
|
|
10
|
+
columns?: {
|
|
5
11
|
/** Stable id (used as the header key today; the sort key when sorting lands). */
|
|
6
12
|
key: string;
|
|
7
13
|
header: string;
|
|
@@ -15,8 +21,8 @@ declare function $$render<T>(): {
|
|
|
15
21
|
/** Extra classes on the `<th>`. */
|
|
16
22
|
headerClass?: string;
|
|
17
23
|
}[];
|
|
18
|
-
rows
|
|
19
|
-
rowKey
|
|
24
|
+
rows?: T[];
|
|
25
|
+
rowKey?: (row: T) => string;
|
|
20
26
|
loading?: boolean;
|
|
21
27
|
loadingRows?: number;
|
|
22
28
|
/** Rendered (spanning all columns) when there are no rows and not loading. */
|