Corex.Clipboard (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Clipboard.

Examples

Basic Usage

This example assumes the import of .icon from Core Components

<.clipboard id="my-clipboard" value="Text to copy">
  <:label>Copy to clipboard</:label>
   <:trigger>
        <.icon name="hero-clipboard" class="icon data-copy" />
        <.icon name="hero-check" class="icon data-copied" />
    </:trigger>
</.clipboard>

With Callback

This example assumes the import of .icon from Core Components

<.clipboard
  id="my-clipboard"
  value="Text to copy"
  on_copy="clipboard_copied">
  <:label>Copy to clipboard</:label>
          <:trigger>
        <.icon name="hero-clipboard" class="icon data-copy" />
        <.icon name="hero-check" class="icon data-copied" />
      </:trigger>
</.clipboard>
def handle_event("clipboard_copied", %{"value" => value}, socket) do
  {:noreply, put_flash(socket, :info, "Copied: #{value}")}
end

API Control

In order to use the API, you must use an id on the component

Client-side

<button phx-click={Corex.Clipboard.copy("my-clipboard", "Text to copy")}>
  Copy Text
</button>

Server-side

def handle_event("copy_text", _, socket) do
  {:noreply, Corex.Clipboard.copy(socket, "my-clipboard", "Text to copy")}
end

Styling

Use data attributes to target elements:

[data-scope="clipboard"][data-part="root"] {}
[data-scope="clipboard"][data-part="trigger"] {}
[data-scope="clipboard"][data-part="control"] {}
[data-scope="clipboard"][data-part="input"] {}

If you wish to use the default Corex styling, you can use the class clipboard on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/clipboard.css";

You can then use modifiers

<.clipboard class="clipboard clipboard--accent clipboard--lg">

Learn more about modifiers and Corex Design

Summary

Components

clipboard(assigns)

Renders a clipboard component.

API

copy(clipboard_id)

Copies the current clipboard value to clipboard from client-side. Returns a Phoenix.LiveView.JS command.

copy(socket, clipboard_id)

Copies the current clipboard value to clipboard from server-side. Pushes a LiveView event.

set_value(clipboard_id, value)

Sets the clipboard value from client-side. Returns a Phoenix.LiveView.JS command.

set_value(socket, clipboard_id, value)

Sets the clipboard value from server-side. Pushes a LiveView event.

Components

clipboard(assigns)

Renders a clipboard component.

Attributes

  • id (:string) - The id of the clipboard, useful for API to identify the clipboard.
  • value (:string) - The initial value or the controlled value to copy to clipboard. Defaults to nil.
  • controlled (:boolean) - Whether the clipboard is controlled. Only in LiveView, the on_value_change event is required. Defaults to false.
  • timeout (:integer) - The timeout in milliseconds before resetting the copied state. Defaults to nil.
  • dir (:string) - The direction of the clipboard. When nil, derived from document (html lang + config :rtl_locales). Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • on_copy (:string) - The server event name when the value is copied. Defaults to nil.
  • on_copy_client (:string) - The client event name when the value is copied. Defaults to nil.
  • on_value_change (:string) - The server event name when the value changes (for controlled mode). Defaults to nil.
  • trigger_aria_label (:string) - Accessible name for the trigger button when it contains only an icon (e.g. "Copy to clipboard"). Defaults to nil.
  • input_aria_label (:string) - Accessible name for the input when it's not associated with a visible label (e.g. "Value to copy"). Defaults to nil.
  • input (:boolean) - Whether to render the input element. Set to false when using only the trigger to copy. Defaults to true.
  • Global attributes are accepted.

Slots

  • label - Accepts attributes:
    • class (:string)
  • trigger - Accepts attributes:
    • class (:string)

API

copy(clipboard_id)

Copies the current clipboard value to clipboard from client-side. Returns a Phoenix.LiveView.JS command.

Examples

<button phx-click={Corex.Clipboard.copy("my-clipboard")}>
  Copy
</button>

copy(socket, clipboard_id)

Copies the current clipboard value to clipboard from server-side. Pushes a LiveView event.

Examples

def handle_event("copy_clipboard", _params, socket) do
  socket = Corex.Clipboard.copy(socket, "my-clipboard")
  {:noreply, socket}
end

set_value(clipboard_id, value)

Sets the clipboard value from client-side. Returns a Phoenix.LiveView.JS command.

Examples

<button phx-click={Corex.Clipboard.set_value("my-clipboard", "New value")}>
  Set Value
</button>

set_value(socket, clipboard_id, value)

Sets the clipboard value from server-side. Pushes a LiveView event.

Examples

def handle_event("set_clipboard_value", _params, socket) do
  socket = Corex.Clipboard.set_value(socket, "my-clipboard", "New value")
  {:noreply, socket}
end