Open danielroe opened 1 month ago
The update adds support for relative time formatting to the Nuxt Time component using the Intl.RelativeTimeFormat
API. By introducing a relative
property, users can now display timestamps like "5 minutes ago" instead of exact dates, enhancing the readability and user experience.
Files | Change Summary |
---|---|
README.md |
Updated documentation with details about the new relative prop for relative time formatting. |
src/runtime/components/NuxtTime.vue |
Introduced relative prop and updated formattedDate computed property for conditional time formatting. |
src/script.mjs |
Added logic to calculate and display relative time differences using Intl.RelativeTimeFormat . |
test/e2e.spec.ts |
Added end-to-end test case to verify the proper display of relative time on a webpage. |
test/unit.spec.ts |
Removed an unused import and added unit test case for relative time display in NuxtTime . |
sequenceDiagram
participant User
participant NuxtTimeComponent
participant IntlRelativeTimeFormat
participant IntlDateTimeFormat
User->>NuxtTimeComponent: Load component with date and relative=true
NuxtTimeComponent->>IntlRelativeTimeFormat: Format date relative to now
IntlRelativeTimeFormat-->>NuxtTimeComponent: Return relative time string
NuxtTimeComponent-->>User: Display relative time (e.g., "5 minutes ago")
User->>NuxtTimeComponent: Load component with date and relative=false
NuxtTimeComponent->>IntlDateTimeFormat: Format date as absolute
IntlDateTimeFormat-->>NuxtTimeComponent: Return formatted date string
NuxtTimeComponent-->>User: Display absolute time (e.g., "2024-07-18 12:00")
🐇 In the world of time, we took a leap,
Now "5 minutes ago" is yours to keep.
WithIntl
's magic, the hours flow,
Readable dates, like rivers, now show.
For users and devs, a treat so sweet,
Time's dance made simple, an update neat.
🌟
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Implement relative time formatting using
Intl.RelativeTimeFormat
.relative
prop to enable relative time formatting.formatter
computed property to useIntl.RelativeTimeFormat
whenrelative
is true.formattedDate
computed property to useformatter.value.format
for relative time.Intl.RelativeTimeFormat
for relative time formatting.relative
attribute to determine if relative time formatting should be used.Intl.RelativeTimeFormat
.relative
prop in<NuxtTime>
component.relative
prop.relative
prop.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
Intl.RelativeTimeFormat
API. Set therelative
prop totrue
to display time relative to the current time, such as "5 minutes ago."Tests