<script>
export default {
  props: {
    value: {type: String, default: ""},
    variant: {type: String, default: "dark"},
    is_bold: {type: Boolean, default: true},
    is_italic: {type: Boolean, default: true},
    size: {type: Number},
    limit_text: {type: Number, default: ""},
    additional_class: {type: String, default: ""}
  },
  methods: {
    renderFormattedText() {
      if (this.value.length > this.limit_text) {
        return this.value.substr(0, this.limit_text) + " ..."
      }
    }
  }
}
</script>
<template>
  <label v-b-tooltip.hover.bottom="{ title: value, disabled : (limit_text > value.length )}"
         :class="`${(is_bold) ? `font-weight-bold` : `` } ${(is_italic) ? `font-italic` : `` }
       ${(size) ? 'font-size-'+size : `` } text-${variant} ${additional_class}`">
    {{ renderFormattedText() }}
  </label>
</template>