55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
kind: 'unused' | 'duplicate' | 'used' | 'online' | 'draft' | 'variants'
|
|
label: string
|
|
size?: 'sm' | 'md'
|
|
}>(),
|
|
{ size: 'sm' },
|
|
)
|
|
|
|
const OUTLINE = 'border border-accented bg-transparent text-toned'
|
|
|
|
const badges = {
|
|
unused: {
|
|
icon: 'i-lucide-unlink',
|
|
class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
|
|
},
|
|
duplicate: {
|
|
icon: 'i-lucide-copy',
|
|
class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
|
|
},
|
|
variants: {
|
|
icon: 'i-lucide-layers',
|
|
class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
|
|
},
|
|
used: { icon: undefined, class: OUTLINE },
|
|
online: {
|
|
icon: 'i-lucide-globe',
|
|
class: 'border border-inverted bg-inverted text-inverted',
|
|
},
|
|
draft: { icon: 'i-lucide-pencil-line', class: OUTLINE },
|
|
} as const
|
|
|
|
const badge = computed(() => badges[props.kind])
|
|
const sizeClass = computed(() => (props.size === 'md' ? 'h-5.5 px-1.5' : 'h-5 px-1.5'))
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
color="neutral"
|
|
variant="soft"
|
|
:icon="badge.icon"
|
|
:class="[badge.class, sizeClass]"
|
|
:data-kind="kind"
|
|
:ui="{
|
|
base: 'gap-1 py-0 text-xs whitespace-nowrap',
|
|
leadingIcon: 'size-3',
|
|
}"
|
|
>
|
|
{{ label }}
|
|
</UBadge>
|
|
</template>
|