43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
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: 'bg-[#f6f1ea] text-[#5f4b33]',
|
|
primary: 'bg-[#2f2418] text-white',
|
|
outline: 'bg-transparent text-[#2f2418] ring-1 ring-[#cbbca6]',
|
|
inverse: 'bg-white/10 text-white border border-white/40',
|
|
}
|
|
|
|
const toneMap: Record<string, string> = {
|
|
default: '',
|
|
success: 'bg-emerald-100 text-emerald-700',
|
|
warning: 'bg-amber-100 text-amber-700',
|
|
}
|
|
|
|
const pillClass = computed(() => {
|
|
const base = ['inline-flex items-center rounded-full font-semibold', props.size === 'sm' ? 'px-3 py-1 text-xs' : 'px-3.5 py-1.5 text-sm']
|
|
const variantClass = variantMap[props.variant] || variantMap.neutral
|
|
const toneClass = toneMap[props.tone] || ''
|
|
return [base, variantClass, toneClass].flat().filter(Boolean).join(' ')
|
|
})
|
|
</script>
|