From 0b58973d872d8d54c9a829a06c8535a7a7115613 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 17 Oct 2022 13:45:03 +0200
Subject: [PATCH] feat: rework popup

---
 src/components/misc/popup.vue | 48 +++++++++++++++++------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index b6da6a25d1..7d8139d3ce 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -1,20 +1,20 @@
 <template>
 	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
-	<div class="popup" :class="{'is-open': open, 'has-overflow': props.hasOverflow && open}" ref="popup">
+	<div
+		class="popup"
+		:class="{
+			'is-open': open,
+			'has-overflow': props.hasOverflow && open
+		}"
+		ref="popup"
+	>
 		<slot name="content" :isOpen="open"/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {onBeforeUnmount, onMounted, ref} from 'vue'
-
-const open = ref(false)
-const popup = ref(null)
-
-const toggle = () => {
-	open.value = !open.value
-}
+import {ref} from 'vue'
+import {onClickOutside} from '@vueuse/core'
 
 const props = defineProps({
 	hasOverflow: {
@@ -23,24 +23,22 @@ const props = defineProps({
 	},
 })
 
-function hidePopup(e) {
+const open = ref(false)
+const popup = ref<HTMLElement | null>(null)
+
+function close() {
+	open.value = false
+}
+
+function toggle() {
+	open.value = !open.value
+}
+
+onClickOutside(popup, () => {
 	if (!open.value) {
 		return
 	}
-
-	// we actually want to use popup.$el, not its value.
-	// eslint-disable-next-line vue/no-ref-as-operand
-	closeWhenClickedOutside(e, popup.value, () => {
-		open.value = false
-	})
-}
-
-onMounted(() => {
-	document.addEventListener('click', hidePopup)
-})
-
-onBeforeUnmount(() => {
-	document.removeEventListener('click', hidePopup)
+	close()
 })
 </script>