<template>
  <li @click="onClick($event)" :class="[
    {'active': active}]">
    <slot />
  </li>
</template>

<script>
// TODO: Accessibility
export default {
  name: "IrbisMenuItem",

  props: {
    active: Boolean,
    data: [String, Number, Object, Array]
  },

  methods: {
    onClick(event) {
      if (this.data) {
        this.$emit("onClick", event, this.data);
      } else {
        this.$emit("onClick", event, this.$slots.default);
      }
      this.$parent.hide();
    }
  }
};
</script>