visua-vue/src/components/hint/VHint.vue

<script setup lang="ts">
import Message from 'primevue/message';
import type IVHint from './IVHint.type';
import { computed } from 'vue';
import styles from '@visua/typography.module.css';

const props = withDefaults(defineProps<IVHint>(), {
  title: '',
  icon: false,
  type: '',
  disabled: false,
})

const iconClass = computed(() => {
  switch (props.type) {
    case 'alert': return 'ri-spam-fill';
    case 'warning' : return 'ri-alert-fill';
    case 'success' : return 'ri-checkbox-circle-fill';
    case 'info': return 'ri-information-fill';
    default:
      return undefined;
}
});

const severity = computed(() => {
  switch (props.type) {
    case 'alert': return 'error';
    case 'warning' : return 'warn';
    case 'success' : return 'success';
    case 'info' : return 'info';
    case 'active': return 'contrast'
    default:
      return 'secondary';
  }
});
</script>

<template>
  <Message
    variant="simple"
    :severity="severity"
    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
    :icon="props.icon ? iconClass: undefined"
    :closable="false"
    size="small"
    role="alert"
  >
    {{ props.title }}
  </Message>
</template>

<style scoped>
.p-message.disabled {color: var(--text-disabled-grey);}
</style>