You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
875 B
Vue
30 lines
875 B
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, ref, toRefs } from "vue"
|
|
import moment from "moment"
|
|
import { type AppRelease, data as release } from "../data/release.data"
|
|
|
|
const props = defineProps<{ type: keyof AppRelease }>()
|
|
const { type } = toRefs(props)
|
|
|
|
const momentInfo = computed(() => ({
|
|
relative: moment(release[type.value].published_at).fromNow(),
|
|
exact: moment(release[type.value].published_at).format("dddd, MMMM Do YYYY [at] HH:mm"),
|
|
iso: release[type.value].published_at ?? undefined,
|
|
}))
|
|
|
|
// Mimic the <ClientOnly /> behavior to show custom text while rendering.
|
|
const show = ref(false)
|
|
|
|
onMounted(() => {
|
|
show.value = true
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<time v-if="show" :datetime="momentInfo.iso" :title="momentInfo.exact">
|
|
{{ momentInfo.relative }}
|
|
</time>
|
|
<time v-else :datetime="momentInfo.iso">
|
|
{{ momentInfo.exact }}
|
|
</time>
|
|
</template> |