Use component with :is

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud-libraries · Feb 17, 2023 · 9bf8ce9 · 9bf8ce9
1 parent a705063
commit 9bf8ce9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -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,15 +171,15 @@ 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" />
 
 			<!-- @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
@@ -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 ? this.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() {