compote-ui 0.56.1 → 0.58.0
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.
- package/dist/components/data-table-v9/create-table.svelte.js +15 -14
- package/dist/components/toast/index.d.ts +3 -0
- package/dist/components/toast/index.js +2 -0
- package/dist/components/toast/toaster.svelte +49 -0
- package/dist/components/toast/toaster.svelte.d.ts +9 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/package.json +6 -19
- package/dist/components/data-table-v8/column-helper.d.ts +0 -12
- package/dist/components/data-table-v8/column-helper.js +0 -42
- package/dist/components/data-table-v8/create-svelte-table.svelte.d.ts +0 -8
- package/dist/components/data-table-v8/create-svelte-table.svelte.js +0 -85
- package/dist/components/data-table-v8/create-table.svelte.d.ts +0 -35
- package/dist/components/data-table-v8/create-table.svelte.js +0 -234
- package/dist/components/data-table-v8/data-table-foot.svelte +0 -96
- package/dist/components/data-table-v8/data-table-foot.svelte.d.ts +0 -33
- package/dist/components/data-table-v8/data-table-head.svelte +0 -196
- package/dist/components/data-table-v8/data-table-head.svelte.d.ts +0 -35
- package/dist/components/data-table-v8/data-table-title.svelte +0 -16
- package/dist/components/data-table-v8/data-table-title.svelte.d.ts +0 -10
- package/dist/components/data-table-v8/data-table-utils.d.ts +0 -32
- package/dist/components/data-table-v8/data-table-utils.js +0 -160
- package/dist/components/data-table-v8/data-table.svelte +0 -273
- package/dist/components/data-table-v8/data-table.svelte.d.ts +0 -41
- package/dist/components/data-table-v8/flex-render.svelte +0 -35
- package/dist/components/data-table-v8/flex-render.svelte.d.ts +0 -28
- package/dist/components/data-table-v8/index.d.ts +0 -12
- package/dist/components/data-table-v8/index.js +0 -10
- package/dist/components/data-table-v8/render-helpers.d.ts +0 -13
- package/dist/components/data-table-v8/render-helpers.js +0 -23
- package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte +0 -373
- package/dist/components/data-table-v8/toolbar/data-table-column-filter.svelte.d.ts +0 -29
- package/dist/components/data-table-v8/toolbar/data-table-column-visibility.svelte +0 -73
- package/dist/components/data-table-v8/toolbar/data-table-column-visibility.svelte.d.ts +0 -29
- package/dist/components/data-table-v8/toolbar/data-table-search.svelte +0 -57
- package/dist/components/data-table-v8/toolbar/data-table-search.svelte.d.ts +0 -31
- package/dist/components/data-table-v8/toolbar/data-table-toolbar.svelte +0 -39
- package/dist/components/data-table-v8/toolbar/data-table-toolbar.svelte.d.ts +0 -12
- package/dist/components/data-table-v8/types.d.ts +0 -73
- package/dist/components/data-table-v8/types.js +0 -1
- package/dist/components/data-table-v8/virtual/data-table-virtual-rows.svelte +0 -176
- package/dist/components/data-table-v8/virtual/data-table-virtual-rows.svelte.d.ts +0 -40
- package/dist/components/data-table-v8/virtual/data-table-virtualized.svelte +0 -146
- package/dist/components/data-table-v8/virtual/data-table-virtualized.svelte.d.ts +0 -41
- package/dist/components/data-table-v8/virtual/index.d.ts +0 -3
- package/dist/components/data-table-v8/virtual/index.js +0 -2
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
<script lang="ts" generics="T extends RowData">
|
|
2
|
-
import type { Column, Row, RowData } from '@tanstack/table-core';
|
|
3
|
-
import { useLocaleContext } from '@ark-ui/svelte/locale';
|
|
4
|
-
import { cn } from 'tailwind-variants';
|
|
5
|
-
import type { DataTableInstance } from './data-table-utils';
|
|
6
|
-
import {
|
|
7
|
-
alignClass,
|
|
8
|
-
formatColumnFooter,
|
|
9
|
-
getColumnMeta,
|
|
10
|
-
getPinningStyle,
|
|
11
|
-
justifyClass,
|
|
12
|
-
joinStyles,
|
|
13
|
-
virtualColumnSizeStyle,
|
|
14
|
-
virtualGrowColumnSizeStyle,
|
|
15
|
-
virtualSelectionColumnSizeStyle
|
|
16
|
-
} from './data-table-utils';
|
|
17
|
-
|
|
18
|
-
type Props = {
|
|
19
|
-
table: DataTableInstance<T>;
|
|
20
|
-
visibleLeafColumns: Column<T, unknown>[];
|
|
21
|
-
rows: Row<T>[];
|
|
22
|
-
isRowSelectionEnabled: boolean;
|
|
23
|
-
hasGrowColumn: boolean;
|
|
24
|
-
isVirtual?: boolean;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
let {
|
|
28
|
-
table,
|
|
29
|
-
visibleLeafColumns,
|
|
30
|
-
rows,
|
|
31
|
-
isRowSelectionEnabled,
|
|
32
|
-
hasGrowColumn,
|
|
33
|
-
isVirtual = false
|
|
34
|
-
}: Props = $props();
|
|
35
|
-
|
|
36
|
-
const localeCtx = useLocaleContext();
|
|
37
|
-
const locale = $derived(localeCtx().locale);
|
|
38
|
-
|
|
39
|
-
function footCellStyle(column: Column<T, unknown>) {
|
|
40
|
-
const meta = getColumnMeta(column.columnDef);
|
|
41
|
-
if (!isVirtual) return getPinningStyle(column, table, true, isRowSelectionEnabled);
|
|
42
|
-
return joinStyles(
|
|
43
|
-
meta?.grow ? virtualGrowColumnSizeStyle() : virtualColumnSizeStyle(column.getSize()),
|
|
44
|
-
getPinningStyle(column, table, true, isRowSelectionEnabled)
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function selectionCellStyle() {
|
|
49
|
-
return isVirtual
|
|
50
|
-
? joinStyles(
|
|
51
|
-
virtualSelectionColumnSizeStyle(),
|
|
52
|
-
'min-width: 40px',
|
|
53
|
-
'max-width: 40px',
|
|
54
|
-
'position: sticky',
|
|
55
|
-
'left: 0',
|
|
56
|
-
'z-index: 15'
|
|
57
|
-
)
|
|
58
|
-
: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
|
|
59
|
-
}
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<tfoot
|
|
63
|
-
class="sticky bottom-0 z-20 bg-surface-2 text-ink-dim"
|
|
64
|
-
style={isVirtual ? 'display: grid; position: sticky; bottom: 0; z-index: 20' : undefined}
|
|
65
|
-
>
|
|
66
|
-
<tr class="h-9" style={isVirtual ? 'display: flex; width: 100%' : undefined}>
|
|
67
|
-
{#if isRowSelectionEnabled}
|
|
68
|
-
<td
|
|
69
|
-
class={cn(
|
|
70
|
-
'h-9 border-t border-surface-3 bg-surface-2 px-3 py-0',
|
|
71
|
-
isVirtual && 'flex items-center'
|
|
72
|
-
)}
|
|
73
|
-
style={selectionCellStyle()}
|
|
74
|
-
></td>
|
|
75
|
-
{/if}
|
|
76
|
-
{#each visibleLeafColumns as column (column.id)}
|
|
77
|
-
{@const meta = getColumnMeta(column.columnDef)}
|
|
78
|
-
{@const values = rows.map((row) => row.getValue(column.id))}
|
|
79
|
-
{@const footerText = formatColumnFooter(meta ?? {}, values, locale)}
|
|
80
|
-
<td
|
|
81
|
-
class={cn(
|
|
82
|
-
'h-9 truncate border-t border-surface-3 bg-surface-2 px-3 py-0 align-middle text-sm font-medium',
|
|
83
|
-
alignClass(meta?.align),
|
|
84
|
-
isVirtual && 'flex items-center',
|
|
85
|
-
isVirtual && justifyClass(meta?.align)
|
|
86
|
-
)}
|
|
87
|
-
style={footCellStyle(column)}
|
|
88
|
-
>
|
|
89
|
-
{footerText ?? ''}
|
|
90
|
-
</td>
|
|
91
|
-
{/each}
|
|
92
|
-
{#if !isVirtual && !hasGrowColumn}
|
|
93
|
-
<td aria-hidden="true" class="h-9 border-t border-surface-3 bg-surface-2 p-0"></td>
|
|
94
|
-
{/if}
|
|
95
|
-
</tr>
|
|
96
|
-
</tfoot>
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { Column, Row, RowData } from '@tanstack/table-core';
|
|
2
|
-
import type { DataTableInstance } from './data-table-utils';
|
|
3
|
-
declare function $$render<T extends RowData>(): {
|
|
4
|
-
props: {
|
|
5
|
-
table: DataTableInstance<T>;
|
|
6
|
-
visibleLeafColumns: Column<T, unknown>[];
|
|
7
|
-
rows: Row<T>[];
|
|
8
|
-
isRowSelectionEnabled: boolean;
|
|
9
|
-
hasGrowColumn: boolean;
|
|
10
|
-
isVirtual?: boolean;
|
|
11
|
-
};
|
|
12
|
-
exports: {};
|
|
13
|
-
bindings: "";
|
|
14
|
-
slots: {};
|
|
15
|
-
events: {};
|
|
16
|
-
};
|
|
17
|
-
declare class __sveltets_Render<T extends RowData> {
|
|
18
|
-
props(): ReturnType<typeof $$render<T>>['props'];
|
|
19
|
-
events(): ReturnType<typeof $$render<T>>['events'];
|
|
20
|
-
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
21
|
-
bindings(): "";
|
|
22
|
-
exports(): {};
|
|
23
|
-
}
|
|
24
|
-
interface $$IsomorphicComponent {
|
|
25
|
-
new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
26
|
-
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
27
|
-
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
28
|
-
<T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
29
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
30
|
-
}
|
|
31
|
-
declare const DataTableFoot: $$IsomorphicComponent;
|
|
32
|
-
type DataTableFoot<T extends RowData> = InstanceType<typeof DataTableFoot<T>>;
|
|
33
|
-
export default DataTableFoot;
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
<script lang="ts" generics="T extends RowData">
|
|
2
|
-
import type { HeaderGroup, RowData } from '@tanstack/table-core';
|
|
3
|
-
import { cn } from 'tailwind-variants';
|
|
4
|
-
import { PhCaretDown, PhCaretUp } from '../../icons';
|
|
5
|
-
import type { DataTableInstance } from './data-table-utils';
|
|
6
|
-
import FlexRender from './flex-render.svelte';
|
|
7
|
-
import {
|
|
8
|
-
alignClass,
|
|
9
|
-
getColumnMeta,
|
|
10
|
-
getHeaderAriaSort,
|
|
11
|
-
getHeaderSortDirection,
|
|
12
|
-
getHeaderSortLabel,
|
|
13
|
-
getPinningStyle,
|
|
14
|
-
joinStyles,
|
|
15
|
-
justifyClass,
|
|
16
|
-
resizeHandleClass,
|
|
17
|
-
resizeHandleStyle,
|
|
18
|
-
sortButtonDirectionClass,
|
|
19
|
-
virtualColumnSizeStyle,
|
|
20
|
-
virtualGroupWithGrowSizeStyle,
|
|
21
|
-
virtualGrowColumnSizeStyle,
|
|
22
|
-
virtualSelectionColumnSizeStyle
|
|
23
|
-
} from './data-table-utils';
|
|
24
|
-
|
|
25
|
-
type Props = {
|
|
26
|
-
table: DataTableInstance<T>;
|
|
27
|
-
headerGroups: HeaderGroup<T>[];
|
|
28
|
-
headerGroupCount: number;
|
|
29
|
-
isRowSelectionEnabled: boolean;
|
|
30
|
-
isMultiRowSelectionEnabled: boolean;
|
|
31
|
-
allRowsSelectionState: boolean | 'indeterminate';
|
|
32
|
-
isVirtual?: boolean;
|
|
33
|
-
hasGrowColumn?: boolean;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
let {
|
|
37
|
-
table,
|
|
38
|
-
headerGroups,
|
|
39
|
-
headerGroupCount,
|
|
40
|
-
isRowSelectionEnabled,
|
|
41
|
-
isMultiRowSelectionEnabled,
|
|
42
|
-
allRowsSelectionState,
|
|
43
|
-
isVirtual = false,
|
|
44
|
-
hasGrowColumn = false
|
|
45
|
-
}: Props = $props();
|
|
46
|
-
|
|
47
|
-
type Header = HeaderGroup<T>['headers'][number];
|
|
48
|
-
|
|
49
|
-
function findGrowLeafHeader(header: Header): Header | undefined {
|
|
50
|
-
if (header.subHeaders.length === 0) {
|
|
51
|
-
return getColumnMeta(header.column.columnDef)?.grow ? header : undefined;
|
|
52
|
-
}
|
|
53
|
-
for (const sub of header.subHeaders) {
|
|
54
|
-
const found = findGrowLeafHeader(sub);
|
|
55
|
-
if (found) return found;
|
|
56
|
-
}
|
|
57
|
-
return undefined;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function headerCellStyle(header: Header) {
|
|
61
|
-
const canPinHeader = header.subHeaders.length === 0;
|
|
62
|
-
|
|
63
|
-
let virtualSizeStyle: string | undefined;
|
|
64
|
-
if (isVirtual) {
|
|
65
|
-
const isGrowLeaf = canPinHeader && getColumnMeta(header.column.columnDef)?.grow;
|
|
66
|
-
if (isGrowLeaf) {
|
|
67
|
-
virtualSizeStyle = virtualGrowColumnSizeStyle();
|
|
68
|
-
} else {
|
|
69
|
-
const growLeaf = findGrowLeafHeader(header);
|
|
70
|
-
virtualSizeStyle = growLeaf
|
|
71
|
-
? virtualGroupWithGrowSizeStyle(header.getSize() - growLeaf.getSize())
|
|
72
|
-
: virtualColumnSizeStyle(header.getSize());
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
return joinStyles(
|
|
77
|
-
virtualSizeStyle,
|
|
78
|
-
canPinHeader ? getPinningStyle(header.column, table, true, isRowSelectionEnabled) : undefined
|
|
79
|
-
);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
function selectionHeaderStyle() {
|
|
83
|
-
return isVirtual
|
|
84
|
-
? joinStyles(
|
|
85
|
-
virtualSelectionColumnSizeStyle(),
|
|
86
|
-
'min-width: 40px',
|
|
87
|
-
'max-width: 40px',
|
|
88
|
-
'position: sticky',
|
|
89
|
-
'left: 0',
|
|
90
|
-
'z-index: 30'
|
|
91
|
-
)
|
|
92
|
-
: 'width: 40px; min-width: 40px; max-width: 40px; position: sticky; left: 0; z-index: 15';
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function headerRowStyle() {
|
|
96
|
-
if (!isVirtual) return undefined;
|
|
97
|
-
return joinStyles('display: flex', 'width: 100%');
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
function shouldRenderSelectionCheckbox(headerGroupIndex: number) {
|
|
101
|
-
if (!isMultiRowSelectionEnabled) return false;
|
|
102
|
-
return headerGroupIndex === headerGroupCount - 1;
|
|
103
|
-
}
|
|
104
|
-
</script>
|
|
105
|
-
|
|
106
|
-
<thead
|
|
107
|
-
class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim"
|
|
108
|
-
style={isVirtual ? 'display: grid; position: sticky; top: 0; z-index: 20' : undefined}
|
|
109
|
-
>
|
|
110
|
-
{#each headerGroups as headerGroup, headerGroupIndex (`${headerGroup.id}:${headerGroup.headers.map((header) => `${header.id}:${header.colSpan}`).join('|')}`)}
|
|
111
|
-
{@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
|
|
112
|
-
<tr class="h-9" style={headerRowStyle()}>
|
|
113
|
-
{#if isRowSelectionEnabled}
|
|
114
|
-
<th
|
|
115
|
-
class={cn(
|
|
116
|
-
'h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 text-center align-middle leading-5 font-medium',
|
|
117
|
-
isVirtual && 'items-center justify-center'
|
|
118
|
-
)}
|
|
119
|
-
style={selectionHeaderStyle()}
|
|
120
|
-
>
|
|
121
|
-
{#if shouldRenderSelectionCheckbox(headerGroupIndex)}
|
|
122
|
-
<input
|
|
123
|
-
type="checkbox"
|
|
124
|
-
aria-label="Select all rows"
|
|
125
|
-
class="table-checkbox mx-auto block size-4"
|
|
126
|
-
checked={allRowsSelectionState === true}
|
|
127
|
-
indeterminate={allRowsSelectionState === 'indeterminate'}
|
|
128
|
-
onchange={(e) => table.toggleAllRowsSelected(e.currentTarget.checked)}
|
|
129
|
-
/>
|
|
130
|
-
{/if}
|
|
131
|
-
</th>
|
|
132
|
-
{/if}
|
|
133
|
-
{#each visibleHeaders as header, headerIndex (`${header.id}:${header.colSpan}:${header.column.getIsVisible()}`)}
|
|
134
|
-
{@const columnDef = getColumnMeta(header.column.columnDef)}
|
|
135
|
-
{@const sortDirection = getHeaderSortDirection(header)}
|
|
136
|
-
<th
|
|
137
|
-
class={cn(
|
|
138
|
-
'relative h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
|
|
139
|
-
isVirtual && 'items-center',
|
|
140
|
-
isVirtual && justifyClass(columnDef?.align),
|
|
141
|
-
alignClass(columnDef?.align)
|
|
142
|
-
)}
|
|
143
|
-
colspan={header.colSpan}
|
|
144
|
-
aria-sort={header.column.getCanSort() ? getHeaderAriaSort(sortDirection) : undefined}
|
|
145
|
-
style={headerCellStyle(header)}
|
|
146
|
-
>
|
|
147
|
-
{#if !header.isPlaceholder}
|
|
148
|
-
{#if header.column.getCanSort()}
|
|
149
|
-
<button
|
|
150
|
-
type="button"
|
|
151
|
-
class={cn(
|
|
152
|
-
'inline-flex max-w-full appearance-none items-center gap-1 rounded-sm border-0 bg-transparent p-0 align-middle text-sm leading-5 text-inherit outline-none hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring',
|
|
153
|
-
justifyClass(columnDef?.align),
|
|
154
|
-
sortButtonDirectionClass(columnDef?.align)
|
|
155
|
-
)}
|
|
156
|
-
aria-label={`${getHeaderSortLabel(sortDirection)}. Toggle sorting.`}
|
|
157
|
-
onclick={header.column.getToggleSortingHandler()}
|
|
158
|
-
>
|
|
159
|
-
<span class="min-w-0 truncate">
|
|
160
|
-
<FlexRender
|
|
161
|
-
content={header.column.columnDef.header}
|
|
162
|
-
context={header.getContext()}
|
|
163
|
-
/>
|
|
164
|
-
</span>
|
|
165
|
-
<span
|
|
166
|
-
class="inline-flex size-3.5 shrink-0 items-center justify-center text-ink-dim"
|
|
167
|
-
>
|
|
168
|
-
{#if sortDirection === 'asc'}
|
|
169
|
-
<PhCaretUp class="size-3.5" />
|
|
170
|
-
{:else if sortDirection === 'desc'}
|
|
171
|
-
<PhCaretDown class="size-3.5" />
|
|
172
|
-
{/if}
|
|
173
|
-
</span>
|
|
174
|
-
</button>
|
|
175
|
-
{:else}
|
|
176
|
-
<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
|
|
177
|
-
{/if}
|
|
178
|
-
{/if}
|
|
179
|
-
{#if header.column.getCanResize()}
|
|
180
|
-
<div
|
|
181
|
-
aria-hidden="true"
|
|
182
|
-
class={resizeHandleClass(headerIndex, visibleHeaders.length)}
|
|
183
|
-
style={resizeHandleStyle(table, header)}
|
|
184
|
-
ondblclick={() => header.column.resetSize()}
|
|
185
|
-
onmousedown={header.getResizeHandler()}
|
|
186
|
-
ontouchstart={header.getResizeHandler()}
|
|
187
|
-
></div>
|
|
188
|
-
{/if}
|
|
189
|
-
</th>
|
|
190
|
-
{/each}
|
|
191
|
-
{#if !isVirtual && !hasGrowColumn}
|
|
192
|
-
<th aria-hidden="true" class="h-9 border-b border-surface-3 bg-surface-2 p-0"></th>
|
|
193
|
-
{/if}
|
|
194
|
-
</tr>
|
|
195
|
-
{/each}
|
|
196
|
-
</thead>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { HeaderGroup, RowData } from '@tanstack/table-core';
|
|
2
|
-
import type { DataTableInstance } from './data-table-utils';
|
|
3
|
-
declare function $$render<T extends RowData>(): {
|
|
4
|
-
props: {
|
|
5
|
-
table: DataTableInstance<T>;
|
|
6
|
-
headerGroups: HeaderGroup<T>[];
|
|
7
|
-
headerGroupCount: number;
|
|
8
|
-
isRowSelectionEnabled: boolean;
|
|
9
|
-
isMultiRowSelectionEnabled: boolean;
|
|
10
|
-
allRowsSelectionState: boolean | "indeterminate";
|
|
11
|
-
isVirtual?: boolean;
|
|
12
|
-
hasGrowColumn?: boolean;
|
|
13
|
-
};
|
|
14
|
-
exports: {};
|
|
15
|
-
bindings: "";
|
|
16
|
-
slots: {};
|
|
17
|
-
events: {};
|
|
18
|
-
};
|
|
19
|
-
declare class __sveltets_Render<T extends RowData> {
|
|
20
|
-
props(): ReturnType<typeof $$render<T>>['props'];
|
|
21
|
-
events(): ReturnType<typeof $$render<T>>['events'];
|
|
22
|
-
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
23
|
-
bindings(): "";
|
|
24
|
-
exports(): {};
|
|
25
|
-
}
|
|
26
|
-
interface $$IsomorphicComponent {
|
|
27
|
-
new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
|
|
28
|
-
$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
|
|
29
|
-
} & ReturnType<__sveltets_Render<T>['exports']>;
|
|
30
|
-
<T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
|
|
31
|
-
z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
|
|
32
|
-
}
|
|
33
|
-
declare const DataTableHead: $$IsomorphicComponent;
|
|
34
|
-
type DataTableHead<T extends RowData> = InstanceType<typeof DataTableHead<T>>;
|
|
35
|
-
export default DataTableHead;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
-
import { cn, type ClassValue } from 'tailwind-variants';
|
|
5
|
-
|
|
6
|
-
type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
|
|
7
|
-
class?: ClassValue;
|
|
8
|
-
children?: Snippet;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
let { class: className, children, ...rest }: Props = $props();
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<h2 class={cn('text-lg font-semibold text-ink', className)} {...rest}>
|
|
15
|
-
{@render children?.()}
|
|
16
|
-
</h2>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
import { type ClassValue } from 'tailwind-variants';
|
|
4
|
-
type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'class'> & {
|
|
5
|
-
class?: ClassValue;
|
|
6
|
-
children?: Snippet;
|
|
7
|
-
};
|
|
8
|
-
declare const DataTableTitle: import("svelte").Component<Props, {}, "">;
|
|
9
|
-
type DataTableTitle = ReturnType<typeof DataTableTitle>;
|
|
10
|
-
export default DataTableTitle;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import type { Column, Header, Row, RowData, Table, TableState, VisibilityState } from '@tanstack/table-core';
|
|
2
|
-
import type { DataTableColumnMeta } from './types';
|
|
3
|
-
export type DataTableInstance<T extends RowData> = Table<T>;
|
|
4
|
-
export declare function getReactiveTableState<T extends RowData>(table: DataTableInstance<T>): TableState;
|
|
5
|
-
export declare function alignClass(align: DataTableColumnMeta['align']): "text-right" | "text-center" | "text-left";
|
|
6
|
-
export declare function justifyClass(align: DataTableColumnMeta['align']): "justify-end" | "justify-center" | "justify-start";
|
|
7
|
-
export declare function sortButtonDirectionClass(align: DataTableColumnMeta['align']): "flex-row-reverse" | "flex-row";
|
|
8
|
-
export declare function columnSizeStyle(size: number): string;
|
|
9
|
-
export declare function selectionColumnSizeStyle(): string;
|
|
10
|
-
export declare function virtualColumnSizeStyle(size: number): string;
|
|
11
|
-
export declare function virtualSelectionColumnSizeStyle(): string;
|
|
12
|
-
export declare function tableSizeStyle<T extends RowData>(table: DataTableInstance<T>, isRowSelectionEnabled: boolean): string;
|
|
13
|
-
export declare function virtualGrowColumnSizeStyle(): string;
|
|
14
|
-
export declare function virtualGroupWithGrowSizeStyle(fixedPortion: number): string;
|
|
15
|
-
export declare function resizeHandleStyle<T extends RowData>(table: DataTableInstance<T>, header: Header<T, unknown>): string | undefined;
|
|
16
|
-
export declare function resizeHandleClass(headerIndex: number, headerCount: number): import("tailwind-variants").CnReturn;
|
|
17
|
-
export declare function getHeaderSortDirection<T extends RowData>(header: Header<T, unknown>): false | import("@tanstack/table-core").SortDirection;
|
|
18
|
-
export declare function getHeaderSortLabel(sortDirection: false | 'asc' | 'desc'): "Sorted ascending" | "Sorted descending" | "Not sorted";
|
|
19
|
-
export declare function getHeaderAriaSort(sortDirection: false | 'asc' | 'desc'): "none" | "ascending" | "descending";
|
|
20
|
-
export declare function getAllRowsSelectionState<T extends RowData>(table: DataTableInstance<T>): boolean | 'indeterminate';
|
|
21
|
-
export declare function getRowSelectionState<T extends RowData>(table: DataTableInstance<T>, rowId: string): boolean;
|
|
22
|
-
export declare function getReactiveCells<T extends RowData>(row: Row<T>, columnVisibility: VisibilityState): import("@tanstack/table-core").Cell<T, unknown>[];
|
|
23
|
-
export declare function getSelectedRowCount<T extends RowData>(table: DataTableInstance<T>): number;
|
|
24
|
-
export declare function getBooleanCellValue(value: unknown): boolean | undefined;
|
|
25
|
-
export declare function getPinningStyle<T extends RowData>(column: Column<T, unknown>, table: DataTableInstance<T>, isHeader?: boolean, isRowSelectionEnabled?: boolean): string | undefined;
|
|
26
|
-
export declare function getUrlCellValue(value: unknown): string | undefined;
|
|
27
|
-
export declare function openUrlCell(value: string): void;
|
|
28
|
-
export declare function getColumnMeta(columnDef: {
|
|
29
|
-
meta?: unknown;
|
|
30
|
-
}): DataTableColumnMeta | undefined;
|
|
31
|
-
export declare function joinStyles(...styles: Array<string | undefined>): string;
|
|
32
|
-
export declare function formatColumnFooter(meta: DataTableColumnMeta, values: unknown[], locale: string): string | undefined;
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import { cn } from 'tailwind-variants';
|
|
2
|
-
export function getReactiveTableState(table) {
|
|
3
|
-
return table._svelteState ?? table.getState();
|
|
4
|
-
}
|
|
5
|
-
export function alignClass(align) {
|
|
6
|
-
return align === 'right' ? 'text-right' : align === 'center' ? 'text-center' : 'text-left';
|
|
7
|
-
}
|
|
8
|
-
export function justifyClass(align) {
|
|
9
|
-
return align === 'right'
|
|
10
|
-
? 'justify-end'
|
|
11
|
-
: align === 'center'
|
|
12
|
-
? 'justify-center'
|
|
13
|
-
: 'justify-start';
|
|
14
|
-
}
|
|
15
|
-
export function sortButtonDirectionClass(align) {
|
|
16
|
-
return align === 'right' ? 'flex-row-reverse' : 'flex-row';
|
|
17
|
-
}
|
|
18
|
-
export function columnSizeStyle(size) {
|
|
19
|
-
return `width: ${size}px`;
|
|
20
|
-
}
|
|
21
|
-
export function selectionColumnSizeStyle() {
|
|
22
|
-
return 'width: 40px';
|
|
23
|
-
}
|
|
24
|
-
export function virtualColumnSizeStyle(size) {
|
|
25
|
-
return `display: flex; flex: 0 0 ${size}px; width: ${size}px`;
|
|
26
|
-
}
|
|
27
|
-
export function virtualSelectionColumnSizeStyle() {
|
|
28
|
-
return 'display: flex; flex: 0 0 40px; width: 40px';
|
|
29
|
-
}
|
|
30
|
-
export function tableSizeStyle(table, isRowSelectionEnabled) {
|
|
31
|
-
return `width: max(100%, ${table.getTotalSize() + (isRowSelectionEnabled ? 40 : 0)}px)`;
|
|
32
|
-
}
|
|
33
|
-
export function virtualGrowColumnSizeStyle() {
|
|
34
|
-
return 'display: flex; flex: 1; min-width: 0';
|
|
35
|
-
}
|
|
36
|
-
export function virtualGroupWithGrowSizeStyle(fixedPortion) {
|
|
37
|
-
return `display: flex; flex: 1 0 ${fixedPortion}px; width: ${fixedPortion}px`;
|
|
38
|
-
}
|
|
39
|
-
export function resizeHandleStyle(table, header) {
|
|
40
|
-
if (table.options.columnResizeMode !== 'onEnd')
|
|
41
|
-
return undefined;
|
|
42
|
-
const deltaOffset = table.getState().columnSizingInfo.deltaOffset;
|
|
43
|
-
if (!header.column.getIsResizing() || deltaOffset === null)
|
|
44
|
-
return undefined;
|
|
45
|
-
return `transform: translateX(${deltaOffset}px)`;
|
|
46
|
-
}
|
|
47
|
-
export function resizeHandleClass(headerIndex, headerCount) {
|
|
48
|
-
return cn('absolute top-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none before:h-4 before:w-px before:bg-border before:content-[""]', headerIndex === headerCount - 1 ? 'right-0' : '-right-1');
|
|
49
|
-
}
|
|
50
|
-
export function getHeaderSortDirection(header) {
|
|
51
|
-
return header.column.getIsSorted();
|
|
52
|
-
}
|
|
53
|
-
export function getHeaderSortLabel(sortDirection) {
|
|
54
|
-
if (sortDirection === 'asc')
|
|
55
|
-
return 'Sorted ascending';
|
|
56
|
-
if (sortDirection === 'desc')
|
|
57
|
-
return 'Sorted descending';
|
|
58
|
-
return 'Not sorted';
|
|
59
|
-
}
|
|
60
|
-
export function getHeaderAriaSort(sortDirection) {
|
|
61
|
-
if (sortDirection === 'asc')
|
|
62
|
-
return 'ascending';
|
|
63
|
-
if (sortDirection === 'desc')
|
|
64
|
-
return 'descending';
|
|
65
|
-
return 'none';
|
|
66
|
-
}
|
|
67
|
-
export function getAllRowsSelectionState(table) {
|
|
68
|
-
const allRowsSelected = table.getIsAllRowsSelected();
|
|
69
|
-
const someRowsSelected = table.getIsSomeRowsSelected();
|
|
70
|
-
return allRowsSelected ? true : someRowsSelected ? 'indeterminate' : false;
|
|
71
|
-
}
|
|
72
|
-
export function getRowSelectionState(table, rowId) {
|
|
73
|
-
return table.getRow(rowId).getIsSelected();
|
|
74
|
-
}
|
|
75
|
-
export function getReactiveCells(row, columnVisibility) {
|
|
76
|
-
void columnVisibility;
|
|
77
|
-
return [
|
|
78
|
-
...row.getLeftVisibleCells(),
|
|
79
|
-
...row.getCenterVisibleCells(),
|
|
80
|
-
...row.getRightVisibleCells()
|
|
81
|
-
];
|
|
82
|
-
}
|
|
83
|
-
export function getSelectedRowCount(table) {
|
|
84
|
-
return table.getSelectedRowModel().rows.length;
|
|
85
|
-
}
|
|
86
|
-
export function getBooleanCellValue(value) {
|
|
87
|
-
if (value === true)
|
|
88
|
-
return true;
|
|
89
|
-
if (value === false)
|
|
90
|
-
return false;
|
|
91
|
-
return undefined;
|
|
92
|
-
}
|
|
93
|
-
export function getPinningStyle(column, table, isHeader = false, isRowSelectionEnabled = false) {
|
|
94
|
-
const isPinned = column.getIsPinned();
|
|
95
|
-
if (!isPinned)
|
|
96
|
-
return undefined;
|
|
97
|
-
const zIndex = isHeader ? 15 : 1;
|
|
98
|
-
const selectionOffset = isRowSelectionEnabled ? 40 : 0;
|
|
99
|
-
if (isPinned === 'left') {
|
|
100
|
-
const left = column.getStart('left') + selectionOffset;
|
|
101
|
-
const leftCols = table.getLeftLeafColumns();
|
|
102
|
-
const isLastLeft = leftCols[leftCols.length - 1]?.id === column.id;
|
|
103
|
-
const shadow = !isHeader && isLastLeft
|
|
104
|
-
? 'box-shadow: -4px 0 4px -4px var(--compote-border) inset'
|
|
105
|
-
: undefined;
|
|
106
|
-
return ['position: sticky', `z-index: ${zIndex}`, `left: ${left}px`, shadow]
|
|
107
|
-
.filter(Boolean)
|
|
108
|
-
.join('; ');
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
const right = column.getAfter('right');
|
|
112
|
-
const rightCols = table.getRightLeafColumns();
|
|
113
|
-
const isFirstRight = rightCols[0]?.id === column.id;
|
|
114
|
-
const shadow = !isHeader && isFirstRight
|
|
115
|
-
? 'box-shadow: 4px 0 4px -4px var(--compote-border) inset'
|
|
116
|
-
: undefined;
|
|
117
|
-
return ['position: sticky', `z-index: ${zIndex}`, `right: ${right}px`, shadow]
|
|
118
|
-
.filter(Boolean)
|
|
119
|
-
.join('; ');
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
export function getUrlCellValue(value) {
|
|
123
|
-
if (typeof value !== 'string' || value.trim() === '')
|
|
124
|
-
return undefined;
|
|
125
|
-
return value;
|
|
126
|
-
}
|
|
127
|
-
export function openUrlCell(value) {
|
|
128
|
-
window.open(value, '_blank', 'noopener,noreferrer');
|
|
129
|
-
}
|
|
130
|
-
export function getColumnMeta(columnDef) {
|
|
131
|
-
return columnDef.meta;
|
|
132
|
-
}
|
|
133
|
-
export function joinStyles(...styles) {
|
|
134
|
-
return styles.filter(Boolean).join('; ');
|
|
135
|
-
}
|
|
136
|
-
const FOOTER_SUM_FORMAT_DEFAULTS = {
|
|
137
|
-
currency: { style: 'currency', currency: 'USD' },
|
|
138
|
-
percent: { style: 'percent' },
|
|
139
|
-
number: {}
|
|
140
|
-
};
|
|
141
|
-
export function formatColumnFooter(meta, values, locale) {
|
|
142
|
-
if (meta.footer) {
|
|
143
|
-
const result = meta.footer(values);
|
|
144
|
-
if (result === null || result === undefined)
|
|
145
|
-
return undefined;
|
|
146
|
-
return String(result);
|
|
147
|
-
}
|
|
148
|
-
if (meta.sum) {
|
|
149
|
-
const sum = values.reduce((acc, val) => acc + (typeof val === 'number' ? val : Number(val) || 0), 0);
|
|
150
|
-
const numDefaults = meta.type ? FOOTER_SUM_FORMAT_DEFAULTS[meta.type] : undefined;
|
|
151
|
-
if (numDefaults !== undefined) {
|
|
152
|
-
return new Intl.NumberFormat(meta.formatLocale ?? locale, {
|
|
153
|
-
...numDefaults,
|
|
154
|
-
...meta.formatOptions
|
|
155
|
-
}).format(sum);
|
|
156
|
-
}
|
|
157
|
-
return String(sum);
|
|
158
|
-
}
|
|
159
|
-
return undefined;
|
|
160
|
-
}
|