DevactionUI.CopyField (devaction_ui v0.2.3)

Copy Markdown View Source

A read-only value in monospace with a Copy button, for what a person must take elsewhere: a webhook secret, an API key, an invite link, a repository URL. An eye button shows or hides the value (masked with bullets, the first and last characters kept so the person can tell which one it is), and the Copy button says copied_label for a moment after it writes to the clipboard.

The server owns what is shown: revealed and the on_toggle event (a string or a %JS{}, sent to target when there is one) flip it. The clipboard needs the browser, so the DevactionUI.CopyField hook (the same one as the code block's copy button, which needs an id) writes the data-copy-value of the field. The full value is therefore in the page even while it is masked: mask what a person is not allowed to see by not sending it, not by revealed. The button stays hidden where the browser cannot write to the clipboard (it needs https); the value is still selectable.

The icons are slots and every word is an attribute: the library knows no icon set and no language.

Summary

Functions

field(assigns)

A read-only monospace value with a show/hide eye and a Copy button.

Functions

field(assigns)

@spec field(map()) :: Phoenix.LiveView.Rendered.t()

A read-only monospace value with a show/hide eye and a Copy button.

Attributes

  • id (:string) (required) - the field's id; the input is <id>-value.
  • label (:string) (required) - the text of the label above the value.
  • value (:string) (required) - the full value, the one that is copied.
  • copy_label (:string) (required) - the text of the Copy button.
  • copied_label (:string) (required) - said for a moment after the copy.
  • hint (:string) - a quiet line under the field. Defaults to nil.
  • revealed (:boolean) - shows the whole value instead of the masked one. Defaults to true.
  • on_toggle (:any) - the event (a string or a %JS{}) of the eye button; without it there is no eye and no mask. Defaults to nil.
  • show_label (:string) - what the eye says while masked; needed with on_toggle. Defaults to nil.
  • hide_label (:string) - what the eye says while shown; needed with on_toggle. Defaults to nil.
  • target (:any) - the LiveComponent (@myself) that receives on_toggle. Defaults to nil.
  • mask_prefix (:integer) - how many characters at the start stay visible while masked (whsec_ is 6). Defaults to 0.
  • mask_suffix (:integer) - how many characters at the end stay visible while masked. Defaults to 4.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • copy_icon - the icon before the Copy text.
  • copied_icon - the icon before the copied text.
  • show_icon - the eye that shows the value.
  • hide_icon - the crossed eye that hides it.