43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
variant?: 'regular' | 'outline'
|
|
color?: 'regular' | 'primary'
|
|
dropdown?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'md',
|
|
variant: 'regular',
|
|
color: 'regular',
|
|
dropdown: false
|
|
})
|
|
|
|
const styleClass = computed(() => {
|
|
const sizeVariants = {
|
|
xs: 'dui-btn-xs',
|
|
sm: 'dui-btn-sm',
|
|
md: 'dui-btn-md',
|
|
lg: 'dui-btn-lg'
|
|
}
|
|
const colorVariants = {
|
|
regular: '',
|
|
primary: 'dui-btn-primary'
|
|
}
|
|
const variantVariants = {
|
|
regular: '',
|
|
outline: 'dui-btn-outline'
|
|
}
|
|
const sizeClass = sizeVariants[props.size]
|
|
const variantClass = variantVariants[props.variant]
|
|
const colorClass = colorVariants[props.color]
|
|
return [sizeClass, variantClass, colorClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<label class="dui-btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
|
|
<slot></slot>
|
|
</label>
|
|
<button class="dui-btn duration-0" :class="styleClass" v-else><slot></slot></button>
|
|
</template>
|