Dispatch a command to a SaladUI component using a LiveView JS command.

This is useful when client-side UI actions should control another SaladUI component without a server round trip.

Parameters

• js - %Phoenix.LiveView.JS{} pipeline. Defaults to %JS{}.
• command_name - Command or state-machine transition name.
• opts - Options passed to JS.dispatch/3. Use :to to target a component selector and :detail for command params. Client commands default to bubbles: false so nested SaladUI components do not receive the same command.

How it works

This dispatches a "salad_ui:command" DOM custom event. The target SaladUI component receives it and calls handleCommand(command, params), same as server commands sent by SaladUI.LiveView.send_command/4.

Example

<.button phx-click={%JS{} |> SaladUI.JS.dispatch_command("open", to: "#dialog")}>
  Open dialog
</.button>

With params:

<.button
  phx-click={
    %JS{}
    |> SaladUI.JS.dispatch_command("update", to: "#chart", detail: %{series: @series})
  }
>
  Update chart
</.button>