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

[hywax]

@benjamincanac done. Also returned the flex styles for body, needed for 2 or more calendars

[hywax]

[hywax]

@benjamincanac I switched from the standard new Date to using @internationalized/date. I think this approach is more appropriate.

Pros:

• It reduced the amount of code
• All props/events can be used

Cons:

• v-model needs to be wrapped in shallowRef, as mentioned here: feat(Calendar): implement component #2618 (comment)

[hywax]

I don't plan to add or modify the code anymore. You can review it, and if everything looks good, go ahead and merge it 😊

[benjamincanac]

Awesome! Will try to make a final review tomorrow and merge it :) In both datepickers examples, would you mind formatting the dates as such: Jan 20, 2022 - Feb 9, 2022? 😬

[hywax]

Done, additionally added some usage examples

[benjamincanac]

You can remove the Omit here so the docs show the update:modelValue event.

[hywax]

In the documentation, update:modelValue is already displayed, it is taken from defineModel.

[benjamincanac]

Why not use useForwardPropsEmits?

[hywax]

Initially, I used useForwardPropsEmits, but it provides update:modelValue, which in turn duplicates the update of v-model. I fixed it in ee422ee.

Simply removing modelValue doesn't work because defineModel creates the update:modelValue event, which in turn is not removed by useForwardPropsEmits.