Files
drop/app/components/RelativeTime.vue
DecDuck 251ddb8ff8 Rearchitecture for v0.4.0 (#197)
* feat: database redist support

* feat: rearchitecture of database schemas, migration reset, and #180

* feat: import redists

* fix: giantbomb logging bug

* feat: partial user platform support + statusMessage -> message

* feat: add user platform filters to store view

* fix: sanitize svg uploads

... copilot suggested this

I feel dirty.

* feat: beginnings of platform & redist management

* feat: add server side redist patching

* fix: update drop-base commit

* feat: import of custom platforms & file extensions

* fix: redelete platform

* fix: remove platform

* feat: uninstall commands, new R UI

* checkpoint: before migrating to nuxt v4

* update to nuxt 4

* fix: fixes for Nuxt v4 update

* fix: remaining type issues

* feat: initial feedback to import other kinds of versions

* working commit

* fix: lint

* feat: redist import
2025-11-10 10:36:13 +11:00

33 lines
984 B
Vue

<template>
<div class="relative inline-block group/relative-time">
<!-- Visible relative time -->
<time :datetime="isoDate" class="text-sm text-muted-foreground">
{{ DateTime.fromJSDate(date).toRelative({ locale: $i18n.locale }) }}
</time>
<!-- Custom tooltip that shows on hover -->
<div
role="tooltip"
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 rounded bg-zinc-900 text-white text-xs whitespace-nowrap shadow z-10 opacity-0 group-hover/relative-time:opacity-100 transition-opacity pointer-events-none"
aria-hidden="true"
>
{{ $d(date, "long") }}
</div>
</div>
</template>
<script setup lang="ts">
import { DateTime } from "luxon";
import { computed } from "vue";
const props = defineProps<{
date: string | Date;
}>();
const date = computed(() =>
typeof props.date === "string" ? new Date(props.date) : props.date,
);
const isoDate = computed(() => date.value.toISOString());
</script>