diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx index b074aa85f75..57f8bc29c2d 100644 --- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx +++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx @@ -211,7 +211,7 @@ export const VFileInput = genericComponent()({ { ...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 index e60618778a3..1350134118c 100644 --- a/packages/vuetify/src/components/VStepper/VStepper.tsx +++ b/packages/vuetify/src/components/VStepper/VStepper.tsx @@ -151,7 +151,7 @@ export const VStepper = genericComponent()({ > { hasHeader && ( - { items.value.map((item, index) => ( + { items.value.map(({ raw, ...item }, index) => ( <> { !!index && () } diff --git a/packages/vuetify/src/components/VStepper/VStepperItem.sass b/packages/vuetify/src/components/VStepper/VStepperItem.sass index 26b21fd56ea..78ce758462d 100644 --- 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 index 6470c4a8963..42766e6221a 100644 --- 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()({ 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()({ ]} onClick={ onClick } > + { isClickable.value && genOverlays(true, 'v-stepper-item') } +