mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-11 01:42:34 +00:00
Refactor #5266
This commit is contained in:
tugcekucukoglu
parent
89610aae03
commit
5cc61a351c
82 changed files with 233 additions and 146 deletions
16
components/lib/stepper/Stepper.d.ts
vendored
16
components/lib/stepper/Stepper.d.ts
vendored
|
|
@ -7,6 +7,7 @@
|
|||
* @module stepper
|
||||
*
|
||||
*/
|
||||
import { VNode } from 'vue';
|
||||
import { ComponentHooks } from '../basecomponent';
|
||||
import { PassThroughOptions } from '../passthrough';
|
||||
import { StepperPanelPassThroughOptionType } from '../stepperpanel';
|
||||
|
|
@ -53,10 +54,6 @@ export interface StepperPassThroughOptions {
|
|||
* Used to pass attributes to the root's DOM element.
|
||||
*/
|
||||
root?: StepperPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nav container's DOM element.
|
||||
*/
|
||||
navContainer?: StepperPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the nav's DOM element.
|
||||
*/
|
||||
|
|
@ -151,7 +148,16 @@ export interface StepperProps {
|
|||
/**
|
||||
* Defines valid slots in Stepper component.
|
||||
*/
|
||||
export interface StepperSlots {}
|
||||
export interface StepperSlots {
|
||||
/**
|
||||
* Custom start template.
|
||||
*/
|
||||
start(): VNode[];
|
||||
/**
|
||||
* Custom end template.
|
||||
*/
|
||||
end(): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid emits in Stepper component.
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
<template>
|
||||
<component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :clickCallback="(event) => clickCallback(event, index)" />
|
||||
<component
|
||||
v-if="template"
|
||||
:is="template"
|
||||
:index="index"
|
||||
:active="active"
|
||||
:highlighted="highlighted"
|
||||
:class="cx('stepper.action')"
|
||||
:headerClass="cx('stepper.action')"
|
||||
:numberClass="cx('stepper.number')"
|
||||
:titleClass="cx('stepper.title')"
|
||||
:clickCallback="(event) => clickCallback(event, index)"
|
||||
/>
|
||||
<button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
|
||||
<span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
|
||||
<span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ const classes = {
|
|||
'p-readonly': props.linear
|
||||
}
|
||||
],
|
||||
navContainer: 'p-stepper-nav-container',
|
||||
nav: 'p-stepper-nav',
|
||||
stepper: {
|
||||
header: ({ instance, step, index }) => [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue