data-collapsed and data-expanded pane data attr

svecosystem · Sep 25, 2024 · c72c30b · c72c30b
1 parent a929555
commit c72c30b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/paneforge/src/lib/paneforge.svelte.ts b/packages/paneforge/src/lib/paneforge.svelte.ts
@@ -825,12 +825,16 @@ class PaneState {
 		});
 	}
 
+	#isCollapsed = $derived.by(() => this.#group.isPaneCollapsed(this.#paneData));
+
 	props = $derived.by(() => ({
 		id: this.#id.current,
 		style: this.#group.getPaneStyle(this.#paneData, this.#defaultSize.current),
 		"data-pane": "",
 		"data-pane-id": this.#id.current,
 		"data-pane-group-id": this.#group.id.current,
+		"data-collapsed": this.#isCollapsed ? "" : undefined,
+		"data-expanded": this.#isCollapsed ? undefined : "",
 	}));
 }
 

diff --git a/sites/docs/src/lib/components/demos/collapsible-demo.svelte b/sites/docs/src/lib/components/demos/collapsible-demo.svelte
@@ -11,7 +11,7 @@
 	{#if collapsed}
 		<Button
 			variant="outline"
-			on:click={() => {
+			onclick={() => {
 				paneOne?.expand();
 			}}
 		>
@@ -20,7 +20,7 @@
 	{:else}
 		<Button
 			variant="outline"
-			on:click={() => {
+			onclick={() => {
 				paneOne?.collapse();
 			}}
 		>
@@ -36,6 +36,7 @@
 		minSize={15}
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
+		bind:this={paneOne}
 	>
 		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
 			<span class="font-semibold">One</span>