2024-02-13 06:22:45 +00:00
|
|
|
import BaseStyle from 'primevue/base/style';
|
|
|
|
|
|
|
|
const classes = {
|
|
|
|
root: ({ props }) => [
|
|
|
|
'p-stepper p-component',
|
|
|
|
{
|
|
|
|
'p-stepper-horizontal': props.orientation === 'horizontal',
|
|
|
|
'p-stepper-vertical': props.orientation === 'vertical',
|
|
|
|
'p-readonly': props.linear
|
|
|
|
}
|
|
|
|
],
|
2024-04-09 08:53:22 +00:00
|
|
|
nav: 'p-stepper-list',
|
2024-02-13 06:22:45 +00:00
|
|
|
stepper: {
|
|
|
|
header: ({ instance, step, index }) => [
|
2024-04-09 08:53:22 +00:00
|
|
|
'p-stepper-item',
|
2024-02-13 06:22:45 +00:00
|
|
|
{
|
2024-04-09 08:53:22 +00:00
|
|
|
'p-stepper-item-active': instance.isStepActive(index),
|
2024-02-21 08:44:30 +00:00
|
|
|
'p-disabled': instance.isItemDisabled(index)
|
2024-02-13 06:22:45 +00:00
|
|
|
}
|
|
|
|
],
|
2024-04-09 08:53:22 +00:00
|
|
|
action: 'p-stepper-header',
|
2024-02-13 06:22:45 +00:00
|
|
|
number: 'p-stepper-number',
|
|
|
|
title: 'p-stepper-title',
|
|
|
|
separator: 'p-stepper-separator',
|
2024-04-09 08:53:22 +00:00
|
|
|
toggleableContent: 'p-stepper-panel-content-container',
|
|
|
|
content: 'p-stepper-panel-content'
|
2024-02-13 06:22:45 +00:00
|
|
|
},
|
|
|
|
panelContainer: 'p-stepper-panels',
|
|
|
|
panel: ({ instance, props, index }) => [
|
|
|
|
'p-stepper-panel',
|
|
|
|
{
|
|
|
|
'p-stepper-panel-active': props.orientation === 'vertical' && instance.isStepActive(index)
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BaseStyle.extend({
|
|
|
|
name: 'stepper',
|
|
|
|
classes
|
|
|
|
});
|