New Action: Copy to Clipboard

[endigo9740]

See a reference example here:
https://mantine.dev/core/copy-button/

Rather than recreating the wheel and trying to wrap and pass through Button component props (which could get messy), I suggest we implement this feature as a Svelte Action (read: directive):
https://svelte.dev/tutorial/actions

This would then act as an add-on to any existing intractable element - be that a Button component or otherwise! For example, imagine being able to tap an image and copy its source URL.

Once available we should make plans to immediately implement a version of this feature in the Code Block to allow a quick "copy code" button. See me to define requirements for implementing this.

[endigo9740]

@niktek I know you expressed interest in this one, so let me know if you want help in learning how to implement and use Actions. They're really easy. The Svelte tutorials are great in this regard!

[niktek]

I'll take this one

[endigo9740]

@niktek Per our discussion in Discord, it looks like this should be possible via a pass-through prop:

Pass-through Prop:
https://stackoverflow.com/questions/66141626/svelte-how-to-pass-action-to-component

Provide optional params:
https://stackoverflow.com/questions/72147526/passing-action-to-a-component-optionally

NOTE: I updated this code from a working prototype. This will work if you copy this structure directly:

$lib/actions/copyToClipboard

export function copyToClipboard(node: HTMLElement, data: any): void {
    node.addEventListener('click', () => {
        console.log('data', data);
    });
}

/whatever/+page.svelte

<script>
    import { copyToClipboard } from '$lib/actions/copyToClipboard';
    let exampleData: string = 'This is some data!';
</script>

<Button variant="filled-primary" action={copyToClipboard} actionParams={exampleData}>Copy</Button>

NOTE: if you have multiple params they should be in an array, like actionParams={[param1, param2]}

Button.svelte

<script>
    export let action: any = () => {};
    export let actionParams: any = undefined;
</script>

<button use:action={actionParams}>...</button>

I's suggest we implement optional action handler on the Button component first, but use it as a proof of concept to copy to other relevant components in the future.

[endigo9740]

@niktek I updated the code examples above to match my working prototype. Here's the result when I click the button:

Wire this up with the correct clipboard API call and we should be golden!

[endigo9740]

Re-opening and marking "ready for QA"

[endigo9740]

Released!