Skip to content

feat: allow toggle relative dates on click DateTime #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
9romise wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

feat: allow toggle relative dates on click DateTime #847

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dc47efe
feat(DateTime): click to toggle `relative`
9romise Feb 3, 2026
f2b5f33
refactor: unify `DateTime`
9romise Feb 3, 2026
926cf19
test: cleanup test
9romise Feb 3, 2026
e7af59b
chore: add `type` for button
9romise Feb 3, 2026
b944119
chore: use composable
9romise Feb 3, 2026
3d8a4be
Merge branch 'main' into click-relative
9romise Feb 3, 2026
a5f8164
chore: update
9romise Feb 3, 2026
f9f1e10
chore: update description
9romise Feb 3, 2026
ef4a6d6
Merge branch 'main' into click-relative
9romise Feb 7, 2026
a56e4dc
refactor: use `DateTimeButton`
9romise Feb 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions app/components/BuildEnvironment.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ defineProps<{
footer?: boolean
}>()

const { locale } = useI18n()
const buildInfo = useAppConfig().buildInfo
</script>

Expand All @@ -14,7 +13,7 @@ const buildInfo = useAppConfig().buildInfo
style="animation-delay: 0.05s"
>
<i18n-t keypath="built_at" scope="global">
<NuxtTime :datetime="buildInfo.time" :locale="locale" relative />
<DateTime :datetime="buildInfo.time" />
</i18n-t>
<span>&middot;</span>
<NuxtLink
Expand Down
10 changes: 5 additions & 5 deletions app/components/DateTime.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
*/
const props = withDefaults(
defineProps<{
/** The datetime value (ISO string or Date) */
datetime: string | Date
/** The datetime value (ISO string or Date or timestamp) */
datetime: string | Date | number
/** Override title (defaults to datetime) */
title?: string
/** Date style for absolute display */
Expand All @@ -31,7 +31,7 @@ const props = withDefaults(

const { locale } = useI18n()

const relativeDates = useRelativeDates()
const { relativeDates, toggleRelativeDates } = useRelativeDates()

const dateFormatter = new Intl.DateTimeFormat(locale.value, {
month: 'short',
Expand All @@ -51,7 +51,7 @@ const titleValue = computed(() => {
</script>

<template>
<span>
<button type="button" @click="toggleRelativeDates">
<ClientOnly>
<NuxtTime
v-if="relativeDates"
Expand Down Expand Up @@ -82,5 +82,5 @@ const titleValue = computed(() => {
/>
</template>
</ClientOnly>
</span>
</button>
</template>
10 changes: 9 additions & 1 deletion app/composables/useSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,15 @@ export function useSettings() {
*/
export function useRelativeDates() {
const { settings } = useSettings()
return computed(() => settings.value.relativeDates)

function toggleRelativeDates() {
settings.value.relativeDates = !settings.value.relativeDates
}

return {
relativeDates: computed(() => settings.value.relativeDates),
toggleRelativeDates,
}
}

/**
Expand Down
4 changes: 3 additions & 1 deletion test/nuxt/components/DateTime.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import DateTime from '~/components/DateTime.vue'
// Mock the useRelativeDates composable
const mockRelativeDates = shallowRef(false)
vi.mock('~/composables/useSettings', () => ({
useRelativeDates: () => mockRelativeDates,
useRelativeDates: () => ({
relativeDates: mockRelativeDates,
}),
Comment on lines +8 to +10
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add toggleRelativeDates to the mock so clicks actually toggle.

DateTime now calls toggleRelativeDates on click, but the mock only provides relativeDates, so the new interaction test cannot flip state and will fail.

✅ Suggested fix 
 vi.mock('~/composables/useSettings', () => ({
   useRelativeDates: () => ({
     relativeDates: mockRelativeDates,
+    toggleRelativeDates: () => {
+      mockRelativeDates.value = !mockRelativeDates.value
+    },
   }),
   useSettings: () => ({
     settings: ref({ relativeDates: mockRelativeDates.value }),
   }),
   useAccentColor: () => ({}),
 }))
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
useRelativeDates: () => ({
relativeDates: mockRelativeDates,
}),
useRelativeDates: () => ({
relativeDates: mockRelativeDates,
toggleRelativeDates: () => {
mockRelativeDates.value = !mockRelativeDates.value
},
}),

useSettings: () => ({
settings: ref({ relativeDates: mockRelativeDates.value }),
}),
Expand Down
Loading