Merge pull request petalframework#257 from qdentity/robin-pagination-…

…target

Add `target` attribute for sending pagination events to LiveComponents

lib/petal_components/pagination.ex

@@ -10,7 +10,7 @@ defmodule PetalComponents.Pagination do
   alias PetalComponents.Link
 
   attr :path, :string, default: "/:page", doc: "page path"
-  attr :class, :string, default: "", doc: "Parent div CSS class"
+  attr :class, :string, default: "", doc: "parent div CSS class"
 
   attr :link_type, :string,
     default: "a",
@@ -21,6 +21,7 @@ defmodule PetalComponents.Pagination do
     doc:
       "whether to use `phx-click` events instead of linking. Enabling this will disable `link_type` and `path`."
 
+  attr :target, :any, default: nil, doc: "the LiveView/LiveComponent to send the event to. Example: `@myself`. Will be ignored if `event` is not enabled."
   attr :total_pages, :integer, default: nil, doc: "sets a total page count"
   attr :current_page, :integer, default: nil, doc: "sets the current page"
   attr :sibling_count, :integer, default: 1, doc: "sets a sibling count"
@@ -41,6 +42,7 @@ defmodule PetalComponents.Pagination do
             <div>
               <Link.a
                 phx-click={if @event, do: "goto-page"}
+                phx-target={if @event, do: @target}
                 phx-value-page={item.number}
                 link_type={if @event, do: "button", else: @link_type}
                 to={if not @event, do: get_path(@path, item.number, @current_page)}
@@ -58,6 +60,7 @@ defmodule PetalComponents.Pagination do
               <% else %>
                 <Link.a
                   phx-click={if @event, do: "goto-page"}
+                  phx-target={if @event, do: @target}
                   phx-value-page={item.number}
                   link_type={if @event, do: "button", else: @link_type}
                   to={if not @event, do: get_path(@path, item.number, @current_page)}
@@ -81,6 +84,7 @@ defmodule PetalComponents.Pagination do
             <div>
               <Link.a
                 phx-click={if @event, do: "goto-page"}
+                phx-target={if @event, do: @target}
                 phx-value-page={item.number}
                 link_type={if @event, do: "button", else: @link_type}
                 to={if not @event, do: get_path(@path, item.number, @current_page)}

test/petal/dropdown_test.exs

@@ -65,7 +65,8 @@ defmodule PetalComponents.DropdownTest do
       """)
 
     assert html =~ "pc-dropdown__menu-item--disabled"
-    assert html =~ " disabled" # the attribute itself
+    # the attribute itself
+    assert html =~ " disabled"
   end
 
   test "it works with a custom trigger" do

test/petal/pagination_test.exs

@@ -495,5 +495,28 @@ defmodule PetalComponents.PaginationTest do
     assert html =~ "goto-page"
     assert html =~ "phx-value-page=\"2\""
     assert html =~ "phx-value-page=\"3\""
+    refute html =~ "phx-target"
+  end
+
+  test "target option with event option will generate 'phx-target' attribute" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <.pagination event={true} target={"some-component-id"} total_pages={3} current_page={1} />
+      """)
+
+    assert html =~ "phx-target"
+  end
+
+  test "target option without event option won't generate 'phx-target' attribute" do
+    assigns = %{}
+
+    html =
+      rendered_to_string(~H"""
+      <.pagination target={"some-component-id"} total_pages={3} current_page={1} />
+      """)
+
+    refute html =~ "phx-target"
   end
 end