feat: use v-model more consequent (#2356)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2356
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/date/datepickerWithRange.vue

@@ -85,7 +85,7 @@ import DatemathHelp from '@/components/date/datemathHelp.vue'
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['dateChanged', 'update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 const props = defineProps({
 	modelValue: {
 		required: false,
@@ -127,7 +127,6 @@ function emitChanged() {
 		dateFrom: from.value === '' ? null : from.value,
 		dateTo: to.value === '' ? null : to.value,
 	}
-	emit('dateChanged', args)
 	emit('update:modelValue', args)
 }
 

src/components/input/colorPicker.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 			default: 'top',
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(modelValue) {
@@ -98,7 +98,6 @@ export default defineComponent({
 
 			this.lastChangeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.color)
-				this.$emit('change')
 			}, 500)
 		},
 		reset() {

src/components/input/datepicker.vue

@@ -131,7 +131,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
+	emits: ['update:modelValue', 'close', 'close-on-change'],
 	mounted() {
 		document.addEventListener('click', this.hideDatePopup)
 	},
@@ -186,7 +186,6 @@ export default defineComponent({
 		updateData() {
 			this.changed = true
 			this.$emit('update:modelValue', this.date)
-			this.$emit('change', this.date)
 		},
 		toggleDatePopup() {
 			if (this.disabled) {

src/components/input/editor.vue

@@ -136,7 +136,7 @@ export default defineComponent({
 			default: '',
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	computed: {
 		showPreviewText() {
 			return this.isPreviewActive && this.text === '' && this.emptyText !== ''
@@ -212,7 +212,6 @@ export default defineComponent({
 
 			this.changeTimeout = setTimeout(() => {
 				this.$emit('update:modelValue', this.text)
-				this.$emit('change', this.text)
 			}, timeout)
 		},
 		replaceAt(str, index, replacement) {

src/components/list/list-settings-dropdown.vue

@@ -60,8 +60,8 @@
 				:is-button="false"
 				entity="list"
 				:entity-id="list.id"
-				:subscription="list.subscription"
-				@change="sub => subscription = sub"
+				:model-value="list.subscription"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item

src/components/list/partials/filters.vue

@@ -38,7 +38,7 @@
 				<priority-select
 					:disabled="!filters.usePriority || undefined"
 					v-model.number="filters.priority"
-					@change="setPriority"
+					@update:model-value="setPriority"
 				/>
 				<fancycheckbox
 					v-model="filters.usePriority"
@@ -53,7 +53,7 @@
 			<div class="control single-value-control">
 				<percent-done-select
 					v-model.number="filters.percentDone"
-					@change="setPercentDoneFilter"
+					@update:model-value="setPercentDoneFilter"
 					:disabled="!filters.usePercentDone || undefined"
 				/>
 				<fancycheckbox
@@ -68,8 +68,9 @@
 			<label class="label">{{ $t('task.attributes.dueDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('due_date', values)"
-					v-model="filters.dueDate">
+					v-model="filters.dueDate"
+					@update:model-value="values => setDateFilter('due_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -82,8 +83,9 @@
 			<label class="label">{{ $t('task.attributes.startDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('start_date', values)"
-					v-model="filters.startDate">
+					v-model="filters.startDate"
+					@update:model-value="values => setDateFilter('start_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -96,8 +98,9 @@
 			<label class="label">{{ $t('task.attributes.endDate') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('end_date', values)"
-					v-model="filters.endDate">
+					v-model="filters.endDate"
+					@update:model-value="values => setDateFilter('end_date', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -110,8 +113,9 @@
 			<label class="label">{{ $t('task.attributes.reminders') }}</label>
 			<div class="control">
 				<datepicker-with-range
-					@dateChanged="values => setDateFilter('reminders', values)"
-					v-model="filters.reminders">
+					v-model="filters.reminders"
+					@update:model-value="values => setDateFilter('reminders', values)"
+				>
 					<template #trigger="{toggle, buttonText}">
 						<x-button @click.prevent.stop="toggle()" variant="secondary" :shadow="false" class="mb-2">
 							{{ buttonText }}
@@ -141,7 +145,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control labels-list">
-				<edit-labels v-model="labels" @change="changeLabelFilter"/>
+				<edit-labels v-model="labels" @update:model-value="changeLabelFilter"/>
 			</div>
 		</div>
 
@@ -278,7 +282,7 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	emits: ['update:modelValue', 'change'],
+	emits: ['update:modelValue'],
 	watch: {
 		modelValue: {
 			handler(value) {
@@ -312,7 +316,6 @@ export default defineComponent({
 			const params = {...this.params}
 			params.filter_value = params.filter_value.map(v => v instanceof Date ? v.toISOString() : v)
 			this.$emit('update:modelValue', params)
-			this.$emit('change', params)
 		},
 		prepareFilters() {
 			this.prepareDone()

src/components/misc/subscription.vue

@@ -5,7 +5,7 @@
 		:icon="iconName"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
-		:disabled="disabled || undefined"
+		:disabled="disabled"
 	>
 		{{ buttonText }}
 	</x-button>
@@ -23,6 +23,7 @@
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
 		:class="{'is-disabled': disabled}"
+		:disabled="disabled"
 	>
 		<span class="icon">
 			<icon :icon="iconName"/>
@@ -51,7 +52,7 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
-	subscription: {
+	modelValue: {
 		type: Object as PropType<ISubscription>,
 		default: null,
 	},
@@ -61,9 +62,9 @@ const props = defineProps({
 	},
 })
 
-const subscriptionEntity = computed<string | null>(() => props.subscription?.entity ?? null)
+const subscriptionEntity = computed<string | null>(() => props.modelValue?.entity ?? null)
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(['update:modelValue'])
 
 const subscriptionService = shallowRef(new SubscriptionService())
 
@@ -76,27 +77,21 @@ const tooltipText = computed(() => {
 		})
 	}
 
-	return props.subscription !== null ?
+	return props.modelValue !== null ?
 		t('task.subscription.subscribed', {entity: props.entity}) :
 		t('task.subscription.notSubscribed', {entity: props.entity})
 })
 
-const buttonText = computed(() => props.subscription !== null ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.subscription !== null ? ['far', 'bell-slash'] : 'bell')
-const disabled = computed(() => {
-	if (props.subscription === null) {
-		return false
-	}
-
-	return subscriptionEntity.value !== props.entity
-})
+const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
+const iconName = computed(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
+const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
 
 function changeSubscription() {
 	if (disabled.value) {
 		return
 	}
 
-	if (props.subscription === null) {
+	if (props.modelValue === null) {
 		subscribe()
 	} else {
 		unsubscribe()
@@ -109,7 +104,7 @@ async function subscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.create(subscription)
-	emit('change', subscription)
+	emit('update:modelValue', subscription)
 	success({message: t('task.subscription.subscribeSuccess', {entity: props.entity})})
 }
 
@@ -119,7 +114,7 @@ async function unsubscribe() {
 		entityId: props.entityId,
 	})
 	await subscriptionService.value.delete(subscription)
-	emit('change', null)
+	emit('update:modelValue', null)
 	success({message: t('task.subscription.unsubscribeSuccess', {entity: props.entity})})
 }
 </script>

src/components/namespace/namespace-settings-dropdown.vue

@@ -34,12 +34,13 @@
 				{{ $t('menu.archive') }}
 			</dropdown-item>
 			<task-subscription
+				v-if="subscription"
 				class="has-no-shadow"
 				:is-button="false"
 				entity="namespace"
 				:entity-id="namespace.id"
-				:subscription="subscription"
-				@change="sub => subscription = sub"
+				:model-value="subscription"
+				@update:model-value="sub => subscription = sub"
 				type="dropdown"
 			/>
 			<dropdown-item

src/components/tasks/edit-task.vue

@@ -36,8 +36,8 @@
 
 		<strong>{{ $t('task.attributes.reminders') }}</strong>
 		<reminders
-			@change="editTaskSubmit()"
 			v-model="taskEditTask.reminderDates"
+			@update:model-value="editTaskSubmit()"
 		/>
 
 		<div class="field">

src/components/tasks/partials/comments.vue

@@ -70,13 +70,13 @@
 						:is-edit-enabled="canWrite && c.author.id === currentUserId"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						@change="
+						v-model="c.comment"
+						@update:model-value="
 							() => {
 								toggleEdit(c)
 								editComment()
 							}
 						"
-						v-model="c.comment"
 						:bottom-actions="actions[c.id]"
 						:show-save="true"
 					/>

src/components/tasks/partials/description.vue

@@ -20,12 +20,12 @@
 			:is-edit-enabled="canWrite"
 			:upload-callback="attachmentUpload"
 			:upload-enabled="true"
-			@change="save"
 			:placeholder="$t('task.description.placeholder')"
 			:empty-text="$t('task.description.empty')"
 			:show-save="true"
 			edit-shortcut="e"
 			v-model="task.description"
+			@update:model-value="save"
 		/>
 	</div>
 </template>

src/components/tasks/partials/editLabels.vue

@@ -66,7 +66,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const store = useStore()
 const {t} = useI18n({useScope: 'global'})
@@ -96,7 +96,6 @@ function findLabel(newQuery: string) {
 async function addLabel(label: ILabel, showNotification = true) {
 	const bubble = () => {
 		emit('update:modelValue', labels.value)
-		emit('change', labels.value)
 	}
 	
 	if (props.taskId === 0) {
@@ -122,7 +121,6 @@ async function removeLabel(label: ILabel) {
 		}
 	}
 	emit('update:modelValue', labels.value)
-	emit('change', labels.value)
 	success({message: t('task.label.removeSuccess')})
 }
 

src/components/tasks/partials/percentDoneSelect.vue

@@ -32,13 +32,12 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const percentDone = computed({
 	get: () => props.modelValue,
 	set(percentDone) {
 		emit('update:modelValue', percentDone)
-		emit('change')
 	},
 })
 </script>

src/components/tasks/partials/prioritySelect.vue

@@ -19,19 +19,19 @@
 import {ref, watch} from 'vue'
 import {PRIORITIES} from '@/constants/priorities'
 
-const priority = ref(0)
-
 const props = defineProps({
 	modelValue: {
-		default: 0,
 		type: Number,
+		default: 0,
 	},
 	disabled: {
 		default: false,
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
+
+const priority = ref(0)
 
 // FIXME: store value outside
 // Set the priority to the :value every time it changes from the outside
@@ -45,6 +45,5 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', priority.value)
-	emit('change')
 }
 </script>

src/components/tasks/partials/reminders.vue

@@ -63,7 +63,7 @@ const props = defineProps({
 	},
 })
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const reminders = ref<Reminder[]>([])
 
@@ -86,7 +86,6 @@ watch(
 
 function updateData() {
 	emit('update:modelValue', reminders.value)
-	emit('change')
 }
 
 const newReminder = ref(null)

src/components/tasks/partials/repeatAfter.vue

@@ -85,7 +85,7 @@ const props = defineProps({
 
 const {t} = useI18n({useScope: 'global'})
 
-const emit = defineEmits(['update:modelValue', 'change'])
+const emit = defineEmits(['update:modelValue'])
 
 const task = ref<ITask>()
 const repeatAfter = reactive({
@@ -116,7 +116,6 @@ function updateData() {
 
 	Object.assign(task.value.repeatAfter, repeatAfter)
 	emit('update:modelValue', task.value)
-	emit('change')
 }
 
 function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {

src/views/tasks/ShowTasks.vue

@@ -4,7 +4,7 @@
 			{{ pageTitle }}
 		</h3>
 		<p v-if="!showAll" class="show-tasks-options">
-			<datepicker-with-range @dateChanged="setDate">
+			<datepicker-with-range @update:model-value="setDate">
 				<template #trigger="{toggle}">
 					<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
 						{{ $t('task.show.select') }}

src/views/tasks/TaskDetailView.vue

@@ -39,7 +39,7 @@
 								</div>
 								<priority-select
 									:disabled="!canWrite"
-									@change="saveTask"
+									@update:model-value="saveTask"
 									ref="priority"
 									v-model="task.priority"/>
 							</div>
@@ -79,7 +79,7 @@
 								</div>
 								<percent-done-select
 									:disabled="!canWrite"
-									@change="saveTask"
+									@update:model-value="saveTask"
 									ref="percentDone"
 									v-model="task.percentDone"/>
 							</div>
@@ -146,9 +146,10 @@
 								</div>
 								<reminders
 									:disabled="!canWrite"
-									@change="saveTask"
 									ref="reminders"
-									v-model="task.reminderDates"/>
+									v-model="task.reminderDates"
+									@update:model-value="saveTask"
+								/>
 							</div>
 						</transition>
 						<transition name="flash-background" appear>
@@ -170,9 +171,10 @@
 								</div>
 								<repeat-after
 									:disabled="!canWrite"
-									@change="saveTask"
 									ref="repeatAfter"
-									v-model="task"/>
+									v-model="task"
+									@update:model-value="saveTask"
+								/>
 							</div>
 						</transition>
 						<transition name="flash-background" appear>
@@ -183,10 +185,11 @@
 									{{ $t('task.attributes.color') }}
 								</div>
 								<color-picker
-									@change="saveTask"
 									menu-position="bottom"
 									ref="color"
-									v-model="taskColor"/>
+									v-model="taskColor"
+									@update:model-value="saveTask"
+								/>
 							</div>
 						</transition>
 					</div>
@@ -276,8 +279,8 @@
 						<task-subscription
 							entity="task"
 							:entity-id="task.id"
-							:subscription="task.subscription"
-							@change="sub => task.subscription = sub"
+							:model-value="task.subscription"
+							@update:model-value="sub => task.subscription = sub"
 						/>
 						<x-button
 							@click="setFieldActive('assignees')"