frontend/src/components/misc/popup.vue

<template>
	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
	<div class="popup" :class="{'is-open': open}">
		<slot ref="popupContent"/>
	</div>
</template>

<script>
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
import {onBeforeUnmount, onMounted, ref} from 'vue'

export default {
	setup() {
		const open = ref(false)
		const popupContent = ref(null)

		const toggle = () => {
			open.value = !open.value
		}
		
		const hidePopup = e => {
			if (!open.value) {
				return
			}

			closeWhenClickedOutside(e, popupContent.$el, () => {
				open.value = false
			})
		}
		
		onMounted(() => {
			document.addEventListener('click', hidePopup)
		})
		
		onBeforeUnmount(() => {
			document.removeEventListener('click', hidePopup)
		})

		return {
			open,
			toggle,
		}
	},
}
</script>

<style scoped lang="scss">
.popup {
	transition: opacity $transition;
	opacity: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	top: 1rem;
	margin: 0 !important;

	&.is-open {
		opacity: 1;
		height: auto;
		margin: 1rem 0 !important;
	}
}
</style>