From 2813e6435d630b0aa809bf01e9d22b5d3b996104 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 11:28:29 +0100
Subject: [PATCH] Use component with :is
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/NcBreadcrumb/NcBreadcrumb.vue   |  4 ++--
 .../NcCheckboxRadioSwitch.vue                  |  6 +++---
 src/components/NcUserBubble/NcUserBubble.vue   | 18 ++++++++++--------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 0d8026ef28..dc25507d99 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -39,7 +39,7 @@ This component is meant to be used inside a Breadcrumbs component.
 		@dragover.prevent="() => {}"
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
-		<element :is="tag"
+		<component :is="tag"
 			v-if="(title || icon) && !$slots.default"
 			:exact="exact"
 			:to="to"
@@ -51,7 +51,7 @@ This component is meant to be used inside a Breadcrumbs component.
 				<span v-if="icon" :class="icon" class="icon" />
 				<span v-else>{{ title }}</span>
 			</slot>
-		</element>
+		</component>
 		<NcActions v-if="$slots.default"
 			ref="actions"
 			type="tertiary"
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 7a38ae2677..d947fd9539 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -148,7 +148,7 @@ export default {
 </docs>
 
 <template>
-	<element :is="wrapperElement"
+	<component :is="wrapperElement"
 		:class="{
 			['checkbox-radio-switch-' + type]: type,
 			'checkbox-radio-switch--checked': isChecked,
@@ -171,7 +171,7 @@ export default {
 				class="checkbox-radio-switch__input"
 				@change="onToggle">
 			<NcLoadingIcon v-if="loading" class="checkbox-radio-switch__icon" />
-			<icon :is="checkboxRadioIconElement"
+			<component :is="checkboxRadioIconElement"
 				v-else-if="!buttonVariant"
 				:size="size"
 				class="checkbox-radio-switch__icon" />
@@ -179,7 +179,7 @@ export default {
 			<!-- @slot The checkbox/radio label -->
 			<slot />
 		</label>
-	</element>
+	</component>
 </template>
 
 <script>
diff --git a/src/components/NcUserBubble/NcUserBubble.vue b/src/components/NcUserBubble/NcUserBubble.vue
index e524495174..424611ab76 100644
--- a/src/components/NcUserBubble/NcUserBubble.vue
+++ b/src/components/NcUserBubble/NcUserBubble.vue
@@ -69,16 +69,17 @@ This component has the following slot:
 
 </docs>
 <template>
-	<NcPopover :is="isPopoverComponent"
+	<component :is="isPopoverComponent"
 		trigger="hover focus"
 		:shown="open"
 		class="user-bubble__wrapper"
 		@update:open="onOpenChange">
 		<!-- Main userbubble structure -->
 		<template #trigger>
-			<div v-bind="isLinkComponent"
+			<component :is="isLinkComponent"
 				class="user-bubble__content"
 				:style="styles.content"
+				:href="hasUrl ? url : null"
 				:class="primary ? 'user-bubble__content--primary' : ''"
 				@click="onClick">
 				<!-- NcAvatar -->
@@ -102,12 +103,12 @@ This component has the following slot:
 				<span v-if="$slots.title" class="user-bubble__secondary">
 					<slot name="title" />
 				</span>
-			</div>
+			</component>
 		</template>
 
 		<!-- @slot Main Popover content on userbubble hover/focus -->
 		<slot />
-	</NcPopover>
+	</component>
 </template>
 
 <script>
@@ -241,11 +242,12 @@ export default {
 			return !!this.avatarImage
 		},
 
+		hasUrl() {
+			return this.url && this.url.trim() !== ''
+		},
+
 		isLinkComponent() {
-			if (this.url && this.url.trim() !== '') {
-				return { is: 'a', href: this.url }
-			}
-			return { is: 'div' }
+			return this.hasUrl ? 'a' : 'div'
 		},
 
 		popoverEmpty() {