wf4/app/components/Button.vue
webfussel 0ce3ca2fe5 FIX: fixes for typos and Link Component in button
Fixes some grammar issues and bad layouting, as well as wrong link usage
2025-05-28 13:49:53 +02:00

37 lines
720 B
Vue
Executable file

<template>
<component :is="actualComponent" v-bind="actualProps()" class="Button" :class="[design]">
<slot />
</component>
</template>
<script setup lang="ts">
type Props = {
type ?: 'NuxtLink' | 'button'
href ?: string
design ?: 'default' | 'dark' | 'white'
}
const {
type = 'NuxtLink',
href = '#',
design = 'default',
} = defineProps<Props>()
const isExternal = href.startsWith('http')
const actualComponent = computed(() => {
if (type === 'NuxtLink') return resolveComponent('NuxtLink')
return type
})
const actualProps = () => {
if (type === 'NuxtLink') {
return {
to: href,
target: isExternal ? '_blank' : undefined,
external: isExternal,
}
}
}
</script>