<template>
  <transition :name="disableTransitions ? '' : 'qf-zoom-in-center'">
    <span class="qf-tag" :class="[
        type ? 'qf-tag-' + type : '',
        tagSize && `qf-tag--${tagSize}`,
      ]" :style="{backgroundColor: color}">
      <slot></slot>
      <qf-font-icon name="ic-ic_close" class="qf-tag-close" v-if="closable" @click="handleClose"></qf-font-icon>
    </span>
  </transition>
</template>

<script>
import QfFontIcon from '../../font-icon';

export default {
  name: 'QfTag',
  components: {
    QfFontIcon
  },
  props: {
    text: String,
    closable: Boolean,
    type: String,
    disableTransitions: Boolean,
    color: String,
    size: String
  },
  methods: {
    handleClose(event) {
      this.$emit('close', event);
    }
  },
  computed: {
    tagSize() {
      return this.size;
    }
  }
};
</script>
