✨ feature: Badge component added

src/components/badge/VBadge.vue

@@ -0,0 +1,63 @@
+<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>
+