vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/primevue/src/step/Step.vue
View File

@ -1,6 +1,6 @@
<template> <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')"> <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="disabled ? -1 : undefined" :aria-controls="ariaControls" :disabled="disabled" @click="onStepClick" v-bind="getPTOptions('header')"> <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('number')" v-bind="getPTOptions('number')">{{ activeValue }}</span>
<span :class="cx('title')" v-bind="getPTOptions('title')"> <span :class="cx('title')" v-bind="getPTOptions('title')">
<slot /> <slot />
@ -46,13 +46,10 @@ export default {
return _ptm(key, { return _ptm(key, {
context: { context: {
active: this.active, active: this.active,
disabled: this.disabled disabled: this.isStepDisabled
} }
}); });
}, },
isStepDisabled() {
return this.$pcStepper.isStepDisabled();
},
onStepClick() { onStepClick() {
this.$pcStepper.updateValue(this.activeValue); this.$pcStepper.updateValue(this.activeValue);
} }
@ -64,6 +61,9 @@ export default {
activeValue() { activeValue() {
return !!this.$pcStepItem ? this.$pcStepItem?.value : this.value; return !!this.$pcStepItem ? this.$pcStepItem?.value : this.value;
}, },
isStepDisabled() {
return !this.active && (this.$pcStepper.isStepDisabled() || this.disabled);
},
id() { id() {
return `${this.$pcStepper?.id}_step_${this.activeValue}`; return `${this.$pcStepper?.id}_step_${this.activeValue}`;
}, },

4
packages/primevue/src/step/style/StepStyle.js
View File

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