davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2/**
3 * DateTime component that wraps NuxtTime with settings-aware relative date support.
4 * Uses the global settings to determine whether to show relative or absolute dates.
5 *
6 * Note: When relativeDates setting is enabled, the component switches between
7 * relative and absolute display based on user preference. The title attribute
8 * always shows the full date for accessibility.
9 */
10const props = withDefaults(
11 defineProps<{
12 /** The datetime value (ISO string or Date) */
13 datetime: string | Date
14 /** Override title (defaults to datetime) */
15 title?: string
16 /** Date style for absolute display */
17 dateStyle?: 'full' | 'long' | 'medium' | 'short'
18 /** Individual date parts for absolute display (alternative to dateStyle) */
19 year?: 'numeric' | '2-digit'
20 month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
21 day?: 'numeric' | '2-digit'
22 }>(),
23 {
24 title: undefined,
25 dateStyle: undefined,
26 year: undefined,
27 month: undefined,
28 day: undefined,
29 },
30)
31
32const { locale } = useI18n()
33
34const relativeDates = useRelativeDates()
35
36const dateFormatter = new Intl.DateTimeFormat(locale.value, {
37 month: 'short',
38 day: 'numeric',
39 year: 'numeric',
40 hour: 'numeric',
41 minute: '2-digit',
42 timeZoneName: 'short',
43})
44
45// Compute the title - always show full date for accessibility
46const titleValue = computed(() => {
47 if (props.title) return props.title
48 const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
49 return dateFormatter.format(date)
50})
51</script>
52
53<template>
54 <span>
55 <ClientOnly>
56 <NuxtTime
57 v-if="relativeDates"
58 :datetime="datetime"
59 :title="titleValue"
60 relative
61 :locale="locale"
62 />
63 <NuxtTime
64 v-else
65 :datetime="datetime"
66 :title="titleValue"
67 :date-style="dateStyle"
68 :year="year"
69 :month="month"
70 :day="day"
71 :locale="locale"
72 />
73 <template #fallback>
74 <NuxtTime
75 :datetime="datetime"
76 :title="titleValue"
77 :date-style="dateStyle"
78 :year="year"
79 :month="month"
80 :day="day"
81 :locale="locale"
82 />
83 </template>
84 </ClientOnly>
85 </span>
86</template>