Skip to content

Commit 91801a9

Browse files
committed
feat(VTabs): slots for prev/next
1 parent 40e4472 commit 91801a9

File tree

2 files changed

+23
-14
lines changed

2 files changed

+23
-14
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,10 @@
238238
"VTabs": {
239239
"props": {
240240
"spaced": "3.10.0"
241+
},
242+
"slots": {
243+
"next": "3.10.0",
244+
"prev": "3.10.0"
241245
}
242246
},
243247
"VTextField": {

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

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { VTabsSymbol } from './shared'
2121
import { convertToUnit, genericComponent, isObject, pick, propsFactory, useRender } from '@/util'
2222

2323
// Types
24+
import type { VSlideGroupSlots } from 'lib/components/VSlideGroup/VSlideGroup'
2425
import type { PropType } from 'vue'
2526
import type { GenericProps } from '@/util'
2627

@@ -30,7 +31,7 @@ export type VTabsSlot<T> = {
3031
item: T
3132
}
3233

33-
export type VTabsSlots<T> = {
34+
export type VTabsSlots<T> = Pick<VSlideGroupSlots, 'next' | 'prev'> & {
3435
default: never
3536
tab: VTabsSlot<T>
3637
item: VTabsSlot<T>
@@ -144,19 +145,23 @@ export const VTabs = genericComponent<new <T = TabItem>(
144145
{ ...scopeId }
145146
{ ...attrs }
146147
>
147-
{ slots.default?.() ?? items.value.map(item => (
148-
slots.tab?.({ item }) ?? (
149-
<VTab
150-
{ ...item }
151-
key={ item.text }
152-
value={ item.value }
153-
spaced={ props.spaced }
154-
v-slots={{
155-
default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
156-
}}
157-
/>
158-
)
159-
))}
148+
{{
149+
default: slots.default ?? (() => items.value.map(item => (
150+
slots.tab?.({ item }) ?? (
151+
<VTab
152+
{ ...item }
153+
key={ item.text }
154+
value={ item.value }
155+
spaced={ props.spaced }
156+
v-slots={{
157+
default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
158+
}}
159+
/>
160+
)
161+
))),
162+
prev: slots.prev,
163+
next: slots.next,
164+
}}
160165
</VSlideGroup>
161166

162167
{ hasWindow && (

0 commit comments

Comments
 (0)