From 526d1d6959f8268e04469139ad16bda2439a29ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beatriz=20Sopen=CC=83a=20Merino?= <beatrizsmerino@gmail.com>
Date: Fri, 22 Mar 2024 00:45:27 +0100
Subject: [PATCH] fix(clipboard): when click the copy button the data is not
 copied with `v-clipboard:copy`

Error:
- When the copy button is pressed a success alert is displayed, but the console message `Clipboard input is empty` appears.
- This message appears despite fixing the issue, it is a package problem and is not fixed at this time.

Reason:
- The `v-clipboard:copy` directive of the `vue-clipboard2` package does not exist in the `v-clipboard` package.
- When using the `v-clipboard` directive of the `v-clipboard` package to execute a method (`copyData`), it no longer returns the copied value (`json`) by itself, as towards the `v-clipboard:copy` directive of the `vue-clipboard2` package.

Solution:
- Replace the `v-clipboard:copy` directive with the `v-clipboard` directive.
- The `copyData` method needs to use `this.$clipboard.copy(value)` or `Clipboard.copy(value)` to copy the value.
In this case, since the package has been imported globally, `this.$clipboard.copy(value)` would be used, but with `setup` we cannot use `this`. So import `Clipboard` from `v-clipboard` package  into the component and use `Clipboard.copy(value)` instead.
You need to globally import the `v-clipboard` package to use the `v-clipboard` directive.

References:
- https://github.com/euvl/v-clipboard/pull/39
- https://www.npmjs.com/package/vue-clipboard2
- https://www.npmjs.com/package/v-clipboard
- https://codesandbox.io/p/sandbox/mystifying-breeze-csgc5f?file=%2Fsrc%2FApp.vue%3A43%2C7-43%2C22
---
 src/components/EditorJSON.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/EditorJSON.vue b/src/components/EditorJSON.vue
index 8f022e3c..ec50bf22 100644
--- a/src/components/EditorJSON.vue
+++ b/src/components/EditorJSON.vue
@@ -15,7 +15,7 @@
 			/>
 			<div class="editor-json__actions">
 				<button
-					v-clipboard:copy="copyData"
+					v-clipboard="copyData"
 					v-clipboard:success="copyDataSuccess"
 					v-clipboard:error="copyDataError"
 					type="button"
@@ -48,6 +48,7 @@
 	import { ref, onMounted, defineProps } from "vue";
 	import "vanilla-jsoneditor/themes/jse-theme-dark.css";
 	import JsonEditorVue from "json-editor-vue";
+	import { Clipboard } from "v-clipboard";
 
 	const props = defineProps({
 		"apiUrl": {
@@ -86,7 +87,7 @@
 	};
 
 	const copyData = () => {
-		JSON.stringify(json.value);
+		Clipboard.copy(JSON.stringify(json.value));
 	};
 
 	const copyDataSuccess = () => {