Make Vue clipboard plugin available globally (#3192)

Signed-off-by: Florian Hotze <dev@florianhotze.com>

bundles/org.openhab.ui/web/src/components/util/clipboard-icon.vue

@@ -8,11 +8,6 @@
 </style>
 
 <script>
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 export default {
   props: ['value', 'size'],
   methods: {

bundles/org.openhab.ui/web/src/js/app.js

@@ -58,6 +58,10 @@ Vue.use(Trend)
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
 
+// Import clipboard plugin
+import Clipboard from 'v-clipboard'
+Vue.use(Clipboard)
+
 // Extend prototype with the openHAB API interface
 Vue.prototype.$oh = openhab
 
@@ -74,6 +78,7 @@ const app = new Vue({
   }
 })
 
+// Register global components
 Vue.component('oh-icon', OHIconComponent)
 Vue.component('generic-widget-component', GenericWidgetComponent)
 Vue.component('developer-dock-icon', DeveloperDockIcon)

bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue

@@ -434,11 +434,6 @@
 </style>
 
 <script lang="ts">
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 import MovablePopupMixin from '@/pages/settings/movable-popup-mixin'
 
 export default {
@@ -916,6 +911,7 @@ export default {
       })
 
       // Copy to clipboard
+      // Uses the Clipboard API to write the ClipboardItem, as v-clipboard does not support HTML. This might not work in insecure contexts.
       navigator.clipboard
         .write([clipboardItem])
         .then(() => {

bundles/org.openhab.ui/web/src/pages/settings/file-definition-mixin.js

@@ -1,8 +1,3 @@
-import Vue from 'vue'
-import Clipboard from 'v-clipboard'
-
-Vue.use(Clipboard)
-
 function executeFileDefinitionCopy (vueInstance, objectType, objectTypeLabel, objectIds, copiedObjectsLabel, fileFormatLabel, mediaType) {
   const progressDialog = vueInstance.$f7.dialog.progress(`Loading ${objectTypeLabel} ${fileFormatLabel} definition...`)