Skip to content

Commit a56e4dc

Browse files
9romise9romise
committed
refactor: use DateTimeButton 
1 parent ef4a6d6 commit a56e4dc

10 files changed

Lines changed: 87 additions & 28 deletions

File tree

‎app/components/BuildEnvironment.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const buildInfo = useAppConfig().buildInfo
1313
style="animation-delay: 0.05s"
1414
>
1515
<i18n-t keypath="built_at" scope="global">
16-
<DateTime :datetime="buildInfo.time" />
16+
<DateTimeButton :datetime="buildInfo.time" />
1717
</i18n-t>
1818
<span>&middot;</span>
1919
<NuxtLink

‎app/components/Compare/FacetCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function getShortName(header: string): string {
126126
<template v-else>
127127
<span class="font-mono text-sm tabular-nums" :class="getStatusClass(value.status)">
128128
<!-- Date values use DateTime component for i18n and user settings -->
129-
<DateTime
129+
<DateTimeButton
130130
v-if="value.type === 'date'"
131131
:datetime="value.display"
132132
date-style="medium"

‎app/components/Compare/FacetRow.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,11 @@ function isCellLoading(index: number): boolean {
134134
:data-status="value.status"
135135
>
136136
<!-- Date values use DateTime component for i18n and user settings -->
137-
<DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
137+
<DateTimeButton
138+
v-if="value.type === 'date'"
139+
:datetime="value.display"
140+
date-style="medium"
141+
/>
138142
<template v-else>
139143
<span dir="auto">{{ value.display }}</span>
140144
</template>
@@ -147,7 +151,11 @@ function isCellLoading(index: number): boolean {
147151
:data-status="value.status"
148152
>
149153
<!-- Date values use DateTime component for i18n and user settings -->
150-
<DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
154+
<DateTimeButton
155+
v-if="value.type === 'date'"
156+
:datetime="value.display"
157+
date-style="medium"
158+
/>
151159
<template v-else>
152160
<span dir="auto">{{ value.display }}</span>
153161
</template>

‎app/components/DateTime.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const props = withDefaults(
3131
3232
const { locale } = useI18n()
3333
34-
const { relativeDates, toggleRelativeDates } = useRelativeDates()
34+
const { relativeDates } = useRelativeDates()
3535
3636
const dateFormatter = new Intl.DateTimeFormat(locale.value, {
3737
month: 'short',
@@ -51,7 +51,7 @@ const titleValue = computed(() => {
5151
</script>
5252

5353
<template>
54-
<button type="button" :aria-pressed="relativeDates" @click="toggleRelativeDates">
54+
<span>
5555
<ClientOnly>
5656
<NuxtTime
5757
v-if="relativeDates"
@@ -82,5 +82,5 @@ const titleValue = computed(() => {
8282
/>
8383
</template>
8484
</ClientOnly>
85-
</button>
85+
</span>
8686
</template>

‎app/components/DateTimeButton.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
/**
3+
* refer to DateTime
4+
*/
5+
defineProps<{
6+
datetime: string | Date | number
7+
title?: string
8+
dateStyle?: 'full' | 'long' | 'medium' | 'short'
9+
year?: 'numeric' | '2-digit'
10+
month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'
11+
day?: 'numeric' | '2-digit'
12+
}>()
13+
14+
const { relativeDates, toggleRelativeDates } = useRelativeDates()
15+
</script>
16+
17+
<template>
18+
<button type="button" :aria-pressed="relativeDates" @click="toggleRelativeDates">
19+
<DateTime
20+
:datetime="datetime"
21+
:title="title"
22+
:date-style="dateStyle"
23+
:year="year"
24+
:month="month"
25+
:day="day"
26+
/>
27+
</button>
28+
</template>

‎app/components/Package/TableRow.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const allMaintainersText = computed(() => {
8585
v-if="isColumnVisible('updated')"
8686
class="py-2 px-3 font-mono text-end text-xs text-fg-muted"
8787
>
88-
<DateTime
88+
<DateTimeButton
8989
v-if="updatedDate"
9090
:datetime="updatedDate"
9191
year="numeric"

‎app/components/Package/Versions.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
395395
</div>
396396
</div>
397397
<div class="flex items-center gap-2 shrink-0">
398-
<DateTime
398+
<DateTimeButton
399399
v-if="row.primaryVersion.time"
400400
:datetime="row.primaryVersion.time"
401401
year="numeric"
@@ -444,7 +444,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
444444
</span>
445445
</NuxtLink>
446446
<div class="flex items-center gap-2 shrink-0">
447-
<DateTime
447+
<DateTimeButton
448448
v-if="v.time"
449449
:datetime="v.time"
450450
class="text-[10px] text-fg-subtle"
@@ -551,7 +551,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
551551
</span>
552552
</NuxtLink>
553553
<div class="flex items-center gap-2 shrink-0 pe-2">
554-
<DateTime
554+
<DateTimeButton
555555
v-if="row.primaryVersion.time"
556556
:datetime="row.primaryVersion.time"
557557
class="text-[10px] text-fg-subtle"
@@ -630,7 +630,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
630630
</NuxtLink>
631631
</div>
632632
<div class="flex items-center gap-2 shrink-0 pe-2">
633-
<DateTime
633+
<DateTimeButton
634634
v-if="group.versions[0]?.time"
635635
:datetime="group.versions[0]?.time"
636636
class="text-[10px] text-fg-subtle"
@@ -693,7 +693,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
693693
</NuxtLink>
694694
</div>
695695
<div class="flex items-center gap-2 shrink-0 pe-2">
696-
<DateTime
696+
<DateTimeButton
697697
v-if="group.versions[0]?.time"
698698
:datetime="group.versions[0]?.time"
699699
class="text-[10px] text-fg-subtle"
@@ -751,7 +751,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
751751
</span>
752752
</NuxtLink>
753753
<div class="flex items-center gap-2 shrink-0 pe-2">
754-
<DateTime
754+
<DateTimeButton
755755
v-if="v.time"
756756
:datetime="v.time"
757757
class="text-[10px] text-fg-subtle"

‎app/pages/package/[[org]]/[name].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1050,7 +1050,7 @@ onKeyStroke(
10501050
{{ $t('package.stats.published') }}
10511051
</dt>
10521052
<dd class="font-mono text-sm text-fg">
1053-
<DateTime :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
1053+
<DateTimeButton :datetime="pkg.time[resolvedVersion]!" date-style="medium" />
10541054
</dd>
10551055
</div>
10561056
</dl>

‎test/nuxt/components/DateTime.spec.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -130,19 +130,6 @@ describe('DateTime', () => {
130130
})
131131
expect(component.find('time').attributes('title')).toContain(testYear)
132132
})
133-
134-
it('clicking button to toggle the relative dates settings', async () => {
135-
const component = await mountSuspended(DateTime, {
136-
props: { datetime: testDate },
137-
})
138-
const button = component.find('button')
139-
140-
await button.trigger('click')
141-
expect(button.attributes('aria-pressed')).toBe('true')
142-
143-
await button.trigger('click')
144-
expect(button.attributes('aria-pressed')).toBe('false')
145-
})
146133
})
147134

148135
describe('SSR fallback', () => {

‎test/nuxt/components/DateTimeButton.spec.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { mountSuspended } from '@nuxt/test-utils/runtime'
2+
import { describe, it, expect, vi, beforeEach } from 'vitest'
3+
import DateTimeButton from '~/components/DateTimeButton.vue'
4+
5+
// Mock the useRelativeDates composable
6+
const mockRelativeDates = shallowRef(false)
7+
vi.mock('~/composables/useSettings', () => ({
8+
useRelativeDates: () => ({
9+
relativeDates: mockRelativeDates,
10+
}),
11+
useSettings: () => ({
12+
settings: ref({ relativeDates: mockRelativeDates.value }),
13+
}),
14+
useAccentColor: () => ({}),
15+
}))
16+
17+
describe('DateTimeButton', () => {
18+
const testDate = '2024-01-15T12:00:00.000Z'
19+
20+
beforeEach(() => {
21+
mockRelativeDates.value = false
22+
})
23+
24+
it('clicking button to toggle the relative dates settings', async () => {
25+
const component = await mountSuspended(DateTimeButton, {
26+
props: { datetime: testDate },
27+
})
28+
const button = component.find('button')
29+
30+
await button.trigger('click')
31+
expect(button.attributes('aria-pressed')).toBe('true')
32+
33+
await button.trigger('click')
34+
expect(button.attributes('aria-pressed')).toBe('false')
35+
})
36+
})

0 commit comments

Comments
 (0)