View Source Surface.LiveComponent (Surface v0.12.0)

A live stateful component. A wrapper around Phoenix.LiveComponent.

Example

defmodule Dialog do
  use Surface.LiveComponent

  prop title, :string, required: true

  def mount(socket) do
    {:ok, assign(socket, show: false)}
  end

  def render(assigns) do
    ~F"""
    <div class={"modal", "is-active": @show}>
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">{@title}</p>
        </header>
        <section class="modal-card-body">
          <#slot/>
        </section>
        <footer class="modal-card-foot" style="justify-content: flex-end">
          <Button click="hide">Ok</Button>
        </footer>
      </div>
    </div>
    """
  end

  # Public API

  def show(dialog_id) do
    send_update(__MODULE__, id: dialog_id, show: true)
  end

  # Event handlers

  def handle_event("show", _, socket) do
    {:noreply, assign(socket, show: true)}
  end

  def handle_event("hide", _, socket) do
    {:noreply, assign(socket, show: false)}
  end
end