CinderUI.JS (cinder_ui v0.1.0)

Copy Markdown View Source

LiveView JS helpers for controlling interactive Cinder UI components.

These helpers dispatch the shared cinder-ui:command event used by commandable hooks such as dialogs, popovers, dropdown menus, selects, autocompletes, and comboboxes.

Example

<button phx-click={CinderUI.JS.open(to: "#account-dialog")}>
  Open dialog
</button>

<button phx-click={CinderUI.JS.clear(to: "#owner-autocomplete")}>
  Clear owner
</button>

Summary

Types

command()

Functions

clear(opts)

Dispatches a clear command.

clear(js \\ %JS{}, opts \\ [])
close(opts)

Dispatches a close command.

close(js \\ %JS{}, opts \\ [])
dispatch_command(command, opts)

Dispatches a Cinder UI command event to the given selector.

dispatch_command(js \\ %JS{}, command, opts \\ [])
focus(opts)

Dispatches a focus command.

focus(js \\ %JS{}, opts \\ [])
open(opts)

Dispatches an open command.

open(js \\ %JS{}, opts \\ [])
toggle(opts)

Dispatches a toggle command.

toggle(js \\ %JS{}, opts \\ [])

Types

command()

@type command() :: :open | :close | :toggle | :focus | :clear | String.t() | atom()

Functions

clear(opts)

@spec clear(keyword()) :: Phoenix.LiveView.JS.t()

Dispatches a clear command.

clear(js \\ %JS{}, opts \\ [])

@spec clear(
  Phoenix.LiveView.JS.t(),
  keyword()
) :: Phoenix.LiveView.JS.t()

close(opts)

@spec close(keyword()) :: Phoenix.LiveView.JS.t()

Dispatches a close command.

close(js \\ %JS{}, opts \\ [])

@spec close(
  Phoenix.LiveView.JS.t(),
  keyword()
) :: Phoenix.LiveView.JS.t()

dispatch_command(command, opts)

@spec dispatch_command(
  command(),
  keyword()
) :: Phoenix.LiveView.JS.t()

Dispatches a Cinder UI command event to the given selector.

Options

  • :to - required DOM selector that identifies the component root.
  • :detail - additional event detail merged into the command payload.

dispatch_command(js \\ %JS{}, command, opts \\ [])

@spec dispatch_command(Phoenix.LiveView.JS.t(), command(), keyword()) ::
  Phoenix.LiveView.JS.t()

focus(opts)

@spec focus(keyword()) :: Phoenix.LiveView.JS.t()

Dispatches a focus command.

focus(js \\ %JS{}, opts \\ [])

@spec focus(
  Phoenix.LiveView.JS.t(),
  keyword()
) :: Phoenix.LiveView.JS.t()

open(opts)

@spec open(keyword()) :: Phoenix.LiveView.JS.t()

Dispatches an open command.

open(js \\ %JS{}, opts \\ [])

@spec open(
  Phoenix.LiveView.JS.t(),
  keyword()
) :: Phoenix.LiveView.JS.t()

toggle(opts)

@spec toggle(keyword()) :: Phoenix.LiveView.JS.t()

Dispatches a toggle command.

toggle(js \\ %JS{}, opts \\ [])

@spec toggle(
  Phoenix.LiveView.JS.t(),
  keyword()
) :: Phoenix.LiveView.JS.t()