feat(Calendar): implement component

[hywax]

🔗 Linked issue

Resolves #1137 and half #2524

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

UDatepicker component to use nuxt-ui is sorely lacking. This is the first step towards implementing a UDatepicker. I'll be doing this in my spare time, so it might be a bit of a stretch.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[hywax]

@benjamincanac do you think UCalendar is part of UForm? Or is it an independent component that only becomes part of UDatepicker?

I'm asking to see if I need to get the props part from useFormField

Upd. looked at how other ui's work with the calendar. It's always a separate component, without a form, it's with a model

[benjamincanac]

No need to make it work in a form, it's a separate component indeed! Also, it should handle ranges:

• https://www.radix-vue.com/components/calendar.html
• https://www.radix-vue.com/components/range-calendar.html

[hywax]

@benjamincanac at the moment it looks like this. It remains to solve the typing problem and write documentation.

[benjamincanac]

You should not duplicate the code to handle range prop but use namespaced imports instead: https://www.radix-vue.com/guides/namespaced-components.html

Take a look at https://github.com/nuxt/ui/blob/v3/src/runtime/components/DropdownMenuContent.vue#L92 for example.

You could have something like const Component = computed(() => props.range ? RangeCalendar : Calendar).

[hywax]

I was going to do that originally. But I thought that typing on dynamic components might break.

But since you recommend it, I'll do it like this