<template>
  <div :class="_class">
    <slot></slot>
    <Icon icon="clear" v-if="onClose" :class="_classIcon" @click="onRemoveTagItem"/>
  </div>
</template>

<script>
  import Icon from '../icon';

  const name = 'hive-tag';
  export default {
    name,
    components: {
      Icon,
    },
    props: {
      onClose: Function,
    },
    data() {
      return {

      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            [`${name}--closable`]: this.onClose,
          },
        ];
      },
      _classIcon() {
        return [
          `${name}__close`,
        ];
      },
    },
    mounted() {

    },
    methods: {
      onRemoveTagItem() {
        this.onClose();
      },
    },
  };
</script>
