From 3d0a433f85aea5e66f8016ed78333c5df86dfd9c Mon Sep 17 00:00:00 2001 From: Giuseppe De Palma Date: Tue, 6 May 2025 08:12:19 +0200 Subject: [PATCH 1/3] Run js formatter --- assets/js/live_pane/hooks/pane.ts | 10 +++++++--- assets/js/live_pane/style.ts | 1 - 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/assets/js/live_pane/hooks/pane.ts b/assets/js/live_pane/hooks/pane.ts index a85ba8b..697756e 100644 --- a/assets/js/live_pane/hooks/pane.ts +++ b/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() { diff --git a/assets/js/live_pane/style.ts b/assets/js/live_pane/style.ts index c06566a..5959876 100644 --- a/assets/js/live_pane/style.ts +++ b/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. */ From 726710ea89fc31fa04f4933b12ff99e25d688d66 Mon Sep 17 00:00:00 2001 From: Giuseppe De Palma Date: Tue, 6 May 2025 08:26:40 +0200 Subject: [PATCH 2/3] Clean up examples --- .../controllers/page_html/persistent.heex | 2 +- demo/lib/demo_web/live/states_live.html.heex | 5 +- .../live/updating_content_live.html.heex | 47 ++++++------------- 3 files changed, 19 insertions(+), 35 deletions(-) diff --git a/demo/lib/demo_web/controllers/page_html/persistent.heex b/demo/lib/demo_web/controllers/page_html/persistent.heex index 3f578d3..34b8845 100644 --- a/demo/lib/demo_web/controllers/page_html/persistent.heex +++ b/demo/lib/demo_web/controllers/page_html/persistent.heex @@ -5,7 +5,7 @@

Persistent Layouts

- Examples of persisting layouts across page loads. + An example of persisting layouts across page loads.

diff --git a/demo/lib/demo_web/live/states_live.html.heex b/demo/lib/demo_web/live/states_live.html.heex index b69e3fa..e93445b 100644 --- a/demo/lib/demo_web/live/states_live.html.heex +++ b/demo/lib/demo_web/live/states_live.html.heex @@ -175,7 +175,10 @@

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. + 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.

diff --git a/demo/lib/demo_web/live/updating_content_live.html.heex b/demo/lib/demo_web/live/updating_content_live.html.heex index 8f604a9..26fab5e 100644 --- a/demo/lib/demo_web/live/updating_content_live.html.heex +++ b/demo/lib/demo_web/live/updating_content_live.html.heex @@ -3,24 +3,19 @@

- Update content contained within a pane + Update Content Contained Within a Pane

-

+ <%!--

An example of how to update the content contained within a pane. -

+

--%>

- The pane component has a content slot - that can be used to update the content contained within a pane. -

- -

- 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.

@@ -55,20 +42,7 @@ group_id="demo_updating_content" class="relative flex w-full h-2 items-center justify-center" > -
- - - - - -
+
+ +

+ 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. +

From 1c386750f8ac38aefad5cd559d37c92483d92c52 Mon Sep 17 00:00:00 2001 From: Giuseppe De Palma Date: Tue, 6 May 2025 08:28:43 +0200 Subject: [PATCH 3/3] Prepare for 0.6.2 --- CHANGELOG.md | 3 +++ README.md | 19 ++----------------- mix.exs | 2 +- 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 26d1a36..38b0bfb 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 4e3f3f3..4ca0995 100644 --- a/README.md +++ b/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 ``` -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 \ No newline at end of file +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. \ No newline at end of file diff --git a/mix.exs b/mix.exs index c65cc8b..d73573e 100644 --- a/mix.exs +++ b/mix.exs @@ -1,7 +1,7 @@ defmodule LivePane.MixProject do use Mix.Project - @version "0.6.1" + @version "0.6.2" def project do [