30 lines
643 B
Vue
30 lines
643 B
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{ label: string; missing?: boolean; tall?: boolean }>(), {
|
|
missing: false,
|
|
tall: false,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UBadge
|
|
color="neutral"
|
|
variant="soft"
|
|
:label="label"
|
|
data-testid="relation-chip"
|
|
:data-missing="missing ? 'true' : undefined"
|
|
class="max-w-full ring-0"
|
|
:class="
|
|
missing
|
|
? 'border border-dashed border-accented bg-transparent text-toned'
|
|
: 'bg-(--rc-sand) text-(--rc-on-sand)'
|
|
"
|
|
:ui="{
|
|
base: [
|
|
tall ? 'h-5.5 px-2' : 'h-5 px-1.5',
|
|
'rounded-none py-0 text-xs font-medium whitespace-nowrap',
|
|
],
|
|
label: 'truncate',
|
|
}"
|
|
/>
|
|
</template>
|