From 36e38340baad01967f19283941f849946c4ff5e0 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 27 Apr 2023 03:54:24 +1000
Subject: [PATCH] fix(types): volar compatible generic types (#17231)

fixes #17211
---
 .../accessibility/select-list-item.vue        | 14 +++-----
 .../vuetify/src/components/VAlert/VAlert.tsx  |  5 ++-
 .../VAutocomplete/VAutocomplete.tsx           | 34 ++++++++-----------
 .../vuetify/src/components/VBadge/VBadge.tsx  |  7 ++--
 .../src/components/VBanner/VBanner.tsx        |  5 ++-
 .../components/VBreadcrumbs/VBreadcrumbs.tsx  | 20 +++++------
 packages/vuetify/src/components/VBtn/VBtn.tsx |  5 ++-
 .../vuetify/src/components/VCard/VCard.tsx    |  5 ++-
 .../src/components/VCard/VCardItem.tsx        |  7 ++--
 .../vuetify/src/components/VChip/VChip.tsx    |  7 ++--
 .../src/components/VCombobox/VCombobox.tsx    | 34 ++++++++-----------
 .../vuetify/src/components/VField/VField.tsx  | 18 +++++-----
 .../src/components/VFileInput/VFileInput.tsx  |  5 ++-
 .../vuetify/src/components/VInput/VInput.tsx  |  5 ++-
 .../vuetify/src/components/VList/VList.tsx    | 17 ++++------
 .../src/components/VList/VListChildren.tsx    | 30 ++++++++--------
 .../src/components/VList/VListItem.tsx        |  6 ++--
 .../VList/__tests__/VList.spec.cy.tsx         |  2 +-
 .../vuetify/src/components/VNoSsr/VNoSsr.tsx  |  3 +-
 .../src/components/VOverlay/VOverlay.tsx      |  5 ++-
 .../src/components/VSelect/VSelect.tsx        | 34 ++++++++-----------
 .../VSelectionControl/VSelectionControl.tsx   | 16 ++++-----
 .../src/components/VSlider/VSlider.tsx        |  5 ++-
 .../src/components/VSwitch/VSwitch.tsx        |  3 +-
 .../src/components/VTextField/VTextField.tsx  |  5 ++-
 .../src/components/VToolbar/VToolbar.tsx      |  5 ++-
 .../src/components/VToolbar/VToolbarTitle.tsx |  7 ++--
 .../VVirtualScroll/VVirtualScroll.tsx         | 14 ++++----
 packages/vuetify/src/composables/loader.tsx   |  6 ++--
 packages/vuetify/src/util/defineComponent.tsx | 25 ++++++++------
 tsconfig.json                                 |  6 +++-
 31 files changed, 158 insertions(+), 202 deletions(-)

diff --git a/packages/docs/src/examples/accessibility/select-list-item.vue b/packages/docs/src/examples/accessibility/select-list-item.vue
index 297422932b1..38830eed938 100644
--- 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
index fd3ea389fb9..2c814fac7b7 100644
--- 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
index 0cf3b8b17fb..30fbdc4c3ef 100644
--- 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
index 9954a15e9bc..40d23763173 100644
--- 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
index 0d6c100e6a6..8e5437c8a81 100644
--- 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
index f08d2309ff1..e80c655d92a 100644
--- 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
index d8d9a0ab37e..1d7b710e00f 100644
--- 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
index 4cd72ffb76c..86bf3f5df9c 100644
--- 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
index a49c149694e..7e7c5294796 100644
--- 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
index bfe84a1726a..2aa57e5b0f2 100644
--- 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
index 821299ebbd6..395c9fb5b06 100644
--- 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
index 469b250782b..0979b660200 100644
--- 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
index a48bceb9ea7..f0544f07462 100644
--- 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
index dc2418766b9..b00eb45a48c 100644
--- 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
index ff7276f218d..05a892b0848 100644
--- 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: {
diff --git a/packages/vuetify/src/components/VList/VListChildren.tsx b/packages/vuetify/src/components/VList/VListChildren.tsx
index 1e701847683..16083c428c6 100644
--- a/packages/vuetify/src/components/VList/VListChildren.tsx
+++ b/packages/vuetify/src/components/VList/VListChildren.tsx
@@ -10,25 +10,25 @@ import { genericComponent } from '@/util'
 
 // Types
 import type { InternalListItem } from './VList'
-import type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'
-import type { SlotsToProps } from '@/util'
-import type { Prop } from 'vue'
+import type { VListItemSlots } from './VListItem'
+import type { GenericProps } from '@/util'
+import type { PropType } from 'vue'
 
-export const VListChildren = genericComponent<new <T extends InternalListItem>() => {
-  $props: {
-    items?: T[]
-  } & SlotsToProps<{
-    default: []
-    header: [{ props: Record<string, unknown> }]
-    item: [T]
-    title: [ListItemTitleSlot]
-    subtitle: [ListItemSubtitleSlot]
-  }>
-}>()({
+export type VListChildrenSlots<T> = {
+  [K in keyof VListItemSlots]: VListItemSlots[K] & [{ item: T }]
+} & {
+  item: [T]
+  divider: [{ props: T }]
+  subheader: [{ props: T }]
+}
+
+export const VListChildren = genericComponent<new <T extends InternalListItem>(props: {
+  items?: T[]
+}) => GenericProps<typeof props, VListChildrenSlots<T>>>()({
   name: 'VListChildren',
 
   props: {
-    items: Array as Prop<InternalListItem[]>,
+    items: Array as PropType<InternalListItem[]>,
   },
 
   setup (props, { slots }) {
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index a9b514105b8..8dffdd03b12 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -35,8 +35,8 @@ import type { PropType } from 'vue'
 
 type ListItemSlot = {
   isActive: boolean
-  activate: (value: boolean) => void
   isSelected: boolean
+  isIndeterminate: boolean
   select: (value: boolean) => void
 }
 
@@ -48,7 +48,7 @@ export type ListItemSubtitleSlot = {
   subtitle?: string
 }
 
-type VListItemSlots = {
+export type VListItemSlots = {
   prepend: [ListItemSlot]
   append: [ListItemSlot]
   default: [ListItemSlot]
@@ -152,7 +152,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
       select,
       isSelected: isSelected.value,
       isIndeterminate: isIndeterminate.value,
-    }))
+    } satisfies ListItemSlot))
 
     function onClick (e: MouseEvent) {
       emit('click', e)
diff --git a/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
index 26f646b42de..fdd0696da07 100644
--- a/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
+++ b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
@@ -93,7 +93,7 @@ describe('VList', () => {
       {
         title: 'Group',
         value: 'group',
-        $children: [
+        children: [
           {
             title: 'Child',
             subtitle: 'Subtitle',
diff --git a/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx b/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx
index 78dc92e96bb..513c2548b67 100644
--- a/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx
+++ b/packages/vuetify/src/components/VNoSsr/VNoSsr.tsx
@@ -3,9 +3,8 @@ import { useHydration } from '@/composables/hydration'
 
 // Utilities
 import { defineComponent } from '@/util'
-import type { GenericSlot } from '@/util'
 
-export const VNoSsr = defineComponent<GenericSlot>({
+export const VNoSsr = defineComponent({
   name: 'VNoSsr',
 
   setup (_, { slots }) {
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 36c8ff8ff67..09c5dba0f55 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -47,7 +47,6 @@ import {
 
 // Types
 import type { BackgroundColorData } from '@/composables/color'
-import type { MakeSlots } from '@/util'
 import type { PropType, Ref } from 'vue'
 
 interface ScrimProps {
@@ -73,10 +72,10 @@ function Scrim (props: ScrimProps) {
   )
 }
 
-export type OverlaySlots = MakeSlots<{
+export type OverlaySlots = {
   default: [{ isActive: Ref<boolean> }]
   activator: [{ isActive: boolean, props: Record<string, any> }]
-}>
+}
 
 export const makeVOverlayProps = propsFactory({
   absolute: Boolean,
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index c251b1d3966..db4289c8d4c 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -28,7 +28,7 @@ import { deepEqual, genericComponent, omit, propsFactory, useRender, wrapInArray
 import type { VInputSlots } from '@/components/VInput/VInput'
 import type { VFieldSlots } from '@/components/VField/VField'
 import type { InternalItem } from '@/composables/items'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 import type { PropType } from 'vue'
 
 export const makeSelectProps = propsFactory({
@@ -75,24 +75,20 @@ export const VSelect = 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: 'VSelect',
 
   props: {
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 18ad5aec18f..fef75a138ab 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -29,7 +29,7 @@ import {
 
 // Types
 import type { CSSProperties, ExtractPropTypes, Ref, WritableComputedRef } from 'vue'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 
 export type SelectionControlSlot = {
   model: WritableComputedRef<any>
@@ -42,11 +42,11 @@ export type SelectionControlSlot = {
   }
 }
 
-export type VSelectionControlSlots = MakeSlots<{
+export type VSelectionControlSlots = {
   default: []
   label: [{ label: string | undefined, props: Record<string, unknown> }]
   input: [SelectionControlSlot]
-}>
+}
 
 export const makeSelectionControlProps = propsFactory({
   label: String,
@@ -125,12 +125,10 @@ export function useSelectionControl (
   }
 }
 
-export const VSelectionControl = genericComponent<new <T>() => {
-  $props: {
-    modelValue?: T
-    'onUpdate:modelValue'?: (val: T) => any
-  } & SlotsToProps<VSelectionControlSlots>
-}>()({
+export const VSelectionControl = genericComponent<new <T>(props: {
+  modelValue?: T
+  'onUpdate:modelValue'?: (val: T) => any
+}) => GenericProps<typeof props, VSelectionControlSlots>>()({
   name: 'VSelectionControl',
 
   directives: { Ripple },
diff --git a/packages/vuetify/src/components/VSlider/VSlider.tsx b/packages/vuetify/src/components/VSlider/VSlider.tsx
index 77ca7e47aec..627155f376f 100644
--- a/packages/vuetify/src/components/VSlider/VSlider.tsx
+++ b/packages/vuetify/src/components/VSlider/VSlider.tsx
@@ -17,13 +17,12 @@ import { computed, ref } from 'vue'
 import { genericComponent, useRender } from '@/util'
 
 // Types
-import type { MakeSlots } from '@/util'
 import type { VInputSlots } from '@/components/VInput/VInput'
 
-export type VSliderSlots = VInputSlots & MakeSlots<{
+export type VSliderSlots = VInputSlots & {
   'tick-label': []
   'thumb-label': []
-}>
+}
 
 export const VSlider = genericComponent<VSliderSlots>()({
   name: 'VSlider',
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index 12b490780e6..aac6f847deb 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -19,12 +19,11 @@ import { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'
 import type { VInputSlots } from '@/components/VInput/VInput'
 import type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'
 import type { LoaderSlotProps } from '@/composables/loader'
-import type { MakeSlots } from '@/util'
 
 export type VSwitchSlots =
   & VInputSlots
   & VSelectionControlSlots
-  & MakeSlots<{ loader: [LoaderSlotProps] }>
+  & { loader: [LoaderSlotProps] }
 
 export const VSwitch = genericComponent<VSwitchSlots>()({
   name: 'VSwitch',
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index 0a86da3948b..719f182668d 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -20,7 +20,6 @@ import { callEvent, filterInputAttrs, genericComponent, propsFactory, useRender
 
 // 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'
 
@@ -45,9 +44,9 @@ export const makeVTextFieldProps = propsFactory({
   ...makeVFieldProps(),
 }, 'v-text-field')
 
-export const VTextField = genericComponent<Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{
+export const VTextField = genericComponent<Omit<VInputSlots & VFieldSlots, 'default'> & {
   default: []
-}>>()({
+}>()({
   name: 'VTextField',
 
   directives: { Intersect },
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index d45fd39a03a..d78fe270405 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -23,7 +23,6 @@ import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util
 
 // Types
 import type { PropType } from 'vue'
-import type { MakeSlots } from '@/util'
 
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const
 
@@ -60,14 +59,14 @@ export const makeVToolbarProps = propsFactory({
   ...makeThemeProps(),
 }, 'v-toolbar')
 
-export type VToolbarSlots = MakeSlots<{
+export type VToolbarSlots = {
   default: []
   image: []
   prepend: []
   append: []
   title: []
   extension: []
-}>
+}
 
 export const VToolbar = genericComponent<VToolbarSlots>()({
   name: 'VToolbar',
diff --git a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
index 495429f1f35..7ab0d38f7f8 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
@@ -5,9 +5,6 @@ import { makeTagProps } from '@/composables/tag'
 // Utilities
 import { genericComponent, propsFactory, useRender } from '@/util'
 
-// Types
-import type { MakeSlots } from '@/util'
-
 export const makeVToolbarTitleProps = propsFactory({
   text: String,
 
@@ -15,10 +12,10 @@ export const makeVToolbarTitleProps = propsFactory({
   ...makeTagProps(),
 }, 'v-toolbar-title')
 
-export type VToolbarTitleSlots = MakeSlots<{
+export type VToolbarTitleSlots = {
   default: []
   text: []
-}>
+}
 
 export const VToolbarTitle = genericComponent<VToolbarTitleSlots>()({
   name: 'VToolbarTitle',
diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
index f845bd7fc31..9bfb562b3f3 100644
--- a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
+++ b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
@@ -21,7 +21,7 @@ import {
 } from '@/util'
 
 // Types
-import type { SlotsToProps } from '@/util'
+import type { GenericProps } from '@/util'
 
 const UP = -1
 const DOWN = 1
@@ -31,13 +31,11 @@ export interface VVirtualScrollSlot<T> {
   index: number
 }
 
-export const VVirtualScroll = genericComponent<new <T>() => {
-  $props: {
-    items: readonly T[]
-  } & SlotsToProps<{
-    default: [VVirtualScrollSlot<T>]
-  }>
-}>()({
+export const VVirtualScroll = genericComponent<new <T>(props: {
+  items?: readonly T[]
+}) => GenericProps<typeof props, {
+  default: [VVirtualScrollSlot<T>]
+}>>()({
   name: 'VVirtualScroll',
 
   props: {
diff --git a/packages/vuetify/src/composables/loader.tsx b/packages/vuetify/src/composables/loader.tsx
index 8c07c98d07c..453ce2be133 100644
--- a/packages/vuetify/src/composables/loader.tsx
+++ b/packages/vuetify/src/composables/loader.tsx
@@ -7,7 +7,7 @@ import { getCurrentInstanceName, propsFactory } from '@/util'
 
 // Types
 import type { ExtractPropTypes, SetupContext } from 'vue'
-import type { MakeSlots, SlotsToProps } from '@/util'
+import type { SlotsToProps } from '@/util'
 
 export interface LoaderSlotProps {
   color: string | undefined
@@ -39,9 +39,9 @@ export function LoaderSlot (
     active: boolean
     name: string
     color?: string
-  } & ExtractPropTypes<SlotsToProps<MakeSlots<{
+  } & ExtractPropTypes<SlotsToProps<{
     default: [LoaderSlotProps]
-  }>>>,
+  }>>,
   { slots }: SetupContext,
 ) {
   return (
diff --git a/packages/vuetify/src/util/defineComponent.tsx b/packages/vuetify/src/util/defineComponent.tsx
index d53873158ee..da815bcfc4b 100644
--- a/packages/vuetify/src/util/defineComponent.tsx
+++ b/packages/vuetify/src/util/defineComponent.tsx
@@ -126,29 +126,34 @@ export function defineComponent (options: ComponentOptions) {
 
 type ToListeners<T extends string | number | symbol> = { [K in T]: K extends `on${infer U}` ? Uncapitalize<U> : K }[T]
 
-export type SlotsToProps<T extends Record<string, any>> = T extends Record<string, Slot> ? ({
+export type SlotsToProps<
+  U extends Record<string, any[]> | Record<string, Slot>,
+  T = U extends Record<string, any[]> ? MakeSlots<U> : U
+> = {
   $children?: (
     | VNodeChild
-    | (keyof T extends 'default' ? T['default'] : {})
+    | (T extends { default: infer V } ? V : {})
     | { [K in keyof T]?: T[K] }
   )
-  $slots?: { [K in keyof T]?: T[K] }
   'v-slots'?: { [K in keyof T]?: T[K] | false }
 } & {
   [K in keyof T as `v-slot:${K & string}`]?: T[K] | false
-}) : T extends Record<string, any[]> ? SlotsToProps<MakeSlots<T>> : never
+}
 
 type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild
-export type MakeSlots<T extends Record<string, any[]>> = {
-  [K in keyof T]: Slot<T[K]>
+export type MakeSlots<T extends Record<string, any[]> | Record<string, Slot>> = {
+  [K in keyof T]: T[K] extends any[] ? Slot<T[K]> : T[K]
 }
 
-export type GenericSlot = SlotsToProps<{ default: [] }>
+export type GenericProps<Props, Slots extends Record<string, any[]>> = {
+  $props: Props & SlotsToProps<Slots>
+  $slots: MakeSlots<Slots>
+}
 
-type DefineComponentWithGenericProps<T extends (new () => {
+type DefineComponentWithGenericProps<T extends (new (props: Record<string, any>) => {
   $props?: Record<string, any>
 })> = <
-  PropsOptions extends Readonly<ComponentPropsOptions>,
+  PropsOptions extends Readonly<ComponentObjectPropsOptions>,
   RawBindings,
   D,
   C extends ComputedOptions = {},
@@ -206,7 +211,7 @@ type DefineComponentWithSlots<Slots extends Record<string, any[]> | Record<strin
 export function genericComponent (exposeDefaults?: boolean): DefineComponentWithSlots<{ default: [] }>
 
 // Generic constructor argument - generic props and slots
-export function genericComponent<T extends (new () => {
+export function genericComponent<T extends (new (props: Record<string, any>) => {
   $props?: Record<string, any>
 })> (exposeDefaults?: boolean): DefineComponentWithGenericProps<T>
 
diff --git a/tsconfig.json b/tsconfig.json
index 4649ade81a0..2717b330049 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,7 @@
     "downlevelIteration": true,               /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
     "skipLibCheck": false,
+    "noErrorTruncation": true,
 
     /* Strict Type-Checking Options */
     "strict": true,                           /* Enable all strict type-checking options. */
@@ -62,5 +63,8 @@
   },
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "jsxSlots": true
+  }
 }