35 lines
701 B
Vue
35 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 "neutral";
|
|
}
|
|
});
|
|
|
|
const displayText = computed(() => {
|
|
return props.restriction;
|
|
});
|
|
</script>
|