42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
Vue
<template>
|
|
<component
|
|
v-if="template"
|
|
:is="template"
|
|
:index="index"
|
|
:active="active"
|
|
:highlighted="highlighted"
|
|
:class="cx('stepper.itemHeader')"
|
|
:headerClass="cx('stepper.itemHeader')"
|
|
:numberClass="cx('stepper.itemNumber')"
|
|
:titleClass="cx('stepper.itemTitle')"
|
|
:clickCallback="(event) => clickCallback(event, index)"
|
|
/>
|
|
<button v-else :id="id" :class="cx('stepper.itemHeader')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'itemHeader', index)">
|
|
<span :class="cx('stepper.itemNumber')" v-bind="getStepPT(stepperpanel, 'itemNumber', index)">{{ index + 1 }}</span>
|
|
<span :class="cx('stepper.itemTitle')" v-bind="getStepPT(stepperpanel, 'itemTitle', index)">{{ getStepProp(stepperpanel, 'item') }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseComponent from 'primevue/basecomponent';
|
|
|
|
export default {
|
|
name: 'StepperHeader',
|
|
hostName: 'Stepper',
|
|
extends: BaseComponent,
|
|
props: {
|
|
id: null,
|
|
template: null,
|
|
stepperpanel: null,
|
|
index: null,
|
|
disabled: null,
|
|
active: null,
|
|
highlighted: null,
|
|
ariaControls: null,
|
|
clickCallback: null,
|
|
getStepPT: null,
|
|
getStepProp: null
|
|
}
|
|
};
|
|
</script>
|