[Feat] Support RelativeTimeFormat

[oritwoen]

🆒 Your use case

It would be nice to have a built-in option to display the time in a relative form without creating additional functions.

🆕 The solution you'd like

Implement https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat#constructor

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[keystrm]

Hi, I just started working on this feature. Here are the problems I've encountered and the solutions I've implemented so far:

1. I'm curious about how we manage the date format we display. Specifically, if someone needs to show the time in 'relativeTimeFormat', how can it be detected? I created a prop named 'relative' to determine the time format, then I conditionally render the output based on this.

2. How do we calculate the relative date? I display the relative date according to the current date, meaning I calculate the time difference between the 'datetime' from the prop and the current date, and display that difference as the output.

3. How do we determine the date format for this relative time format? As we need to include 'day', 'quarter', etc., in the function. Should we automatically determine this or should we get that as user input? Currently, I have just calculated the time difference in days for testing purposes.

This is my approach so far; please correct me if I am approaching this the wrong way. I'm attaching a screenshot of the output below

[danielroe]

I think we would expect the user to pick the relative format they need and we can use this as the flag (so relative prop would expect a string or object).

and yes, I expect it would show date from current date unless another date is provided by user.

[danielroe]

implemented in https://github.com/danielroe/nuxt-time/pull/272...

improvement welcome 🙏