From ffa40d3433e5c988ee0c42fdc018a5675e210437 Mon Sep 17 00:00:00 2001
From: DamascenoV <victor.c.damasceno@gmail.com>
Date: Fri, 6 Dec 2024 18:16:33 +0000
Subject: [PATCH] Dialog on_cancel

Dialog with the same behavior that the modal core component of phoenix.
In the case the user pass the on_cancel attribute it will execute the JS
and then the phx-remove.
If the user don't pass we will keep the same behavior
---
 lib/salad_ui/dialog.ex | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/salad_ui/dialog.ex b/lib/salad_ui/dialog.ex
index b51213d..59ba794 100644
--- a/lib/salad_ui/dialog.ex
+++ b/lib/salad_ui/dialog.ex
@@ -51,6 +51,7 @@ defmodule SaladUI.Dialog do
       phx-remove={JS.exec("phx-hide-modal", to: "##{@id}")}
       phx-show-modal={show_modal(@id)}
       phx-hide-modal={hide_modal(@id)}
+      data-cancel={JS.exec(@on_cancel, "phx-remove")}
       class="relative z-50 hidden group/dialog"
     >
       <div
@@ -66,9 +67,9 @@ defmodule SaladUI.Dialog do
       >
         <.focus_wrap
           id={"#{@id}-wrap"}
-          phx-window-keydown={JS.exec("phx-hide-modal", to: "##{@id}")}
+          phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
           phx-key="escape"
-          phx-click-away={JS.exec("phx-hide-modal", to: "##{@id}")}
+          phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
           class="w-full sm:max-w-[425px]"
         >
           <div