<template>
  <v-tabs>
    <v-tab name="Tab" class="p-4">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </v-tab>
    <v-tab name="Tab 2" class="p-4">
      It is a long established fact that a reader will be distracted by the
      readable content of a page when looking at its layout. The point of using
      Lorem Ipsum is that it has a more-or-less normal distribution of letters,
      as opposed to using 'Content here, content here', making it look like
      readable English.
    </v-tab>
    <v-tab name="Tab 2" class="p-4">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has
      roots in a piece of classical Latin literature from 45 BC, making it over
      2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
      College in Virginia, looked up one of the more obscure Latin words,
      consectetur, from a Lorem Ipsum passage, and going through the cites of
      the word in classical literature, discovered the undoubtable source.
    </v-tab>
  </v-tabs>
</template>
  

    
  
  

    <template>
  <v-tabs
    v-bind="example"
    @input:changed-tab="handleChangeTab"
  >
    <v-tab
      name="Tab"
      class="p-4"
    >
      {{ text[0] }}
    </v-tab>
    <v-tab
      name="Tab 2"
      class="p-4"
    >
      {{ text[1] }}
    </v-tab>
    <v-tab class="p-4">
      <template #name>
        <span class="flex justify-between items-center">
          Tab 3
          <v-badge
            mod-badge="variant:success size:tiny"
            class="ml-3"
          >
            4
          </v-badge>
        </span>
      </template>
      {{ text[2] }}
    </v-tab>
    <v-tab
      v-for="(tab, i) in tabs"
      :name="tab.name"
      class="p-4"
    >
      {{ tab.content }}
    </v-tab>
  </v-tabs>

</template>
  

    
  
  

    <script setup>
import { ref, reactive } from "vue";
import { text } from "../example-data/data.js";

let example = reactive({
  fill: false,
  center: false,
  right: false,
  transition: "fade",
  base: "tabs",
});

let tabs = ref([]);

let addTab = () => {
  tabs.value.push({
    name: "Tab " + (tabs.value.length + 4),
    content: text[tabs.value.length % 3],
  });
};

let events = ref([]);

let handleChangeTab = (ev) => {
  events.value.unshift({ ev: "input:changed-tab", data: ev });
};
</script>