Class: PhlexKit::Clipboard

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/clipboard/clipboard.rb

Overview

Copy-to-clipboard with success/error confirmation popovers (CSS-positioned, no @floating-ui). Ported from ruby_ui's RubyUI::Clipboard. Compose Clipboard > (ClipboardSource + ClipboardTrigger). phlex-kit--clipboard.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(success: "Copied!", error: "Copy failed!", **attrs) ⇒ Clipboard

Returns a new instance of Clipboard.



6
7
8
9
10
 
# File 'app/components/phlex_kit/clipboard/clipboard.rb', line 6

def initialize(success: "Copied!", error: "Copy failed!", **attrs)
  @success = success
  @error = error
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
# File 'app/components/phlex_kit/clipboard/clipboard.rb', line 11

def view_template(&block)
  div(**mix({ class: "pk-clipboard", data: { controller: "phlex-kit--clipboard", action: "click@window->phlex-kit--clipboard#onClickOutside" } }, @attrs)) do
    div(&block)
    render PhlexKit::ClipboardPopover.new(type: :success) { @success }
    render PhlexKit::ClipboardPopover.new(type: :error) { @error }
    # A persistent (never display:none) sr-only live region: the visual
    # popovers are shown by removing display:none, which re-inserts them
    # into the a11y tree with pre-existing content — a change AT does not
    # announce. This region stays in the tree; the controller writes the
    # confirmation text into it on copy, and THAT mutation announces.
    div(class: "pk-sr-only", role: "status", aria: { live: "polite" },
        data: { phlex_kit__clipboard_target: "liveRegion" })
  end
end