feat: migrate kanban card to script setup

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

@@ -65,8 +65,9 @@
 	</div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import {defineComponent, type PropType} from 'vue'
+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({
+const router = useRouter()
-	name: 'kanban-card',
+
-	components: {
+const loadingInternal = ref(false)
-		ChecklistSummary,
+
-		Done,
+const props = withDefaults(defineProps<{
-		PriorityLabel,
+	task: ITask,
-		User,
+	loading: boolean,
-		Labels,
+}>(), {
-	},
+	loading: false,
-	data() {
+})
-		return {
+
-			loadingInternal: false,
+const color = computed(() => {
-			TASK_DEFAULT_COLOR,
+	return props.task.getHexColor
-		}
+		? props.task.getHexColor()
-	},
-	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() 
 		: TASK_DEFAULT_COLOR
-		},
+})
-	},
+
-	methods: {
+async function toggleTaskDone(task: ITask) {
-		formatDateLong,
+	loadingInternal.value = true
-		formatISO,
-		formatDateSince,
-		colorIsDark,
-		async toggleTaskDone(task: ITask) {
-			this.loadingInternal = 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 },
+		params: {id: props.task.id},
-				state: { backdropView: this.$router.currentRoute.value.fullPath },
+		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
 	}