feat(types): add generics to components

.eslintrc.js

@@ -136,6 +136,17 @@ module.exports = {
           allowTemplateLiterals: true,
         }],
 
+        indent: 'off',
+        '@typescript-eslint/indent': ['error', 2, {
+          ...require('eslint-config-standard').rules.indent[2],
+          ignoredNodes: [...require('eslint-config-standard').rules.indent[2].ignoredNodes, 'TSTypeParameterInstantiation'],
+          flatTernaryExpressions: true,
+          offsetTernaryExpressions: false,
+        }],
+
+        'func-call-spacing': 'off',
+        '@typescript-eslint/func-call-spacing': require('eslint-config-standard').rules['func-call-spacing'],
+
         // Handled by tsc
         'no-redeclare': 'off',
 

package.json

@@ -33,9 +33,9 @@
     "@babel/preset-typescript": "^7.15.0",
     "@mdi/js": "^5.9.55",
     "@octokit/core": "^3.5.1",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
-    "@vue/compiler-sfc": "^3.2.8",
+    "@typescript-eslint/eslint-plugin": "^4.32.0",
+    "@typescript-eslint/parser": "^4.32.0",
+    "@vue/compiler-sfc": "^3.2.19",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "conventional-changelog-cli": "^2.1.1",
@@ -65,7 +65,7 @@
     "semver": "^6.2.0",
     "shelljs": "^0.8.4",
     "typescript": "^4.4.2",
-    "vue": "^3.2.8",
+    "vue": "^3.2.19",
     "vue-analytics": "^5.16.1",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.5.2",

packages/api-generator/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "deepmerge": "^4.0.0",
     "rimraf": "^3.0.2",
