Migrate from router-link's tag prop to v-slot

[raimund-schluessler]

This PR migrates the NcAppNavigationItem, NcButton and NcListItem components from using the dreprecated tag prop of router-link to the v-slot API introduced with vue-router@3.1.0, see https://v3.router.vuejs.org/api/#v-slot-api-3-1-0. This is required to make the library compatible with vue-router@4 for vue 3 in #3692.

There are no functional changes and the markup stays the same. For the dev, nothing should change, besides that the corresponding warning from vue-router is gone.

The PR is best viewed as https://github.com/nextcloud/nextcloud-vue/pull/3775/files?diff=unified&w=1

[Chartman123]

@raimund-schluessler I pulled the latest code from this branch and linked it to my forms dev setup. The router warning is indeed gone. Howevere, I got some other errors now. It's also possible that I did something wrong.

[Vue warn]: $attrs is readonly.

found in

---> <VPopperContent>
       <VPopper>
         <VDropdown>
           <NcPopover>
             <NcActions>
               <RouterLink>
                 <NcListItem>
                   <AppNavigationForm> at src/components/AppNavigationForm.vue
                     <NcAppNavigation>
                       <NcContent>
                         <Forms> at src/Forms.vue
                           <Root> forms-main.js:86037:21

the message repeats for $attrs and $listeners

[raimund-schluessler]

@Chartman123 thanks for testing the PR. The warnings you see are unrelated to the changes here and are due to npm link, see #3281. We fixed the problem in nextcloud-libraries/webpack-vue-config#432 but that’s not released yet.
If I recall correctly, it also helped to build both nextcloud/vue and the app in development mode.

[nickvergessen]

Not my expertise, sorry

[raimund-schluessler]

Now that 7.8.0 is out, would anyone have time reviewing this, so I can proceed with #3692?

[ShGKme]

All the components looks good and checked.
Thanks for this work!
Especially for removing <nav-element v-bind="{ is }"> 😀

[nickvergessen]

This is actually a breaking change:
nextcloud/spreed#9153

NcListItem entries like Talk's conversations in the left sidebar lost their a href and can therefore no longer be opened in a new tab with the mouse wheel, ctrl + click or right-click option, instead of the home page of talk or current conversation is loaded again with a trailing #

Before	After
Bildschirmaufzeichnung vom 2023-03-23, 20-53-01.webm	Bildschirmaufzeichnung vom 2023-03-23, 20-51-35.webm

Is that fixable without a revert?

[st3iny]

Unfortunately, this PR completely breaks mail because :href is always overwriting :to for some reasons and NcListItem :to links don't work anymore.

[raimund-schluessler]

Unfortunately, this PR completely breaks mail because :href is always overwriting :to for some reasons and NcListItem :to links don't work anymore.

Did you check it with #3922 included?

[st3iny]

Unfortunately, this PR completely breaks mail because :href is always overwriting :to for some reasons and NcListItem :to links don't work anymore.

Did you check it with #3922 included?

Yes, I already did (latest master). Also see my comment there.

[ShGKme]

Unfortunately, this PR completely breaks mail because :href is always overwriting :to for some reasons and NcListItem :to links don't work anymore.

Do you provide both to and href props?
Could you send a link to the problem place or issue?

[st3iny]

Do you provide both to and href props? Could you send a link to the problem place or issue?

I provide only :to={...some object...}. It always worked this way as expected. Now, it is broken.

https://github.com/nextcloud/mail/blob/3f6f240b61f6b4b4bc89ac72c8bf20f0e617eec1/src/components/Envelope.vue#L1-L18

PS: I also tried to explicitly set href="" but that doesn't fix it.