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

@@ -29,37 +29,41 @@
 	</modal>
 </template>
 
-<script lang="ts">
-import {defineComponent, ref} from 'vue'
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
 
 import Filters from '@/components/list/partials/filters.vue'
 
 import {getDefaultParams} from '@/composables/taskList'
 
-export default defineComponent({
-	name: 'filter-popup',
-	components: {
-		Filters,
-	},
-	props: {
+const	props = defineProps({
 	modelValue: {
 		required: true,
 	},
-	},
-	emits: ['update:modelValue'],
-	computed: {
-		value: {
+})
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
 	get() {
-				return this.modelValue
+		return props.modelValue
 	},
 	set(value) {
-				this.$emit('update:modelValue', value)
+		emit('update:modelValue', value)
 	},
+})
+
+watch(
+	() => props.modelValue,
+	(modelValue) => {
+		value.value = modelValue
 	},
-		hasFilters() {
+	{immediate: true},
+)
+		
+const hasFilters = computed(() => {
 	// this.value also contains the page parameter which we don't want to include in filters
 	// eslint-disable-next-line no-unused-vars
-			const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
+	const {filter_by, filter_value, filter_comparator, filter_concat, s} = value.value
 	const def = {...getDefaultParams()}
 
 	const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
@@ -72,29 +76,13 @@ export default defineComponent({
 	}
 
 	return JSON.stringify(params) !== JSON.stringify(defaultParams)
-		},
-	},
-	watch: {
-		modelValue: {
-			handler(value) {
-				this.value = value
-			},
-			immediate: true,
-		},
-	},
-	setup() {
+})
+
 const modalOpen = ref(false)
 
-		return {
-			modalOpen,
+function clearFilters() {
+	value.value = {...getDefaultParams()}
 }
-	},
-	methods: {
-		clearFilters() {
-			this.value = {...getDefaultParams()}
-		},
-	},
-})
 </script>
 
 <style scoped lang="scss">