64 lines
1.6 KiB
Vue
64 lines
1.6 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-close-circle-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;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Tag
|
||
|
|
role="alert"
|
||
|
|
:value="props.label"
|
||
|
|
:severity="severity"
|
||
|
|
class="p-tag"
|
||
|
|
:style="(!!props.maxWidth) ? {width: props.maxWidth} : {width: 'fit-content'}"
|
||
|
|
:class="{'small': props.small}"
|
||
|
|
>
|
||
|
|
<template v-if="!props.noIcon || props.type === undefined">
|
||
|
|
<i :class="icon"></i>
|
||
|
|
</template>
|
||
|
|
</Tag>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.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;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|