visua-vue/src/components/badge/VBadge.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>