compote-ui 0.60.3 → 0.60.5
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.
|
@@ -28,7 +28,17 @@
|
|
|
28
28
|
const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
|
|
29
29
|
const activeCount = $derived(columnFilters.length);
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
// Filters the user has explicitly opened. Kept separate from the table's
|
|
32
|
+
// columnFilters so a filter card stays visible after its value is cleared
|
|
33
|
+
// (e.g. unchecking the last select option) until removed via the X button.
|
|
34
|
+
let manualFilterIds = $state<string[]>([]);
|
|
35
|
+
const activeFilterIds: string[] = $derived.by(() => {
|
|
36
|
+
const ids = columnFilters.map((f) => f.id);
|
|
37
|
+
for (const id of manualFilterIds) {
|
|
38
|
+
if (!ids.includes(id)) ids.push(id);
|
|
39
|
+
}
|
|
40
|
+
return ids;
|
|
41
|
+
});
|
|
32
42
|
let showColumnPicker = $state(false);
|
|
33
43
|
let columnSearchText = $state('');
|
|
34
44
|
|
|
@@ -65,13 +75,13 @@
|
|
|
65
75
|
}
|
|
66
76
|
|
|
67
77
|
function addFilter(column: Column<DataTableFeatures, T, unknown>) {
|
|
68
|
-
|
|
78
|
+
manualFilterIds = [...manualFilterIds, column.id];
|
|
69
79
|
showColumnPicker = false;
|
|
70
80
|
columnSearchText = '';
|
|
71
81
|
}
|
|
72
82
|
|
|
73
83
|
function removeFilter(column: Column<DataTableFeatures, T, unknown>) {
|
|
74
|
-
|
|
84
|
+
manualFilterIds = manualFilterIds.filter((id) => id !== column.id);
|
|
75
85
|
column.setFilterValue(undefined);
|
|
76
86
|
delete localText[column.id];
|
|
77
87
|
delete localNumMin[column.id];
|
|
@@ -89,6 +99,7 @@
|
|
|
89
99
|
localNumMin = {};
|
|
90
100
|
localNumMax = {};
|
|
91
101
|
localSelectSearch = {};
|
|
102
|
+
manualFilterIds = [];
|
|
92
103
|
showColumnPicker = false;
|
|
93
104
|
columnSearchText = '';
|
|
94
105
|
table.resetColumnFilters();
|
|
@@ -178,8 +189,8 @@
|
|
|
178
189
|
|
|
179
190
|
{#if activeColumns.length > 0}
|
|
180
191
|
<div class="overflow-hidden border-t border-surface-2">
|
|
181
|
-
<ScrollArea.Root
|
|
182
|
-
<ScrollArea.Viewport>
|
|
192
|
+
<ScrollArea.Root>
|
|
193
|
+
<ScrollArea.Viewport class="max-h-96">
|
|
183
194
|
<ScrollArea.Content class="flex flex-col gap-3">
|
|
184
195
|
{#each activeColumns as column (column.id)}
|
|
185
196
|
<div class="border border-surface-3 p-3">
|
|
@@ -65,7 +65,9 @@
|
|
|
65
65
|
{collection}
|
|
66
66
|
value={stringValue}
|
|
67
67
|
onValueChange={(details) => {
|
|
68
|
-
const converted = details.value.map(
|
|
68
|
+
const converted = details.value.map(
|
|
69
|
+
(v) => items.find((item) => item.value.toString() === v)?.value as T
|
|
70
|
+
);
|
|
69
71
|
value = converted;
|
|
70
72
|
onValueChange?.({ value: converted, items: details.items as ListItem<T>[] });
|
|
71
73
|
}}
|
|
@@ -10,6 +10,20 @@
|
|
|
10
10
|
let { class: className, children, ...rest }: Props = $props();
|
|
11
11
|
</script>
|
|
12
12
|
|
|
13
|
-
<ScrollArea.Root
|
|
13
|
+
<ScrollArea.Root
|
|
14
|
+
{...rest}
|
|
15
|
+
class={cn('relative overflow-hidden', className)}
|
|
16
|
+
onscroll={(event) => {
|
|
17
|
+
// The root is a clipping container and must never scroll — the viewport is
|
|
18
|
+
// the scroller. Browsers can still scroll an overflow:hidden ancestor to
|
|
19
|
+
// reveal a focused descendant, which pushes the viewport out of view and
|
|
20
|
+
// leaves a blank area. Snap it back to 0.
|
|
21
|
+
const el = event.currentTarget;
|
|
22
|
+
if (el.scrollTop !== 0 || el.scrollLeft !== 0) {
|
|
23
|
+
el.scrollTop = 0;
|
|
24
|
+
el.scrollLeft = 0;
|
|
25
|
+
}
|
|
26
|
+
}}
|
|
27
|
+
>
|
|
14
28
|
{@render children?.()}
|
|
15
29
|
</ScrollArea.Root>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "compote-ui",
|
|
3
|
-
"version": "0.60.
|
|
3
|
+
"version": "0.60.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev --open",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"./theme.css": "./dist/theme.css"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@tanstack/svelte-table": ">=9.0.0-beta.
|
|
46
|
+
"@tanstack/svelte-table": ">=9.0.0-beta.12 <10",
|
|
47
47
|
"@tanstack/svelte-virtual": ">=3.0.0",
|
|
48
48
|
"svelte": "^5.0.0"
|
|
49
49
|
},
|
|
@@ -54,23 +54,23 @@
|
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@eslint/js": "^10.0.1",
|
|
57
|
-
"@faker-js/faker": "^10.
|
|
57
|
+
"@faker-js/faker": "^10.5.0",
|
|
58
58
|
"@iconify-json/ph": "^1.2.2",
|
|
59
59
|
"@sveltejs/adapter-auto": "^7.0.0",
|
|
60
|
-
"@sveltejs/adapter-cloudflare": "^7.2.
|
|
61
|
-
"@sveltejs/kit": "^2.65.
|
|
60
|
+
"@sveltejs/adapter-cloudflare": "^7.2.9",
|
|
61
|
+
"@sveltejs/kit": "^2.65.2",
|
|
62
62
|
"@sveltejs/package": "^2.5.8",
|
|
63
63
|
"@sveltejs/vite-plugin-svelte": "7.1.2",
|
|
64
64
|
"@tailwindcss/vite": "^4.3.1",
|
|
65
|
-
"@tanstack/svelte-table": "^9.0.0-beta.
|
|
66
|
-
"@tanstack/svelte-virtual": "^3.13.
|
|
65
|
+
"@tanstack/svelte-table": "^9.0.0-beta.12",
|
|
66
|
+
"@tanstack/svelte-virtual": "^3.13.29",
|
|
67
67
|
"@types/node": "^22.19.18",
|
|
68
68
|
"eslint": "^10.5.0",
|
|
69
69
|
"eslint-config-prettier": "^10.1.8",
|
|
70
70
|
"eslint-plugin-svelte": "^3.19.0",
|
|
71
71
|
"globals": "^17.5.0",
|
|
72
72
|
"prettier": "^3.8.4",
|
|
73
|
-
"prettier-plugin-svelte": "^4.1.
|
|
73
|
+
"prettier-plugin-svelte": "^4.1.1",
|
|
74
74
|
"prettier-plugin-tailwindcss": "^0.8.0",
|
|
75
75
|
"publint": "^0.3.21",
|
|
76
76
|
"svelte": "^5.56.3",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"tailwindcss": "^4.3.1",
|
|
79
79
|
"tw-animate-css": "^1.4.0",
|
|
80
80
|
"typescript": "^6.0.3",
|
|
81
|
-
"typescript-eslint": "^8.61.
|
|
81
|
+
"typescript-eslint": "^8.61.1",
|
|
82
82
|
"unplugin-icons": "^23.0.1",
|
|
83
83
|
"vite": "^8.0.16"
|
|
84
84
|
},
|