shaved-text.vue

<template>

  <span :title="tooltip">{{ title }}</span>

</template>


<script>

  import shave from 'shave';
  import responsiveElement from 'kolibri.coreVue.mixins.responsiveElement';

  export default {
    mixins: [responsiveElement],
    props: {
      title: {
        type: String,
        required: true,
      },
      maxheight: {
        type: Number,
        required: true,
        validator(value) {
          return value > 0;
        },
      },
    },
    data() {
      return {
        hasTooltip: false,
      };
    },
    computed: {
      tooltip() {
        if (!this.hasTooltip) {
          return null;
        }
        return this.title;
      },
    },
    watch: {
      // use the responsive element sensor to detect size changes
      elSize: {
        handler() {
          shave(this.$el, this.maxheight);
          this.$nextTick(() => {
            this.hasTooltip = Boolean(this.$el.querySelector('.js-shave'));
          });
        },
        deep: true,
      },
    },
  };

</script>


<style lang="stylus" scoped></style>