Switch to a working on-click-outside directive.

Author: itsgoingd

package-lock.json

@@ -19,6 +19,8 @@
   },
   "dependencies": {
     "@sqltools/formatter": "^1.2.2",
+    "@vueuse/components": "^12.4.0",
+    "@vueuse/core": "^12.4.0",
     "ansi-to-html": "^0.7.2",
     "date-fns": "^4.1.0",
     "feather-icons": "^4.28.0",
@@ -37,7 +39,6 @@
     "register-service-worker": "^1.7.1",
     "sass": "^1.55.0",
     "urijs": "^1.19.2",
-    "v-click-outside": "^3.1.2",
     "vue": "^3.2.0",
     "vue-clipboard2": "^0.3.1"
   },

package.json

@@ -5,7 +5,7 @@ import Icon from './components/UI/Icon'
 import Spinner from './components/UI/Spinner'
 
 import VueClipboard from 'vue-clipboard2'
-import vClickOutside from 'v-click-outside'
+import { vOnClickOutside } from '@vueuse/components'
 
 import lodashGet from 'lodash/get'
 
@@ -32,7 +32,8 @@ export default function createApp(global) {
 	VueClipboard.config.autoSetContainer = true
 
 	app.use(VueClipboard)
-	app.use(vClickOutside)
+
+	app.directive('on-click-outside', vOnClickOutside)
 
 	app.mixin({ methods: { $get: lodashGet } })
 

src/app.js

@@ -1,5 +1,5 @@
 <template>
-	<div class="popover" :class="classList" v-if="shown" v-click-outside="close">
+	<div class="popover" :class="classList" v-if="shown" v-on-click-outside="close">
 		<div class="popover-content">
 			<slot></slot>
 		</div>