Skip to content

Commit 36e3834

Browse files
authored
fix(types): volar compatible generic types (vuetifyjs#17231)
fixes vuetifyjs#17211
1 parent ccfafef commit 36e3834

File tree

31 files changed

+158
-202
lines changed

31 files changed

+158
-202
lines changed

packages/docs/src/examples/accessibility/select-list-item.vue

+5-9
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,11 @@
33
:items="['Foo', 'Bar', 'Fizz', 'Buzz']"
44
label="Fizzbuzz"
55
>
6-
<template v-slot:item="{ item, attrs, on }">
7-
<v-list-item
8-
v-bind="attrs"
9-
v-on="on"
10-
>
11-
<v-list-item-title
12-
:id="attrs['aria-labelledby']"
13-
v-text="item"
14-
></v-list-item-title>
6+
<template v-slot:item="{ item, props }">
7+
<v-list-item v-bind="props">
8+
<template v-slot:title>
9+
{{ item.raw }}
10+
</template>
1511
</v-list-item>
1612
</template>
1713
</v-select>

packages/vuetify/src/components/VAlert/VAlert.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,19 @@ import { genericComponent } from '@/util'
2929

3030
// Types
3131
import type { PropType } from 'vue'
32-
import type { MakeSlots } from '@/util'
3332

3433
const allowedTypes = ['success', 'info', 'warning', 'error'] as const
3534

3635
type ContextualType = typeof allowedTypes[number]
3736

38-
export type VAlertSlots = MakeSlots<{
37+
export type VAlertSlots = {
3938
default: []
4039
prepend: []
4140
title: []
4241
text: []
4342
append: []
4443
close: []
45-
}>
44+
}
4645

4746
export const VAlert = genericComponent<VAlertSlots>()({
4847
name: 'VAlert',

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
2828
// Types
2929
import type { FilterMatch } from '@/composables/filter'
3030
import type { InternalItem } from '@/composables/items'
31-
import type { MakeSlots, SlotsToProps } from '@/util'
31+
import type { GenericProps } from '@/util'
3232
import type { VFieldSlots } from '@/components/VField/VField'
3333
import type { VInputSlots } from '@/components/VInput/VInput'
3434

@@ -64,24 +64,20 @@ export const VAutocomplete = genericComponent<new <
6464
ReturnObject extends boolean = false,
6565
Multiple extends boolean = false,
6666
V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
67-
>() => {
68-
$props: {
69-
items?: readonly T[]
70-
returnObject?: ReturnObject
71-
multiple?: Multiple
72-
modelValue?: V
73-
'onUpdate:modelValue'?: (val: V) => void
74-
} & SlotsToProps<
75-
Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
76-
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
77-
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
78-
selection: [{ item: InternalItem<T>, index: number }]
79-
'prepend-item': []
80-
'append-item': []
81-
'no-data': []
82-
}>
83-
>
84-
}>()({
67+
>(props: {
68+
items?: readonly T[]
69+
returnObject?: ReturnObject
70+
multiple?: Multiple
71+
modelValue?: V
72+
'onUpdate:modelValue'?: (val: V) => void
73+
}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
74+
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
75+
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
76+
selection: [{ item: InternalItem<T>, index: number }]
77+
'prepend-item': []
78+
'append-item': []
79+
'no-data': []
80+
}>>()({
8581
name: 'VAutocomplete',
8682

8783
props: {

packages/vuetify/src/components/VBadge/VBadge.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,10 @@ import { useLocale } from '@/composables/locale'
1919
import { genericComponent, pick, useRender } from '@/util'
2020
import { toRef } from 'vue'
2121

22-
// Types
23-
import type { MakeSlots } from '@/util'
24-
25-
export type VBadgeSlots = MakeSlots<{
22+
export type VBadgeSlots = {
2623
default: []
2724
badge: []
28-
}>
25+
}
2926

3027
export const VBadge = genericComponent<VBadgeSlots>()({
3128
name: 'VBadge',

packages/vuetify/src/components/VBanner/VBanner.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,14 @@ import { genericComponent, useRender } from '@/util'
2727
import { toRef } from 'vue'
2828

2929
// Types
30-
import type { MakeSlots } from '@/util'
3130
import type { PropType } from 'vue'
3231

33-
export type VBannerSlots = MakeSlots<{
32+
export type VBannerSlots = {
3433
default: []
3534
prepend: []
3635
text: []
3736
actions: []
38-
}>
37+
}
3938

4039
export const VBanner = genericComponent<VBannerSlots>()({
4140
name: 'VBanner',

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,21 @@ import { computed, toRef } from 'vue'
2323
// Types
2424
import type { LinkProps } from '@/composables/router'
2525
import type { PropType } from 'vue'
26-
import type { SlotsToProps } from '@/util'
26+
import type { GenericProps } from '@/util'
2727

2828
export type BreadcrumbItem = string | (Partial<LinkProps> & {
2929
title: string
3030
disabled?: boolean
3131
})
3232

33-
export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>() => {
34-
$props: {
35-
items?: T[]
36-
} & SlotsToProps<{
37-
prepend: []
38-
title: [{ item: T, index: number }]
39-
divider: [{ item: T, index: number }]
40-
default: []
41-
}>
42-
}>()({
33+
export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(props: {
34+
items?: T[]
35+
}) => GenericProps<typeof props, {
36+
prepend: []
37+
title: [{ item: T, index: number }]
38+
divider: [{ item: T, index: number }]
39+
default: []
40+
}>>()({
4341
name: 'VBreadcrumbs',
4442

4543
props: {

packages/vuetify/src/components/VBtn/VBtn.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,14 @@ import { computed } from 'vue'
3434
import { genericComponent, propsFactory, useRender } from '@/util'
3535

3636
// Types
37-
import type { MakeSlots } from '@/util'
3837
import type { PropType } from 'vue'
3938

40-
export type VBtnSlots = MakeSlots<{
39+
export type VBtnSlots = {
4140
default: []
4241
prepend: []
4342
append: []
4443
loader: []
45-
}>
44+
}
4645

4746
export const makeVBtnProps = propsFactory({
4847
active: {

packages/vuetify/src/components/VCard/VCard.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,9 @@ import { computed } from 'vue'
3434
import { genericComponent, useRender } from '@/util'
3535

3636
// Types
37-
import type { MakeSlots } from '@/util'
3837
import type { LoaderSlotProps } from '@/composables/loader'
3938

40-
export type VCardSlots = MakeSlots<{
39+
export type VCardSlots = {
4140
default: []
4241
actions: []
4342
title: []
@@ -47,7 +46,7 @@ export type VCardSlots = MakeSlots<{
4746
image: []
4847
prepend: []
4948
append: []
50-
}>
49+
}
5150

5251
export const VCard = genericComponent<VCardSlots>()({
5352
name: 'VCard',

packages/vuetify/src/components/VCard/VCardItem.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,13 @@ import { makeDensityProps } from '@/composables/density'
1212
// Utility
1313
import { genericComponent, useRender } from '@/util'
1414

15-
// Types
16-
import type { MakeSlots } from '@/util'
17-
18-
export type VCardItemSlots = MakeSlots<{
15+
export type VCardItemSlots = {
1916
default: []
2017
prepend: []
2118
append: []
2219
title: []
2320
subtitle: []
24-
}>
21+
}
2522

2623
export const VCardItem = genericComponent<VCardItemSlots>()({
2724
name: 'VCardItem',

packages/vuetify/src/components/VChip/VChip.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,12 @@ import { Ripple } from '@/directives/ripple'
3232
import { EventProp, genericComponent } from '@/util'
3333
import { computed } from 'vue'
3434

35-
// Types
36-
import type { MakeSlots } from '@/util'
37-
38-
export type VChipSlots = MakeSlots<{
35+
export type VChipSlots = {
3936
default: []
4037
label: []
4138
prepend: []
4239
append: []
43-
}>
40+
}
4441

4542
export const VChip = genericComponent<VChipSlots>()({
4643
name: 'VChip',

packages/vuetify/src/components/VCombobox/VCombobox.tsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
2727

2828
// Types
2929
import type { PropType } from 'vue'
30-
import type { MakeSlots, SlotsToProps } from '@/util'
30+
import type { GenericProps } from '@/util'
3131
import type { FilterMatch } from '@/composables/filter'
3232
import type { InternalItem } from '@/composables/items'
3333
import type { VFieldSlots } from '@/components/VField/VField'
@@ -65,24 +65,20 @@ export const VCombobox = genericComponent<new <
6565
ReturnObject extends boolean = true,
6666
Multiple extends boolean = false,
6767
V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
68-
>() => {
69-
$props: {
70-
items?: readonly T[]
71-
returnObject?: ReturnObject
72-
multiple?: Multiple
73-
modelValue?: V
74-
'onUpdate:modelValue'?: (val: V) => void
75-
} & SlotsToProps<
76-
Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
77-
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
78-
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
79-
selection: [{ item: InternalItem<T>, index: number }]
80-
'prepend-item': []
81-
'append-item': []
82-
'no-data': []
83-
}>
84-
>
85-
}>()({
68+
>(props: {
69+
items?: readonly T[]
70+
returnObject?: ReturnObject
71+
multiple?: Multiple
72+
modelValue?: V
73+
'onUpdate:modelValue'?: (val: V) => void
74+
}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
75+
item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
76+
chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
77+
selection: [{ item: InternalItem<T>, index: number }]
78+
'prepend-item': []
79+
'append-item': []
80+
'no-data': []
81+
}>>()({
8682
name: 'VCombobox',
8783

8884
props: {

packages/vuetify/src/components/VField/VField.tsx

+8-10
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333

3434
// Types
3535
import type { LoaderSlotProps } from '@/composables/loader'
36-
import type { MakeSlots, SlotsToProps } from '@/util'
36+
import type { GenericProps } from '@/util'
3737
import type { PropType, Ref } from 'vue'
3838
import type { VInputSlot } from '@/components/VInput/VInput'
3939

@@ -88,21 +88,19 @@ export const makeVFieldProps = propsFactory({
8888
...makeThemeProps(),
8989
}, 'v-field')
9090

91-
export type VFieldSlots = MakeSlots<{
91+
export type VFieldSlots = {
9292
clear: []
9393
'prepend-inner': [DefaultInputSlot & VInputSlot]
9494
'append-inner': [DefaultInputSlot & VInputSlot]
9595
label: [DefaultInputSlot & VInputSlot]
9696
loader: [LoaderSlotProps]
9797
default: [VFieldSlot]
98-
}>
99-
100-
export const VField = genericComponent<new <T>() => {
101-
$props: {
102-
modelValue?: T
103-
'onUpdate:modelValue'?: (val: T) => any
104-
} & SlotsToProps<VFieldSlots>
105-
}>()({
98+
}
99+
100+
export const VField = genericComponent<new <T>(props: {
101+
modelValue?: T
102+
'onUpdate:modelValue'?: (val: T) => any
103+
}) => GenericProps<typeof props, VFieldSlots>>()({
106104
name: 'VField',
107105

108106
inheritAttrs: false,

packages/vuetify/src/components/VFileInput/VFileInput.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,12 @@ import {
2727

2828
// Types
2929
import type { PropType } from 'vue'
30-
import type { MakeSlots } from '@/util'
3130
import type { VFieldSlots } from '@/components/VField/VField'
3231
import type { VInputSlots } from '@/components/VInput/VInput'
3332

34-
export type VFileInputSlots = VInputSlots & VFieldSlots & MakeSlots<{
33+
export type VFileInputSlots = VInputSlots & VFieldSlots & {
3534
counter: []
36-
}>
35+
}
3736

3837
export const VFileInput = genericComponent<VFileInputSlots>()({
3938
name: 'VFileInput',

packages/vuetify/src/components/VInput/VInput.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { EventProp, genericComponent, getUid, propsFactory, useRender } from '@/
1616

1717
// Types
1818
import type { ComputedRef, PropType, Ref } from 'vue'
19-
import type { MakeSlots } from '@/util'
2019
import { useInputIcon } from '@/components/VInput/InputIcon'
2120

2221
export interface VInputSlot {
@@ -58,12 +57,12 @@ export const makeVInputProps = propsFactory({
5857
...makeValidationProps(),
5958
}, 'v-input')
6059

61-
export type VInputSlots = MakeSlots<{
60+
export type VInputSlots = {
6261
default: [VInputSlot]
6362
prepend: [VInputSlot]
6463
append: [VInputSlot]
6564
details: [VInputSlot]
66-
}>
65+
}
6766

6867
export const VInput = genericComponent<VInputSlots>()({
6968
name: 'VInput',

packages/vuetify/src/components/VList/VList.tsx

+6-11
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@ import { computed, ref, toRef } from 'vue'
2525
import { focusChild, genericComponent, getPropertyFromItem, pick, useRender } from '@/util'
2626

2727
// Types
28+
import type { GenericProps } from '@/util'
2829
import type { InternalItem, ItemProps } from '@/composables/items'
29-
import type { SlotsToProps } from '@/util'
30+
import type { VListChildrenSlots } from './VListChildren'
3031
import type { PropType } from 'vue'
3132

32-
export interface InternalListItem extends InternalItem {
33+
export interface InternalListItem<T = any> extends InternalItem<T> {
3334
type?: 'item' | 'subheader' | 'divider'
3435
}
3536

@@ -76,15 +77,9 @@ function useListItems (props: ItemProps & { itemType: string }) {
7677
return { items }
7778
}
7879

79-
export const VList = genericComponent<new <T>() => {
80-
$props: {
81-
items?: T[]
82-
} & SlotsToProps<{
83-
subheader: []
84-
header: [{ props: Record<string, unknown> }]
85-
item: [T]
86-
}>
87-
}>()({
80+
export const VList = genericComponent<new <T>(props: {
81+
items?: T[]
82+
}) => GenericProps<typeof props, VListChildrenSlots<T>>>()({
8883
name: 'VList',
8984

9085
props: {

0 commit comments

Comments
 (0)