feat: simplify filter-popup

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

@@ -1,9 +1,8 @@
 <template>
 	<transition name="fade">
 		<filters
-			@change="change"
 			v-if="visibleInternal"
-			v-model="params"
+			v-model="value"
 			ref="filters"
 		/>
 	</transition>
@@ -15,15 +14,33 @@ import Filters from '../../../components/list/partials/filters'
 
 export default {
 	name: 'filter-popup',
-	emits: ['update:modelValue', 'change'],
+	components: {
+		Filters,
+	},
+	props: {
+		modelValue: {
+			required: true,
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:modelValue'],
 	data() {
 		return {
-			params: null,
 			visibleInternal: false,
 		}
 	},
-	components: {
+	computed: {
-		Filters,
+		value: {
+			get() {
+				return this.modelValue
+			},
+			set(value) {
+				this.$emit('update:modelValue', value)
+			},
+		},
 	},
 	mounted() {
 		document.addEventListener('click', this.hidePopup)
@@ -42,26 +59,15 @@ export default {
 			this.visibleInternal = !this.visibleInternal
 		},
 	},
-	props: {
-		modelValue: {
-			required: true,
-		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	methods: {
-		change() {
-			this.$emit('change', this.params)
-			this.$emit('update:modelValue', this.params)
-		},
 		hidePopup(e) {
-			if (this.visibleInternal) {
+			if (!this.visibleInternal) {
-				closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+				return
-					this.visibleInternal = false
-				})
 			}
+
+			closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
+				this.visibleInternal = false
+			})
 		},
 	},
 }

src/components/tasks/gantt-component.vue

@@ -11,9 +11,9 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks()"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks()"
 			/>
 		</div>
 		<div class="dates">

src/views/list/views/Kanban.vue

@@ -11,7 +11,7 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="() => {filtersChanged = true; loadBuckets()}"
+				@update:modelValue="() => {filtersChanged = true; loadBuckets()}"
 				:visible="showFilters"
 				v-model="params"
 			/>

src/views/list/views/List.vue

@@ -50,9 +50,9 @@
 				</x-button>
 			</div>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks(1)"
 			/>
 		</div>
 

src/views/list/views/Table.vue

@@ -59,9 +59,9 @@
 				</card>
 			</transition>
 			<filter-popup
-				@change="loadTasks(1)"
 				:visible="showTaskFilter"
 				v-model="params"
+				@update:modelValue="loadTasks(1)"
 			/>
 		</div>