-    "vue": "^3.2.8",
+    "vue": "^3.2.19",
     "vuetify": "^3.0.0-alpha.11"
   },
   "devDependencies": {

packages/vuetify/package.json

@@ -115,9 +115,9 @@
     "@types/jest": "^26.0.24",
     "@types/node": "^14.17.14",
     "@types/resize-observer-browser": "^0.1.6",
-    "@vitejs/plugin-vue": "^1.6.0",
-    "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/babel-plugin-jsx": "^1.0.7",
+    "@vitejs/plugin-vue": "^1.9.2",
+    "@vitejs/plugin-vue-jsx": "^1.2.0",
+    "@vue/babel-plugin-jsx": "^1.1.0",
     "@vue/test-utils": "2.0.0-rc.9",
     "@vueuse/head": "^0.6.0",
     "acorn-walk": "^8.1.1",
@@ -147,7 +147,7 @@
     "vue-router": "^4.0.11"
   },
   "peerDependencies": {
-    "vue": "^3.2.8"
+    "vue": "^3.2.19"
   },
   "publishConfig": {
     "access": "public"

packages/vuetify/src/components/VDialog/VDialog.tsx

@@ -12,9 +12,14 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { nextTick, ref, watch } from 'vue'
-import { defineComponent, IN_BROWSER } from '@/util'
+import { genericComponent, IN_BROWSER } from '@/util'
 
-export const VDialog = defineComponent({
+// Types
+import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+
+export const VDialog = genericComponent<new () => {
+  $slots: OverlaySlots
+}>()({
   name: 'VDialog',
 
   inheritAttrs: false,

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

@@ -18,7 +18,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { computed, ref, toRef, watch, watchEffect } from 'vue'
 import {
   convertToUnit,
-  defineComponent,
+  genericComponent,
   getUid,
   nullifyTransforms,
   propsFactory,
@@ -28,6 +28,7 @@ import {
 
 // Types
 import type { PropType, Ref } from 'vue'
+import type { MakeSlots } from '@/util'
 
 const allowedVariants = ['underlined', 'outlined', 'filled', 'contained', 'plain'] as const
 type Variant = typeof allowedVariants[number]
@@ -45,12 +46,7 @@ export interface DefaultInputSlot {
 }
 
 export interface VFieldSlot extends DefaultInputSlot {
-  props: {
-    id: string
-    class: string
-    onFocus: () => void
-    onBlur: () => void
-  }
+  props: Record<string, unknown>
 }
 
 export const makeVFieldProps = propsFactory({
@@ -79,7 +75,26 @@ export const makeVFieldProps = propsFactory({
   ...makeValidationProps(),
 }, 'v-field')
 
-export const VField = defineComponent({
+export const VField = genericComponent<new <T>() => {
+  $props: {
+    modelValue?: T
+    'onUpdate:modelValue'?: (val: T) => any
+  }
+  $slots: MakeSlots<{
+    prependInner: [DefaultInputSlot]
+    clear: []
+    appendInner: [DefaultInputSlot]
+    label: [DefaultInputSlot]
+    prepend: [DefaultInputSlot]
+    append: [DefaultInputSlot]
+    details: [DefaultInputSlot]
+    loader: [{
+      color: string | undefined
+      isActive: boolean
+    }]
+    default: [VFieldSlot]
+  }>
+}>()({
   name: 'VField',
 
   inheritAttrs: false,
@@ -347,5 +362,4 @@ export const VField = defineComponent({
   },
 })
 
-// eslint-disable-next-line @typescript-eslint/no-redeclare
 export type VField = InstanceType<typeof VField>

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

@@ -17,7 +17,6 @@ import { defineComponent, humanReadableFileSize, pick, useRender, wrapInArray }
 
 // Types
 import type { PropType } from 'vue'
-import type { VFieldSlot } from '@/components/VField/VField'
 
 export const VFileInput = defineComponent({
   name: 'VFileInput',
@@ -105,7 +104,7 @@ export const VFileInput = defineComponent({
     }
 
     useRender(() => {
-      const hasCounter = (slots.counter || props.counter || counterValue.value)
+      const hasCounter = !!(slots.counter || props.counter || counterValue.value)
       const [_, restAttrs] = pick(attrs, ['class'])
 
       return (
@@ -137,7 +136,7 @@ export const VFileInput = defineComponent({
               isActive,
               inputRef,
               props: { class: fieldClass, ...slotProps },
-            }: VFieldSlot) => (
+            }) => (
               <>
                 <input
                   ref={ inputRef }
@@ -177,7 +176,7 @@ export const VFileInput = defineComponent({
               </>
             ),
 
-            details: hasCounter ? () => (
+            details: hasCounter && (() => (
               <>
                 <span />
 
@@ -186,7 +185,7 @@ export const VFileInput = defineComponent({
                   v-slots={ slots.counter }
                 />
               </>
-            ) : undefined,
+            )),
           }}
         />
       )

packages/vuetify/src/components/VMenu/VMenu.tsx

@@ -10,10 +10,15 @@ import { makeTransitionProps } from '@/composables/transition'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { defineComponent, getUid } from '@/util'
 import { computed } from 'vue'
+import { genericComponent, getUid } from '@/util'
 
-export const VMenu = defineComponent({
+// Types
+import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+
+export const VMenu = genericComponent<new () => {
+  $slots: OverlaySlots
+}>()({
   name: 'VMenu',
 
   inheritAttrs: false,

packages/vuetify/src/components/VOverlay/VOverlay.tsx

@@ -14,14 +14,15 @@ import { useRtl } from '@/composables/rtl'
 import { useTeleport } from '@/composables/teleport'
 import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeLazyProps, useLazy } from '@/composables/lazy'
+import { useStack } from '@/composables/stack'
 
 // Directives
 import { ClickOutside } from '@/directives/click-outside'
 
 // Utilities
 import {
   convertToUnit,
-  defineComponent,
+  genericComponent,
   getScrollParent,
   standardEasing,
   useRender,
@@ -38,9 +39,9 @@ import {
 } from 'vue'
 
 // Types
-import type { PropType } from 'vue'
+import type { PropType, Ref } from 'vue'
+import type { MakeSlots } from '@/util'
 import type { BackgroundColorData } from '@/composables/color'
-import { useStack } from '@/composables/stack'
 
 interface ScrimProps {
   [key: string]: unknown
@@ -65,7 +66,14 @@ function Scrim (props: ScrimProps) {
   )
 }
 
-export const VOverlay = defineComponent({
+export type OverlaySlots = MakeSlots<{
+  default: [{ isActive: Ref<boolean> }]
+  activator: [{ isActive: boolean, props: Dictionary<any> }]
+}>
+
+export const VOverlay = genericComponent<new () => {
+  $slots: OverlaySlots
+}>()({
   name: 'VOverlay',
 
   directives: { ClickOutside },

packages/vuetify/src/components/VPagination/VPaginationBtn.tsx

@@ -7,4 +7,4 @@ import { defineComponent } from '@/util'
 export const VPaginationBtn = defineComponent({
   ...VBtn,
   name: 'VPaginationBtn',
-})
+}) as typeof VBtn

packages/vuetify/src/components/VTextField/VTextField.tsx

@@ -18,7 +18,6 @@ import { defineComponent, pick, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import type { VFieldSlot } from '@/components/VField/VField'
 
 const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']
 
@@ -89,7 +88,7 @@ export const VTextField = defineComponent({
     }
 
     useRender(() => {
-      const hasCounter = (slots.counter || props.counter || props.counterValue)
+      const hasCounter = !!(slots.counter || props.counter || props.counterValue)
       const [_, restAttrs] = pick(attrs, ['class'])
 
       return (
@@ -122,7 +121,7 @@ export const VTextField = defineComponent({
               isReadonly,
               inputRef,
               props: { class: fieldClass, ...slotProps },
-            }: VFieldSlot) => {
+            }) => {
               const showPlaceholder = isActive || props.persistentPlaceholder
               return (
                 <>
@@ -158,7 +157,7 @@ export const VTextField = defineComponent({
                 </>
               )
             },
-            details: hasCounter && (({ isFocused }: VFieldSlot) => (
+            details: hasCounter && (({ isFocused }) => (
               <>
                 <span />
 

packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx

@@ -11,7 +11,7 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 // Utilities
 import { defineComponent, inject, toRef } from 'vue'
 
-export default defineComponent({
+export const VTimelineDivider = defineComponent({
   name: 'VTimelineDivider',
 
   props: {
@@ -84,3 +84,5 @@ export default defineComponent({
     )
   },
 })
+
+export type VTimelineDivider = InstanceType<typeof VTimelineDivider>

packages/vuetify/src/components/VTimeline/VTimelineItem.tsx

@@ -1,9 +1,6 @@
-// Types
-import type { ComponentPublicInstance } from 'vue'
-
 // Components
 import { VTimelineSymbol } from './shared'
-import VTimelineDivider from './VTimelineDivider'
+import { VTimelineDivider } from './VTimelineDivider'
 
 // Composables
 import { makeTagProps } from '@/composables/tag'
@@ -45,7 +42,7 @@ export const VTimelineItem = defineComponent({
     const { dimensionStyles } = useDimension(props)
 
     const dotSize = ref(0)
-    const dotRef = ref<ComponentPublicInstance>()
+    const dotRef = ref<VTimelineDivider>()
     watch(dotRef, newValue => {
       if (!newValue) return
       dotSize.value = newValue.$el.querySelector('.v-timeline-divider__dot')?.getBoundingClientRect().width ?? 0

packages/vuetify/src/components/VTooltip/VTooltip.tsx

@@ -10,13 +10,16 @@ import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed } from 'vue'
-import { defineComponent, getUid } from '@/util'
+import { genericComponent, getUid } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
+import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
 import type { StrategyProps } from '@/components/VOverlay/positionStrategies'
 
-export const VTooltip = defineComponent({
+export const VTooltip = genericComponent<new () => {
+  $slots: OverlaySlots
+}>()({
   name: 'VTooltip',
 
   inheritAttrs: false,

packages/vuetify/src/composables/group.ts

@@ -49,7 +49,7 @@ export interface GroupItemProvide {
 
 export const makeGroupProps = propsFactory({
   modelValue: {
-    type: [Number, Boolean, String, Array, Object],
+    type: null,
     default: undefined,
   },
   multiple: Boolean,