From 6ddede48634e534a0084b524b2336c23002b5d89 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 22 Jun 2022 21:46:50 +0200
Subject: [PATCH] feat(BaseButton): add target _blank for links by default

---
 src/components/base/BaseButton.vue     | 8 ++++++--
 src/components/misc/legal.vue          | 6 ++++--
 src/views/list/settings/background.vue | 7 +++----
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index dde1e2c5f..f2f9e51df 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -53,7 +53,8 @@ const props = defineProps({
 const componentNodeName = ref<Node['nodeName']>('button')
 interface ElementBindings {
 	type?: string;
-	rel?: string,
+	rel?: string;
+	target?: string;
 }
 
 const elementBindings = ref({})
@@ -74,7 +75,10 @@ watchEffect(() => {
 	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
 	if ('href' in attrs) {
 		nodeName = 'a'
-		bindings = {rel: 'noreferrer noopener nofollow'}
+		bindings = {
+			rel: 'noreferrer noopener nofollow',
+			target: '_blank',
+		}
 	}
 
 	componentNodeName.value = nodeName
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index db259d506..46e1dfd6b 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="legal-links">
-		<a :href="imprintUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
+		<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<a :href="privacyPolicyUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
+		<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
 	</div>
 </template>
 
@@ -10,6 +10,8 @@
 import {computed} from 'vue'
 import {useStore} from 'vuex'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const store = useStore()
 
 const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index cad2428d6..ab9fdbfa2 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -35,9 +35,7 @@
 				v-model="backgroundSearchTerm"
 			/>
 			<p class="unsplash-link">
-				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">
-					{{ $t('list.background.poweredByUnsplash') }}
-				</a>
+				<BaseButton href="https://unsplash.com">{{ $t('list.background.poweredByUnsplash') }}</BaseButton>
 			</p>
 			<div class="image-search-result">
 				<a
@@ -83,12 +81,13 @@ import ListService from '@/services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import debounce from 'lodash.debounce'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const SEARCH_DEBOUNCE = 300
 
 export default defineComponent({
 	name: 'list-setting-background',
-	components: {CreateEdit},
+	components: {CreateEdit, BaseButton},
 	data() {
 		return {
 			backgroundService: new BackgroundUnsplashService(),