# `SaladUI.JS`
[🔗](https://github.com/bluzky/salad_ui/blob/main/lib/salad_ui/liveview.ex#L110)

Helper functions for controlling SaladUI components from `Phoenix.LiveView.JS`.

# `dispatch_command`

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

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

With params:

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

# `dispatch_command`

# `dispatch_command`

---

*Consult [api-reference.md](api-reference.md) for complete listing*