63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
variant?: 'regular' | 'outline'
|
|
color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
|
|
dropdown?: boolean
|
|
join?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'md',
|
|
variant: 'regular',
|
|
color: 'regular',
|
|
dropdown: false,
|
|
join: 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',
|
|
secondary: 'dui-btn-secondary',
|
|
info: 'dui-btn-info',
|
|
success: 'dui-btn-success',
|
|
warning: 'dui-btn-warning',
|
|
error: 'dui-btn-error'
|
|
}
|
|
const variantVariants = {
|
|
regular: '',
|
|
outline: 'dui-btn-outline'
|
|
}
|
|
const sizeClass = sizeVariants[props.size]
|
|
const variantClass = variantVariants[props.variant]
|
|
const colorClass = colorVariants[props.color]
|
|
const joinClass = props.join ? 'dui-join-item' : ''
|
|
return [sizeClass, variantClass, colorClass, joinClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<label
|
|
class="dui-btn h-auto px-3 py-2 duration-0"
|
|
:class="styleClass"
|
|
v-if="props.dropdown"
|
|
tabindex="0"
|
|
>
|
|
<slot></slot>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
class="dui-btn inline-block h-auto max-w-full truncate px-3 py-2 duration-0"
|
|
:class="styleClass"
|
|
v-else
|
|
>
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|