68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
kind: 'new' | 'changed' | 'cause' | 'required' | 'unique'
|
|
onSand?: boolean
|
|
}>()
|
|
|
|
const badges = {
|
|
new: {
|
|
get label() {
|
|
return t('New')
|
|
},
|
|
class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
|
|
},
|
|
changed: {
|
|
get label() {
|
|
return t('Changed')
|
|
},
|
|
class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
|
|
},
|
|
cause: {
|
|
get label() {
|
|
return t('Possible cause')
|
|
},
|
|
icon: 'i-lucide-triangle-alert',
|
|
class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
|
|
},
|
|
required: {
|
|
get label() {
|
|
return t('Required')
|
|
},
|
|
class: 'border border-accented bg-transparent text-toned',
|
|
},
|
|
unique: {
|
|
get label() {
|
|
return t('Unique')
|
|
},
|
|
class: 'border border-accented bg-transparent text-toned',
|
|
},
|
|
} as const
|
|
|
|
const OUTLINE_ON_SAND = 'border border-(--rc-on-sand) bg-transparent text-(--rc-on-sand)'
|
|
|
|
const badge = computed(() => badges[props.kind])
|
|
const badgeIcon = computed(() => ('icon' in badge.value ? badge.value.icon : undefined))
|
|
const badgeClass = computed(() =>
|
|
props.onSand && props.kind !== 'new' ? OUTLINE_ON_SAND : badge.value.class,
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
color="neutral"
|
|
variant="soft"
|
|
:icon="badgeIcon"
|
|
:class="badgeClass"
|
|
:ui="{
|
|
base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
|
|
leadingIcon: 'size-3',
|
|
}"
|
|
>
|
|
{{ badge.label }}
|
|
</UBadge>
|
|
</template>
|