fix: use vue3 v-model bindings

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

src/components/home/navigation.vue

@@ -84,8 +84,8 @@
 					--> 
 					<draggable
 						v-bind="dragOptions"
-						:value="activeLists[nk]"
+						:modelValue="activeLists[nk]"
-						@input="(lists) => updateActiveLists(n, lists)"
+						@update:modelValue="(lists) => updateActiveLists(n, lists)"
 						:group="`namespace-${n.id}-lists`"
 						@start="() => drag = true"
 						@end="e => saveListPosition(e, nk)"

src/components/input/button.vue

@@ -52,6 +52,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['click'],
 	computed: {
 		showIconOnly() {
 			return this.icon !== '' && typeof this.$slots.default === 'undefined'

src/components/input/colorPicker.vue

@@ -53,7 +53,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		menuPosition: {
@@ -61,10 +61,11 @@ export default {
 			default: 'top',
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
-			handler(value) {
+			handler(modelValue) {
-				this.color = value
+				this.color = modelValue
 			},
 			immediate: true,
 		},
@@ -89,7 +90,7 @@ export default {
 			}
 
 			this.lastChangeTimeout = setTimeout(() => {
-				this.$emit('input', this.color)
+				this.$emit('update:modelValue', this.color)
 				this.$emit('change')
 			}, 500)
 		},

src/components/input/datepicker.vue

@@ -136,7 +136,7 @@ export default {
 		flatPickr,
 	},
 	props: {
-		value: {
+		modelValue: {
 			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
 		},
 		chooseDateLabel: {
@@ -150,6 +150,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
 	mounted() {
 		document.addEventListener('click', this.hideDatePopup)
 	},
@@ -157,7 +158,7 @@ export default {
 		document.removeEventListener('click', this.hideDatePopup)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler: 'setDateValue',
 			immediate: true,
 		},
@@ -191,7 +192,7 @@ export default {
 		},
 		updateData() {
 			this.changed = true
-			this.$emit('input', this.date)
+			this.$emit('update:modelValue', this.date)
 			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {

src/components/input/editor.vue

@@ -5,7 +5,7 @@
 		<vue-easymde
 			:configs="config"
 			@change="bubble"
-			@input="handleInput"
+			@update:modelValue="handleInput"
 			class="content"
 			v-if="isEditActive"
 			v-model="text"/>
@@ -61,7 +61,7 @@ export default {
 		VueEasymde,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -101,6 +101,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	computed: {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
@@ -249,21 +250,21 @@ export default {
 		}
 	},
 	watch: {
-		value(newVal) {
+		modelValue(modelValue) {
-			this.text = newVal
+			this.text = modelValue
 			this.$nextTick(this.renderPreview)
 		},
 		text(newVal, oldVal) {
 			// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
-			if (oldVal === '' && this.text === this.value) {
+			if (oldVal === '' && this.text === this.modelValue) {
 				return
 			}
 			this.bubble()
 		},
 	},
 	mounted() {
-		if (this.value !== '') {
+		if (this.modelValue !== '') {
-			this.text = this.value
+			this.text = this.modelValue
 		}
 
 		if (this.previewIsDefault && this.hasPreview) {
@@ -296,7 +297,7 @@ export default {
 			}
 
 			this.changeTimeout = setTimeout(() => {
-				this.$emit('input', this.text)
+				this.$emit('update:modelValue',this.text)
 				this.$emit('change', this.text)
 			}, timeout)
 		},

src/components/input/fancycheckbox.vue

@@ -30,7 +30,7 @@ export default {
 		}
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: false,
 		},
 		disabled: {
@@ -39,10 +39,11 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
-			handler(value) {
+			handler(modelValue) {
-				this.checked = value
+				this.checked = modelValue
 
 			},
 			immediate: true,
@@ -51,7 +52,7 @@ export default {
 	methods: {
 		updateData(checked) {
 			this.checked = checked
-			this.$emit('input', checked)
+			this.$emit('update:modelValue', checked)
 			this.$emit('change', checked)
 		},
 	},

src/components/input/multiselect.vue

@@ -83,14 +83,6 @@
 <script>
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
-/**
- * Available events:
- *   @search: Triggered every time the search query input changes
- *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
- *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
- *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
- */
-
 export default {
 	name: 'multiselect',
 	data() {
@@ -133,7 +125,7 @@ export default {
 			},
 		},
 		// The object with the value, updated every time an entry is selected.
-		value: {
+		modelValue: {
 			default() {
 				return null
 			},
@@ -188,6 +180,16 @@ export default {
 			},
 		},
 	},
+	
+	/**
+	 * Available events:
+	 *   @search: Triggered every time the search query input changes
+	 *   @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
+	 *   @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
+	 *   @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
+	 */
+	emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
+
 	mounted() {
 		document.addEventListener('click', this.hideSearchResultsHandler)
 	},
@@ -195,7 +197,7 @@ export default {
 		document.removeEventListener('click', this.hideSearchResultsHandler)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.setSelectedObject(value)
 			},
@@ -278,7 +280,7 @@ export default {
 				this.internalValue = object
 			}
 
-			this.$emit('input', this.internalValue)
+			this.$emit('update:modelValue', this.internalValue)
 			this.$emit('select', object)
 			this.setSelectedObject(object)
 			this.closeSearchResults()
@@ -352,7 +354,7 @@ export default {
 				}
 			}
 
-			this.$emit('input', this.internalValue)
+			this.$emit('update:modelValue', this.internalValue)
 			this.$emit('remove', item)
 		},
 		focus() {

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

@@ -15,6 +15,7 @@ import Filters from '../../../components/list/partials/filters'
 
 export default {
 	name: 'filter-popup',
+	emits: ['update:modelValue', 'change'],
 	data() {
 		return {
 			params: null,
@@ -31,7 +32,7 @@ export default {
 		document.removeEventListener('click', this.hidePopup)
 	},
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.params = value
 			},
@@ -42,7 +43,7 @@ export default {
 		},
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 		visible: {
@@ -53,7 +54,7 @@ export default {
 	methods: {
 		change() {
 			this.$emit('change', this.params)
-			this.$emit('input', this.params)
+			this.$emit('update:modelValue', this.params)
 		},
 		hidePopup(e) {
 			if (this.visibleInternal) {

src/components/list/partials/filters.vue

@@ -254,12 +254,13 @@ export default {
 		this.filters.requireAllFilters = this.params.filter_concat === 'and'
 	},
 	props: {
-		value: {
+		modelValue: {
 			required: true,
 		},
 	},
+	emits: ['update:modelValue', 'change'],
 	watch: {
-		value: {
+		modelValue: {
 			handler(value) {
 				this.params = value
 				this.prepareFilters()
@@ -293,7 +294,7 @@ export default {
 	},
 	methods: {
 		change() {
-			this.$emit('input', this.params)
+			this.$emit('update:modelValue', this.params)
 			this.$emit('change', this.params)
 		},
 		prepareFilters() {

src/components/misc/api-config.vue

@@ -60,6 +60,7 @@ export default {
 			successMsg: '',
 		}
 	},
+	emits: ['foundApi'],
 	created() {
 		if (this.apiUrl === '') {
 			this.configureApi = true

src/components/misc/card.vue

@@ -51,5 +51,6 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['close'],
 }
 </script>

src/components/misc/create-edit.vue

@@ -77,6 +77,7 @@ export default {
 			default: false,
 		},
 	},
+	emits: ['create', 'primary', 'tertary'],
 	methods: {
 		primary() {
 			this.$emit('create')

src/components/misc/dropdown.vue

@@ -37,6 +37,7 @@ export default {
 			default: 'ellipsis-h',
 		},
 	},
+	emits: ['close'],
 	methods: {
 		hide(e) {
 			if (this.open) {

src/components/misc/subscription.vue

@@ -49,6 +49,7 @@ export default {
 			default: true,
 		},
 	},
+	emits: ['change'],
 	computed: {
 		tooltipText() {
 			if (this.disabled) {

src/components/modal/modal.vue

@@ -102,6 +102,7 @@ export default {
 			validator: validValue(VARIANTS),
 		},
 	},
+	emits: ['close', 'submit'],
 }
 </script>
 

src/components/namespace/namespace-search.vue

@@ -14,6 +14,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 
 export default {
 	name: 'namespace-search',
+	emits: ['selected'],
 	data() {
 		return {
 			query: '',

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: {
+	emits: ['update:modelValue', 'change'],
-		// Set the priority to the :value every time it changes from the outside
+	computed: {
-		value(newVal) {
+		percentDone: {
-			this.percentDone = newVal
+			get() {
-		},
+				return this.modelValue
-	},
+			},
-	mounted() {
+			set(percentDone) {
-		this.percentDone = this.value
+				this.$emit('update:modelValue', percentDone)
-	},
+				this.$emit('change')
-	methods: {
+			},
-		updateData() {
-			this.$emit('input', this.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: {
+	emits: ['click'],
-		click() {
-			this.$emit('click')
-		},
-	},
 }
 </script>