Skip to content

Commit

Permalink
Use router-link slot in NcListItem
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
raimund-schluessler committed Feb 25, 2023
1 parent eaa05e7 commit 7b3f763
Showing 1 changed file with 85 additions and 95 deletions.
180 changes: 85 additions & 95 deletions src/components/NcListItem/NcListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,71 +199,88 @@

<template>
<!-- This wrapper can be either a router link or a `<li>` -->
<nav-element class="list-item__wrapper"
:class="{ 'list-item__wrapper--active' : active }"
v-bind="navElement">
<a :id="anchorId"
ref="list-item"
:href="href"
:target="href === '#' ? undefined : '_blank'"
:rel="href === '#' ? undefined : 'noopener noreferrer'"
class="list-item"
:aria-label="linkAriaLabel"
@mouseover="handleMouseover"
@mouseleave="handleMouseleave"
@focus="handleFocus"
@blur="handleBlur"
@keydown.tab.exact="handleTab"
@click="onClick"
@keydown.esc="hideActions">

<div class="list-item-content__wrapper"
:class="{ 'list-item-content__wrapper--compact': compact }">
<!-- @slot This slot is used for the NcAvatar or icon -->
<slot name="icon" />

<!-- Main content -->
<div class="list-item-content">
<div class="list-item-content__main"
:class="{ 'list-item-content__main--oneline': oneLine }">

<!-- First line, title and details -->
<div class="line-one">
<span class="line-one__title">
{{ title }}
</span>
<span v-if="showDetails"
class="line-one__details">
{{ details }}
</span>
</div>
<component :is="to ? 'router-link' : 'NcVNodes'"
v-slot="{ navigate, isActive }"
:custom="to ? true : null"
:to="to"
:exact="to ? exact : null"
@click="to ? navigate : null">
<li class="list-item__wrapper"
:class="{ 'list-item__wrapper--active' : isActive }">
<a :id="anchorId"
ref="list-item"
:href="href"
:target="href === '#' ? undefined : '_blank'"
:rel="href === '#' ? undefined : 'noopener noreferrer'"
class="list-item"
:aria-label="linkAriaLabel"
@mouseover="handleMouseover"
@mouseleave="handleMouseleave"
@focus="handleFocus"
@blur="handleBlur"
@keydown.tab.exact="handleTab"
@click="onClick"
@keydown.esc="hideActions">

<div class="list-item-content__wrapper"
:class="{ 'list-item-content__wrapper--compact': compact }">
<!-- @slot This slot is used for the NcAvatar or icon -->
<slot name="icon" />

<!-- Main content -->
<div class="list-item-content">
<div class="list-item-content__main"
:class="{ 'list-item-content__main--oneline': oneLine }">

<!-- First line, title and details -->
<div class="line-one">
<span class="line-one__title">
{{ title }}
</span>
<span v-if="showDetails"
class="line-one__details">
{{ details }}
</span>
</div>

<!-- Second line, subtitle and counter -->
<div class="line-two"
:class="{'line-one--bold': bold}">
<span v-if="hasSubtitle" class="line-two__subtitle">
<!-- @slot Slot for the second line of the component -->
<slot name="subtitle" />
</span>

<!-- Second line, subtitle and counter -->
<div class="line-two"
:class="{'line-one--bold': bold}">
<span v-if="hasSubtitle" class="line-two__subtitle">
<!-- @slot Slot for the second line of the component -->
<slot name="subtitle" />
</span>

<!-- Counter and indicator -->
<span v-if="showAdditionalElements" class="line-two__additional_elements">
<NcCounterBubble v-if="counterNumber != 0"
class="line-two__counter"
:type="counterType">
{{ counterNumber }}
</NcCounterBubble>

<span v-if="hasIndicator" class="line-two__indicator">
<!-- @slot This slot is used for some indicator in form of icon -->
<slot name="indicator" />
<!-- Counter and indicator -->
<span v-if="showAdditionalElements" class="line-two__additional_elements">
<NcCounterBubble v-if="counterNumber != 0"
class="line-two__counter"
:type="counterType">
{{ counterNumber }}
</NcCounterBubble>

<span v-if="hasIndicator" class="line-two__indicator">
<!-- @slot This slot is used for some indicator in form of icon -->
<slot name="indicator" />
</span>
</span>
</span>
</div>
</div>
</div>

<!-- Actions -->
<div v-show="displayActionsOnHoverFocus && !forceDisplayActions"
class="list-item-content__actions"
@click.prevent.stop="">
<NcActions ref="actions"
:aria-label="computedActionsAriaLabel"
@update:open="handleActionsUpdateOpen">
<!-- @slot Provide the actions for the right side quick menu -->
<slot name="actions" />
</NcActions>
</div>
</div>
<!-- Actions -->
<div v-show="displayActionsOnHoverFocus && !forceDisplayActions"
<div v-show="forceDisplayActions"
class="list-item-content__actions"
@click.prevent.stop="">
<NcActions ref="actions"
Expand All @@ -274,25 +291,14 @@
</NcActions>
</div>
</div>
<!-- Actions -->
<div v-show="forceDisplayActions"
class="list-item-content__actions"
@click.prevent.stop="">
<NcActions ref="actions"
:aria-label="computedActionsAriaLabel"
@update:open="handleActionsUpdateOpen">
<!-- @slot Provide the actions for the right side quick menu -->
<slot name="actions" />
</NcActions>

<!-- @slot Extra elements below the item -->
<div v-if="$slots.extra" class="list-item__extra">
<slot name="extra" />
</div>
</div>

<!-- @slot Extra elements below the item -->
<div v-if="$slots.extra" class="list-item__extra">
<slot name="extra" />
</div>
</a>
</nav-element>
</a>
</li>
</component>
</template>

<script>
Expand Down Expand Up @@ -339,7 +345,7 @@ export default {
*/
to: {
type: [String, Object],
default: '',
default: null,
},
/**
Expand Down Expand Up @@ -450,22 +456,6 @@ export default {
return this.details !== ''
},
// This is used to decide which outer element type to use
// li or router-link
navElement() {
if (this.to !== '') {
return {
is: 'router-link',
tag: 'li',
to: this.to,
exact: this.exact,
}
}
return {
is: 'li',
}
},
oneLine() {
return !this.hasSubtitle && !this.showDetails
},
Expand Down

0 comments on commit 7b3f763

Please sign in to comment.