steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 01:22:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
vcoppe
2024-05-22 16:05:31 +02:00
parent 94bfd791b7
commit f202b6c196
19 changed files with 553 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
View File

@@ -14,6 +14,7 @@
setContext('collapsible-tree-side', side);
setContext('collapsible-tree-margin', margin);
setContext('collapsible-tree-nohover', nohover);
setContext('collapsible-tree-parent-id', 'root');
</script>
<slot />

18
website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
View File

@@ -2,26 +2,30 @@
import * as Collapsible from '$lib/components/ui/collapsible';
import { Button } from '$lib/components/ui/button';
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
import { getContext } from 'svelte';
import { getContext, setContext } from 'svelte';
import type { Writable } from 'svelte/store';
export let id: string;
export let id: string | number;
let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
let side = getContext<'left' | 'right'>('collapsible-tree-side');
let margin = getContext<number>('collapsible-tree-margin');
let nohover = getContext<boolean>('collapsible-tree-nohover');
let parentId = getContext<string>('collapsible-tree-parent-id');
let fullId = `${parentId}.${id}`;
setContext('collapsible-tree-parent-id', fullId);
open.update((value) => {
if (!value.hasOwnProperty(id)) {
value[id] = defaultState === 'open';
if (!value.hasOwnProperty(fullId)) {
value[fullId] = defaultState === 'open';
}
return value;
});
</script>
<Collapsible.Root bind:open={$open[id]} class={$$props.class ?? ''}>
<Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
<Collapsible.Trigger class="w-full">
<Button
variant="ghost"
@@ -30,7 +34,7 @@
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
>
{#if side === 'left'}
{#if $open[id]}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronRight size="16" class="shrink-0" />
@@ -38,7 +42,7 @@
{/if}
<slot name="trigger" />
{#if side === 'right'}
{#if $open[id]}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronLeft size="16" class="shrink-0" />