Skip to content

Commit

Permalink
Bring back correct href for router-link links
Browse files Browse the repository at this point in the history
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
  • Loading branch information
raimund-schluessler committed Mar 23, 2023
1 parent 9339ace commit ddbeca7
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 10 deletions.
12 changes: 8 additions & 4 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ Just set the `pinned` prop.
}"
class="app-navigation-entry-wrapper">
<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
v-slot="{ navigate, isActive }"
v-slot="{ href: routerLinkHref, navigate, isActive }"
:custom="isRouterLink ? true : false"
:to="to"
:exact="isRouterLink ? exact : null">
Expand All @@ -226,11 +226,11 @@ Just set the `pinned` prop.
class="app-navigation-entry-link"
:aria-description="ariaDescription"
:aria-expanded="opened.toString()"
:href="href || '#'"
:href="href || routerLinkHref || '#'"
:target="isExternal(href) ? '_blank' : ''"
:title="title || nameTitleFallback"
@blur="handleBlur"
@click="(event) => onClick(event, navigate)"
@click="onClick($event, navigate, routerLinkHref)"
@focus="handleFocus"
@keydown.tab.exact="handleTab">

Expand Down Expand Up @@ -643,10 +643,14 @@ export default {
},
// forward click event
onClick(event, navigate) {
onClick(event, navigate, routerLinkHref) {
// Navigate is only defined if it is a router-link
navigate?.(event)
this.$emit('click', event)
// Prevent default link behaviour if it's a router-link
if (routerLinkHref) {
event.preventDefault()
}
},
// Edition methods
Expand Down
17 changes: 11 additions & 6 deletions src/components/NcListItem/NcListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -200,16 +200,15 @@
<template>
<!-- This wrapper can be either a router link or a `<li>` -->
<component :is="to ? 'router-link' : 'NcVNodes'"
v-slot="{ navigate, isActive }"
v-slot="{ href: routerLinkHref, navigate, isActive }"
:custom="to ? true : null"
:to="to"
:exact="to ? exact : null"
@click="to ? navigate : null">
:exact="to ? exact : null">
<li class="list-item__wrapper"
:class="{ 'list-item__wrapper--active' : isActive }">
<a :id="anchorId"
ref="list-item"
:href="href"
:href="routerLinkHref || href"
:target="href === '#' ? undefined : '_blank'"
:rel="href === '#' ? undefined : 'noopener noreferrer'"
class="list-item"
Expand All @@ -219,7 +218,7 @@
@focus="handleFocus"
@blur="handleBlur"
@keydown.tab.exact="handleTab"
@click="onClick"
@click="onClick($event, navigate, routerLinkHref)"
@keydown.esc="hideActions">

<div class="list-item-content__wrapper"
Expand Down Expand Up @@ -497,8 +496,14 @@ export default {
methods: {
// forward click event
onClick(event) {
onClick(event, navigate, routerLinkHref) {
// Navigate is only defined if it is a router-link
navigate?.(event)
this.$emit('click', event)
// Prevent default link behaviour if it's a router-link
if (routerLinkHref) {
event.preventDefault()
}
},
handleMouseover() {
Expand Down

0 comments on commit ddbeca7

Please sign in to comment.