refactor(VStepperVertical): remove finish functionality, adjust slot …

…props
vuetifyjs · May 10, 2024 · 364de3f · 364de3f
1 parent 2276b1e
commit 364de3f
Show file tree

Hide file tree

Showing 46 changed files with 21 additions and 97 deletions.
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -17,7 +17,7 @@ import type { StepperItem, StepperItemSlot } from '@/components/VStepper/VSteppe
 
 export type VStepperVerticalSlots = {
   actions: StepperItemSlot
-  default: VStepperSlot
+  default: VStepperSlot & { step: unknown }
   icon: StepperItemSlot
   title: StepperItemSlot
   subtitle: StepperItemSlot
@@ -122,7 +122,7 @@ export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
                     </VStepperVerticalItem>
                   ))}
 
-                  { slots.default?.({ prev, next }) }
+                  { slots.default?.({ prev, next, step: model.value }) }
                 </>
               )
             },

diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalActions.tsx
@@ -1,26 +1,13 @@
 // Components
-import { VBtn } from '@/components/VBtn/VBtn'
 import { makeVStepperActionsProps, VStepperActions } from '@/components/VStepper/VStepperActions'
 
 // Utilities
 import { genericComponent, propsFactory, useRender } from '@/util'
 
-export type VStepperActionsSlots = {
-  prev: {
-    props: { onClick: () => void }
-  }
-  next: {
-    props: { onClick: () => void }
-  }
-}
+// Types
+import type { VStepperActionsSlots } from '@/components/VStepper/VStepperActions'
 
 export const makeVStepperVerticalActionsProps = propsFactory({
-  finishText: {
-    type: String,
-    default: '$vuetify.stepper.finish',
-  },
-  finish: Boolean,
-
   ...makeVStepperActionsProps(),
 }, 'VStepperActions')
 
@@ -32,7 +19,6 @@ export const VStepperVerticalActions = genericComponent<VStepperActionsSlots>()(
   emits: {
     'click:prev': () => true,
     'click:next': () => true,
-    'click:finish': () => true,
   },
 
   setup (props, { emit, slots }) {
@@ -41,8 +27,7 @@ export const VStepperVerticalActions = genericComponent<VStepperActionsSlots>()(
     }
 
     function onClickNext () {
-      if (props.finish) emit('click:finish')
-      else emit('click:next')
+      emit('click:next')
     }
 
     useRender(() => {
@@ -52,21 +37,10 @@ export const VStepperVerticalActions = genericComponent<VStepperActionsSlots>()(
         <VStepperActions
           class="v-stepper-vertical-actions"
           { ...stepperActionsProps }
-          nextText={ props.finish ? props.finishText : undefined }
-        >
-          {{
-            prev: (slotProps: any) => {
-              return slots.prev?.(slotProps) ?? (
-                <VBtn { ...slotProps.props } onClick={ onClickPrev } />
-              )
-            },
-            next: (slotProps: any) => {
-              return slots.next?.(slotProps) ?? (
-                <VBtn { ...slotProps.props } onClick={ onClickNext } />
-              )
-            },
-          }}
-        </VStepperActions>
+          onClick:prev={ onClickPrev }
+          onClick:next={ onClickNext }
+          v-slots={ slots }
+        />
       )
     })
 

diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -26,11 +26,8 @@ export type VStepperVerticalItemSlots = {
   prev: StepperItemSlot
   next: StepperItemSlot
   actions: StepperItemSlot & {
-    props: {
-      'onClick:finish': () => void
-      'onClick:next': () => void
-      'onClick:prev': () => void
-    }
+    next: () => void
+    prev: () => void
   }
 }
 
@@ -89,13 +86,17 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
       value: props.value,
     }))
 
