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

use ids in each blocks for sortable

Browse Source
This commit is contained in:
vcoppe
2024-06-05 14:51:32 +02:00
parent 256996379a
commit 5f7155090b
6 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@
export let side: 'left' | 'right' = 'right';
export let margin: number = 1;
export let nohover: boolean = false;
export let slotInsideTrigger: boolean = true;
let open = writable<Record<string, boolean>>({});
@@ -15,6 +16,7 @@
setContext('collapsible-tree-margin', margin);
setContext('collapsible-tree-nohover', nohover);
setContext('collapsible-tree-parent-id', 'root');
setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
</script>
<slot />

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

@@ -12,6 +12,7 @@
let side = getContext<'left' | 'right'>('collapsible-tree-side');
let margin = getContext<number>('collapsible-tree-margin');
let nohover = getContext<boolean>('collapsible-tree-nohover');
let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
let parentId = getContext<string>('collapsible-tree-parent-id');
let fullId = `${parentId}.${id}`;
@@ -34,7 +35,32 @@
</script>
<Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
<Collapsible.Trigger class="w-full">
{#if slotInsideTrigger}
<Collapsible.Trigger class="w-full">
<Button
variant="ghost"
class="w-full flex flex-row {side === 'right'
? 'justify-between'
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
>
{#if side === 'left'}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronRight size="16" class="shrink-0" />
{/if}
{/if}
<slot name="trigger" />
{#if side === 'right'}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronLeft size="16" class="shrink-0" />
{/if}
{/if}
</Button>
</Collapsible.Trigger>
{:else}
<Button
variant="ghost"
class="w-full flex flex-row {side === 'right'
@@ -42,23 +68,28 @@
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
>
{#if side === 'left'}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronRight size="16" class="shrink-0" />
{/if}
<Collapsible.Trigger>
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronRight size="16" class="shrink-0" />
{/if}
</Collapsible.Trigger>
{/if}
<slot name="trigger" />
{#if side === 'right'}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronLeft size="16" class="shrink-0" />
{/if}
<Collapsible.Trigger>
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronLeft size="16" class="shrink-0" />
{/if}
</Collapsible.Trigger>
{/if}
</Button>
</Collapsible.Trigger>
<Collapsible.Content class="ml-{margin}">
{/if}
<Collapsible.Content class="ml-{margin} pl-{margin}">
<slot name="content" />
</Collapsible.Content>
</Collapsible.Root>