41 lines
873 B
Vue
41 lines
873 B
Vue
<template>
|
|
<span :class="badgeClass">
|
|
<slot />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'default', // default | success | warning | error | muted | primary
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'sm', // xs | sm | md
|
|
},
|
|
})
|
|
|
|
const variantMap: Record<string, string> = {
|
|
default: 'badge-neutral',
|
|
success: 'badge-success',
|
|
warning: 'badge-warning',
|
|
error: 'badge-error',
|
|
muted: 'badge-ghost',
|
|
primary: 'badge-primary',
|
|
}
|
|
|
|
const sizeMap: Record<string, string> = {
|
|
xs: 'badge-xs',
|
|
sm: 'badge-sm',
|
|
md: 'badge-md',
|
|
}
|
|
|
|
const badgeClass = computed(() => {
|
|
const base = 'badge'
|
|
const variantClass = variantMap[props.variant] || variantMap.default
|
|
const sizeClass = sizeMap[props.size] || sizeMap.sm
|
|
return [base, variantClass, sizeClass].join(' ')
|
|
})
|
|
</script>
|