Skip to content

Allow ListItem components to link to external links #3040

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
artonge merged 1 commit into from
Aug 18, 2022
Merged

Allow ListItem components to link to external links #3040

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions src/components/ListItem/ListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
<ul style="width: 350px;">
<listItem
:title="'Title of the element'"
:counter-number=1
:counter-number="1"
:compact="true" >
<template #icon>
<div class="icon-edit" />
Expand All @@ -151,7 +151,7 @@
</listItem>
<listItem
:title="'Title of the element'"
:counter-number=3
:counter-number="3"
:compact="true" >
<template #icon>
<div class="icon-edit" />
Expand All @@ -170,11 +170,15 @@
</listItem>
<listItem
:title="'Title of the element'"
:counter-number=4
:compact="true" >
:compact="true"
:counter-number="4"
href="https://nextcloud.com">
<template #icon>
<div class="icon-edit" />
</template>
<template #subtitle>
This one is with an external link
</template>
</listItem>
</ul>
```
Expand All @@ -187,7 +191,9 @@
<a :id="anchorId"
ref="list-item"
:class="{ 'list-item--active' : active }"
href="#"
:href="href"
target="_blank"
rel="noopener noreferrer"
Comment on lines +195 to +196
Copy link
Contributor

@jotoeri jotoeri Aug 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two now always apply! This breaks the component.

Copy link
Contributor Author

@tcitworld tcitworld Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it be harmless on a <a href="#"> tag? How does it break it?

Copy link
Contributor

@skjnldsv skjnldsv Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we use @click for it, no?

Copy link
Contributor

@jotoeri jotoeri Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but the target blank seems to kick in before click is emitted. Thus the appnavigation on forms now opens a new tab with the link instead of triggering the router.

Copy link
Contributor Author

@tcitworld tcitworld Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3069 should do it. Click event would have a different behaviour if e.preventDefault() wouldn't be used.

class="list-item"
:aria-label="linkAriaLabel"
@mouseover="handleMouseover"
Expand Down Expand Up @@ -319,6 +325,14 @@ export default {
default: '',
},

/**
* The value for the external link
*/
href: {
type: String,
default: '#',
},

/**
* Id for the <a> element
*/
Expand Down