Skip to content
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

Jump to bottom

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

Merged
merged 4 commits into from
Mar 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eaa05e7
Use router-link slot in NcAppNavigationItem
raimund-schluessler Feb 17, 2023
7b3f763
Use router-link slot in NcListItem
raimund-schluessler Feb 24, 2023
c2e4fc2
Use router-link slot in NcButton
raimund-schluessler Feb 25, 2023
4ce516e
Cleanup of the NcAppNavigationItem onClick handler
raimund-schluessler Feb 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
214 changes: 104 additions & 110 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,99 +209,104 @@ Just set the `pinned` prop.
'app-navigation-entry--collapsible': collapsible,
}"
class="app-navigation-entry-wrapper">
<nav-element v-bind="navElement"
:class="{
'app-navigation-entry--no-icon': !isIconShown,
'app-navigation-entry--editing': editingActive,
'app-navigation-entry--deleted': undo,
'active': isActive,
}"
class="app-navigation-entry">
<!-- Icon and name -->
<a v-if="!undo"
class="app-navigation-entry-link"
:aria-description="ariaDescription"
:aria-expanded="opened.toString()"
:href="href || '#'"
:target="isExternal(href) ? '_blank' : ''"
:title="title || nameTitleFallback"
@blur="handleBlur"
@click="onClick"
@focus="handleFocus"
@keydown.tab.exact="handleTab">

<!-- icon if not collapsible -->
<!-- never show the icon over the collapsible if mobile -->
<div :class="{ [icon]: icon && isIconShown }"
class="app-navigation-entry-icon">
<NcLoadingIcon v-if="loading" />
<slot v-else-if="isIconShown" name="icon" />
<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
v-slot="{ navigate, isActive }"
:custom="isRouterLink ? true : false"
:to="to"
:exact="isRouterLink ? exact : null">
<div :class="{
'app-navigation-entry--no-icon': !isIconShown,
'app-navigation-entry--editing': editingActive,
'app-navigation-entry--deleted': undo,
'active': isActive && to,
}"
class="app-navigation-entry">
<!-- Icon and name -->
<a v-if="!undo"
class="app-navigation-entry-link"
:aria-description="ariaDescription"
:aria-expanded="opened.toString()"
:href="href || '#'"
:target="isExternal(href) ? '_blank' : ''"
:title="title || nameTitleFallback"
@blur="handleBlur"
@click="(event) => onClick(event, navigate)"
@focus="handleFocus"
@keydown.tab.exact="handleTab">

<!-- icon if not collapsible -->
<!-- never show the icon over the collapsible if mobile -->
<div :class="{ [icon]: icon && isIconShown }"
class="app-navigation-entry-icon">
<NcLoadingIcon v-if="loading" />
<slot v-else-if="isIconShown" name="icon" />
</div>
<span v-if="!editingActive" class="app-navigation-entry__title">
{{ nameTitleFallback }}
</span>
<div v-if="editingActive" class="editingContainer">
<NcInputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : nameTitleFallback"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
</a>

<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ nameTitleFallback }}
</div>
</div>
<span v-if="!editingActive" class="app-navigation-entry__title">
{{ nameTitleFallback }}
</span>
<div v-if="editingActive" class="editingContainer">
<NcInputConfirmCancel ref="editingInput"
v-model="editingValue"
:placeholder="editPlaceholder !== '' ? editPlaceholder : nameTitleFallback"
@cancel="cancelEditing"
@confirm="handleEditingDone" />
</div>
</a>

<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
<!-- undo entry -->
<div v-if="undo" class="app-navigation-entry__deleted">
<div class="app-navigation-entry__deleted-description">
{{ nameTitleFallback }}
</div>
</div>

<!-- Counter and Actions -->
<div v-if="hasUtils && !editingActive"
class="app-navigation-entry__utils"
:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }">
<div v-if="$slots.counter"
class="app-navigation-entry__counter-wrapper">
<slot name="counter" />
</div>
<NcActions v-if="$slots.actions || (editable && !editingActive) || undo"
ref="actions"
:inline="inlineActions"
class="app-navigation-entry__actions"
container="#app-navigation-vue"
:boundaries-element="actionsBoundariesElement"
:placement="menuPlacement"
:open="menuOpen"
:force-menu="forceMenu"
:default-icon="menuIcon"
@update:open="onMenuToggle">
<template #icon>
<!-- @slot Slot for the custom menu icon -->
<slot name="menu-icon" />
</template>
<NcActionButton v-if="editable && !editingActive"
:aria-label="editButtonAriaLabel"
@click="handleEdit">
<!-- Counter and Actions -->
<div v-if="hasUtils && !editingActive"
class="app-navigation-entry__utils"
:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }">
<div v-if="$slots.counter"
class="app-navigation-entry__counter-wrapper">
<slot name="counter" />
</div>
<NcActions v-if="$slots.actions || (editable && !editingActive) || undo"
ref="actions"
:inline="inlineActions"
class="app-navigation-entry__actions"
container="#app-navigation-vue"
:boundaries-element="actionsBoundariesElement"
:placement="menuPlacement"
:open="menuOpen"
:force-menu="forceMenu"
:default-icon="menuIcon"
@update:open="onMenuToggle">
<template #icon>
<Pencil :size="20" />
<!-- @slot Slot for the custom menu icon -->
<slot name="menu-icon" />
</template>
{{ editLabel }}
</NcActionButton>
<NcActionButton v-if="undo"
:aria-label="undoButtonAriaLabel"
@click="handleUndo">
<template #icon>
<Undo :size="20" />
</template>
</NcActionButton>
<slot name="actions" />
</NcActions>
</div>
<NcActionButton v-if="editable && !editingActive"
:aria-label="editButtonAriaLabel"
@click="handleEdit">
<template #icon>
<Pencil :size="20" />
</template>
{{ editLabel }}
</NcActionButton>
<NcActionButton v-if="undo"
:aria-label="undoButtonAriaLabel"
@click="handleUndo">
<template #icon>
<Undo :size="20" />
</template>
</NcActionButton>
<slot name="actions" />
</NcActions>
</div>

