Step disabled mode updates
parent
22802c00a3
commit
e6cfae2860
|
@ -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}`;
|
||||
},
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue