feat(VTabs): port to v3

[nekosaur]

Description

update v-tabs to v3

BREAKING CHANGES

• remove v-tabs-items, v-tabs-bar, v-tab-item components. left are v-tabs, v-tab and v-tabs-slider
• maybe rename v-tab to v-tabs-item to match other components that use group composable? 🤷

Motivation and Context

fixes #4733
resolves #10416
fixes #13806

How Has This Been Tested?

Markup:

<template>
  <v-app full-height>
    <!-- <v-list :items="items" @click:open="foo" /> -->
    <!-- <v-list :items="routes" /> -->
    <!-- <v-slide-group>
      <v-slide-group-item v-slot="{ select, isSelected }" value="foo">
        <v-btn
          elevation="0"
          variant="text"
          :color="isSelected ? 'primary' : undefined"
          @click="select(!isSelected)"
        >fooooooo</v-btn>
      </v-slide-group-item>
      <v-slide-group-item v-slot="{ select, isSelected }" value="bar">
        <v-btn
          elevation="0"
          variant="text"
          :color="isSelected ? 'primary' : undefined"
          @click="select(!isSelected)"
        >baaaaaaar</v-btn>
      </v-slide-group-item>
      <v-slide-group-item v-slot="{ select, isSelected }" value="baz">
        <v-btn
          elevation="0"
          variant="text"
          :color="isSelected ? 'primary' : undefined"
          @click="select(!isSelected)"
        >baaaaaaaz</v-btn>
      </v-slide-group-item>
      <v-slide-group-item v-slot="{ select, isSelected }" value="hello">
        <v-btn
          elevation="0"
          variant="text"
          :color="isSelected ? 'primary' : undefined"
          @click="select(!isSelected)"
        >hello</v-btn>
      </v-slide-group-item>
      <v-slide-group-item v-slot="{ select, isSelected }" value="world">
        <v-btn
          elevation="0"
          variant="text"
          :color="isSelected ? 'primary' : undefined"
          @click="select(!isSelected)"
        >world</v-btn>
      </v-slide-group-item>
    </v-slide-group> -->

    <v-divider class="my-10" />

    <v-tabs :items="tabs" v-model="model" />

    <v-window v-model="model">
      <v-window-item value="foo">
        <v-card>foo</v-card>
      </v-window-item>
      <v-window-item value="bar">
        <v-card>bar</v-card>
      </v-window-item>
      <v-window-item value="baz">
        <v-card>baz</v-card>
      </v-window-item>
      <v-window-item value="hello">
        <v-card>hello</v-card>
      </v-window-item>
    </v-window>

    <!--<v-tabs :items="tabs" direction="vertical" />

    <v-divider class="my-10" />

    <v-tabs stacked class="ma-10" color="primary">
      <v-tab title="foo" prepend-icon="mdi-home" />
      <v-tab title="bar" />
      <v-tab title="baz" />
      <v-tab title="hello" />
    </v-tabs>
    -->

  </v-app>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const routes = ref([
        {
          to: '/',
          title: 'Home',
        },
        {
          to: '/page1',
          title: 'Page 1',
        },
      ])

      const tabs = ref([
        'foo', 'bar', 'baz', 'hello',
        // , 'world', 'one', 'two', 'three', 'four', 'five', 'six', 'seven'
      ])

      return {
        routes,
        tabs,
        model: ref('foo'),
      }
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)