46 lines
957 B
Vue
46 lines
957 B
Vue
<template>
|
|
<component
|
|
:is="componentTag"
|
|
:type="componentType"
|
|
:class="['btn', variantClass, fullWidth ? 'w-full' : '']"
|
|
v-bind="$attrs"
|
|
>
|
|
<slot />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'primary',
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'button',
|
|
},
|
|
fullWidth: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
as: {
|
|
type: [String, Object],
|
|
default: 'button', // button | NuxtLink | a | etc
|
|
},
|
|
})
|
|
|
|
const componentTag = computed(() => {
|
|
if (props.as === 'NuxtLink') {
|
|
return resolveComponent('NuxtLink')
|
|
}
|
|
return props.as || 'button'
|
|
})
|
|
const componentType = computed(() => (props.as === 'button' ? props.type : undefined))
|
|
|
|
const variantClass = computed(() => {
|
|
if (props.variant === 'outline') return 'btn-outline btn-primary'
|
|
if (props.variant === 'ghost') return 'btn-ghost'
|
|
return 'btn-primary'
|
|
})
|
|
</script>
|