fix(VStepperVertical): add hideActions support

vuetifyjs · May 10, 2024 · f23d257 · f23d257
1 parent 1745d7f
commit f23d257
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVertical.tsx
@@ -8,7 +8,7 @@ import { provideDefaults } from '@/composables/defaults'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
-import { computed, ref, toRefs } from 'vue'
+import { computed, ref, toRef, toRefs } from 'vue'
 import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
@@ -57,7 +57,7 @@ export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
 
   setup (props, { slots }) {
     const vExpansionPanelsRef = ref<typeof VExpansionPanels>()
-    const { color, editable, prevText, nextText } = toRefs(props)
+    const { color, editable, prevText, nextText, hideActions } = toRefs(props)
 
     const model = useProxiedModel(props, 'modelValue')
     const items = computed(() => props.items.map((item, index) => {
@@ -77,6 +77,7 @@ export const VStepperVertical = genericComponent<VStepperVerticalSlots>()({
         editable,
         prevText,
         nextText,
+        hideActions,
         static: true,
       },
       VStepperActions: {

diff --git a/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx b/packages/vuetify/src/labs/VStepperVertical/VStepperVerticalItem.tsx
@@ -105,6 +105,7 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
         !props.disabled
       )
 
+      const hasActions = !props.hideActions || !!slots.actions
       const expansionPanelProps = VExpansionPanel.filterProps(props)
 
       return (
@@ -125,6 +126,7 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
           readonly={ !props.editable }
           style={ props.style }
           color=""
+          hide-actions={ false }
         >
           {{
             title: () => (
@@ -158,18 +160,22 @@ export const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>(
               <>
                 { slots.default?.(slotProps.value) ?? props.text }
 
-                <VStepperVerticalActions
-                  class="v-stepper-vertical-actions"
-                  disabled={ disabled.value }
-                  onClick:next={ onClickNext }
-                  onClick:prev={ onClickPrev }
-                  onClick:finish={ onClickFinish }
-                  finish={ groupItem.value?.isLast.value }
-                  v-slots={{
-                    prev: slots.prev ? (slotProps: any) => slots.prev?.(slotProps) : undefined,
-                    next: slots.next ? (slotProps: any) => slots.next?.(slotProps) : undefined,
-                  }}
-                />
+                { hasActions && (
+                  slots.actions?.(slotProps.value) ?? (
+                    <VStepperVerticalActions
+                      class="v-stepper-vertical-actions"
+                      disabled={ disabled.value }
+                      onClick:next={ onClickNext }
+                      onClick:prev={ onClickPrev }
+                      onClick:finish={ onClickFinish }
+                      finish={ groupItem.value?.isLast.value }
+                      v-slots={{
+                        prev: slots.prev ? (slotProps: any) => slots.prev?.(slotProps) : undefined,
+                        next: slots.next ? (slotProps: any) => slots.next?.(slotProps) : undefined,
+                      }}
+                    />
+                  )
+                )}
               </>
             ),
           }}