68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
size: {
|
|
type: String,
|
|
default: 'md',
|
|
validator: v => ['sm', 'md', 'lg'].includes(v),
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'success',
|
|
validator: v => ['primary','secondary','info','success','warning','error','danger','light','dark','white'].includes(v),
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'fill',
|
|
validator: v => ['fill', 'gradient'].includes(v),
|
|
},
|
|
rounded: { type: Boolean, default: false },
|
|
})
|
|
|
|
const fill = {
|
|
primary: 'bg-primary text-white',
|
|
secondary: 'bg-secondary text-white',
|
|
info: 'bg-info text-white',
|
|
success: 'bg-success text-white',
|
|
warning: 'bg-warning text-white',
|
|
danger: 'bg-danger text-white',
|
|
error: 'bg-danger text-white',
|
|
light: 'bg-light text-dark',
|
|
dark: 'bg-dark text-white',
|
|
white: 'bg-white text-dark shadow-soft-xs',
|
|
}
|
|
|
|
const grad = {
|
|
primary: 'bg-gradient-primary shadow-primary text-white',
|
|
secondary: 'bg-gradient-secondary shadow-secondary text-white',
|
|
info: 'bg-gradient-info shadow-info text-white',
|
|
success: 'bg-gradient-success shadow-success text-white',
|
|
warning: 'bg-gradient-warning shadow-warning text-white',
|
|
danger: 'bg-gradient-danger shadow-danger text-white',
|
|
error: 'bg-gradient-danger shadow-danger text-white',
|
|
light: 'bg-gradient-light shadow-soft-xs text-dark',
|
|
dark: 'bg-gradient-dark shadow-dark text-white',
|
|
white: 'bg-white shadow-soft-xs text-dark',
|
|
}
|
|
|
|
const sizes = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-xs',
|
|
lg: 'px-3 py-1.5 text-sm',
|
|
}
|
|
|
|
const classes = computed(() => [
|
|
'inline-flex items-center font-medium',
|
|
props.rounded ? 'rounded-full' : 'rounded-md',
|
|
sizes[props.size],
|
|
(props.variant === 'gradient' ? grad : fill)[props.color] ?? fill.success,
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<span :class="classes">
|
|
<slot />
|
|
</span>
|
|
</template>
|