fix: use vue3 v-model bindings

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

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: {
-			handler(value) {
-				this.color = value
+		modelValue: {
+			handler(modelValue) {
+				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) {
-			this.text = newVal
+		modelValue(modelValue) {
+			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 !== '') {
-			this.text = this.value
+		if (this.modelValue !== '') {
+			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: {
-			handler(value) {
-				this.checked = value
+		modelValue: {
+			handler(modelValue) {
+				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() {