diff --git a/app/components/BuildEnvironment.vue b/app/components/BuildEnvironment.vue index 6482f2bb91..8831588a97 100644 --- a/app/components/BuildEnvironment.vue +++ b/app/components/BuildEnvironment.vue @@ -3,7 +3,6 @@ defineProps<{ footer?: boolean }>() -const { locale } = useI18n() const buildInfo = useAppConfig().buildInfo @@ -14,7 +13,7 @@ const buildInfo = useAppConfig().buildInfo style="animation-delay: 0.05s" > - + · - - + @@ -147,7 +151,11 @@ function isCellLoading(index: number): boolean { :data-status="value.status" > - + diff --git a/app/components/DateTime.vue b/app/components/DateTime.vue index e2fc331bb3..658bb7c6ae 100644 --- a/app/components/DateTime.vue +++ b/app/components/DateTime.vue @@ -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 */ @@ -31,7 +31,7 @@ const props = withDefaults( const { locale } = useI18n() -const relativeDates = useRelativeDates() +const { relativeDates } = useRelativeDates() const dateFormatter = new Intl.DateTimeFormat(locale.value, { month: 'short', diff --git a/app/components/DateTimeButton.vue b/app/components/DateTimeButton.vue new file mode 100644 index 0000000000..db8731b0fa --- /dev/null +++ b/app/components/DateTimeButton.vue @@ -0,0 +1,28 @@ + + + diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue index 53e2a01224..5d8b915803 100644 --- a/app/components/Package/TableRow.vue +++ b/app/components/Package/TableRow.vue @@ -85,7 +85,7 @@ const allMaintainersText = computed(() => { v-if="isColumnVisible('updated')" class="py-2 px-3 font-mono text-end text-xs text-fg-muted" > -
-
-
-
-
-
- settings.value.relativeDates) + + function toggleRelativeDates() { + settings.value.relativeDates = !settings.value.relativeDates + } + + return { + relativeDates: computed(() => settings.value.relativeDates), + toggleRelativeDates, + } } /** diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue index 45bac39344..6da15502f1 100644 --- a/app/pages/package/[[org]]/[name].vue +++ b/app/pages/package/[[org]]/[name].vue @@ -1050,7 +1050,7 @@ onKeyStroke( {{ $t('package.stats.published') }}
- +
diff --git a/test/nuxt/components/DateTime.spec.ts b/test/nuxt/components/DateTime.spec.ts index 1ae7c16443..5b5b887c15 100644 --- a/test/nuxt/components/DateTime.spec.ts +++ b/test/nuxt/components/DateTime.spec.ts @@ -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, + }), useSettings: () => ({ settings: ref({ relativeDates: mockRelativeDates.value }), }), diff --git a/test/nuxt/components/DateTimeButton.spec.ts b/test/nuxt/components/DateTimeButton.spec.ts new file mode 100644 index 0000000000..379bab7ed6 --- /dev/null +++ b/test/nuxt/components/DateTimeButton.spec.ts @@ -0,0 +1,36 @@ +import { mountSuspended } from '@nuxt/test-utils/runtime' +import { describe, it, expect, vi, beforeEach } from 'vitest' +import DateTimeButton from '~/components/DateTimeButton.vue' + +// Mock the useRelativeDates composable +const mockRelativeDates = shallowRef(false) +vi.mock('~/composables/useSettings', () => ({ + useRelativeDates: () => ({ + relativeDates: mockRelativeDates, + }), + useSettings: () => ({ + settings: ref({ relativeDates: mockRelativeDates.value }), + }), + useAccentColor: () => ({}), +})) + +describe('DateTimeButton', () => { + const testDate = '2024-01-15T12:00:00.000Z' + + beforeEach(() => { + mockRelativeDates.value = false + }) + + it('clicking button to toggle the relative dates settings', async () => { + const component = await mountSuspended(DateTimeButton, { + props: { datetime: testDate }, + }) + const button = component.find('button') + + await button.trigger('click') + expect(button.attributes('aria-pressed')).toBe('true') + + await button.trigger('click') + expect(button.attributes('aria-pressed')).toBe('false') + }) +})