Merge pull request #5708 from nextcloud-libraries/fix/noid/user-bubbl…

…e-clickable

feat(NcUserBubble): add RouterLink support

src/components/NcUserBubble/NcUserBubble.vue

@@ -70,6 +70,7 @@ export default {
 			<component :is="isLinkComponent"
 				class="user-bubble__content"
 				:style="styles.content"
+				:to="to"
 				:href="hasUrl ? url : null"
 				:class="{ 'user-bubble__content--primary': primary }"
 				v-bind="attrs"
@@ -108,6 +109,7 @@ import NcUserBubbleDiv from './NcUserBubbleDiv.vue'
 import NcAvatar from '../NcAvatar/index.js'
 import NcPopover from '../NcPopover/index.js'
 import Vue from 'vue'
+import { RouterLink } from 'vue-router'
 
 export default {
 	name: 'NcUserBubble',
@@ -160,6 +162,13 @@ export default {
 				}
 			},
 		},
+		/**
+		 * Use bubble as a router-link for in-app navigation
+		 */
+		to: {
+			type: [String, Object],
+			default: undefined,
+		},
 		/**
 		 * Default popover state. Requires the UserBubble
 		 * to have some content to render inside the popover
@@ -240,7 +249,9 @@ export default {
 		},
 
 		isLinkComponent() {
-			return this.hasUrl ? 'a' : 'div'
+			return this.hasUrl
+				? (this.to ? RouterLink : 'a')
+				: 'div'
 		},
 
 		popoverEmpty() {
@@ -329,4 +340,7 @@ export default {
 	}
 }
 
+a.user-bubble__content {
+	cursor: pointer;
+}
 </style>