drab - copy

import "drab/copy/define";

<drab-copy value="value">
	<button
		data-trigger
		type="button"
		class="gap-1.5"
		aria-label="copy value to clipboard"
	>
		<span>Copy</span>
		<span data-content>
			<!-- clipboard-document-list -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="size-5"
			>
				<path
					fill-rule="evenodd"
					d="M15.988 3.012A2.25 2.25 0 0 1 18 5.25v6.5A2.25 2.25 0 0 1 15.75 14H13.5V7A2.5 2.5 0 0 0 11 4.5H8.128a2.252 2.252 0 0 1 1.884-1.488A2.25 2.25 0 0 1 12.25 1h1.5a2.25 2.25 0 0 1 2.238 2.012ZM11.5 3.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v.25h-3v-.25Z"
					clip-rule="evenodd"
				/>
				<path
					fill-rule="evenodd"
					d="M2 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm2 3.25a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm0 3.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
					clip-rule="evenodd"
				/>
			</svg>
		</span>
		<template data-swap>
			<!-- clipboard-document-check -->
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 0 20 20"
				fill="currentColor"
				class="size-5"
			>
				<path
					fill-rule="evenodd"
					d="M18 5.25a2.25 2.25 0 0 0-2.012-2.238A2.25 2.25 0 0 0 13.75 1h-1.5a2.25 2.25 0 0 0-2.238 2.012c-.875.092-1.6.686-1.884 1.488H11A2.5 2.5 0 0 1 13.5 7v7h2.25A2.25 2.25 0 0 0 18 11.75v-6.5ZM12.25 2.5a.75.75 0 0 0-.75.75v.25h3v-.25a.75.75 0 0 0-.75-.75h-1.5Z"
					clip-rule="evenodd"
				/>
				<path
					fill-rule="evenodd"
					d="M3 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm6.874 4.166a.75.75 0 1 0-1.248-.832l-2.493 3.739-.853-.853a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.154-.114l3-4.5Z"
					clip-rule="evenodd"
				/>
			</svg>
		</template>
	</button>
</drab-copy>

Overview

Defined in: copy/index.ts:9

Uses the Clipboard API to copy text.

Constructors

new Copy()

new Copy(): Copy

Defined in: copy/index.ts:10

Accessors

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

value

Set Signature

set value(value): void

Defined in: base/copy/index.ts:19

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

copy()

copy(text): Promise<void>

Defined in: base/copy/index.ts:27

Copies the text.

destroy()

destroy(): void

Defined in: base/index.ts:178

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

mount()

mount(): void

Defined in: copy/index.ts:14

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

Overrides

BaseCopy.mount

safeListener()

safeListener<K, T>(type, listener, element, options): void

Defined in: base/index.ts:136

Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

swapContent(revert): void

Defined in: base/index.ts:93

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

triggerListener<T, K>(listener, type, options?): void

Defined in: base/index.ts:153