feat: show task due distance

2026-09-10 16:14:09 +08:00
parent 3e80f2ecbb
commit 0345fbe73c
9 changed files with 604 additions and 18 deletions
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CalendarDays } from 'lucide-vue-next'
+import { getTaskDuePresentation } from '../lib/task-due'
+
+const props = defineProps<{
+  dueAt: string | null
+  dueHasTime: boolean
+  completed: boolean
+  nowMs: number
+}>()
+
+const presentation = computed(() => getTaskDuePresentation(props))
+</script>
+
+<template>
+  <span v-if="presentation" class="task-due" :class="`task-due--${presentation.state}`">
+    <CalendarDays class="task-due__icon" aria-hidden="true" />
+    <time
+      class="task-due__text"
+      :datetime="presentation.datetime"
+      :title="presentation.fullText"
+      :aria-label="presentation.fullText"
+    >
+      <span class="task-due__absolute">{{ presentation.absoluteText }}</span>
+      <span aria-hidden="true"> · </span>
+      <span class="task-due__relative">{{ presentation.relativeText }}</span>
+    </time>
+  </span>
+</template>