Step disabled mode updates

pull/6082/head
tugcekucukoglu 2024-07-18 10:15:32 +03:00
parent 22802c00a3
commit e6cfae2860
2 changed files with 8 additions and 8 deletions

View File

@ -1,6 +1,6 @@
<template>
<component v-if="!asChild" :is="as" :class="cx('root')" :aria-current="active ? 'step' : undefined" role="presentation" :data-p-active="active" :data-p-disabled="disabled" v-bind="getPTOptions('root')">
<button :id="id" :class="cx('header')" role="tab" type="button" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" :disabled="disabled" @click="onStepClick" v-bind="getPTOptions('header')">
<component v-if="!asChild" :is="as" :class="cx('root')" :aria-current="active ? 'step' : undefined" role="presentation" :data-p-active="active" :data-p-disabled="isStepDisabled" v-bind="getPTOptions('root')">
<button :id="id" :class="cx('header')" role="tab" type="button" :tabindex="isStepDisabled ? -1 : undefined" :aria-controls="ariaControls" :disabled="isStepDisabled" @click="onStepClick" v-bind="getPTOptions('header')">
<span :class="cx('number')" v-bind="getPTOptions('number')">{{ activeValue }}</span>
<span :class="cx('title')" v-bind="getPTOptions('title')">
<slot />
@ -46,13 +46,10 @@ export default {
return _ptm(key, {
context: {
active: this.active,
disabled: this.disabled
disabled: this.isStepDisabled
}
});
},
isStepDisabled() {
return this.$pcStepper.isStepDisabled();
},
onStepClick() {
this.$pcStepper.updateValue(this.activeValue);
}
@ -64,6 +61,9 @@ export default {
activeValue() {
return !!this.$pcStepItem ? this.$pcStepItem?.value : this.value;
},
isStepDisabled() {
return !this.active && (this.$pcStepper.isStepDisabled() || this.disabled);
},
id() {
return `${this.$pcStepper?.id}_step_${this.activeValue}`;
},

View File

@ -1,11 +1,11 @@
import BaseStyle from '@primevue/core/base/style';
const classes = {
root: ({ instance, props }) => [
root: ({ instance }) => [
'p-step',
{
'p-step-active': instance.active,
'p-disabled': !instance.active && (instance.isStepDisabled() || props.disabled)
'p-disabled': instance.isStepDisabled
}
],
header: 'p-step-header',