compote-ui 0.44.0 → 0.45.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-v8/data-table-virtual-rows.svelte +98 -90
- package/dist/components/dialog/alert-dialog.svelte +6 -2
- package/dist/components/dialog/dialog-root.svelte +6 -2
- package/dist/components/drawer/drawer-close-trigger.svelte +7 -2
- package/dist/components/drawer/drawer-content.svelte +69 -6
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script lang="ts" generics="T extends RowData">
|
|
2
2
|
import type { Row, RowData } from '@tanstack/table-core';
|
|
3
3
|
import { createVirtualizer } from '@tanstack/svelte-virtual';
|
|
4
|
+
import { untrack } from 'svelte';
|
|
4
5
|
import { cn } from 'tailwind-variants';
|
|
5
6
|
import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
|
|
6
7
|
import type { DataTableInstance } from './data-table-utils';
|
|
@@ -57,6 +58,13 @@
|
|
|
57
58
|
function measureRowElement(node: HTMLTableRowElement) {
|
|
58
59
|
$rowVirtualizer.measureElement(node);
|
|
59
60
|
}
|
|
61
|
+
|
|
62
|
+
$effect(() => {
|
|
63
|
+
const count = rows.length;
|
|
64
|
+
untrack(() => {
|
|
65
|
+
$rowVirtualizer.setOptions({ ...$rowVirtualizer.options, count });
|
|
66
|
+
});
|
|
67
|
+
});
|
|
60
68
|
</script>
|
|
61
69
|
|
|
62
70
|
<tbody style="display: grid; height: {$rowVirtualizer.getTotalSize()}px; position: relative">
|
|
@@ -70,98 +78,98 @@
|
|
|
70
78
|
{#each $rowVirtualizer.getVirtualItems() as virtualRow (virtualRow.index)}
|
|
71
79
|
{@const row = rows[virtualRow.index]}
|
|
72
80
|
{#if row}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
81
|
+
{@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
|
|
82
|
+
<tr
|
|
83
|
+
data-index={virtualRow.index}
|
|
84
|
+
use:measureRowElement
|
|
85
|
+
class={cn(
|
|
86
|
+
'group/row border-b border-surface-2 last:border-b-0',
|
|
87
|
+
'[--row-bg:var(--compote-surface-1)]',
|
|
88
|
+
'hover:bg-well/60 hover:[--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]',
|
|
89
|
+
rowSelected &&
|
|
90
|
+
'bg-well/60 [--row-bg:color-mix(in_srgb,var(--compote-well)_60%,var(--compote-surface-1))]'
|
|
91
|
+
)}
|
|
92
|
+
style="display: flex; position: absolute; transform: translateY({virtualRow.start}px); width: 100%"
|
|
93
|
+
onclick={(event) => onRowClick?.({ row: row.original, event })}
|
|
94
|
+
ondblclick={(event) => onRowDoubleClick?.({ row: row.original, event })}
|
|
95
|
+
>
|
|
96
|
+
{#if isRowSelectionEnabled}
|
|
97
|
+
<td
|
|
98
|
+
class="items-center justify-center bg-(--row-bg) px-3 py-2 text-center align-middle"
|
|
99
|
+
style={joinStyles(
|
|
100
|
+
virtualSelectionColumnSizeStyle(),
|
|
101
|
+
'position: sticky; left: 0; z-index: 1'
|
|
102
|
+
)}
|
|
103
|
+
>
|
|
104
|
+
<input
|
|
105
|
+
type="checkbox"
|
|
106
|
+
aria-label="Select row"
|
|
107
|
+
class="table-checkbox mx-auto block size-4"
|
|
108
|
+
checked={rowSelected}
|
|
109
|
+
disabled={!row.getCanSelect()}
|
|
110
|
+
onchange={(e) => row.toggleSelected(e.currentTarget.checked)}
|
|
111
|
+
/>
|
|
112
|
+
</td>
|
|
113
|
+
{/if}
|
|
114
|
+
{#each getReactiveCells(row, getReactiveTableState(table).columnVisibility) as cell (cell.id)}
|
|
115
|
+
{@const columnDef = getColumnMeta(cell.column.columnDef)}
|
|
116
|
+
<td
|
|
117
|
+
class={cn(
|
|
118
|
+
'items-center truncate px-3 py-2',
|
|
119
|
+
alignClass(columnDef?.align),
|
|
120
|
+
justifyClass(columnDef?.align),
|
|
121
|
+
cell.column.getIsPinned() && 'bg-(--row-bg)'
|
|
122
|
+
)}
|
|
123
|
+
style={joinStyles(
|
|
124
|
+
getColumnMeta(cell.column.columnDef)?.grow
|
|
125
|
+
? virtualGrowColumnSizeStyle()
|
|
126
|
+
: virtualColumnSizeStyle(cell.column.getSize()),
|
|
127
|
+
getPinningStyle(cell.column, table, false, isRowSelectionEnabled)
|
|
128
|
+
)}
|
|
129
|
+
>
|
|
130
|
+
{#if columnDef?.type === 'boolean'}
|
|
131
|
+
{@const value = getBooleanCellValue(cell.getValue())}
|
|
132
|
+
{#if value === true}
|
|
133
|
+
<span
|
|
134
|
+
class="inline-flex size-5 items-center justify-center text-success"
|
|
135
|
+
role="img"
|
|
136
|
+
aria-label="Yes"
|
|
137
|
+
>
|
|
138
|
+
<PhCheck class="size-4" />
|
|
139
|
+
</span>
|
|
140
|
+
{:else if value === false}
|
|
141
|
+
<span
|
|
142
|
+
class="inline-flex size-5 items-center justify-center text-danger"
|
|
143
|
+
role="img"
|
|
144
|
+
aria-label="No"
|
|
145
|
+
>
|
|
146
|
+
<PhX class="size-4" />
|
|
147
|
+
</span>
|
|
148
|
+
{:else}
|
|
149
|
+
-
|
|
150
|
+
{/if}
|
|
151
|
+
{:else if columnDef?.type === 'url'}
|
|
152
|
+
{@const value = getUrlCellValue(cell.getValue())}
|
|
153
|
+
{#if value}
|
|
154
|
+
<button
|
|
155
|
+
type="button"
|
|
156
|
+
class={cn(
|
|
157
|
+
'inline-flex max-w-full appearance-none items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 align-middle leading-5 font-medium text-ink underline decoration-border decoration-dotted underline-offset-4 outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
|
|
158
|
+
justifyClass(columnDef.align)
|
|
159
|
+
)}
|
|
160
|
+
onclick={() => openUrlCell(value)}
|
|
161
|
+
>
|
|
162
|
+
<PhArrowSquareOut class="size-3.5 shrink-0" />
|
|
163
|
+
</button>
|
|
164
|
+
{:else}
|
|
165
|
+
-
|
|
166
|
+
{/if}
|
|
156
167
|
{:else}
|
|
157
|
-
|
|
168
|
+
<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
|
|
158
169
|
{/if}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
</td>
|
|
163
|
-
{/each}
|
|
164
|
-
</tr>
|
|
170
|
+
</td>
|
|
171
|
+
{/each}
|
|
172
|
+
</tr>
|
|
165
173
|
{/if}
|
|
166
174
|
{/each}
|
|
167
175
|
{/if}
|
|
@@ -28,9 +28,13 @@
|
|
|
28
28
|
<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
|
|
29
29
|
<Portal>
|
|
30
30
|
<Dialog.Backdrop
|
|
31
|
-
class="fixed inset-0
|
|
31
|
+
class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
|
|
32
|
+
style="z-index: calc(50 + var(--layer-index, 0))"
|
|
32
33
|
/>
|
|
33
|
-
<Dialog.Positioner
|
|
34
|
+
<Dialog.Positioner
|
|
35
|
+
class="fixed inset-0 flex items-center justify-center"
|
|
36
|
+
style="z-index: calc(50 + var(--layer-index, 0))"
|
|
37
|
+
>
|
|
34
38
|
<Dialog.Content
|
|
35
39
|
class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
|
|
36
40
|
>
|
|
@@ -17,9 +17,13 @@
|
|
|
17
17
|
<Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
|
|
18
18
|
<Portal>
|
|
19
19
|
<Dialog.Backdrop
|
|
20
|
-
class="fixed inset-0
|
|
20
|
+
class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
|
|
21
|
+
style="z-index: calc(50 + var(--layer-index, 0))"
|
|
21
22
|
/>
|
|
22
|
-
<Dialog.Positioner
|
|
23
|
+
<Dialog.Positioner
|
|
24
|
+
class="fixed inset-0 flex items-center justify-center p-4"
|
|
25
|
+
style="z-index: calc(50 + var(--layer-index, 0))"
|
|
26
|
+
>
|
|
23
27
|
<Dialog.Content
|
|
24
28
|
class={cn(
|
|
25
29
|
'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { Drawer } from '@ark-ui/svelte/drawer';
|
|
3
3
|
import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
|
|
4
4
|
import type { ClassValue } from 'svelte/elements';
|
|
5
|
+
import PhX from '../../icons/PhX.svelte';
|
|
5
6
|
|
|
6
7
|
interface Props extends DrawerCloseTriggerBaseProps {
|
|
7
8
|
class?: ClassValue;
|
|
@@ -13,7 +14,11 @@
|
|
|
13
14
|
<Drawer.CloseTrigger
|
|
14
15
|
{...rest}
|
|
15
16
|
class={className ??
|
|
16
|
-
'absolute top-
|
|
17
|
+
'absolute top-4 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-dim hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-[-1px]'}
|
|
17
18
|
>
|
|
18
|
-
{
|
|
19
|
+
{#if children}
|
|
20
|
+
{@render children()}
|
|
21
|
+
{:else}
|
|
22
|
+
<PhX />
|
|
23
|
+
{/if}
|
|
19
24
|
</Drawer.CloseTrigger>
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
<Drawer.Content
|
|
15
15
|
{...rest}
|
|
16
16
|
class={cn(
|
|
17
|
-
'relative flex h-full max-h-[96svh] w-full flex-col rounded-t-
|
|
18
|
-
'data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:rounded-r-
|
|
19
|
-
'data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:rounded-l-
|
|
20
|
-
'data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:rounded-b-
|
|
17
|
+
'relative flex h-full max-h-[96svh] w-full flex-col rounded-t-xl bg-surface-1 px-5 shadow-xl outline-none',
|
|
18
|
+
'data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:max-w-100 data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:pr-10',
|
|
19
|
+
'data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:max-w-100 data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:pl-10',
|
|
20
|
+
'data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:rounded-b-xl',
|
|
21
21
|
className
|
|
22
22
|
)}
|
|
23
23
|
>
|
|
@@ -25,15 +25,78 @@
|
|
|
25
25
|
</Drawer.Content>
|
|
26
26
|
|
|
27
27
|
<style>
|
|
28
|
-
/*
|
|
28
|
+
/* Side drawers: grabber becomes an absolutely-positioned vertical strip on the open edge */
|
|
29
|
+
:global(
|
|
30
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
|
|
31
|
+
[data-scope='drawer'][data-part='grabber'],
|
|
32
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
|
|
33
|
+
[data-scope='drawer'][data-part='grabber']
|
|
34
|
+
) {
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 0;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
width: auto;
|
|
39
|
+
height: 100%;
|
|
40
|
+
padding: 0 0.75rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:global(
|
|
44
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
|
|
45
|
+
[data-scope='drawer'][data-part='grabber']
|
|
46
|
+
) {
|
|
47
|
+
right: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:global(
|
|
51
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
|
|
52
|
+
[data-scope='drawer'][data-part='grabber']
|
|
53
|
+
) {
|
|
54
|
+
left: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:global(
|
|
58
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
|
|
59
|
+
[data-scope='drawer'][data-part='grabber-indicator'],
|
|
60
|
+
[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
|
|
61
|
+
[data-scope='drawer'][data-part='grabber-indicator']
|
|
62
|
+
) {
|
|
63
|
+
width: 4px;
|
|
64
|
+
height: 2.5rem;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Bleed pseudo-element so background extends past rounded corners on the open edge */
|
|
29
68
|
:global([data-scope='drawer'][data-part='content'])::after {
|
|
30
69
|
content: '';
|
|
31
70
|
position: absolute;
|
|
32
|
-
bottom: -50px;
|
|
33
71
|
left: 0;
|
|
34
72
|
right: 0;
|
|
73
|
+
top: 100%;
|
|
35
74
|
height: 50px;
|
|
36
75
|
background: inherit;
|
|
76
|
+
pointer-events: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:global([data-scope='drawer'][data-part='content'][data-swipe-direction='up'])::after {
|
|
80
|
+
top: auto;
|
|
81
|
+
bottom: 100%;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:global([data-scope='drawer'][data-part='content'][data-swipe-direction='left'])::after {
|
|
85
|
+
top: 0;
|
|
86
|
+
bottom: 0;
|
|
87
|
+
left: auto;
|
|
88
|
+
right: 100%;
|
|
89
|
+
width: 50px;
|
|
90
|
+
height: auto;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:global([data-scope='drawer'][data-part='content'][data-swipe-direction='right'])::after {
|
|
94
|
+
top: 0;
|
|
95
|
+
bottom: 0;
|
|
96
|
+
right: auto;
|
|
97
|
+
left: 100%;
|
|
98
|
+
width: 50px;
|
|
99
|
+
height: auto;
|
|
37
100
|
}
|
|
38
101
|
|
|
39
102
|
/* Slide animations for bottom drawer (default) */
|