feat(VTabs): add support for v-tabs-window

[johnleider]

Motivation and Context

add support for missing v-tabs-window/v-tabs-window-item (v-tab-items/v-tab-item)

TODO:

• center-active is broken

Markup:

<template>
  <v-app>
    <div class="ma-4 pa-4">
      <v-tabs :items="items">
        <template #item.Tab1>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
        </template>
        <template #item.Tab2>
          2Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
        </template>
        <template #item.Tab3>
          3Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
        </template>
      </v-tabs>
    </div>

    <div class="ma-4 pa-4">
      <v-tabs>
        <v-tab text="Tab 1" value="1" />
        <v-tab text="Tab 2" value="2" />
        <v-tab text="Tab 3" value="3" />

        <template #window>
          <v-tabs-window-item value="1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
          <v-tabs-window-item value="2">
            2Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
          <v-tabs-window-item value="3">
            2Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
        </template>
      </v-tabs>
    </div>

    <div class="ma-4 pa-4">
      <v-tabs>
        <v-tab text="Tab 1" />
        <v-tab text="Tab 2" />
        <v-tab text="Tab 3" />

        <template #window>
          <v-tabs-window-item>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
          <v-tabs-window-item>
            2Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
          <v-tabs-window-item>
            2Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
          </v-tabs-window-item>
        </template>
      </v-tabs>
    </div>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ['Tab1', 'Tab2', 'Tab3']
  const model = ref()
  const model2 = ref()
</script>