39 lines
701 B
Vue
39 lines
701 B
Vue
<template>
|
|
<UBadge
|
|
:color="badgeColor"
|
|
:variant="variant"
|
|
:size="size"
|
|
>
|
|
{{ displayText }}
|
|
</UBadge>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Restriction = 'Restricted' | 'General'
|
|
|
|
interface Props {
|
|
restriction: Restriction
|
|
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
|
|
size?: 'xs' | 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'subtle',
|
|
size: 'sm'
|
|
})
|
|
|
|
const badgeColor = computed(() => {
|
|
switch (props.restriction) {
|
|
case 'Restricted':
|
|
return 'orange'
|
|
case 'General':
|
|
return 'green'
|
|
default:
|
|
return 'gray'
|
|
}
|
|
})
|
|
|
|
const displayText = computed(() => {
|
|
return props.restriction
|
|
})
|
|
</script>
|