43 lines
1015 B
Vue
43 lines
1015 B
Vue
<template>
|
|
<span :class="pillClass">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'neutral', // neutral | primary | outline | inverse
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: 'default', // default | success | warning
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'md', // sm | md
|
|
},
|
|
})
|
|
|
|
const variantMap: Record<string, string> = {
|
|
neutral: 'badge-neutral',
|
|
primary: 'badge-primary',
|
|
outline: 'badge-outline',
|
|
inverse: 'badge-ghost bg-white/10 text-white border border-white/40',
|
|
}
|
|
|
|
const toneMap: Record<string, string> = {
|
|
default: '',
|
|
success: 'badge-success',
|
|
warning: 'badge-warning',
|
|
}
|
|
|
|
const pillClass = computed(() => {
|
|
const base = ['badge', props.size === 'sm' ? 'badge-sm' : 'badge-md']
|
|
const variantClass = variantMap[props.variant] || variantMap.neutral
|
|
const toneClass = toneMap[props.tone] || ''
|
|
return [base, variantClass, toneClass].flat().filter(Boolean).join(' ')
|
|
})
|
|
</script>
|