feat(NcListItem): migrate to vue 3

Signed-off-by: Raimund Schlüßler <[email protected]>

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.
 		 */

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>

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'

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',
 						],
 					},
 					{