2020-02-18 08:57:00 +01:00
|
|
|
<template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<span
|
2022-08-22 12:12:09 +02:00
|
|
|
class="rounded-md my-1 truncate text-sm text-violet-title px-2 py-1"
|
|
|
|
:class="[typeClasses, capitalize]"
|
2022-07-12 10:55:28 +02:00
|
|
|
>
|
|
|
|
<slot />
|
2020-02-18 08:57:00 +01:00
|
|
|
</span>
|
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed } from "vue";
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = withDefaults(
|
|
|
|
defineProps<{
|
|
|
|
variant?: "info" | "danger" | "warning" | "light";
|
2022-08-22 12:12:09 +02:00
|
|
|
capitalize: boolean;
|
2022-07-12 10:55:28 +02:00
|
|
|
}>(),
|
2022-08-22 12:12:09 +02:00
|
|
|
{ variant: "light", capitalize: false }
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
const typeClasses = computed(() => {
|
|
|
|
switch (props.variant) {
|
|
|
|
default:
|
|
|
|
case "light":
|
|
|
|
return "bg-purple-3 dark:text-violet-3";
|
|
|
|
case "info":
|
|
|
|
return "bg-mbz-info dark:text-white";
|
2022-08-22 12:12:09 +02:00
|
|
|
case "warning":
|
|
|
|
return "bg-yellow-1";
|
2022-07-12 10:55:28 +02:00
|
|
|
case "danger":
|
|
|
|
return "bg-mbz-danger dark:text-white";
|
|
|
|
}
|
|
|
|
});
|
2020-02-18 08:57:00 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
span.tag {
|
2022-03-28 17:42:59 +02:00
|
|
|
&:not(.category)::before {
|
2020-02-18 08:57:00 +01:00
|
|
|
content: "#";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|