feat(VTabs): slots for prev/next (#21976)

resolves #21969

Author: J-Sek

packages/docs/src/data/new-in.json

@@ -259,6 +259,10 @@
   "VTabs": {
     "props": {
       "spaced": "3.10.0"
+    },
+    "slots": {
+      "next": "3.11.0",
+      "prev": "3.11.0"
     }
   },
   "VTextField": {

packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx

@@ -42,7 +42,7 @@ interface SlideGroupSlot {
   isSelected: GroupProvide['isSelected']
 }
 
-type VSlideGroupSlots = {
+export type VSlideGroupSlots = {
   default: SlideGroupSlot
   prev: SlideGroupSlot
   next: SlideGroupSlot

packages/vuetify/src/components/VTabs/VTabs.tsx

@@ -22,6 +22,7 @@ import { convertToUnit, genericComponent, isObject, pick, propsFactory, useRende
 
 // Types
 import type { PropType } from 'vue'
+import type { VSlideGroupSlots } from '@/components/VSlideGroup/VSlideGroup'
 import type { GenericProps } from '@/util'
 
 export type TabItem = string | number | Record<string, any>
@@ -30,7 +31,7 @@ export type VTabsSlot<T> = {
   item: T
 }
 
-export type VTabsSlots<T> = {
+export type VTabsSlots<T> = Pick<VSlideGroupSlots, 'next' | 'prev'> & {
   default: never
   tab: VTabsSlot<T>
   item: VTabsSlot<T>
@@ -144,19 +145,23 @@ export const VTabs = genericComponent<new <T = TabItem>(
             { ...scopeId }
             { ...attrs }
           >
-            { slots.default?.() ?? items.value.map(item => (
-              slots.tab?.({ item }) ?? (
-                <VTab
-                  { ...item }
-                  key={ item.text }
-                  value={ item.value }
-                  spaced={ props.spaced }
-                  v-slots={{
-                    default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
-                  }}
-                />
-              )
-            ))}
+            {{
+              default: slots.default ?? (() => items.value.map(item => (
+                slots.tab?.({ item }) ?? (
+                  <VTab
+                    { ...item }
+                    key={ item.text }
+                    value={ item.value }
+                    spaced={ props.spaced }
+                    v-slots={{
+                      default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
+                    }}
+                  />
+                )
+              ))),
+              prev: slots.prev,
+              next: slots.next,
+            }}
           </VSlideGroup>
 
           { hasWindow && (