Merge branch 'master' into feat/v3-stepper-vertical

vuetifyjs · May 9, 2024 · 0cea628 · 0cea628
2 parents d3a4c0a + 85c41db
commit 0cea628
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -211,7 +211,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
-                dirty={ isDirty.value }
+                dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }
                 error={ isValid.value === false }

diff --git a/packages/vuetify/src/components/VStepper/VStepper.tsx b/packages/vuetify/src/components/VStepper/VStepper.tsx
@@ -151,7 +151,7 @@ export const VStepper = genericComponent<VStepperSlots>()({
         >
           { hasHeader && (
             <VStepperHeader key="stepper-header">
-              { items.value.map((item, index) => (
+              { items.value.map(({ raw, ...item }, index) => (
                 <>
                   { !!index && (<VDivider />) }
 

diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass
@@ -8,12 +8,19 @@
     align-self: stretch
     display: inline-flex
     flex: none
+    outline: none
     opacity: $stepper-item-opacity
     padding: $stepper-item-padding
+    position: relative
     transition-duration: $stepper-item-transition-duration
     transition-property: $stepper-item-transition-property
     transition-timing-function: $stepper-item-transition-timing-function
 
+    @include tools.states('.v-stepper-item__overlay')
+
+    .v-stepper--non-linear &
+      opacity: var(--v-high-emphasis-opacity)
+
     &--selected
       opacity: 1
 
@@ -71,3 +78,14 @@
 
     .v-stepper--mobile &
       display: none
+
+  .v-stepper-item__overlay
+    background-color: currentColor
+    border-radius: inherit
+    opacity: 0
+    transition: opacity .2s ease-in-out
+
+  .v-stepper-item__overlay,
+  .v-stepper-item__underlay
+    @include tools.absolute()
+    pointer-events: none
diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.tsx b/packages/vuetify/src/components/VStepper/VStepperItem.tsx
@@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon/VIcon'
 
 // Composables
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
+import { genOverlays } from '@/composables/variant'
 
 // Directives
 import { Ripple } from '@/directives/ripple'
@@ -90,13 +91,14 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
     const group = useGroupItem(props, VStepperSymbol, true)
     const step = computed(() => group?.value.value ?? props.value)
     const isValid = computed(() => props.rules.every(handler => handler() === true))
+    const isClickable = computed(() => !props.disabled && props.editable)
     const canEdit = computed(() => !props.disabled && props.editable)
     const hasError = computed(() => props.error || !isValid.value)
     const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))
     const icon = computed(() => {
       if (hasError.value) return props.errorIcon
       if (hasCompleted.value) return props.completeIcon
-      if (props.editable) return props.editIcon
+      if (group.isSelected.value && props.editable) return props.editIcon
 
       return props.icon
     })
@@ -146,6 +148,8 @@ export const VStepperItem = genericComponent<VStepperItemSlots>()({
           ]}
           onClick={ onClick }
         >
+          { isClickable.value && genOverlays(true, 'v-stepper-item') }
+
           <VAvatar
             key="stepper-avatar"
             class="v-stepper-item__avatar"