72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import type IVBadge from './IVBadge.type';
|
|
import Tag from 'primevue/tag';
|
|
import { computed } from 'vue';
|
|
|
|
const props = withDefaults(defineProps<IVBadge>(), {
|
|
type: undefined,
|
|
noIcon: false,
|
|
small: false,
|
|
})
|
|
|
|
const severity = computed(() => {
|
|
switch (props.type) {
|
|
case 'error': return 'danger';
|
|
case 'warning' : return 'warn';
|
|
case 'success' : return 'success';
|
|
case 'info': return 'info';
|
|
case 'new': return 'secondary';
|
|
default:
|
|
return undefined;
|
|
}
|
|
});
|
|
|
|
const icon = computed(() => {
|
|
switch (props.type) {
|
|
case 'error': return 'ri-spam-fill';
|
|
case 'warning' : return 'ri-alert-fill';
|
|
case 'success' : return 'ri-checkbox-circle-fill';
|
|
case 'info': return 'ri-information-fill';
|
|
case 'new': return 'ri-flashlight-fill';
|
|
default:
|
|
return undefined;
|
|
}
|
|
})
|
|
|
|
const limit = computed(() => props.maxWidth);
|
|
</script>
|
|
|
|
<template>
|
|
<Tag
|
|
role="alert"
|
|
:value="props.label"
|
|
:severity="severity"
|
|
:title="props.label"
|
|
class="p-tag"
|
|
:class="{'small': props.small}"
|
|
>
|
|
<i v-if="!props.noIcon || props.type === undefined" :class="icon" style="font-weight: 100;"></i>
|
|
<span :class="{'limit': props.maxWidth}">{{ props.label }}</span>
|
|
</Tag>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.p-tag{height: fit-content;}
|
|
.p-tag.small{
|
|
--p-tag-icon-size: var( --text-body-SM-detail-text-Maj-size);
|
|
--p-tag-font-size: var( --text-body-XS-mention-text-Maj-size);
|
|
--p-tag-font-weight: var( --text-body-XS-mention-text-Maj-weight);
|
|
--p-tag-padding: 0.125rem 0.325rem;
|
|
align-self: center;
|
|
}
|
|
|
|
.limit{
|
|
max-width: v-bind(limit);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
</style>
|
|
|