danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/nuxt-time. ⏰ SSR-safe time element for Nuxt 3
date
nuxt
nuxt-module
server
ssr
feat: add optional `title` boolean to render ISO date string (#357)
author
Yizack Rangel
committer
GitHub
date
(Feb 6, 2025, 1:30 PM UTC)
commit
9063f012
9063f012f1ba91a245c7c176d4664d243674b31a
parent
af4f6028
af4f6028241ac3c33a653575fc106ac9c9c139ab
+37
-1
+3
-1
src/runtime/components/NuxtTime.vue
+3
-1
src/runtime/components/NuxtTime.vue
···
26
26
timeStyle?: 'full' | 'long' | 'medium' | 'short'
27
27
hourCycle?: 'h11' | 'h12' | 'h23' | 'h24'
28
28
relative?: boolean
29
+
title?: boolean | string
29
30
}>(), {
30
31
hour12: undefined,
31
32
})
···
79
80
})
80
81
81
82
const isoDate = computed(() => date.value.toISOString())
82
-
83
+
const title = computed(() => props.title === true ? isoDate.value : typeof props.title === 'string' ? props.title : undefined)
83
84
const dataset: Record<string, string | number | boolean | Date | undefined> = {}
84
85
85
86
if (import.meta.server) {
···
143
144
<time
144
145
v-bind="dataset"
145
146
:datetime="isoDate"
147
+
:title="title"
146
148
>{{ formattedDate }}</time>
147
149
</template>
+34
test/unit.spec.ts
+34
test/unit.spec.ts
···
39
39
`"<time datetime="${new Date(datetime).toISOString()}">5 minutes ago</time>"`,
40
40
)
41
41
})
42
+
43
+
it('should display datetime in title', async () => {
44
+
const datetime = Date.now() - 5 * 60 * 1000
45
+
const thing = await mountSuspended(
46
+
defineComponent({
47
+
render: () =>
48
+
h(NuxtTime, {
49
+
datetime,
50
+
relative: true,
51
+
title: true,
52
+
}),
53
+
}),
54
+
)
55
+
expect(thing.html()).toMatchInlineSnapshot(
56
+
`"<time datetime="${new Date(datetime).toISOString()}" title="${new Date(datetime).toISOString()}">5 minutes ago</time>"`,
57
+
)
58
+
})
59
+
60
+
it('should display custom title', async () => {
61
+
const datetime = Date.now() - 5 * 60 * 1000
62
+
const thing = await mountSuspended(
63
+
defineComponent({
64
+
render: () =>
65
+
h(NuxtTime, {
66
+
datetime,
67
+
relative: true,
68
+
title: 'test',
69
+
}),
70
+
}),
71
+
)
72
+
expect(thing.html()).toMatchInlineSnapshot(
73
+
`"<time datetime="${new Date(datetime).toISOString()}" title="test">5 minutes ago</time>"`,
74
+
)
75
+
})
42
76
})