feat: migrate to vue 3

[SebastianKrupinski]

Summary

• Resolves: Migrate to Vue 3 #7684
• Migrate to vue 3

Testing

• checkout branch
• delete existing node_modules directory
• npm ci && npm run dev

[SebastianKrupinski]

Initial testable vue 3 migration

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[GVodyanov]

A few issues I found while poking around:

[GVodyanov]

Fixed this:

Before	After

[GVodyanov]

I added the new datepicker, however it requires this: nextcloud-libraries/nextcloud-vue#8009

[DerDreschner]

I found the following issues (using Firefox, btw):

• Creating a new event, editing an existing one or viewing a read-only one doesn't show the option to select/show the calendar the event is being created on. For that reason, the buttons at the top right side stick out into the title field when using the quick view:

Pictures

• The menu doesn't close when clicking on an item in the follow cases:
  • Creating a new calendar (only exception: add public holiday calendar)
  • Adding a file to an event (both upload and select existing file)
  • Editing an reminder (only closes when removing reminder -> no more reminders there afterwards)

Example picture

• When using the day view and having multiple events at the same time, it looks pretty odd? Somethings wrong there.

Picture

• When opening "Add public holiday calendar" and "Repeat event", there is a new text in the top middle? But only in those cases? Don't know if that's desired, it irrated me as that are the only two cases an modal overlay creates that.

Pictures

• When editing the first notification of an event, the menu button sticks out into the drop-down selection field:

Picture

• The input fields are not on the same line of sight here:

Pictures

[DerDreschner]

Ohh, and the overlay for picking an existing file to attach to an event has the same issue with the "pick" button not having any borders/styling.

Example picture

[SebastianKrupinski]

Thanks for testing @DerDreschner !

The styling issues will be addressed in a few follow up PR's as per our team call conversation. There is also one issue that seems to be caused by a broken upstream component.

Style issues

• When editing the first notification of an event, the menu button sticks out into the drop-down selection field:
• The input fields are not on the same line of sight here:
• Ohh, and the overlay for picking an existing file to attach to an event has the same issue with the "pick" button not having any borders/styling.

New to vue 9

• When opening "Add public holiday calendar" and "Repeat event", there is a new text in the top middle? But only in those cases? Don't know if that's desired, it irrated me as that are the only two cases an modal overlay creates that.

Fixed

• Creating a new event, editing an existing one or viewing a read-only one doesn't show the option to select/show the calendar the event is being created on. For that reason, the buttons at the top right side stick out into the title field when using the quick view:
• Adding a file to an event (both upload and select existing file)
• Editing an reminder (only closes when removing reminder -> no more reminders there afterwards)

Broken upstream

• Creating a new calendar (only exception: add public holiday calendar)