Fix closing popups when clicking outside of them (#378)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/378
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/list/partials/filter-popup.vue

@@ -0,0 +1,65 @@
+<template>
+	<transition name="fade">
+		<filters
+			@change="change"
+			v-if="visibleInternal"
+			v-model="params"
+			ref="filters"
+		/>
+	</transition>
+</template>
+
+<script>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import Filters from '../../../components/list/partials/filters'
+
+export default {
+	name: 'filter-popup',
+	data() {
+		return {
+			params: null,
+			visibleInternal: false,
+		}
+	},
+	components: {
+		Filters,
+	},
+	mounted() {
+		this.params = this.value
+		document.addEventListener('click', this.hidePopup)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hidePopup)
+	},
+	watch: {
+		value(newVal) {
+			this.$set(this, 'params', newVal)
+		},
+		visible() {
+			this.visibleInternal = !this.visibleInternal
+		},
+	},
+	props: {
+		value: {
+			required: true,
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		change() {
+			this.$emit('change', this.params)
+			this.$emit('input', this.params)
+		},
+		hidePopup(e) {
+			if (this.visibleInternal) {
+				closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+					this.visibleInternal = false
+				})
+			}
+		},
+	},
+}
+</script>