fix(types): volar compatible generic types (#17231)

fixes #17211
vuetifyjs · Apr 26, 2023 · 36e3834 · 36e3834
1 parent ccfafef
commit 36e3834
Show file tree

Hide file tree

Showing 31 changed files with 158 additions and 202 deletions.
diff --git a/packages/docs/src/examples/accessibility/select-list-item.vue b/packages/docs/src/examples/accessibility/select-list-item.vue
@@ -3,15 +3,11 @@
     :items="['Foo', 'Bar', 'Fizz', 'Buzz']"
     label="Fizzbuzz"
   >
-    <template v-slot:item="{ item, attrs, on }">
-      <v-list-item
-        v-bind="attrs"
-        v-on="on"
-      >
-        <v-list-item-title
-          :id="attrs['aria-labelledby']"
-          v-text="item"
-        ></v-list-item-title>
+    <template v-slot:item="{ item, props }">
+      <v-list-item v-bind="props">
+        <template v-slot:title>
+          {{ item.raw }}
+        </template>
       </v-list-item>
     </template>
   </v-select>

diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx
@@ -29,20 +29,19 @@ import { genericComponent } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { MakeSlots } from '@/util'
 
 const allowedTypes = ['success', 'info', 'warning', 'error'] as const
 
 type ContextualType = typeof allowedTypes[number]
 
-export type VAlertSlots = MakeSlots<{
+export type VAlertSlots = {
   default: []
   prepend: []
   title: []
   text: []
   append: []
   close: []
-}>
+}
 
 export const VAlert = genericComponent<VAlertSlots>()({
   name: 'VAlert',

diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -28,7 +28,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
 // Types
 import type { FilterMatch } from '@/composables/filter'
 import type { InternalItem } from '@/composables/items'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
@@ -64,24 +64,20 @@ export const VAutocomplete = genericComponent<new <
   ReturnObject extends boolean = false,
   Multiple extends boolean = false,
   V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
->() => {
-  $props: {
-    items?: readonly T[]
-    returnObject?: ReturnObject
-    multiple?: Multiple
-    modelValue?: V
-    'onUpdate:modelValue'?: (val: V) => void
-  } & SlotsToProps<
-    Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
-      item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
-      chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
-      selection: [{ item: InternalItem<T>, index: number }]
-      'prepend-item': []
-      'append-item': []
-      'no-data': []
-    }>
-  >
-}>()({
+>(props: {
+  items?: readonly T[]
+  returnObject?: ReturnObject
+  multiple?: Multiple
+  modelValue?: V
+  'onUpdate:modelValue'?: (val: V) => void
+}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
+  item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
+  chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
+  selection: [{ item: InternalItem<T>, index: number }]
+  'prepend-item': []
+  'append-item': []
+  'no-data': []
+}>>()({
   name: 'VAutocomplete',
 
   props: {

diff --git a/packages/vuetify/src/components/VBadge/VBadge.tsx b/packages/vuetify/src/components/VBadge/VBadge.tsx
@@ -19,13 +19,10 @@ import { useLocale } from '@/composables/locale'
 import { genericComponent, pick, useRender } from '@/util'
 import { toRef } from 'vue'
 
-// Types
-import type { MakeSlots } from '@/util'
-
-export type VBadgeSlots = MakeSlots<{
+export type VBadgeSlots = {
   default: []
   badge: []
-}>
+}
 
 export const VBadge = genericComponent<VBadgeSlots>()({
   name: 'VBadge',

diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx
@@ -27,15 +27,14 @@ import { genericComponent, useRender } from '@/util'
 import { toRef } from 'vue'
 
 // Types
-import type { MakeSlots } from '@/util'
 import type { PropType } from 'vue'
 
-export type VBannerSlots = MakeSlots<{
+export type VBannerSlots = {
   default: []
   prepend: []
   text: []
   actions: []
-}>
+}
 
 export const VBanner = genericComponent<VBannerSlots>()({
   name: 'VBanner',

diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
@@ -23,23 +23,21 @@ import { computed, toRef } from 'vue'
 // Types
 import type { LinkProps } from '@/composables/router'
 import type { PropType } from 'vue'
-import type { SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 
 export type BreadcrumbItem = string | (Partial<LinkProps> & {
   title: string
   disabled?: boolean
 })
 
-export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>() => {
-  $props: {
-    items?: T[]
-  } & SlotsToProps<{
-    prepend: []
-    title: [{ item: T, index: number }]
-    divider: [{ item: T, index: number }]
-    default: []
-  }>
-}>()({
+export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(props: {
+  items?: T[]
+}) => GenericProps<typeof props, {
+  prepend: []
+  title: [{ item: T, index: number }]
+  divider: [{ item: T, index: number }]
+  default: []
+}>>()({
   name: 'VBreadcrumbs',
 
   props: {

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -34,15 +34,14 @@ import { computed } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
-import type { MakeSlots } from '@/util'
 import type { PropType } from 'vue'
 
-export type VBtnSlots = MakeSlots<{
+export type VBtnSlots = {
   default: []
   prepend: []
   append: []
   loader: []
-}>
+}
 
 export const makeVBtnProps = propsFactory({
   active: {

diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -34,10 +34,9 @@ import { computed } from 'vue'
 import { genericComponent, useRender } from '@/util'
 
 // Types
-import type { MakeSlots } from '@/util'
 import type { LoaderSlotProps } from '@/composables/loader'
 
-export type VCardSlots = MakeSlots<{
+export type VCardSlots = {
   default: []
   actions: []
   title: []
@@ -47,7 +46,7 @@ export type VCardSlots = MakeSlots<{
   image: []
   prepend: []
   append: []
-}>
+}
 
 export const VCard = genericComponent<VCardSlots>()({
   name: 'VCard',

diff --git a/packages/vuetify/src/components/VCard/VCardItem.tsx b/packages/vuetify/src/components/VCard/VCardItem.tsx
@@ -12,16 +12,13 @@ import { makeDensityProps } from '@/composables/density'
 // Utility
 import { genericComponent, useRender } from '@/util'
 
-// Types
-import type { MakeSlots } from '@/util'
-
-export type VCardItemSlots = MakeSlots<{
+export type VCardItemSlots = {
   default: []
   prepend: []
   append: []
   title: []
   subtitle: []
-}>
+}
 
 export const VCardItem = genericComponent<VCardItemSlots>()({
   name: 'VCardItem',

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -32,15 +32,12 @@ import { Ripple } from '@/directives/ripple'
 import { EventProp, genericComponent } from '@/util'
 import { computed } from 'vue'
 
-// Types
-import type { MakeSlots } from '@/util'
-
-export type VChipSlots = MakeSlots<{
+export type VChipSlots = {
   default: []
   label: []
   prepend: []
   append: []
-}>
+}
 
 export const VChip = genericComponent<VChipSlots>()({
   name: 'VChip',

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -27,7 +27,7 @@ import { makeVTextFieldProps } from '@/components/VTextField/VTextField'
 
 // Types
 import type { PropType } from 'vue'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 import type { FilterMatch } from '@/composables/filter'
 import type { InternalItem } from '@/composables/items'
 import type { VFieldSlots } from '@/components/VField/VField'
@@ -65,24 +65,20 @@ export const VCombobox = genericComponent<new <
   ReturnObject extends boolean = true,
   Multiple extends boolean = false,
   V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>
->() => {
-  $props: {
-    items?: readonly T[]
-    returnObject?: ReturnObject
-    multiple?: Multiple
-    modelValue?: V
-    'onUpdate:modelValue'?: (val: V) => void
-  } & SlotsToProps<
-    Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
-      item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
-      chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
-      selection: [{ item: InternalItem<T>, index: number }]
-      'prepend-item': []
-      'append-item': []
-      'no-data': []
-    }>
-  >
-}>()({
+>(props: {
+  items?: readonly T[]
+  returnObject?: ReturnObject
+  multiple?: Multiple
+  modelValue?: V
+  'onUpdate:modelValue'?: (val: V) => void
+}) => GenericProps<typeof props, Omit<VInputSlots & VFieldSlots, 'default'> & {
+  item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
+  chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]
+  selection: [{ item: InternalItem<T>, index: number }]
+  'prepend-item': []
+  'append-item': []
+  'no-data': []
+}>>()({
   name: 'VCombobox',
 
   props: {

diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -33,7 +33,7 @@ import {
 
 // Types
 import type { LoaderSlotProps } from '@/composables/loader'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 import type { PropType, Ref } from 'vue'
 import type { VInputSlot } from '@/components/VInput/VInput'
 
@@ -88,21 +88,19 @@ export const makeVFieldProps = propsFactory({
   ...makeThemeProps(),
 }, 'v-field')
 
-export type VFieldSlots = MakeSlots<{
+export type VFieldSlots = {
   clear: []
   'prepend-inner': [DefaultInputSlot & VInputSlot]
   'append-inner': [DefaultInputSlot & VInputSlot]
   label: [DefaultInputSlot & VInputSlot]
   loader: [LoaderSlotProps]
   default: [VFieldSlot]
-}>
-
-export const VField = genericComponent<new <T>() => {
-  $props: {
-    modelValue?: T
-    'onUpdate:modelValue'?: (val: T) => any
-  } & SlotsToProps<VFieldSlots>
-}>()({
+}
+
+export const VField = genericComponent<new <T>(props: {
+  modelValue?: T
+  'onUpdate:modelValue'?: (val: T) => any
+}) => GenericProps<typeof props, VFieldSlots>>()({
   name: 'VField',
 
   inheritAttrs: false,

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -27,13 +27,12 @@ import {
 
 // Types
 import type { PropType } from 'vue'
-import type { MakeSlots } from '@/util'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
-export type VFileInputSlots = VInputSlots & VFieldSlots & MakeSlots<{
+export type VFileInputSlots = VInputSlots & VFieldSlots & {
   counter: []
-}>
+}
 
 export const VFileInput = genericComponent<VFileInputSlots>()({
   name: 'VFileInput',

diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -16,7 +16,6 @@ import { EventProp, genericComponent, getUid, propsFactory, useRender } from '@/
 
 // Types
 import type { ComputedRef, PropType, Ref } from 'vue'
-import type { MakeSlots } from '@/util'
 import { useInputIcon } from '@/components/VInput/InputIcon'
 
 export interface VInputSlot {
@@ -58,12 +57,12 @@ export const makeVInputProps = propsFactory({
   ...makeValidationProps(),
 }, 'v-input')
 
-export type VInputSlots = MakeSlots<{
+export type VInputSlots = {
   default: [VInputSlot]
   prepend: [VInputSlot]
   append: [VInputSlot]
   details: [VInputSlot]
-}>
+}
 
 export const VInput = genericComponent<VInputSlots>()({
   name: 'VInput',

diff --git a/packages/vuetify/src/components/VList/VList.tsx b/packages/vuetify/src/components/VList/VList.tsx
@@ -25,11 +25,12 @@ import { computed, ref, toRef } from 'vue'
 import { focusChild, genericComponent, getPropertyFromItem, pick, useRender } from '@/util'
 
 // Types
+import type { GenericProps } from '@/util'
 import type { InternalItem, ItemProps } from '@/composables/items'
-import type { SlotsToProps } from '@/util'
+import type { VListChildrenSlots } from './VListChildren'
 import type { PropType } from 'vue'
 
-export interface InternalListItem extends InternalItem {
+export interface InternalListItem<T = any> extends InternalItem<T> {
   type?: 'item' | 'subheader' | 'divider'
 }
 
@@ -76,15 +77,9 @@ function useListItems (props: ItemProps & { itemType: string }) {
   return { items }
 }
 
-export const VList = genericComponent<new <T>() => {
-  $props: {
-    items?: T[]
-  } & SlotsToProps<{
-    subheader: []
-    header: [{ props: Record<string, unknown> }]
-    item: [T]
-  }>
-}>()({
+export const VList = genericComponent<new <T>(props: {
+  items?: T[]
+}) => GenericProps<typeof props, VListChildrenSlots<T>>>()({
   name: 'VList',
 
   props: {