From 601b37505e31cdbbd32b1a2af37b5ceaca6d34d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Fri, 17 Feb 2023 12:44:31 +0100
Subject: [PATCH] Use router-link slot in NcAppNavigationItem
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .../NcAppNavigationItem.vue                   | 204 +++++++++---------
 src/components/NcVNodes/NcVNodes.vue          |  17 +-
 2 files changed, 108 insertions(+), 113 deletions(-)

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index e5840da78e..2ae4cb854b 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -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="(to && !href) ? 'router-link' : 'NcVNodes'"
+			v-slot="{ navigate, isActive }"
+			custom
+			:to="href ? null : to"
+			:exact="href ? null : exact">
+			<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(event) }"
+					@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 />
@@ -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'
@@ -330,9 +336,10 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		NcLoadingIcon,
 		NcAppNavigationIconCollapsible,
 		NcInputConfirmCancel,
+		NcLoadingIcon,
+		NcVNodes,
 		Pencil,
 		Undo,
 	},
@@ -598,25 +605,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')
 		},
diff --git a/src/components/NcVNodes/NcVNodes.vue b/src/components/NcVNodes/NcVNodes.vue
index bc2262494c..bbdb40c2f5 100644
--- a/src/components/NcVNodes/NcVNodes.vue
+++ b/src/components/NcVNodes/NcVNodes.vue
@@ -1,5 +1,5 @@
 <!--
- - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ - @copyright Copyright (c) 2023 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  -
  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
  -
@@ -23,16 +23,23 @@
 <script>
 export default {
 	name: 'NcVNodes',
-	functional: true,
+	props: {
+		/**
+		 * The vnodes to render
+		 */
+		vnodes: {
+			type: [Array, Object],
+			default: null,
+		},
+	},
 	/**
 	 * The render function to display the component
 	 *
 	 * @param {Function} h The function to create VNodes
-	 * @param {object} context The context object of the functional component
 	 * @return {object} The created VNode
 	 */
-	render(h, context) {
-		return context.props.vnodes
+	render(h) {
+		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
 	},
 }
 </script>