compote-ui 0.41.0 → 0.41.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.
|
@@ -13,6 +13,6 @@
|
|
|
13
13
|
let { class: className, children, ...restProps }: Props = $props();
|
|
14
14
|
</script>
|
|
15
15
|
|
|
16
|
-
<Listbox.Label {...restProps} class={cn('text-sm font-medium
|
|
16
|
+
<Listbox.Label {...restProps} class={cn('text-sm font-medium', className)}>
|
|
17
17
|
{@render children?.()}
|
|
18
18
|
</Listbox.Label>
|
|
@@ -74,8 +74,7 @@
|
|
|
74
74
|
}
|
|
75
75
|
</script>
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
<!--
|
|
77
|
+
<!--
|
|
79
78
|
| Varijabla | Vrednost | Opis |
|
|
80
79
|
|---|---|---|
|
|
81
80
|
| `--tree-indent` | `0.75rem` | indent po nivou |
|
|
@@ -83,70 +82,69 @@
|
|
|
83
82
|
| `--tree-gap` | `0.5rem` | razmak između elemenata |
|
|
84
83
|
| `--tree-px` | `0.75rem` | bazni levi padding
|
|
85
84
|
-->
|
|
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
|
-
<div class="flex gap-2 p-3">
|
|
112
|
-
<TreeView.Context>
|
|
113
|
-
{#snippet render(tree)}
|
|
114
|
-
<Button
|
|
115
|
-
variant="outline"
|
|
116
|
-
size="icon-lg"
|
|
117
|
-
title="Collapse all"
|
|
118
|
-
onclick={() => tree().collapse()}
|
|
119
|
-
>
|
|
120
|
-
<PhArrowsInSimple class="size-4" />
|
|
121
|
-
</Button>
|
|
122
|
-
{/snippet}
|
|
123
|
-
</TreeView.Context>
|
|
85
|
+
<TreeView.Root
|
|
86
|
+
oncontextmenu={handleContextMenu}
|
|
87
|
+
{...restProps}
|
|
88
|
+
{collection}
|
|
89
|
+
{selectionMode}
|
|
90
|
+
{selectedValue}
|
|
91
|
+
{expandedValue}
|
|
92
|
+
{checkedValue}
|
|
93
|
+
onSelectionChange={(details) => {
|
|
94
|
+
onSelectionChange?.(details);
|
|
95
|
+
}}
|
|
96
|
+
onExpandedChange={(details) => {
|
|
97
|
+
userExpandedValue = details.expandedValue;
|
|
98
|
+
onExpandedChange?.(details);
|
|
99
|
+
}}
|
|
100
|
+
onCheckedChange={(details) => {
|
|
101
|
+
checkedValue = details.checkedValue;
|
|
102
|
+
onCheckedChange?.(details);
|
|
103
|
+
}}
|
|
104
|
+
class="flex h-full flex-col gap-3"
|
|
105
|
+
style="--tree-indent: 0rem; --tree-icon: 1rem; --tree-gap: 0.5rem; --tree-px: 0.75rem"
|
|
106
|
+
>
|
|
107
|
+
{#if label}
|
|
108
|
+
<TreeView.Label class="font-medium">{label}</TreeView.Label>
|
|
109
|
+
{/if}
|
|
124
110
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
111
|
+
<div class="flex gap-1">
|
|
112
|
+
<TreeView.Context>
|
|
113
|
+
{#snippet render(tree)}
|
|
114
|
+
<Button
|
|
115
|
+
variant="outline"
|
|
116
|
+
size="icon-lg"
|
|
117
|
+
title="Collapse all"
|
|
118
|
+
onclick={() => tree().collapse()}
|
|
119
|
+
>
|
|
120
|
+
<PhArrowsInSimple class="size-4" />
|
|
121
|
+
</Button>
|
|
122
|
+
{/snippet}
|
|
123
|
+
</TreeView.Context>
|
|
124
|
+
<div class="flex-1">
|
|
125
|
+
<Field.Root>
|
|
126
|
+
<Field.Input bind:value={searchTerm} placeholder="Search...">
|
|
127
|
+
{#snippet startIcon()}
|
|
128
|
+
<PhMagnifyingGlass class="size-4" />
|
|
129
|
+
{/snippet}
|
|
130
|
+
{#snippet endIcon()}
|
|
131
|
+
<Button variant="ghost" size="icon" onclick={() => (searchTerm = '')}>
|
|
132
|
+
<PhX />
|
|
133
|
+
</Button>
|
|
134
|
+
{/snippet}
|
|
135
|
+
</Field.Input>
|
|
136
|
+
</Field.Root>
|
|
139
137
|
</div>
|
|
138
|
+
</div>
|
|
140
139
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
</div>
|
|
140
|
+
<div class="flex-1 overflow-x-hidden overflow-y-auto">
|
|
141
|
+
<TreeView.Tree class="flex flex-col text-sm">
|
|
142
|
+
{#each collection.rootNode.children ?? [] as node, index (node.value)}
|
|
143
|
+
{@render renderNode(node as T, [index])}
|
|
144
|
+
{/each}
|
|
145
|
+
</TreeView.Tree>
|
|
146
|
+
</div>
|
|
147
|
+
</TreeView.Root>
|
|
150
148
|
|
|
151
149
|
{#snippet nodeCheckbox()}
|
|
152
150
|
<TreeView.NodeCheckbox
|
|
@@ -186,7 +184,7 @@
|
|
|
186
184
|
</TreeView.BranchText>
|
|
187
185
|
</TreeView.BranchControl>
|
|
188
186
|
<TreeView.BranchContent class="relative">
|
|
189
|
-
<TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" />
|
|
187
|
+
<!-- <TreeView.BranchIndentGuide class="absolute inset-y-0 w-px bg-border" /> -->
|
|
190
188
|
{#each node.children as child, childIndex (child.value)}
|
|
191
189
|
{@render renderNode(child as T, [...indexPath, childIndex])}
|
|
192
190
|
{/each}
|