<template>
  <div class="nv-tabs-item" :class="{ active: parent?.modelValue === id }">
    <slot />
  </div>
</template>

<script>
export default {
  name: "NvTabsItem",

  data: () => {
    return {
      id: null,
      parent: null,
    };
  },

  created() {
    this.getParent();
    if (this.parent) {
      this.id = this.parent.items.length;
      this.parent.items.push(this.id);
    }
  },

  methods: {
    getParent() {
      let component = null;
      let parent = this.$parent;
      while (parent && !component) {
        if (parent.$options.name === "NvTabsItems") {
          component = parent;
        }
        parent = parent.$parent;
      }
      this.parent = component;
    },
  },
};
</script>

<style lang="scss" scoped>
.nv-tabs-item:not(.active) {
  @apply hidden;
}
</style>
