Clean up for 0.6.2

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+## [0.6.2] (2025-05-05)
+
+- Pane recalculates styling when updating content within it [#12](https://github.com/giusdp/live_pane/issues/12).
 
 ## [0.6.1] (2025-05-05)
 

README.md

@@ -14,7 +14,7 @@ Add `live_pane` to your list of dependencies in `mix.exs`:
 ```elixir
 def deps do
   [
-    {:live_pane, "~> 0.6.1"}
+    {:live_pane, "~> 0.6.2"}
   ]
 end
 ```
@@ -97,19 +97,4 @@ Now you can use the Group, Pane and Resizer components in your LiveView template
 </LivePane.group>
 ```
 
-Just make sure to set an `id` for the group and then use the same id in each pane and resizer for the `group_id` attribute, so they can be linked together.
-## ROADMAP
-
-(not in order)
-
-- [x] Basic 2 pane dragging
-- [x] Support nested groups
-- [x] Vertical orientation
-- [x] Collapsible panes 
-- [x] Keyboard support
-- [x] Touch support
-- [x] Server-side events (collapse/expand)
-- [x] Documentation
-- [x] Persistent layouts
-- [x] Accessibility (aria data)
-- [ ] Support pane collapse/expand transition animations
+Just make sure to set an `id` for the group and then use the same id in each pane and resizer for the `group_id` attribute, so they can be linked together.

assets/js/live_pane/hooks/pane.ts

@@ -126,8 +126,13 @@ export function createPaneHook() {
     updated() {
       const groupId = this.el.getAttribute('data-pane-group-id');
       const groupData = paneGroupInstances.get(groupId!);
-      const defaultSize = Number(this.el.getAttribute('default-size')) || undefined;
-      const paneIndex = findPaneDataIndex(groupData!.paneDataArray.get(), this.el.id);
+      const defaultSize =
+        Number(this.el.getAttribute('default-size')) || undefined;
+
+      const paneIndex = findPaneDataIndex(
+        groupData!.paneDataArray.get(),
+        this.el.id
+      );
 
       const style = computePaneFlexBoxStyle({
         defaultSize,
@@ -138,7 +143,6 @@ export function createPaneHook() {
       });
 
       this.el.style.cssText = style;
-
     },
 
     destroyed() {

assets/js/live_pane/style.ts

@@ -28,7 +28,6 @@ type CursorState =
 /* Global cursor state */
 let currentState: CursorState | null = null;
 
-
 /**
  * Returns the cursor style for a given cursor state.
  */

demo/lib/demo_web/controllers/page_html/persistent.heex

@@ -5,7 +5,7 @@
     <h1 class="mb-6 scroll-m-20 text-4xl font-bold tracking-tight">Persistent Layouts</h1>
 
     <p class="mt-2 text-balance text-lg text-muted-foreground">
-      Examples of persisting layouts across page loads.
+      An example of persisting layouts across page loads.
     </p>
   </header>
 

demo/lib/demo_web/live/states_live.html.heex

@@ -175,7 +175,10 @@
 
     <p class="mt-12 mb-2">
       The collapsible panes (first and third) have a min_size of 15% and a collapsed size of 5%.
-      You can find <.link href="https://github.com/giusdp/live_pane/blob/main/demo/lib/demo_web/live/states_live.html.heex">the example code here</.link>.
+      You can find <.link
+        target="_blank"
+        href="https://github.com/giusdp/live_pane/blob/main/demo/lib/demo_web/live/states_live.html.heex"
+      >the example code here</.link>.
     </p>
   </div>
 </div>

demo/lib/demo_web/live/updating_content_live.html.heex

@@ -3,24 +3,19 @@
     <p class="mb-4 text-sm/6 font-medium capitalize text-accent-foreground"></p>
 
     <h1 class="mb-6 scroll-m-20 text-4xl font-bold tracking-tight">
-      Update content contained within a pane
+      Update Content Contained Within a Pane
     </h1>
 
-    <p class="mt-2 text-balance text-lg text-muted-foreground">
+    <%!-- <p class="mt-2 text-balance text-lg text-muted-foreground">
       An example of how to update the content contained within a pane.
-    </p>
+    </p> --%>
   </header>
 
   <div class="markdown prose relative max-w-3xl pt-4">
     <p class="leading-7 [&amp;:not(:first-child)]:mt-6">
-      The <code>pane</code> component has a <code>content</code> slot
-      that can be used to update the content contained within a pane.
-    </p>
-
-    <p class="mb-10">
-      We send an event to the LiveView when the pane is collapsed or expanded with a payload containing
-      the id so we can identify which pane was collapsed or expanded. We react to this event by updating the
-      button text to the correct action.
+      When updating the content of a pane, LiveView will send the diff to the client
+      causing the pane to update as well. The pane will automatically recalculate
+      its new style (and size) to fit the new content without changing the entire layout of the group.
     </p>
     <LivePane.group
       id="demo_updating_content"
@@ -34,14 +29,6 @@
         starting_size={15}
         group_id="demo_updating_content"
         id="demo_pane_1"
-        class="
-          w-full bg-gray-100 data-[pane-state=collapsing]:bg-red-200 data-[pane-state=collapsed]:bg-red-200
-          data-[pane-state=collapsing]:transition-[flex-grow,background-color] data-[pane-state=collapsing]:duration-1000
-          data-[pane-state=collapsing]:ease-linear data-[pane-state=collapsing]:will-change-[flex-grow,background-color]
-          data-[pane-state=expanding]:bg-gray-100 data-[pane-state=expanding]:transition-[flex-grow,background-color]
-          data-[pane-state=expanding]:duration-1000 data-[pane-state=expanding]:ease-linear
-          data-[pane-state=expanding]:will-change-[flex-grow,background-color]
-        "
       >
         <div class="flex w-full items-center justify-center rounded-lg p-6">
           <span class="font-semibold">
@@ -55,20 +42,7 @@
         group_id="demo_updating_content"
         class="relative flex w-full h-2 items-center justify-center"
       >
-        <div class="z-10 h-7 flex items-center w-4 rounded-sm border bg-brand">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="1em"
-            height="1em"
-            fill="currentColor"
-            viewBox="0 0 256 256"
-            class="size-4 text-black"
-          >
-            <rect width="256" height="256" fill="none"></rect>
-            <path d="M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z">
-            </path>
-          </svg>
-        </div>
+        <div class="z-10 h-3 flex items-center w-7 rounded-lg border bg-brand"></div>
       </LivePane.resizer>
       <LivePane.pane
         starting_size={50}
@@ -89,5 +63,12 @@
         </div>
       </LivePane.pane>
     </LivePane.group>
+
+    <p class="mt-12 mb-2">
+      You can find <.link
+        target="_blank"
+        href="https://github.com/giusdp/live_pane/blob/main/demo/lib/demo_web/live/updating_content_live.html.heex"
+      >the example code here</.link>.
+    </p>
   </div>
 </div>

mix.exs

@@ -1,7 +1,7 @@
 defmodule LivePane.MixProject do
   use Mix.Project
 
-  @version "0.6.1"
+  @version "0.6.2"
 
   def project do
     [