feat(VTabs): add inset prop

[J-Sek]

Description

Adds inset mode

• extends slider full height
• adds control over padding and border-radius

Preview

Screencast.from.2025-10-19.00-31-58.webm

Markup:

<template>
  <v-app theme="dark">
    <v-defaults-provider
      :defaults="{ VTab: { class: 'text-none' , ripple: false } }"
    >
      <v-container>
        <v-tabs
          inset
          slider-transition="grow"
          density="compact"
          slider-color="primary"
          :items="tabs"
          style="
            --v-border-color: var(--v-theme-primary);
            --v-border-opacity: 0.5;
          "
        />
        <br />
        <br />
        <v-tabs inset density="default" slider-color="white" :items="tabs" />
        <br />
        <br />
        <v-tabs bg-color="indigo" inset show-arrows slider-color="white">
          <v-tab v-for="i in 30" :key="i" :text="`Item ${i}`"></v-tab>
        </v-tabs>
        <br />
        <br />
        <v-tabs inset density="compact" slider-color="white">
          <v-tab v-for="(t, i) in icons">
            <v-icon :icon="t.icon" />
          </v-tab>
        </v-tabs>
        <br />
        <br />
        <v-tabs
          inset
          bg-color="#c1a2"
          density="compact"
          slider-color="surface"
          :items="tabs2"
        />
        <br />
        <br />
        <v-tabs inset direction="vertical" slider-color="white" :items="tabs" />
      </v-container>
    </v-defaults-provider>
  </v-app>
</template>

<script setup>
  const tabs = [
    { text: 'Charts', appendIcon: 'mdi-chart-line', width: 150, spaced: 'end' },
    { text: 'Calendar', prependIcon: 'mdi-calendar', width: 150, spaced: 'start' },
    'Timeline',
    'Grid'
  ]

  const tabs2 = [
    { text: 'All mail' },
    { text: 'Unread' },
  ]

  const icons = [
    { icon: 'mdi-align-horizontal-left' },
    { icon: 'mdi-align-horizontal-center' },
    { icon: 'mdi-align-horizontal-right' },
  ]
</script>