fix: use vue3 v-model bindings

see: https://v3.vuejs.org/guide/migration/v-model.html

src/components/tasks/add-task.vue

@@ -49,6 +49,7 @@ const cleanupTitle = title => {
 
 export default {
 	name: 'add-task',
+	emits: ['taskAdded'],
 	data() {
 		return {
 			newTaskTitle: '',

src/components/tasks/partials/defer-task.vue

@@ -57,12 +57,14 @@ export default {
 		flatPickr,
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue'],
+
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 				this.dueDate = value.dueDate
@@ -125,7 +127,7 @@ export default {
 				.then((r) => {
 					this.lastValue = r.dueDate
 					this.task = r
-					this.$emit('input', r)
+					this.$emit('update:modelValue', r)
 				})
 				.catch((e) => {
 					this.$message.error(e)

src/components/tasks/partials/description.vue

@@ -57,7 +57,7 @@ export default {
 		loading: LOADING,
 	}),
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		attachmentUpload: {
@@ -67,8 +67,9 @@ export default {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 			},
@@ -82,7 +83,7 @@ export default {
 			this.$store.dispatch('tasks/update', this.task)
 				.then(t => {
 					this.task = t
-					this.$emit('input', t)
+					this.$emit('update:modelValue', t)
 					this.saved = true
 					setTimeout(() => {
 						this.saved = false

src/components/tasks/partials/editAssignees.vue

@@ -55,10 +55,11 @@ export default {
 		disabled: {
 			default: false,
 		},
-		value: {
+		modelValue: {
 			type: Array,
 		},
 	},
+	emits: ['update:modelValue'],
 	data() {
 		return {
 			newAssignee: new UserModel(),
@@ -69,7 +70,7 @@ export default {
 		}
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.assignees = value
 			},
@@ -80,7 +81,7 @@ export default {
 		addAssignee(user) {
 			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
 				.then(() => {
-					this.$emit('input', this.assignees)
+					this.$emit('update:modelValue', this.assignees)
 					this.$message.success({message: this.$t('task.assignee.assignSuccess')})
 				})
 				.catch(e => {

src/components/tasks/partials/editLabels.vue

@@ -49,7 +49,7 @@ import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 export default {
 	name: 'edit-labels',
 	props: {
-		value: {
+		modelValue: {
 			default: () => [],
 			type: Array,
 		},
@@ -62,6 +62,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	data() {
 		return {
 			labelTaskService: new LabelTaskService(),
@@ -74,7 +75,7 @@ export default {
 		Multiselect,
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.labels = value
 			},
@@ -101,7 +102,7 @@ export default {
 		},
 		addLabel(label, showNotification = true) {
 			const bubble = () => {
-				this.$emit('input', this.labels)
+				this.$emit('update:modelValue', this.labels)
 				this.$emit('change', this.labels)
 			}
 			
@@ -128,7 +129,7 @@ export default {
 						this.labels.splice(l, 1)
 					}
 				}
-				this.$emit('input', this.labels)
+				this.$emit('update:modelValue', this.labels)
 				this.$emit('change', this.labels)
 			}
 

src/components/tasks/partials/heading.vue

@@ -39,14 +39,14 @@ export default {
 	computed: {
 		...mapState(['loading']),
 		task() {
-			return this.value
+			return this.modelValue
 		},
 		textIdentifier() {
 			return this.task?.getTextIdentifier() || ''
 		},
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		canWrite: {
@@ -54,6 +54,9 @@ export default {
 			default: false,
 		},
 	},
+
+	emits: ['update:modelValue'],
+
 	methods: {
 		save(title) {
 			// We only want to save if the title was actually changed.
@@ -73,7 +76,7 @@ export default {
 
 			this.$store.dispatch('tasks/update', newTask)
 				.then((task) => {
-					this.$emit('input', task)
+					this.$emit('update:modelValue', task)
 					this.showSavedMessage = true
 					setTimeout(() => {
 						this.showSavedMessage = false

src/components/tasks/partials/listSearch.vue

@@ -32,15 +32,16 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: false,
 		},
 	},
+	emits: ['update:modelValue', 'selected'],
 	components: {
 		Multiselect,
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.list = value
 			},
@@ -68,7 +69,7 @@ export default {
 		select(list) {
 			this.list = list
 			this.$emit('selected', list)
-			this.$emit('input', list)
+			this.$emit('update:modelValue', list)
 		},
 		namespace(namespaceId) {
 			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)

src/components/tasks/partials/percentDoneSelect.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select :disabled="disabled || null" @change="updateData" v-model.number="percentDone">
+		<select :disabled="disabled || null" v-model.number="percentDone">
 			<option value="0">0%</option>
 			<option value="0.1">10%</option>
 			<option value="0.2">20%</option>
@@ -19,13 +19,8 @@
 <script>
 export default {
 	name: 'percentDoneSelect',
-	data() {
-		return {
-			percentDone: 0,
-		}
-	},
 	props: {
-		value: {
+		modelValue: {
 			default: 0,
 			type: Number,
 		},
@@ -33,19 +28,16 @@ export default {
 			default: false,
 		},
 	},
-	watch: {
-		// Set the priority to the :value every time it changes from the outside
-		value(newVal) {
-			this.percentDone = newVal
-		},
-	},
-	mounted() {
-		this.percentDone = this.value
-	},
-	methods: {
-		updateData() {
-			this.$emit('input', this.percentDone)
-			this.$emit('change')
+	emits: ['update:modelValue', 'change'],
+	computed: {
+		percentDone: {
+			get() {
+				return this.modelValue
+			},
+			set(percentDone) {
+				this.$emit('update:modelValue', percentDone)
+				this.$emit('change')
+			},
 		},
 	},
 }

src/components/tasks/partials/prioritySelect.vue

@@ -23,7 +23,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: 0,
 			type: Number,
 		},
@@ -31,9 +31,10 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
 		// Set the priority to the :value every time it changes from the outside
-		value: {
+		modelValue: {
 			handler(value) {
 				this.priority = value
 			},
@@ -42,7 +43,7 @@ export default {
 	},
 	methods: {
 		updateData() {
-			this.$emit('input', this.priority)
+			this.$emit('update:modelValue', this.priority)
 			this.$emit('change')
 		},
 	},

src/components/tasks/partials/reminders.vue

@@ -37,7 +37,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: () => [],
 			validator: prop => {
 				// This allows arrays of Dates and strings
@@ -61,14 +61,15 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	components: {
 		datepicker,
 	},
 	mounted() {
-		this.reminders = this.value
+		this.reminders = this.modelValue
 	},
 	watch: {
-		value(newVal) {
+		modelValue(newVal) {
 			for (const i in newVal) {
 				if (typeof newVal[i] === 'string') {
 					newVal[i] = new Date(newVal[i])
@@ -79,7 +80,7 @@ export default {
 	},
 	methods: {
 		updateData() {
-			this.$emit('input', this.reminders)
+			this.$emit('update:modelValue', this.reminders)
 			this.$emit('change')
 		},
 		addReminderDate(index = null) {

src/components/tasks/partials/repeatAfter.vue

@@ -66,7 +66,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			default: () => {},
 			required: true,
 		},
@@ -74,8 +74,9 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.task = value
 				if (typeof value.repeatAfter !== 'undefined') {
@@ -92,7 +93,7 @@ export default {
 			}
 			
 			this.task.repeatAfter = this.repeatAfter
-			this.$emit('input', this.task)
+			this.$emit('update:modelValue', this.task)
 			this.$emit('change')
 		},
 		setRepeatAfter(amount, type) {

src/components/tasks/partials/singleTaskInList.vue

@@ -140,6 +140,7 @@ export default {
 			default: true,
 		},
 	},
+	emits: ['task-updated'],
 	watch: {
 		theTask(newVal) {
 			this.task = newVal

src/components/tasks/partials/sort.vue

@@ -1,5 +1,5 @@
 <template>
-	<a @click="click">
+	<a @click="$emit('click')">
 		<icon icon="sort-up" v-if="order === 'asc'"/>
 		<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
 		<icon icon="sort" v-else/>
@@ -15,10 +15,6 @@ export default {
 			default: 'none',
 		},
 	},
-	methods: {
-		click() {
-			this.$emit('click')
-		},
-	},
+	emits: ['click'],
 }
 </script>