Color Picker

API

Programmatic color: client `phx-click` binding, then the matching server push.

Set Value (Client Binding)

Set the color from actions

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.ColorPicker.set_value("color-picker-api-value-c", "#ff0000")} class="button ui-size-sm">Set red</.action>
  <.action phx-click={Corex.ColorPicker.set_value("color-picker-api-value-c", "#3b82f6")} class="button ui-size-sm">Set blue</.action>
</div>
<.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker">
  <:label>Set the color from actions</:label>
</.color_picker>

Set Value (Server)

Set the color (Server)

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click="cp_api_s_value" phx-value-color="#ff0000" class="button ui-size-sm">Set red</.action>
  <.action phx-click="cp_api_s_value" phx-value-color="#3b82f6" class="button ui-size-sm">Set blue</.action>
</div>
<.color_picker
  value="#3b82f6"
  presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}
  class="color-picker">
  <:label>Set the color (Server)</:label>
</.color_picker>

    def handle_event("cp_api_s_value", %{"color" => hex}, socket) do
  {:noreply, Corex.ColorPicker.set_value(socket, "color-picker-api-value-s", hex)}
end