DevactionUI.DangerDialog (devaction_ui v0.2.3)

Copy Markdown View Source

The dialog before something that cannot be undone: stop monitoring a repository, delete a project. The red button stays locked until the person types the name of the thing, so it is never a reflex. A click outside does not close it, only Esc, Cancel and the close button do.

The LiveView keeps what was typed (typed) and learns of each keystroke through on_type (a phx-keyup); confirmed?/2 says whether the button is unlocked. Enter in the field submits the same on_confirm event as the red button, so the server checks confirmed?/2 again when it arrives. After it is done the caller can offer to undo with a toast. The sentence over the field is the type_label slot; name_chip/1 draws the name in it as the <code> chip of the canvas. The locked button is still focusable (aria-disabled) and is described by that sentence, so a screen reader says why it does nothing.

Summary

Functions

confirmed?(typed, expected)

Whether what was typed is the name of the thing, ignoring the spaces at the ends.

danger_dialog(assigns)
name_chip(assigns)

The name drawn as a chip inside the type_label slot: Type <.name_chip>sge-api</.name_chip> to confirm.

Functions

confirmed?(typed, expected)

@spec confirmed?(String.t() | nil, String.t()) :: boolean()

Whether what was typed is the name of the thing, ignoring the spaces at the ends.

danger_dialog(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required) - what must be typed: the name of the resource.
  • typed (:string) - what the person has typed so far. Defaults to "".
  • on_type (:string) (required) - the event of phx-keyup on the field.
  • on_confirm (:string) (required) - the event of the red button and of Enter in the field.
  • on_close (:any) (required) - a JS command or an event name run when it closes.
  • confirm_label (:string) (required) - what the red button does: "Stop monitoring", not "OK".
  • cancel_label (:string) (required)
  • close_label (:string) (required)
  • Global attributes are accepted.

Slots

  • icon (required)
  • close_icon (required)
  • title (required)
  • inner_block (required) - what will be lost and what stays.
  • type_label (required) - the sentence over the field, with the name drawn in it by the caller, such as a <code> chip.

name_chip(assigns)

The name drawn as a chip inside the type_label slot: Type <.name_chip>sge-api</.name_chip> to confirm.

Attributes

  • Global attributes are accepted.

Slots

  • inner_block (required) - the name, as it has to be typed.