blob: 17ade5595116f56318427b39b0a4eb411e3bcae7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<script lang="ts">
interface TaskItem {
id: string;
title: string;
description: string;
status: "pending" | "in_progress" | "done";
}
const { tasks }: { tasks: TaskItem[] } = $props();
const doneCount = $derived(tasks.filter((t) => t.status === "done").length);
const inProgressCount = $derived(tasks.filter((t) => t.status === "in_progress").length);
function checkboxClass(status: TaskItem["status"]): string {
switch (status) {
case "pending":
return "checkbox checkbox-sm rounded-sm checkbox-secondary";
case "in_progress":
return "checkbox checkbox-sm rounded-sm checkbox-info";
case "done":
return "checkbox checkbox-sm rounded-sm checkbox-success";
}
}
function isChecked(status: TaskItem["status"]): boolean {
return status === "done";
}
function isIndeterminate(status: TaskItem["status"]): boolean {
return status === "in_progress";
}
</script>
<div class="flex flex-col gap-2">
{#if tasks.length === 0}
<p class="text-xs text-base-content/50">No tasks yet.</p>
{:else}
<p class="text-xs text-base-content/60">
{doneCount}/{tasks.length} done{#if inProgressCount > 0}, {inProgressCount} in progress{/if}
</p>
<ul class="flex flex-col gap-0.5">
{#each tasks as task (task.id)}
<li
class="flex items-start gap-2 rounded p-1.5 transition-colors {task.status === 'done' ? 'opacity-60' : ''}"
>
<input
type="checkbox"
class={checkboxClass(task.status)}
checked={isChecked(task.status)}
indeterminate={isIndeterminate(task.status)}
disabled
tabindex="-1"
/>
<div class="flex flex-col gap-0.5 min-w-0">
<span
class="text-xs leading-tight {task.status === 'done'
? 'line-through text-base-content/50'
: task.status === 'in_progress'
? 'font-semibold'
: ''}"
>
{task.title}
</span>
{#if task.description}
<p class="text-xs text-base-content/50 line-clamp-2">{task.description}</p>
{/if}
</div>
</li>
{/each}
</ul>
{/if}
</div>
|
