feat: migrate kanban card to script setup

src/components/tasks/partials/kanban-card.vue

@@ -12,7 +12,7 @@
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
-			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
+			<Done class="kanban-card__done" :is-done="task.done" variant="small"/>
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -65,8 +65,9 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {defineComponent, type PropType} from 'vue'
+<script lang="ts" setup>
+import {ref, computed} from 'vue'
+import {useRouter} from 'vue-router'
 
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel.vue'
 import User from '../../../components/misc/user.vue'
@@ -80,46 +81,25 @@ import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatD
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useTaskStore} from '@/stores/tasks'
 
-export default defineComponent({
-	name: 'kanban-card',
-	components: {
-		ChecklistSummary,
-		Done,
-		PriorityLabel,
-		User,
-		Labels,
-	},
-	data() {
-		return {
-			loadingInternal: false,
-			TASK_DEFAULT_COLOR,
-		}
-	},
-	props: {
-		task: {
-			type: Object as PropType<ITask>,
-			required: true,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-	computed: {
-		color() {
-			return this.task.getHexColor
-				? this.task.getHexColor() 
+const router = useRouter()
+
+const loadingInternal = ref(false)
+
+const props = withDefaults(defineProps<{
+	task: ITask,
+	loading: boolean,
+}>(), {
+	loading: false,
+})
+
+const color = computed(() => {
+	return props.task.getHexColor
+		? props.task.getHexColor()
 		: TASK_DEFAULT_COLOR
-		},
-	},
-	methods: {
-		formatDateLong,
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = true
+})
+
+async function toggleTaskDone(task: ITask) {
+	loadingInternal.value = true
 	try {
 		const done = !task.done
 		await useTaskStore().update({
@@ -127,18 +107,17 @@ export default defineComponent({
 			done,
 		})
 	} finally {
-				this.loadingInternal = false
+		loadingInternal.value = false
 	}
-		},
-		openTaskDetail() {
-			this.$router.push({
+}
+
+function openTaskDetail() {
+	router.push({
 		name: 'task.detail',
-				params: { id: this.task.id },
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
+		params: {id: props.task.id},
+		state: {backdropView: router.currentRoute.value.fullPath},
 	})
-		},
-	},
-})
+}
 </script>
 
 <style lang="scss" scoped>

src/modelTypes/ITask.ts

@@ -47,4 +47,6 @@ export interface ITask extends IAbstract {
 
 	listId: IList['id'] // Meta, only used when creating a new task
 	bucketId: IBucket['id']
+	
+	getHexColor(): string
 }

src/models/task.ts

@@ -28,7 +28,7 @@ if (!SUPPORTS_TRIGGERED_NOTIFICATION) {
 	console.debug('This browser does not support triggered notifications')
 }
 
-export function	getHexColor(hexColor: string) {
+export function	getHexColor(hexColor: string): string {
 	if (hexColor === '' || hexColor === '#') {
 		return TASK_DEFAULT_COLOR
 	}