29 lines
906 B
Vue
29 lines
906 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
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}`, { 'task-due--timed': dueHasTime }]">
|
|
<time
|
|
class="task-due__text"
|
|
:datetime="presentation.datetime"
|
|
:title="presentation.fullText"
|
|
:aria-label="presentation.fullText"
|
|
>
|
|
<span v-if="dueHasTime" class="task-due__absolute">{{ presentation.absoluteText }}</span>
|
|
<span v-if="dueHasTime" class="task-due__separator" aria-hidden="true"> · </span>
|
|
<span class="task-due__relative">{{ presentation.relativeText }}</span>
|
|
</time>
|
|
</span>
|
|
</template>
|