feat(BaseButton): add target _blank for links by default

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

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)

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(),