Fix copy-to-clipboard for Vue 3.

frontend/npm-shrinkwrap.json

@@ -64,9 +64,9 @@
         "sweetalert2": "11.4.8",
         "vue": "^3.2",
         "vue-axios": "^3.5",
-        "vue-clipboard2": "^0.3.3",
         "vue-loader": "^17",
         "vue-style-loader": "^4.1.3",
+        "vue3-clipboard": "^1.0.0",
         "vue3-daterange-picker": "^1",
         "vue3-gettext": "^2.3.4",
         "vuedraggable": "^2.24.1",
@@ -10031,14 +10031,6 @@
         "vue": "^3.0.0 || ^2.0.0"
       }
     },
-    "node_modules/vue-clipboard2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
-      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
-      "dependencies": {
-        "clipboard": "^2.0.0"
-      }
-    },
     "node_modules/vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@@ -10167,6 +10159,17 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue3-clipboard": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
+      "integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
+      "dependencies": {
+        "clipboard": "^2.0.6"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue3-daterange-picker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
@@ -18152,14 +18155,6 @@
       "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
       "requires": {}
     },
-    "vue-clipboard2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
-      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
-      "requires": {
-        "clipboard": "^2.0.0"
-      }
-    },
     "vue-functional-data-merge": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
@@ -18254,6 +18249,14 @@
         }
       }
     },
+    "vue3-clipboard": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-clipboard/-/vue3-clipboard-1.0.0.tgz",
+      "integrity": "sha512-GUqKh1oO79xDpq0z+cCv/NDVTpcJGNDzeNgT3PmTdTp/WJh3gcTrDqIYKycKhzMFOtIFJ7hO/+usgyWtT+fNhA==",
+      "requires": {
+        "clipboard": "^2.0.6"
+      }
+    },
     "vue3-daterange-picker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",

frontend/package.json

@@ -65,9 +65,9 @@
     "sweetalert2": "11.4.8",
     "vue": "^3.2",
     "vue-axios": "^3.5",
-    "vue-clipboard2": "^0.3.3",
     "vue-loader": "^17",
     "vue-style-loader": "^4.1.3",
+    "vue3-clipboard": "^1.0.0",
     "vue3-daterange-picker": "^1",
     "vue3-gettext": "^2.3.4",
     "vuedraggable": "^2.24.1",

frontend/vue/base.js

@@ -5,6 +5,7 @@ import gettext from './vendor/gettext';
 import {createApp} from "vue";
 import useBootstrapVue from "./vendor/bootstrapVue";
 import useSweetAlert from "./vendor/sweetalert";
+import useVueClipboard from "~/vendor/clipboard";
 
 export default function (component, options) {
     return function (el, props) {
@@ -80,6 +81,9 @@ export default function (component, options) {
         /* SweetAlert */
         useSweetAlert(vueApp);
 
+        /* Clipboard */
+        useVueClipboard(vueApp);
+
         vueApp.mount(el);
     };
 }

frontend/vue/components/Common/CopyToClipboardButton.vue

@@ -5,29 +5,22 @@
     </button>
 </template>
 
-<script>
+<script setup>
-import '~/vendor/clipboard.js';
+import Icon from "~/components/Common/Icon.vue";
-import Icon from './Icon';
+import {copyToClipboard} from "~/vendor/clipboard";
 
-export default {
+const props = defineProps({
-    components: { Icon },
+    text: {
-    props: {
+        type: String,
-        text: {
+        required: true,
-            type: String,
-            required: true,
-        },
-        hideText: {
-            type: Boolean,
-            default: false
-        }
     },
-    methods: {
+    hideText: {
-        doCopy() {
+        type: Boolean,
-            this.$copyText(this.text).then(function (e) {
+        default: false
-            }, function (e) {
-                console.error(e);
-            })
-        }
     }
+});
+
+const doCopy = () => {
+    copyToClipboard(props.text);
 };
 </script>

frontend/vue/components/Common/StreamingLogModal.vue

@@ -16,6 +16,7 @@
 <script>
 import '~/vendor/clipboard.js';
 import StreamingLogView from "~/components/Common/StreamingLogView";
+import {copyToClipboard} from "~/vendor/clipboard";
 
 export default {
     name: 'StreamingLogModal',
@@ -36,7 +37,7 @@ export default {
             this.$refs.modal.show();
         },
         doCopy() {
-            this.$copyText(this.$refs.logView.getContents());
+            copyToClipboard(this.$refs.logView.getContents());
         },
         close() {
             this.$refs.modal.hide();

frontend/vue/components/Stations/Queue/LogsModal.vue

@@ -15,6 +15,7 @@
 
 <script>
 import '~/vendor/clipboard.js';
+import {copyToClipboard} from "~/vendor/clipboard";
 
 export default {
     name: 'QueueLogsModal',
@@ -39,7 +40,7 @@ export default {
             this.$refs.modal.show();
         },
         doCopy() {
-            this.$copyText(this.logs);
+            copyToClipboard(this.logs);
         },
         close() {
             this.$refs.modal.hide();

frontend/vue/vendor/clipboard.js

@@ -1,7 +1,23 @@
-import VueClipboard from 'vue-clipboard2';
+import VueClipboard, {copyText} from 'vue3-clipboard';
 
-VueClipboard.config.autoSetContainer = true;
+export function copyToClipboard(text) {
+    copyText(
+        text,
+        undefined,
+        (error) => {
+            if (error) {
+                console.error(error)
+            }
+        }
+    );
+}
 
 export default function useVueClipboard(vueApp) {
-    vueApp.use(VueClipboard);
+    vueApp.use(
+        VueClipboard,
+        {
+            autoSetContainer: true,
+            appendToBody: true,
+        }
+    );
 };