feat: reduce eslint warnings (#2396)

Also added `Destructuring the 'props' will cause the value to lose reactivity` as a warning to prepare for the removal of the propsDestructure option in vite.

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

frontend/.eslintrc.cjs

@@ -46,7 +46,8 @@ module.exports = {
 		'vue/html-indent': ['error', 'tab'],
 
 		// vue3
-		'vue/no-ref-object-destructure': 'error',
+		'vue/no-ref-object-reactivity-loss': 'error',
+		'vue/no-setup-props-reactivity-loss': 'warn', // TODO: switch to error after vite `propsDestructure` is removed
 	},
 	'parser': 'vue-eslint-parser',
 	'parserOptions': {

frontend/src/components/base/BaseButton.vue

@@ -73,14 +73,16 @@ export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
 }
 
 export interface BaseButtonEmits {
-	(e: 'click', payload: MouseEvent): void
+	click: [payload: MouseEvent]
 }
 
-const {
+withDefaults(defineProps<BaseButtonProps>(), {
-	type = BASE_BUTTON_TYPES_MAP.BUTTON,
+	type: BASE_BUTTON_TYPES_MAP.BUTTON,
-	disabled = false,
+	disabled: false,
-	openExternalInNewTab = true,
+	to: undefined,
-} = defineProps<BaseButtonProps>()
+	href: undefined,
+	openExternalInNewTab: true,
+})
 
 const emit = defineEmits<BaseButtonEmits>()
 

frontend/src/components/input/editor/TipTap.vue

@@ -443,7 +443,7 @@ if (enableDiscardShortcut) {
 }
 
 const editor = useEditor({
-	// eslint-disable-next-line vue/no-ref-object-destructure
+	// eslint-disable-next-line vue/no-ref-object-reactivity-loss
 	editable: isEditing.value,
 	extensions: extensions,
 	onUpdate: () => {

frontend/src/components/sharing/linkSharing.vue

@@ -234,11 +234,10 @@ import {useConfigStore} from '@/stores/config'
 import {useProjectStore} from '@/stores/projects'
 import type {IProjectView} from '@/modelTypes/IProjectView'
 
-const props = defineProps({
+const props = withDefaults(defineProps<{
-	projectId: {
+	projectId?: IProject['id'],
-		default: 0,
+}>(), {
-		required: false,
+	projectId: 0,
-	},
 })
 
 const {t} = useI18n({useScope: 'global'})

frontend/src/components/tasks/partials/comments.vue

@@ -206,6 +206,7 @@ const props = defineProps({
 		required: true,
 	},
 	canWrite: {
+		type: Boolean,
 		default: true,
 	},
 })

frontend/src/components/tasks/partials/editAssignees.vue

@@ -56,6 +56,7 @@ const props = defineProps({
 		required: true,
 	},
 	disabled: {
+		type: Boolean,
 		default: false,
 	},
 	modelValue: {

frontend/src/components/tasks/partials/editLabels.vue

@@ -71,6 +71,7 @@ const props = defineProps({
 		default: 0,
 	},
 	disabled: {
+		type: Boolean,
 		default: false,
 	},
 	creatable: {

frontend/src/components/tasks/partials/percentDoneSelect.vue

@@ -50,6 +50,7 @@ const props = defineProps({
 		type: Number,
 	},
 	disabled: {
+		type: Boolean,
 		default: false,
 	},
 })

frontend/src/components/tasks/partials/prioritySelect.vue

@@ -37,6 +37,7 @@ const props = defineProps({
 		default: 0,
 	},
 	disabled: {
+		type: Boolean,
 		default: false,
 	},
 })

frontend/src/components/tasks/partials/relatedTasks.vue

@@ -115,32 +115,32 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks">
 				<div
-					v-for="t in rts.tasks"
+					v-for="task in rts.tasks"
-					:key="t.id"
+					:key="task.id"
 					class="task"
 				>
 					<div class="is-flex is-align-items-center">
 						<Fancycheckbox
-							v-model="t.done"
+							v-model="task.done"
 							class="task-done-checkbox"
 							@update:modelValue="toggleTaskDone(t)"
 						/>
 						<router-link
-							:to="{ name: route.name as string, params: { id: t.id } }"
+							:to="{ name: route.name as string, params: { id: task.id } }"
-							:class="{ 'is-strikethrough': t.done}"
+							:class="{ 'is-strikethrough': task.done}"
 						>
 							<span
-								v-if="t.projectId !== projectId"
+								v-if="task.projectId !== projectId"
 								class="different-project"
 							>
 								<span
-									v-if="t.differentProject !== null"
+									v-if="task.differentProject !== null"
 									v-tooltip="$t('task.relation.differentProject')"
 								>
-									{{ t.differentProject }} >
+									{{ task.differentProject }} >
 								</span>
 							</span>
-							{{ t.title }}
+							{{ task.title }}
 						</router-link>
 					</div>
 					<BaseButton
@@ -148,7 +148,7 @@
 						class="remove"
 						@click="setRelationToDelete({
 							relationKind: rts.kind,
-							otherTaskId: t.id
+							otherTaskId: task.id
 						})"
 					>
 						<icon icon="trash-alt" />
@@ -225,6 +225,7 @@ const props = defineProps({
 		default: 0,
 	},
 	editEnabled: {
+		type: Boolean,
 		default: true,
 	},
 })

frontend/src/views/migrate/MigrationHandler.vue

@@ -126,7 +126,7 @@ import AbstractMigrationFileService from '@/services/migrator/abstractMigrationF
 import {formatDateLong} from '@/helpers/time/formatDate'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 
-import {MIGRATORS, Migrator} from './migrators'
+import {MIGRATORS, type Migrator} from './migrators'
 import {useTitle} from '@/composables/useTitle'
 import {useProjectStore} from '@/stores/projects'
 
@@ -150,9 +150,9 @@ const migrationJustStarted = ref(false)
 
 const migrator = computed<Migrator>(() => MIGRATORS[props.service])
 
-// eslint-disable-next-line vue/no-ref-object-destructure
+// eslint-disable-next-line vue/no-ref-object-reactivity-loss
 const migrationService = shallowReactive(new AbstractMigrationService(migrator.value.id))
-// eslint-disable-next-line vue/no-ref-object-destructure
+// eslint-disable-next-line vue/no-ref-object-reactivity-loss
 const migrationFileService = shallowReactive(new AbstractMigrationFileService(migrator.value.id))
 
 useTitle(() => t('migrate.titleService', {name: migrator.value.name}))

frontend/src/views/tasks/ShowTasks.vue

@@ -52,10 +52,10 @@
 		>
 			<div class="p-2">
 				<SingleTaskInProject
-					v-for="t in tasks"
+					v-for="task in tasks"
-					:key="t.id"
+					:key="task.id"
 					:show-project="true"
-					:the-task="t"
+					:the-task="task"
 					@taskUpdated="updateTasks"
 				/>
 			</div>