fix(VStepperVertical): correct slots types (#20537)

fixes #20213 fixes #20803 Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Jan 24, 2025 · 0230259 · 0230259
1 parent 910935e
commit 0230259
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 40 deletions.
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -24,20 +24,20 @@ import type { RippleDirectiveBinding } from '@/directives/ripple'
 
 export type StepperItem = string | Record<string, any>
 
-export type StepperItemSlot = {
+export type StepperItemSlot<T = any> = {
   canEdit: boolean
   hasError: boolean
   hasCompleted: boolean
   title?: string | number
   subtitle?: string | number
-  step: any
+  step: T
 }
 
-export type VStepperItemSlots = {
-  default: StepperItemSlot
-  icon: StepperItemSlot
-  title: StepperItemSlot
-  subtitle: StepperItemSlot
+export type VStepperItemSlots<T = any> = {
+  default: StepperItemSlot<T>
+  icon: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
 }
 
 export type ValidationRule = () => string | boolean

diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -12,21 +12,22 @@ import { computed, ref, toRefs } from 'vue'
 import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
+import type { StepperVerticalItemActionSlot } from './VStepperVerticalItem'
 import type { VStepperSlot } from '@/components/VStepper/VStepper'
-import type { StepperItem, StepperItemSlot } from '@/components/VStepper/VStepperItem'
-
-export type VStepperVerticalSlots = {
-  actions: StepperItemSlot
-  default: VStepperSlot & { step: unknown }
-  icon: StepperItemSlot
-  title: StepperItemSlot
-  subtitle: StepperItemSlot
-  item: StepperItem
-  prev: StepperItemSlot
-  next: StepperItemSlot
+import type { StepperItemSlot } from '@/components/VStepper/VStepperItem'
+import type { GenericProps } from '@/util'
+
+export type VStepperVerticalSlots<T> = {
+  actions: StepperVerticalItemActionSlot<T>
+  default: VStepperSlot & { step: T }
+  icon: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
+  prev: StepperVerticalItemActionSlot<T>
+  next: StepperVerticalItemActionSlot<T>
 } & {
-  [key: `header-item.${string}`]: StepperItemSlot
-  [key: `item.${string}`]: StepperItem
+  [key: `header-item.${string}`]: StepperItemSlot<T>
+  [key: `item.${string}`]: StepperItemSlot<T>
 }
 
 export const makeVStepperVerticalProps = propsFactory({
@@ -46,7 +47,13 @@ export const makeVStepperVerticalProps = propsFactory({
   }), ['static']),
 }, 'VStepperVertical')
 
-export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
+export const VStepperVertical = genericComponent<new <T = number>(
+  props: {
+    modelValue?: T
+    'onUpdate:modelValue'?: (value: T) => void
+  },
+  slots: VStepperVerticalSlots<T>,
+) => GenericProps<typeof props, typeof slots>>()({
   name: 'VStepperVertical',
 
   props: makeVStepperVerticalProps(),
@@ -108,10 +115,7 @@ export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
         >
           {{
             ...slots,
-            default: ({
-              prev,
-              next,
-            }) => {
+            default: ({ prev, next }) => {
               return (
                 <>
                   { items.value.map(({ raw, ...item }) => (

diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -16,18 +16,20 @@ import { genericComponent, omit, propsFactory, useRender } from '@/util'
 // Types
 import type { StepperItemSlot } from '@/components/VStepper/VStepperItem'
 
-export type VStepperVerticalItemSlots = {
-  default: StepperItemSlot
-  icon: StepperItemSlot
-  subtitle: StepperItemSlot
-  title: StepperItemSlot
-  text: StepperItemSlot
-  prev: StepperItemSlot
-  next: StepperItemSlot
-  actions: StepperItemSlot & {
-    next: () => void
-    prev: () => void
-  }
+export type StepperVerticalItemActionSlot<T = any> = StepperItemSlot<T> & {
+  next: () => void
+  prev: () => void
+}
+
+export type VStepperVerticalItemSlots<T = any> = {
+  default: StepperItemSlot<T>
+  icon: StepperItemSlot<T>
+  subtitle: StepperItemSlot<T>
+  title: StepperItemSlot<T>
+  text: StepperItemSlot<T>
+  prev: StepperVerticalItemActionSlot<T>
+  next: StepperVerticalItemActionSlot<T>
+  actions: StepperVerticalItemActionSlot<T>
 }
 
 export const makeVStepperVerticalItemProps = propsFactory({
@@ -82,14 +84,13 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
       title: props.title,
       subtitle: props.subtitle,
       step: step.value,
-      value: props.value,
-    }))
+    } satisfies StepperItemSlot))
 
     const actionProps = computed(() => ({
       ...slotProps.value,
       prev: onClickPrev,
       next: onClickNext,
-    }))
+    } satisfies StepperVerticalItemActionSlot))
 
     function onClickNext () {
       emit('click:next')