<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
<slot name="extra" />
</nav-element>
<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
<slot name="extra" />
</div>
</component>
<!-- Children elements -->
<ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
<slot />
Expand All @@ -315,6 +320,7 @@ import { directive as ClickOutside } from 'v-click-outside'
import NcActions from '../NcActions/index.js'
import NcActionButton from '../NcActionButton/index.js'
import NcLoadingIcon from '../NcLoadingIcon/index.js'
import NcVNodes from '../NcVNodes/index.js'
import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
import isMobile from '../../mixins/isMobile/index.js'
import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
Expand All @@ -330,9 +336,10 @@ export default {
components: {
NcActions,
NcActionButton,
NcLoadingIcon,
NcAppNavigationIconCollapsible,
NcInputConfirmCancel,
NcLoadingIcon,
NcVNodes,
Pencil,
Undo,
},
Expand Down Expand Up @@ -399,7 +406,7 @@ export default {
*/
to: {
type: [String, Object],
default: '',
default: null,
},

/**
Expand Down Expand Up @@ -570,6 +577,10 @@ export default {
return this.name
},

isRouterLink() {
return this.to && !this.href
},

collapsible() {
return this.allowCollapse && !!this.$slots.default
},
Expand Down Expand Up @@ -598,25 +609,6 @@ export default {
return false
},

// This is used to decide which outer element type to use
navElement() {
if (this.to && !this.href) {
return {
is: 'router-link',
tag: 'div',
to: this.to,
exact: this.exact,
}
}
return {
is: 'div',
}
},

isActive() {
return this.to && this.$route === this.to
},

editButtonAriaLabel() {
return this.editLabel ? this.editLabel : t('Edit item')
},
Expand Down Expand Up @@ -656,7 +648,9 @@ export default {
},

// forward click event
onClick(event) {
onClick(event, navigate) {
// Navigate is only defined if it is a router-link
navigate?.()
this.$emit('click', event)
},

Expand Down
50 changes: 24 additions & 26 deletions src/components/NcButton/NcButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,20 +289,6 @@ export default {
},
},

computed: {
// Determines whether the root element is an a,
// a router-link or a button
rootElement() {
if (this.to) {
return 'router-link'
}
if (this.href) {
return 'a'
}
return 'button'
},
},

/**
* The render function to display the component
*
Expand All @@ -326,7 +312,7 @@ export default {
this)
}

return h(this.rootElement,
const renderButton = ({ navigate, isActive, isExactActive } = {}) => h((this.to || !this.href) ? 'button' : 'a',
{
class: [
'button-vue',
Expand All @@ -336,6 +322,8 @@ export default {
'button-vue--icon-and-text': hasIcon && hasText,
[`button-vue--vue-${this.type}`]: this.type,
'button-vue--wide': this.wide,
active: isActive,
'router-link-exact-active': isExactActive,
},
],
attrs: {
Expand All @@ -346,20 +334,14 @@ export default {
href: (!this.to && this.href) ? this.href : null,
...this.$attrs,
},
props: {
to: this.to ? this.to : null,
tag: this.to ? 'button' : null,
exact: this.exact,
},
on: {
...this.$listeners,
},
// nativeOn is only valid on components
...(this.rootElement === 'router-link' && {
nativeOn: {
...this.$listeners,
click: ($event) => {
// We have to both navigate and call the listeners click handler
this.$listeners?.click?.($event)
navigate?.($event)
},
}),
},
},
[
h('span', { class: 'button-vue__wrapper' }, [
Expand All @@ -368,6 +350,22 @@ export default {
]),
]
)

// If we have a router-link, we wrap the button in it
if (this.to) {
return h('router-link', {
props: {
custom: true,
to: this.to,
exact: this.exact,
},
scopedSlots: {
default: renderButton,
},
})
}
// Otherwise we simply return the button
return renderButton()
},
}

Expand Down