compote-ui 0.21.0 → 0.21.2
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.
|
@@ -45,19 +45,17 @@
|
|
|
45
45
|
);
|
|
46
46
|
|
|
47
47
|
const stringValue = $derived(value?.map(String) ?? []);
|
|
48
|
-
|
|
49
|
-
function handleValueChange(details: Parameters<NonNullable<Props['onValueChange']>>[0]) {
|
|
50
|
-
value = details.value as unknown as T[];
|
|
51
|
-
onValueChange?.(details);
|
|
52
|
-
}
|
|
53
48
|
</script>
|
|
54
49
|
|
|
55
50
|
<Listbox.Root
|
|
56
51
|
value={stringValue}
|
|
57
52
|
{collection}
|
|
58
|
-
onValueChange={
|
|
53
|
+
onValueChange={(details) => {
|
|
54
|
+
value = details.value as unknown as T[];
|
|
55
|
+
onValueChange?.(details);
|
|
56
|
+
}}
|
|
59
57
|
{...restProps}
|
|
60
|
-
class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden
|
|
58
|
+
class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden', className)}
|
|
61
59
|
>
|
|
62
60
|
{#if label}
|
|
63
61
|
<Listbox.Label>{label}</Listbox.Label>
|
|
@@ -69,21 +67,23 @@
|
|
|
69
67
|
class="h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring"
|
|
70
68
|
/>
|
|
71
69
|
{/if}
|
|
72
|
-
<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col
|
|
70
|
+
<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col overflow-y-auto outline-none">
|
|
73
71
|
{#if hasGroups}
|
|
74
72
|
{#each collection.group() as [type, group] (type)}
|
|
75
|
-
<Listbox.ItemGroup class="flex flex-col
|
|
76
|
-
<Listbox.ItemGroupLabel
|
|
73
|
+
<Listbox.ItemGroup class="flex flex-col">
|
|
74
|
+
<Listbox.ItemGroupLabel
|
|
75
|
+
class="px-2 py-1.5 text-xs font-semibold tracking-wide text-ink-dim uppercase"
|
|
76
|
+
>
|
|
77
77
|
{type}
|
|
78
78
|
</Listbox.ItemGroupLabel>
|
|
79
79
|
{#each group as item (item.value)}
|
|
80
80
|
<Listbox.Item
|
|
81
81
|
{item}
|
|
82
|
-
class="flex cursor-pointer items-center justify-between rounded-xs px-2
|
|
82
|
+
class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
|
|
83
83
|
>
|
|
84
84
|
<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
|
|
85
85
|
<Listbox.ItemIndicator
|
|
86
|
-
class="h-5 w-5 text-primary data-[state=
|
|
86
|
+
class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
|
|
87
87
|
>
|
|
88
88
|
<PhCheck />
|
|
89
89
|
</Listbox.ItemIndicator>
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
{#each collection.items as item (item.value)}
|
|
96
96
|
<Listbox.Item
|
|
97
97
|
{item}
|
|
98
|
-
class="flex cursor-pointer items-center justify-between rounded-xs px-2
|
|
98
|
+
class="flex min-h-8 cursor-pointer items-center justify-between gap-2 rounded-xs px-2 text-sm transition-colors outline-none select-none hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2 data-[state=checked]:text-primary"
|
|
99
99
|
>
|
|
100
100
|
<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
|
|
101
101
|
<Listbox.ItemIndicator
|
|
102
|
-
class="h-5 w-5 text-primary data-[state=
|
|
102
|
+
class="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary data-[state=unchecked]:hidden"
|
|
103
103
|
>
|
|
104
104
|
<PhCheck />
|
|
105
105
|
</Listbox.ItemIndicator>
|