feat: format DateTime title (#331)

Author: bluwy

app/components/DateTime.vue

@@ -33,11 +33,20 @@ const { locale } = useI18n()
 
 const relativeDates = useRelativeDates()
 
+const dateFormatter = new Intl.DateTimeFormat(locale.value, {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  timeZoneName: 'short',
+})
+
 // Compute the title - always show full date for accessibility
 const titleValue = computed(() => {
   if (props.title) return props.title
-  if (typeof props.datetime === 'string') return props.datetime
-  return props.datetime.toISOString()
+  const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
+  return dateFormatter.format(date)
 })
 </script>
 

test/nuxt/components/DateTime.spec.ts

@@ -16,6 +16,7 @@ vi.mock('~/composables/useSettings', () => ({
 describe('DateTime', () => {
   const testDate = '2024-01-15T12:00:00.000Z'
   const testDateObject = new Date('2024-06-15T10:30:00.000Z')
+  const testYear = testDateObject.getUTCFullYear()
 
   beforeEach(() => {
     mockRelativeDates.value = false
@@ -61,12 +62,12 @@ describe('DateTime', () => {
   })
 
   describe('title attribute', () => {
-    it('uses datetime string as title by default', async () => {
+    it('has title with formatted date by default', async () => {
       const component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
       const timeEl = component.find('time')
-      expect(timeEl.attributes('title')).toBe(testDate)
+      expect(timeEl.attributes('title')).toContain(testYear)
     })
 
     it('uses custom title when provided', async () => {
@@ -81,12 +82,12 @@ describe('DateTime', () => {
       expect(timeEl.attributes('title')).toBe(customTitle)
     })
 
-    it('converts Date object to ISO string for title', async () => {
+    it('converts Date object to formatted date in title', async () => {
       const component = await mountSuspended(DateTime, {
         props: { datetime: testDateObject },
       })
       const timeEl = component.find('time')
-      expect(timeEl.attributes('title')).toBe(testDateObject.toISOString())
+      expect(timeEl.attributes('title')).toContain(testYear)
     })
   })
 
@@ -119,14 +120,14 @@ describe('DateTime', () => {
       let component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
-      expect(component.find('time').attributes('title')).toBe(testDate)
+      expect(component.find('time').attributes('title')).toContain(testYear)
 
       // Test with relative dates on
       mockRelativeDates.value = true
       component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
-      expect(component.find('time').attributes('title')).toBe(testDate)
+      expect(component.find('time').attributes('title')).toContain(testYear)
     })
   })