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

[hywax]

@benjamincanac radix uses @internationalized/date for calendars, which internally creates a class. When Vue wraps this class in ref, it hides some of the private properties. The solution to this situation is to use shallowRef.

There is an issue where this problem was discussed: vuejs/core#2981 (comment), but the workaround looks quite unappealing.

I would suggest switching to standard new Date in the models.

Example:

export type DateRange = {
-    start: DateValue | undefined;
-    end: DateValue | undefined;
+    start: Date | undefined;
+    end: Date | undefined;
};

What do you think about this?

PS Even in the example they use computed in the model, not ref because the model is computed inside the class - https://www.radix-vue.com/components/calendar.html#calendar-with-locale-and-calendar-system-selection