Example: Copy to clipboard button

[svilupp]

Often you want to create a button that would copy certain content into a clipboard.

Behavior:

• Have a vector of multiple cards
• Each card to have a small copy button
• If the user clicks that button, only the content of the associated card will be copied to clipboard

@hhaensel has kindly provided this MWE that achieves the desired behavior:
(notice the addition of JS function in @methods and the clever use of index to pick the correct content chunk to copy)

@app begin
    @in my_texts = [Dict(:id => id, :content => content) for (id, content) in zip(1:3, ["abc", "def", "ghi"])]
    @in copied_index = 0
end

function ui()
  [
    h3("Some Text"),
    card(class = "q-my-md", @for("(item, index) in my_texts"), key = :index, [
      cardsection([
        btn(icon = "content_paste", "", :flat, :dense, class = "absolute-right", @click("""
          this.copyToClipboard(this.my_texts[index].content);
          copied_index = index
          this.\$q.notify('Copied ' + index + '!')
        """)),
        "{{item.content}}",
      ]),
    ]),
    htmldiv("Copied Index: {{ copied_index }}")
  ]
end

@methods begin
    """
    copyToClipboard: function(str) {
        const el = document.createElement('textarea');  // Create a <textarea> element
        el.value = str;                                 // Set its value to the string that you want copied
        el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
        el.style.position = 'absolute';                 
        el.style.left = '-9999px';                      // Move outside the screen to make it invisible
        document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
        const selected = this.my_text        
        el.select();                                    // Select the <textarea> content
        document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
        document.body.removeChild(el);                  // Remove the <textarea> element
    }
"""
end

Note that you could also improve the UI with the newly released gutter properties from Quasar (controls the spacing between elements):

function ui()
  [
    h4("Gutter example")
    row(gutter = "md", class = "", [
      htmldiv(col = 4, @for("(item, index) in my_texts"), key = :index, [
        card(class = "bg-green-1", cardsection([
          btn(icon = "content_paste", "", :flat, :dense, class = "absolute-right", @click("""
            this.copyToClipboard(this.my_texts[index].content);
            copied_index = index
            this.\$q.notify('Copied ' + index + '!')
          """)),
          "{{item.content}}",
        ])),
      ])
    ]) |> htmldiv # to prevent stipple-core from interfering

    htmldiv(class = "q-pt-lg", "Copied Index: {{ copied_index }}")
  ]
end

[PGimenez]

I'll add this to the docs, thank you!

[PGimenez]

added to the docs here
https://learn.genieframework.com/docs/examples/reactive-ui/copy-to-clipboard-button