vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #5266

Browse source
This commit is contained in:
tugcekucukoglu 2024-02-20 17:47:55 +03:00
parent 89610aae03
commit 5cc61a351c
82 changed files with 233 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

123
components/lib/stepper/Stepper.vue
View file

@ -3,52 +3,50 @@
<slot v-if="$slots.start" name="start" />
<template v-if="orientation === 'horizontal'">
<div :class="cx('navContainer')" v-bind="ptm('navContainer')">
<ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
<li
v-for="(step, index) of stepperpanels"
:key="getStepKey(step, index)"
:class="cx('stepper.header', { step, index })"
:aria-current="isStepActive(index) ? 'step' : undefined"
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<slot name="header">
<StepperHeader
:id="getStepHeaderActionId(index)"
:template="step.children?.header"
:stepperpanel="step"
:index="index"
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
:getStepProp="getStepProp"
/>
</slot>
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
</li>
</ul>
</div>
<ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
<li
v-for="(step, index) of stepperpanels"
:key="getStepKey(step, index)"
:class="cx('stepper.header', { step, index })"
:aria-current="isStepActive(index) ? 'step' : undefined"
role="presentation"
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
data-pc-name="stepperpanel"
:data-p-highlight="isStepActive(index)"
:data-p-disabled="isItemDisabled(index)"
:data-pc-index="index"
:data-p-active="isStepActive(index)"
>
<slot name="header">
<StepperHeader
:id="getStepHeaderActionId(index)"
:template="step.children?.header"
:stepperpanel="step"
:index="index"
:disabled="isItemDisabled(index)"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:class="cx('stepper.action')"
:aria-controls="getStepContentId(index)"
:clickCallback="(event) => onItemClick(event, index)"
:getStepPT="getStepPT"
:getStepProp="getStepProp"
/>
</slot>
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
</li>
</ul>
<div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
<template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
<StepperContent
@ -100,20 +98,21 @@
/>
</slot>
</div>
<div :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
<transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
<transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
<div v-if="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
<slot v-if="index !== stepperpanels.length - 1" name="separator">
<StepperSeparator
v-if="index !== stepperpanels.length - 1"
:template="step.children?.separator"
:separatorClass="cx('stepper.separator')"
:stepperpanel="step"
:index="index"
:active="isStepActive(index)"
:highlighted="index < d_activeStep"
:getStepPT="getStepPT(step, 'separator', index)"
/>
</slot>
<slot name="content">
<StepperContent
v-show="isStepActive(index)"
@ -130,8 +129,8 @@
:aria-labelledby="getStepHeaderActionId(index)"
/>
</slot>
</transition>
</div>
</div>
</transition>
</div>
</template>
<slot v-if="$slots.end" name="end" />