47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<component
|
|
:is="componentTag"
|
|
:type="componentType"
|
|
:class="[baseClass, 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 baseClass = 'inline-flex items-center justify-center gap-2 rounded-full border-0 px-5 py-3 text-sm font-bold transition duration-200'
|
|
|
|
const variantClass = computed(() => {
|
|
if (props.variant === 'outline') return 'bg-transparent text-[#2f2418] ring-1 ring-[#cbbca6] hover:bg-[#f6f1ea]'
|
|
if (props.variant === 'ghost') return 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#ece2d3]'
|
|
return 'bg-[#2f2418] text-white shadow-[0_12px_28px_rgba(47,36,24,0.16)] hover:bg-[#493824]'
|
|
})
|
|
</script>
|