From dcfef7664c3749df05ca420c8cb87e9f5078f596 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Fri, 24 Jan 2025 17:03:23 +1100
Subject: [PATCH] generic on modelValue, fix item slot

---
 .../src/components/VStepper/VStepperItem.tsx  | 14 +++----
 .../VStepperVertical/VStepperVertical.tsx     | 41 ++++++++++---------
 .../VStepperVertical/VStepperVerticalItem.tsx | 25 ++++++-----
 3 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
index 686993a1885..8f9e8bd1d75 100644
--- 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
index f2c2e5bbcee..87199cdca4a 100644
--- a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -12,22 +12,22 @@ import { computed, ref, toRefs } from 'vue'
 import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
 
 // Types
-import type { VStepperSlot } from '@/components/VStepper/VStepper'
-import type { StepperItem, StepperItemSlot } from '@/components/VStepper/VStepperItem'
 import type { StepperVerticalItemActionSlot } from './VStepperVerticalItem'
-
-export type VStepperVerticalSlots = {
-  actions: StepperVerticalItemActionSlot
-  default: VStepperSlot & { step: unknown }
-  icon: StepperItemSlot
-  title: StepperItemSlot
-  subtitle: StepperItemSlot
-  item: StepperItem
-  prev: StepperVerticalItemActionSlot
-  next: StepperVerticalItemActionSlot
+import type { VStepperSlot } from '@/components/VStepper/VStepper'
+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({
@@ -47,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(),
@@ -109,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
index d817af54be1..3499cc07372 100644
--- a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
+++ b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -16,20 +16,20 @@ import { genericComponent, omit, propsFactory, useRender } from '@/util'
 // Types
 import type { StepperItemSlot } from '@/components/VStepper/VStepperItem'
 
-export type StepperVerticalItemActionSlot = StepperItemSlot & {
+export type StepperVerticalItemActionSlot<T = any> = StepperItemSlot<T> & {
   next: () => void
   prev: () => void
 }
 
-export type VStepperVerticalItemSlots = {
-  default: StepperItemSlot
-  icon: StepperItemSlot
-  subtitle: StepperItemSlot
-  title: StepperItemSlot
-  text: StepperItemSlot
-  prev: StepperVerticalItemActionSlot
-  next: StepperVerticalItemActionSlot
-  actions: StepperVerticalItemActionSlot
+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({
@@ -84,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')