feat: move filter popup to a modal

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

@@ -6,39 +6,34 @@
 	>
 		{{ $t('filters.clear') }}
 	</x-button>
-	<popup :has-overflow="true">
+	<x-button
-		<template #trigger="{toggle}">
+		@click="() => modalOpen = true"
-			<x-button
+		variant="secondary"
-				@click.prevent.stop="toggle()"
+		icon="filter"
-				variant="secondary"
+	>
-				icon="filter"
+		{{ $t('filters.title') }}
-			>
+	</x-button>
-				{{ $t('filters.title') }}
+	<modal @close="() => modalOpen = false" :enabled="modalOpen">
-			</x-button>
+		<filters
-		</template>
+			:has-title="true"
-		<template #content="{isOpen}">
+			v-model="value"
-			<filters
+			ref="filters"
-				v-model="value"
+			class="filter-popup"
-				ref="filters"
+			:class="{'is-open': isOpen}"
-				class="filter-popup"
+		/>
-				:class="{'is-open': isOpen}"
+	</modal>
-			/>
-		</template>
-	</popup>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue'
+import {defineComponent, ref} from 'vue'
 
-import Filters from '@/components/list/partials/filters'
+import Filters from '@/components/list/partials/filters.vue'
-import Popup from '@/components/misc/popup'
 
 import {getDefaultParams} from '@/composables/taskList'
 
 export default defineComponent({
 	name: 'filter-popup',
 	components: {
-		Popup,
 		Filters,
 	},
 	props: {
@@ -82,6 +77,13 @@ export default defineComponent({
 			immediate: true,
 		},
 	},
+	setup() {
+		const modalOpen = ref(false)
+
+		return {
+			modalOpen,
+		}
+	},
 	methods: {
 		clearFilters() {
 			this.value = {...getDefaultParams()}

src/components/list/partials/filters.vue

@@ -1,5 +1,5 @@
 <template>
-	<card class="filters has-overflow">
+	<card class="filters has-overflow" :title="hasTitle ? $t('filters.title') : ''">
 		<div class="field">
 			<fancycheckbox v-model="params.filter_include_nulls">
 				{{ $t('filters.attributes.includeNulls') }}
@@ -263,6 +263,10 @@ export default defineComponent({
 		modelValue: {
 			required: true,
 		},
+		hasTitle: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update:modelValue', 'change'],
 	watch: {

src/components/misc/modal.vue

@@ -91,9 +91,6 @@ watch(
 		scrollLock.value = enabled
 		store.commit('modalActive', enabled)
 	},
-	{
-		immediate: true,
-	},
 )
 </script>