From b07b5b9af917f5ca5ac433017c3affe779868d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Tue, 31 Oct 2023 12:20:00 +0100
Subject: [PATCH] feat(NcListItem): migrate to vue 3
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>
---
 src/components/NcListItem/NcListItem.vue | 18 +++++-------------
 src/components/NcVNodes/NcVNodes.vue     |  5 ++---
 src/components/index.js                  |  3 +--
 styleguide.config.js                     |  3 +--
 4 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 2c8fed8f07..e7b7a91cc2 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -203,11 +203,10 @@
 	<!-- This wrapper can be either a router link or a `<li>` -->
 	<component :is="to ? 'router-link' : 'NcVNodes'"
 		v-slot="{ href: routerLinkHref, navigate, isActive }"
-		:custom="to ? true : null"
-		:to="to"
-		:exact="to ? exact : null">
+		v-bind="{ ...to && { custom: true, to } }">
 		<li class="list-item__wrapper"
-			:class="{ 'list-item__wrapper--active' : isActive || active }">
+			:class="{ 'list-item__wrapper--active' : isActive || active }"
+			v-bind="$attrs">
 			<a :id="anchorId"
 				ref="list-item"
 				:href="routerLinkHref || href"
@@ -323,6 +322,8 @@ export default {
 		NcVNodes,
 	},
 
+	inheritAttrs: false,
+
 	props: {
 		/**
 		 * The details text displayed in the upper right part of the component
@@ -340,15 +341,6 @@ export default {
 			required: true,
 		},
 
-		/**
-		 * Pass in `true` if you want the matching behavior to
-		 * be non-inclusive: https://router.vuejs.org/api/#exact
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-
 		/**
 		 * The route for the router link.
 		 */
diff --git a/src/components/NcVNodes/NcVNodes.vue b/src/components/NcVNodes/NcVNodes.vue
index bbdb40c2f5..ae5e4434bb 100644
--- a/src/components/NcVNodes/NcVNodes.vue
+++ b/src/components/NcVNodes/NcVNodes.vue
@@ -35,11 +35,10 @@ export default {
 	/**
 	 * The render function to display the component
 	 *
-	 * @param {Function} h The function to create VNodes
 	 * @return {object} The created VNode
 	 */
-	render(h) {
-		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
+	render() {
+		return this.vnodes || this.$slots?.default?.({})
 	},
 }
 </script>
diff --git a/src/components/index.js b/src/components/index.js
index a2df6bdfeb..270933ad8f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -74,8 +74,7 @@ export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
 // Not exported on purpose as it is only meant as a base component
 // export { default as NcInputField } from './NcInputField/index.js'
 
-// Not yet adjusted for vue3
-// export { default as NcListItem } from './NcListItem/index.js'
+export { default as NcListItem } from './NcListItem/index.js'
 export { default as NcListItemIcon } from './NcListItemIcon/index.js'
 export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
 // export { default as NcModal } from './NcModal/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index 25aeabeca4..d41b87697f 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -194,8 +194,7 @@ module.exports = async () => {
 					{
 						name: 'NcListItems',
 						components: [
-							//'src/components/NcListItem*/*.vue',
-							'src/components/NcListItemIcon/*.vue',
+							'src/components/NcListItem*/*.vue',
 						],
 					},
 					{