-    function onClickFinish () {
-      emit('click:finish')
-    }
+    const actionProps = computed(() => ({
+      ...slotProps.value,
+      prev: onClickPrev,
+      next: onClickNext,
+    }))
 
     function onClickNext () {
       emit('click:next')
 
+      if (groupItem.value?.isLast.value) return
+
       groupItem.value.group.next()
     }
 
@@ -179,21 +180,13 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
                       },
                     }}
                   >
-                    { slots.actions?.({
-                      ...slotProps.value,
-                      props: {
-                        'onClick:finish': onClickFinish,
-                        'onClick:next': onClickNext,
-                        'onClick:prev': onClickPrev,
-                      },
-                    }) ?? (
+                    { slots.actions?.(actionProps.value) ?? (
                       <VStepperVerticalActions
                         onClick:next={ onClickNext }
                         onClick:prev={ onClickPrev }
-                        onClick:finish={ onClickFinish }
                         v-slots={{
-                          prev: slots.prev ? (slotProps: any) => slots.prev?.(slotProps) : undefined,
-                          next: slots.next ? (slotProps: any) => slots.next?.(slotProps) : undefined,
+                          prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,
+                          next: slots.next ? () => slots.next?.(actionProps.value) : undefined,
                         }}
                       />
                     )}

diff --git a/packages/vuetify/src/locale/af.ts b/packages/vuetify/src/locale/af.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ar.ts b/packages/vuetify/src/locale/ar.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/az.ts b/packages/vuetify/src/locale/az.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/bg.ts b/packages/vuetify/src/locale/bg.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Следващ',
     prev: 'Предишен',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ca.ts b/packages/vuetify/src/locale/ca.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ckb.ts b/packages/vuetify/src/locale/ckb.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/cs.ts b/packages/vuetify/src/locale/cs.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Další',
     prev: 'Předchozí',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/da.ts b/packages/vuetify/src/locale/da.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/de.ts b/packages/vuetify/src/locale/de.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Weiter',
     prev: 'Zurück',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/el.ts b/packages/vuetify/src/locale/el.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/en.ts b/packages/vuetify/src/locale/en.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/es.ts b/packages/vuetify/src/locale/es.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/et.ts b/packages/vuetify/src/locale/et.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/fa.ts b/packages/vuetify/src/locale/fa.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'بعدی',
     prev: 'قبلی',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/fi.ts b/packages/vuetify/src/locale/fi.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/fr.ts b/packages/vuetify/src/locale/fr.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Suivant',
     prev: 'Précédent',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/he.ts b/packages/vuetify/src/locale/he.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/hr.ts b/packages/vuetify/src/locale/hr.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/hu.ts b/packages/vuetify/src/locale/hu.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/id.ts b/packages/vuetify/src/locale/id.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/it.ts b/packages/vuetify/src/locale/it.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Successivo',
     prev: 'Precedente',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ja.ts b/packages/vuetify/src/locale/ja.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/km.ts b/packages/vuetify/src/locale/km.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'បន្ទាប់',
     prev: 'មុន',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ko.ts b/packages/vuetify/src/locale/ko.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: '다음',
     prev: '이전',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/lt.ts b/packages/vuetify/src/locale/lt.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Kitas',
     prev: 'Ankstesnis',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/lv.ts b/packages/vuetify/src/locale/lv.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/nl.ts b/packages/vuetify/src/locale/nl.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Volgende',
     prev: 'Vorige',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/no.ts b/packages/vuetify/src/locale/no.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Neste',
     prev: 'Forrige',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/pl.ts b/packages/vuetify/src/locale/pl.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Następny',
     prev: 'Poprzedni',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/pt.ts b/packages/vuetify/src/locale/pt.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Próximo',
     prev: 'Anterior',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {

diff --git a/packages/vuetify/src/locale/ro.ts b/packages/vuetify/src/locale/ro.ts
@@ -88,7 +88,6 @@ export default {
   stepper: {
     next: 'Next',
     prev: 'Previous',
-    finish: 'Finish',
   },
   rating: {
     ariaLabel: {