wcp/docs/.vitepress/theme/components/CopyToClipboardInput.vue at main · ghzhost/wcp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
	<div class="CopyToClipboardInput" v-bind="$attrs">
		<input
			type="text"
			class="CopyToClipboardInput-input"
			:value="value"
			@focus="selectText"
			readonly
		/>
		<button
			type="button"
			class="CopyToClipboardInput-button"
			@click="copyToClipboard"
			title="Copy to Clipboard"
		>
			Copy
		</button>
	</div>
</template>

<script setup>
defineProps({
	value: {
		type: String,
		required: true,
	},
});

const selectText = (event) => {
	const inputElement = event.target;
	inputElement.select();
	inputElement.removeEventListener("focus", selectText);
};

const copyToClipboard = (event) => {
	const inputValue = event.target.previousSibling.value;
	navigator.clipboard.writeText(inputValue).then(
		() => {
			event.target.textContent = "Copied!";
			setTimeout(() => {
				event.target.textContent = "Copy";
			}, 1000);
		},
		(err) => {
			console.error("Could not copy to clipboard:", err);
		},
	);
};
</script>

<style scoped>
.CopyToClipboardInput {
	display: flex;
}
.CopyToClipboardInput-input {
	font-size: 0.9em;
	font-family: monospace;
	flex-grow: 1;
	border: 1px solid var(--vp-c-border);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	background-color: var(--vp-c-bg);
	padding: 8px 13px;

	&:focus {
		border-color: var(--vp-button-brand-bg);
	}
}
.CopyToClipboardInput-button {
	font-size: 14px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	color: var(--vp-button-brand-text);
	min-width: 73px;
	font-weight: 600;
	padding: 5px 10px;
	background-color: var(--vp-button-brand-bg);
	transition: background-color 0.25s;

	&:hover {
		background-color: var(--vp-button-brand-hover-bg);
	}
}
</style>