29 lines
778 B
Vue
29 lines
778 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
size?: string
|
|
variant?: 'regular' | 'outline'
|
|
color?: string
|
|
dropdown?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'md',
|
|
variant: 'regular',
|
|
color: 'regular',
|
|
dropdown: false
|
|
})
|
|
|
|
const styleClass = computed(() => {
|
|
const sizeClass = `btn-${props.size}`
|
|
const variantClass = props.variant !== 'regular' ? `btn-${props.variant}` : ''
|
|
const colorClass = props.color !== 'regular' ? `btn-${props.color}` : ''
|
|
return [sizeClass, variantClass, colorClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<label class="btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
|
|
<slot></slot>
|
|
</label>
|
|
<button class="btn duration-0" :class="styleClass" v-else><slot></slot></button>
|
|
</template>
|