LineaUI.Components.Clipboard (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's copy to clipboard: a button that copies a text, and a field with a copy button joined to it.

<.clipboard value="mix phx.new demo">Copy</.clipboard>
<.clipboard from="#invite-link" size="xs">Copy</.clipboard>
<.clipboard_input id="share" value={@url} />

from is a selector: a field gives its value, any other element its text. After a copy the toaster shows toast ("Text Copied", in the success color, as LineOne does), the button keeps data-copied for two seconds (style it with data-copied:) and on_copy runs; a copy that fails shows error_toast. With on_copy as an event name the LiveView (or target) gets handle_event(name, %{"id" => id}, socket).

Summary

Functions

clipboard(assigns)

A button that copies value, or what from points at.

clipboard_input(assigns)

LineOne's "Advanced Usage": a text field with a copy button joined to its end. The field is a real input (name, value, phx-change work), and the button copies what it holds.

Functions

clipboard(assigns)

A button that copies value, or what from points at.

Events: on_copy pushes %{"id" => id} when it is an event name.

Attributes

  • id (:string) (required) - Needed by the hook.
  • value (:string) - The text to copy. Defaults to nil.
  • from (:string) - A selector of the field or element whose text is copied. Defaults to nil.
  • toast (:any) - Shown after a copy; nil or "" for none. Defaults to "Text Copied".
  • error_toast (:string) - Defaults to "Error".
  • on_copy (:any) - An event name or a %JS{}. Defaults to nil.
  • target (:any) - Defaults to nil.
  • color (:string) - Defaults to "primary". Must be one of "neutral", "primary", "secondary", "info", "success", "warning", or "error".
  • variant (:string) - Defaults to "solid". Must be one of "solid", "glow", "outline", "soft", "bordered", or "flat".
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

clipboard_input(assigns)

LineOne's "Advanced Usage": a text field with a copy button joined to its end. The field is a real input (name, value, phx-change work), and the button copies what it holds.

Attributes

  • id (:string) (required)
  • name (:string) - Defaults to nil.
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • label (:string) - The button's text. Defaults to "Copy".
  • toast (:any) - Shown after a copy; nil or "" for none. Defaults to "Text Copied".
  • error_toast (:string) - Defaults to "Error".
  • on_copy (:any) - Defaults to nil.
  • target (:any) - Defaults to nil.
  • class (:any) - Merged into the wrapper. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["readonly", "disabled", "phx-debounce", "autocomplete", "form"].