Expand JS events from components

[sezaru]

This is an idea to make Petal Components more "customizable" by allows users to "expand" JS events inside a component.

For example, the Dropdown component has 2 JS events, phx-click for the trigger button and phx-click-away for the full dropdown.

I was wondering if we could add new attr fields so we can expand these JS events.

For the dropdown, we could have something like this:

attr :click_away_event, JS, default: %JS{}
attr :click_event, JS, default: %JS{}

...

 defp js_attributes("container", "live_view_js", options_container_id, click_away_event) do
    %{
      "phx-click-away":
        click_away_event
        |> JS.hide(
          to: "##{options_container_id}",
          transition: {@transition_out_base, @transition_out_start, @transition_out_end}
        )
    }
  end

This would allow the user to do some other actions when the Petal component events are triggered.