compote-ui 0.60.2 → 0.60.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.
|
@@ -178,8 +178,8 @@
|
|
|
178
178
|
|
|
179
179
|
{#if activeColumns.length > 0}
|
|
180
180
|
<div class="overflow-hidden border-t border-surface-2">
|
|
181
|
-
<ScrollArea.Root
|
|
182
|
-
<ScrollArea.Viewport>
|
|
181
|
+
<ScrollArea.Root>
|
|
182
|
+
<ScrollArea.Viewport class="max-h-96">
|
|
183
183
|
<ScrollArea.Content class="flex flex-col gap-3">
|
|
184
184
|
{#each activeColumns as column (column.id)}
|
|
185
185
|
<div class="border border-surface-3 p-3">
|
|
@@ -9,12 +9,13 @@
|
|
|
9
9
|
import { setListboxContext } from './listbox-context';
|
|
10
10
|
import type { ClassValue } from 'svelte/elements';
|
|
11
11
|
|
|
12
|
-
type Props = Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value'> & {
|
|
12
|
+
type Props = Omit<ListboxRootBaseProps<ListItem<T>>, 'collection' | 'value' | 'onValueChange'> & {
|
|
13
13
|
items: ListItem<T>[];
|
|
14
14
|
value?: T[];
|
|
15
15
|
name?: string;
|
|
16
16
|
class?: ClassValue;
|
|
17
17
|
children?: Snippet;
|
|
18
|
+
onValueChange?: (details: { value: T[]; items: ListItem<T>[] }) => void;
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
let {
|
|
@@ -64,8 +65,11 @@
|
|
|
64
65
|
{collection}
|
|
65
66
|
value={stringValue}
|
|
66
67
|
onValueChange={(details) => {
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
const converted = details.value.map(
|
|
69
|
+
(v) => items.find((item) => item.value.toString() === v)?.value as T
|
|
70
|
+
);
|
|
71
|
+
value = converted;
|
|
72
|
+
onValueChange?.({ value: converted, items: details.items as ListItem<T>[] });
|
|
69
73
|
}}
|
|
70
74
|
{...restProps}
|
|
71
75
|
class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden', className)}
|
|
@@ -3,12 +3,16 @@ import type { Snippet } from 'svelte';
|
|
|
3
3
|
import type { ListItem } from '../../utils/collections';
|
|
4
4
|
import type { ClassValue } from 'svelte/elements';
|
|
5
5
|
declare function $$render<T extends string | number = string>(): {
|
|
6
|
-
props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "collection"> & {
|
|
6
|
+
props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "onValueChange" | "collection"> & {
|
|
7
7
|
items: ListItem<T>[];
|
|
8
8
|
value?: T[];
|
|
9
9
|
name?: string;
|
|
10
10
|
class?: ClassValue;
|
|
11
11
|
children?: Snippet;
|
|
12
|
+
onValueChange?: (details: {
|
|
13
|
+
value: T[];
|
|
14
|
+
items: ListItem<T>[];
|
|
15
|
+
}) => void;
|
|
12
16
|
};
|
|
13
17
|
exports: {};
|
|
14
18
|
bindings: "value";
|
|
@@ -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.4",
|
|
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
|
},
|