Fixed #5266 - New Stepper component
tugcekucukoglu
parent
3ddf127783
commit
62e6aaeb28
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
import StepperStyle from 'primevue/stepper/style';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BaseStepper',
|
||||||
|
extends: BaseComponent,
|
||||||
|
props: {
|
||||||
|
activeStep: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
orientation: {
|
||||||
|
type: String,
|
||||||
|
default: 'horizontal'
|
||||||
|
},
|
||||||
|
linear: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
style: StepperStyle,
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
$parentInstance: this
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/stepper/)
|
||||||
|
*
|
||||||
|
* @module stepper
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { ComponentHooks } from '../basecomponent';
|
||||||
|
import { PassThroughOptions } from '../passthrough';
|
||||||
|
import { StepperPanelPassThroughOptionType } from '../stepperpanel';
|
||||||
|
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
|
||||||
|
|
||||||
|
export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) option method.
|
||||||
|
*/
|
||||||
|
export interface StepperPassThroughMethodOptions {
|
||||||
|
/**
|
||||||
|
* Defines instance.
|
||||||
|
*/
|
||||||
|
instance: any;
|
||||||
|
/**
|
||||||
|
* Defines valid properties.
|
||||||
|
*/
|
||||||
|
props: StepperProps;
|
||||||
|
/**
|
||||||
|
* Defines current inline state.
|
||||||
|
*/
|
||||||
|
state: StepperState;
|
||||||
|
/**
|
||||||
|
* Defines valid attributes.
|
||||||
|
*/
|
||||||
|
attrs: any;
|
||||||
|
/**
|
||||||
|
* Defines parent options.
|
||||||
|
*/
|
||||||
|
parent: any;
|
||||||
|
/**
|
||||||
|
* Defines passthrough(pt) options in global config.
|
||||||
|
*/
|
||||||
|
global: object | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) options.
|
||||||
|
* @see {@link StepperProps.pt}
|
||||||
|
*/
|
||||||
|
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.
|
||||||
|
*/
|
||||||
|
nav?: StepperPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the panel container's DOM element.
|
||||||
|
*/
|
||||||
|
panelContainer?: StepperPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the end handler's DOM element.
|
||||||
|
*/
|
||||||
|
stepperpanel?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to manage all lifecycle hooks.
|
||||||
|
* @see {@link BaseComponent.ComponentHooks}
|
||||||
|
*/
|
||||||
|
hooks?: ComponentHooks;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough attributes for each DOM elements
|
||||||
|
*/
|
||||||
|
export interface StepperPassThroughAttributes {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current inline state in Stepper component.
|
||||||
|
*/
|
||||||
|
export interface StepperState {
|
||||||
|
/**
|
||||||
|
* Current active index state.
|
||||||
|
*/
|
||||||
|
d_activeStep: number;
|
||||||
|
/**
|
||||||
|
* Unique id for the Stepper component.
|
||||||
|
*/
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom tab change event.
|
||||||
|
* @see {@link StepperEmits['step-change']}
|
||||||
|
*/
|
||||||
|
export interface StepperChangeEvent {
|
||||||
|
/**
|
||||||
|
* Browser event
|
||||||
|
*/
|
||||||
|
originalEvent: Event;
|
||||||
|
/**
|
||||||
|
* Index of the selected stepper panel
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid properties in Stepper component.
|
||||||
|
*/
|
||||||
|
export interface StepperProps {
|
||||||
|
/**
|
||||||
|
* Active step index of stepper.
|
||||||
|
* @defaultValue 0
|
||||||
|
*/
|
||||||
|
activeStep?: number | undefined;
|
||||||
|
/**
|
||||||
|
* Orientation of the stepper.
|
||||||
|
* @defaultValue horizontal
|
||||||
|
*/
|
||||||
|
orientation?: 'horizontal' | 'vertical' | undefined;
|
||||||
|
/**
|
||||||
|
* Whether the steps are clickable or not.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
linear?: boolean | undefined;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {StepperPassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: PassThrough<StepperPassThroughOptions>;
|
||||||
|
/**
|
||||||
|
* Used to configure passthrough(pt) options of the component.
|
||||||
|
* @type {PassThroughOptions}
|
||||||
|
*/
|
||||||
|
ptOptions?: PassThroughOptions;
|
||||||
|
/**
|
||||||
|
* When enabled, it removes component related styles in the core.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
unstyled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid slots in Stepper component.
|
||||||
|
*/
|
||||||
|
export interface StepperSlots {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid emits in Stepper component.
|
||||||
|
*/
|
||||||
|
export interface StepperEmits {
|
||||||
|
/**
|
||||||
|
* Emitted when the value changes.
|
||||||
|
* @param {number | number[]} value - New value.
|
||||||
|
*/
|
||||||
|
'update:activeStep'(value: number): void;
|
||||||
|
/**
|
||||||
|
* Callback to invoke when an active panel is changed.
|
||||||
|
*/
|
||||||
|
'step-change'(event: StepperChangeEvent): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* **PrimeVue - Stepper**
|
||||||
|
*
|
||||||
|
* _Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/stepper/)
|
||||||
|
* --- ---
|
||||||
|
* 
|
||||||
|
*
|
||||||
|
* @group Component
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
declare class Stepper extends ClassComponent<StepperProps, StepperSlots, StepperEmits> {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
interface GlobalComponents {
|
||||||
|
Stepper: GlobalComponentConstructor<Stepper>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Stepper;
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
<template>
|
||||||
|
<div :class="cx('root')" role="tablist" v-bind="ptmi('root')">
|
||||||
|
<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>
|
||||||
|
<div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
|
||||||
|
<template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
|
||||||
|
<StepperContent
|
||||||
|
v-if="isStepActive(index)"
|
||||||
|
:id="getStepContentId(index)"
|
||||||
|
:template="step?.children?.content"
|
||||||
|
:stepperpanel="step"
|
||||||
|
:index="index"
|
||||||
|
:active="isStepActive(index)"
|
||||||
|
:highlighted="index < d_activeStep"
|
||||||
|
:clickCallback="(event) => onItemClick(event, index)"
|
||||||
|
:prevCallback="(event) => prevCallback(event, index)"
|
||||||
|
:nextCallback="(event) => nextCallback(event, index)"
|
||||||
|
:getStepPT="getStepPT"
|
||||||
|
:aria-labelledby="getStepHeaderActionId(index)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="orientation === 'vertical'">
|
||||||
|
<div
|
||||||
|
v-for="(step, index) of stepperpanels"
|
||||||
|
ref="nav"
|
||||||
|
:key="getStepKey(step, index)"
|
||||||
|
:class="cx('panel', { step, index })"
|
||||||
|
:aria-current="isStepActive(index) ? 'step' : undefined"
|
||||||
|
v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'panel', index) }"
|
||||||
|
data-pc-name="stepperpanel"
|
||||||
|
:data-p-highlight="isStepActive(index)"
|
||||||
|
:data-p-disabled="isItemDisabled(index)"
|
||||||
|
:data-pc-index="index"
|
||||||
|
:data-p-active="isStepActive(index)"
|
||||||
|
>
|
||||||
|
<div :class="cx('stepper.header', { step, index })" v-bind="getStepPT(step, 'header', 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>
|
||||||
|
</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)">
|
||||||
|
<slot name="content">
|
||||||
|
<StepperContent
|
||||||
|
v-show="isStepActive(index)"
|
||||||
|
:id="getStepContentId(index)"
|
||||||
|
:template="step?.children?.content"
|
||||||
|
:stepperpanel="step"
|
||||||
|
:index="index"
|
||||||
|
:active="isStepActive(index)"
|
||||||
|
:highlighted="index < d_activeStep"
|
||||||
|
:clickCallback="(event) => onItemClick(event, index)"
|
||||||
|
:prevCallback="(event) => prevCallback(event, index)"
|
||||||
|
:nextCallback="(event) => nextCallback(event, index)"
|
||||||
|
:getStepPT="getStepPT"
|
||||||
|
:aria-labelledby="getStepHeaderActionId(index)"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<slot v-if="$slots.end" name="end" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { UniqueComponentId } from 'primevue/utils';
|
||||||
|
import { mergeProps } from 'vue';
|
||||||
|
import BaseStepper from './BaseStepper.vue';
|
||||||
|
import StepperContent from './StepperContent.vue';
|
||||||
|
import StepperHeader from './StepperHeader.vue';
|
||||||
|
import StepperSeparator from './StepperSeparator.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Stepper',
|
||||||
|
extends: BaseStepper,
|
||||||
|
nheritAttrs: false,
|
||||||
|
emits: ['update:activeStep', 'step-change'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: this.$attrs.id,
|
||||||
|
d_activeStep: this.activeStep
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$attrs.id': function (newValue) {
|
||||||
|
this.id = newValue || UniqueComponentId();
|
||||||
|
},
|
||||||
|
activeStep(newValue) {
|
||||||
|
this.d_activeStep = newValue;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.id = this.id || UniqueComponentId();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isStep(child) {
|
||||||
|
return child.type.name === 'StepperPanel';
|
||||||
|
},
|
||||||
|
isStepActive(index) {
|
||||||
|
return this.d_activeStep === index;
|
||||||
|
},
|
||||||
|
getStepProp(step, name) {
|
||||||
|
return step.props ? step.props[name] : undefined;
|
||||||
|
},
|
||||||
|
getStepKey(step, index) {
|
||||||
|
return this.getStepProp(step, 'header') || index;
|
||||||
|
},
|
||||||
|
getStepHeaderActionId(index) {
|
||||||
|
return `${this.id}_${index}_header_action`;
|
||||||
|
},
|
||||||
|
getStepContentId(index) {
|
||||||
|
return `${this.id}_${index}_content`;
|
||||||
|
},
|
||||||
|
getStepPT(step, key, index) {
|
||||||
|
const count = this.stepperpanels.length;
|
||||||
|
const stepMetaData = {
|
||||||
|
props: step.props,
|
||||||
|
parent: {
|
||||||
|
instance: this,
|
||||||
|
props: this.$props,
|
||||||
|
state: this.$data
|
||||||
|
},
|
||||||
|
context: {
|
||||||
|
index,
|
||||||
|
count,
|
||||||
|
first: index === 0,
|
||||||
|
last: index === count - 1,
|
||||||
|
active: this.isStepActive(index),
|
||||||
|
highlighted: index < this.d_activeStep,
|
||||||
|
disabled: this.isItemDisabled(index)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return mergeProps(this.ptm(`stepperpanel.${key}`, { stepperpanel: stepMetaData }), this.ptm(`stepperpanel.${key}`, stepMetaData), this.ptmo(this.getStepProp(step, 'pt'), key, stepMetaData));
|
||||||
|
},
|
||||||
|
updateActiveStep(event, index) {
|
||||||
|
this.d_activeStep = index;
|
||||||
|
|
||||||
|
this.$emit('update:activeStep', index);
|
||||||
|
this.$emit('step-change', {
|
||||||
|
originalEvent: event,
|
||||||
|
index
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onItemClick(event, index) {
|
||||||
|
if (this.linear) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index !== this.d_activeStep) {
|
||||||
|
this.updateActiveStep(event, index);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isItemDisabled(index) {
|
||||||
|
return this.linear && !this.isStepActive(index);
|
||||||
|
},
|
||||||
|
prevCallback(event, index) {
|
||||||
|
if (index !== 0) {
|
||||||
|
this.onItemClick(event, index - 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nextCallback(event, index) {
|
||||||
|
if (index !== this.stepperpanels.length - 1) {
|
||||||
|
this.onItemClick(event, index + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
stepperpanels() {
|
||||||
|
return this.$slots.default().reduce((stepperpanels, child) => {
|
||||||
|
if (this.isStep(child)) {
|
||||||
|
stepperpanels.push(child);
|
||||||
|
} else if (child.children && child.children instanceof Array) {
|
||||||
|
child.children.forEach((nestedChild) => {
|
||||||
|
if (this.isStep(nestedChild)) {
|
||||||
|
stepperpanels.push(nestedChild);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return stepperpanels;
|
||||||
|
}, []);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
StepperContent,
|
||||||
|
StepperHeader,
|
||||||
|
StepperSeparator
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:id="id"
|
||||||
|
:class="cx('stepper.content', { stepperpanel, index })"
|
||||||
|
role="tabpanel"
|
||||||
|
:aria-labelledby="ariaLabelledby"
|
||||||
|
v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'content', index) }"
|
||||||
|
data-pc-name="stepperpanel"
|
||||||
|
:data-pc-index="index"
|
||||||
|
:data-p-active="active"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
v-if="template"
|
||||||
|
:is="template"
|
||||||
|
:index="index"
|
||||||
|
:active="active"
|
||||||
|
:highlighted="highlighted"
|
||||||
|
:clickCallback="(event) => onItemClick(event, index)"
|
||||||
|
:prevCallback="(event) => prevCallback(event, index)"
|
||||||
|
:nextCallback="(event) => nextCallback(event, index)"
|
||||||
|
></component>
|
||||||
|
<component v-else :is="stepperpanel"></component>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'StepperContent',
|
||||||
|
hostName: 'Stepper',
|
||||||
|
extends: BaseComponent,
|
||||||
|
props: {
|
||||||
|
id: null,
|
||||||
|
template: null,
|
||||||
|
ariaLabelledby: null,
|
||||||
|
stepperpanel: null,
|
||||||
|
index: null,
|
||||||
|
active: null,
|
||||||
|
highlighted: null,
|
||||||
|
clickCallback: null,
|
||||||
|
prevCallback: null,
|
||||||
|
nextCallback: null,
|
||||||
|
getStepPT: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<component v-if="template" :is="template" :index="index" :active="active" :highlighted="highlighted" :class="cx('stepper.action')" :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>
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<component v-if="template" :is="template" :class="separatorClass" :index="index" :active="active" :highlighted="highlighted" />
|
||||||
|
<span v-else :class="separatorClass" aria-hidden="true" v-bind="getStepPT" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'StepperSeparator',
|
||||||
|
hostName: 'Stepper',
|
||||||
|
extends: BaseComponent,
|
||||||
|
props: {
|
||||||
|
template: null,
|
||||||
|
separatorClass: null,
|
||||||
|
stepperpanel: null,
|
||||||
|
index: null,
|
||||||
|
active: null,
|
||||||
|
highlighted: null,
|
||||||
|
getStepPT: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"main": "./stepper.cjs.js",
|
||||||
|
"module": "./stepper.esm.js",
|
||||||
|
"unpkg": "./stepper.min.js",
|
||||||
|
"types": "./Stepper.d.ts",
|
||||||
|
"browser": {
|
||||||
|
"./sfc": "./Stepper.vue"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { BaseStyle } from '../../base/style';
|
||||||
|
|
||||||
|
export interface StepperStyle extends BaseStyle {}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
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
|
||||||
|
}
|
||||||
|
],
|
||||||
|
navContainer: 'p-stepper-nav-container',
|
||||||
|
nav: 'p-stepper-nav',
|
||||||
|
stepper: {
|
||||||
|
header: ({ instance, step, index }) => [
|
||||||
|
'p-stepper-header',
|
||||||
|
{
|
||||||
|
'p-highlight': instance.isStepActive(index),
|
||||||
|
'p-disabled': instance.isItemDisabled(step, index)
|
||||||
|
}
|
||||||
|
],
|
||||||
|
action: 'p-stepper-action',
|
||||||
|
number: 'p-stepper-number',
|
||||||
|
title: 'p-stepper-title',
|
||||||
|
separator: 'p-stepper-separator',
|
||||||
|
toggleableContent: 'p-stepper-toggleable-content',
|
||||||
|
content: ({ props }) => [
|
||||||
|
'p-stepper-content',
|
||||||
|
{
|
||||||
|
'p-toggleable-content': props.orientation === 'vertical'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
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
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"main": "./stepperpanel.cjs.js",
|
||||||
|
"module": "./stepperpanel.esm.js",
|
||||||
|
"unpkg": "./stepperpanel.min.js",
|
||||||
|
"types": "./StepperPanel.d.ts"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
import BaseComponent from 'primevue/basecomponent';
|
||||||
|
import StepperPanelStyle from 'primevue/stepperpanel/style';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BaseStepperPanel',
|
||||||
|
extends: BaseComponent,
|
||||||
|
props: {
|
||||||
|
header: null
|
||||||
|
},
|
||||||
|
style: StepperPanelStyle,
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
$parentInstance: this
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* StepperPanel is a helper component for StepperPanel component.
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/stepper/)
|
||||||
|
*
|
||||||
|
* @module stepperpanel
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { TransitionProps, VNode } from 'vue';
|
||||||
|
import { ComponentHooks } from '../basecomponent';
|
||||||
|
import { PassThroughOptions } from '../passthrough';
|
||||||
|
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
|
||||||
|
|
||||||
|
export declare type StepperPanelPassThroughOptionType = StepperPanelPassThroughAttributes | ((options: StepperPanelPassThroughMethodOptions) => StepperPanelPassThroughAttributes | string) | string | null | undefined;
|
||||||
|
|
||||||
|
export declare type StepperPanelPassThroughTransitionType = TransitionProps | ((options: StepperPanelPassThroughMethodOptions) => TransitionProps) | undefined;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) option method.
|
||||||
|
*/
|
||||||
|
export interface StepperPanelPassThroughMethodOptions {
|
||||||
|
/**
|
||||||
|
* Defines instance.
|
||||||
|
*/
|
||||||
|
instance: any;
|
||||||
|
/**
|
||||||
|
* Defines valid properties.
|
||||||
|
*/
|
||||||
|
props: StepperPanelProps;
|
||||||
|
/**
|
||||||
|
* Defines current options.
|
||||||
|
*/
|
||||||
|
context: StepperPanelContext;
|
||||||
|
/**
|
||||||
|
* Defines valid attributes.
|
||||||
|
*/
|
||||||
|
attrs: any;
|
||||||
|
/**
|
||||||
|
* Defines parent options.
|
||||||
|
*/
|
||||||
|
parent: any;
|
||||||
|
/**
|
||||||
|
* Defines passthrough(pt) options in global config.
|
||||||
|
*/
|
||||||
|
global: object | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom passthrough(pt) options.
|
||||||
|
* @see {@link StepperPanelProps.pt}
|
||||||
|
*/
|
||||||
|
export interface StepperPanelPassThroughOptions {
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the root's DOM element.
|
||||||
|
*/
|
||||||
|
root?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the header's DOM element.
|
||||||
|
*/
|
||||||
|
header?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the action's DOM element.
|
||||||
|
*/
|
||||||
|
action?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the number's DOM element.
|
||||||
|
*/
|
||||||
|
number?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the title's DOM element.
|
||||||
|
*/
|
||||||
|
title?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the separator's DOM element.
|
||||||
|
*/
|
||||||
|
separator?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the content's DOM element.
|
||||||
|
*/
|
||||||
|
content?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the panel's DOM element.
|
||||||
|
*/
|
||||||
|
panel?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to the toggleable content's DOM element.
|
||||||
|
*/
|
||||||
|
toggleableContent?: StepperPanelPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Used to control Vue Transition API.
|
||||||
|
*/
|
||||||
|
transition?: StepperPanelPassThroughTransitionType;
|
||||||
|
/**
|
||||||
|
* Used to manage all lifecycle hooks.
|
||||||
|
* @see {@link BaseComponent.ComponentHooks}
|
||||||
|
*/
|
||||||
|
hooks?: ComponentHooks;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StepperPanelPassThroughAttributes {
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid properties in StepperPanel component.
|
||||||
|
*/
|
||||||
|
export interface StepperPanelProps {
|
||||||
|
/**
|
||||||
|
* Orientation of tab headers.
|
||||||
|
*/
|
||||||
|
header?: string | undefined;
|
||||||
|
/**
|
||||||
|
* Used to pass attributes to DOM elements inside the component.
|
||||||
|
* @type {StepperPanelPassThroughOptions}
|
||||||
|
*/
|
||||||
|
pt?: PassThrough<StepperPanelPassThroughOptions>;
|
||||||
|
/**
|
||||||
|
* Used to configure passthrough(pt) options of the component.
|
||||||
|
* @type {PassThroughOptions}
|
||||||
|
*/
|
||||||
|
ptOptions?: PassThroughOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines current options in StepperPanel component.
|
||||||
|
*/
|
||||||
|
export interface StepperPanelContext {
|
||||||
|
/**
|
||||||
|
* Current index of the stepperpanel.
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
/**
|
||||||
|
* Count of stepperpanels
|
||||||
|
*/
|
||||||
|
count: number;
|
||||||
|
/**
|
||||||
|
* Whether the stepperpanel is first.
|
||||||
|
*/
|
||||||
|
first: boolean;
|
||||||
|
/**
|
||||||
|
* Whether the stepperpanel is last.
|
||||||
|
*/
|
||||||
|
last: boolean;
|
||||||
|
/**
|
||||||
|
* Whether the stepperpanel is active.
|
||||||
|
*/
|
||||||
|
active: boolean;
|
||||||
|
/**
|
||||||
|
* Whether the stepperpanel is highlighted.
|
||||||
|
*/
|
||||||
|
highlighted: boolean;
|
||||||
|
/**
|
||||||
|
* Whether the stepperpanel is disabled.
|
||||||
|
*/
|
||||||
|
disabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines valid slots in StepperPanel slots.
|
||||||
|
*/
|
||||||
|
export interface StepperPanelSlots {
|
||||||
|
/**
|
||||||
|
* Custom content template.
|
||||||
|
*/
|
||||||
|
default(): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom header template.
|
||||||
|
*/
|
||||||
|
header(scope: {
|
||||||
|
/**
|
||||||
|
* Index of the stepperpanel
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
/**
|
||||||
|
* Current active state of the stepperpanel
|
||||||
|
*/
|
||||||
|
active: boolean;
|
||||||
|
/**
|
||||||
|
* Current highlighted state of the stepperpanel
|
||||||
|
*/
|
||||||
|
highlighted: boolean;
|
||||||
|
/**
|
||||||
|
* Style class of the stepperpanel
|
||||||
|
*/
|
||||||
|
class: string;
|
||||||
|
/**
|
||||||
|
* Header click function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
clickCallback: (event: Event) => void;
|
||||||
|
}): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom content template.
|
||||||
|
*/
|
||||||
|
content(scope: {
|
||||||
|
/**
|
||||||
|
* Index of the stepperpanel
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
/**
|
||||||
|
* Current active state of the stepperpanel
|
||||||
|
*/
|
||||||
|
active: boolean;
|
||||||
|
/**
|
||||||
|
* Current highlighted state of the stepperpanel
|
||||||
|
*/
|
||||||
|
highlighted: boolean;
|
||||||
|
/**
|
||||||
|
* Style class of the stepperpanel
|
||||||
|
*/
|
||||||
|
class: string;
|
||||||
|
/**
|
||||||
|
* Content click function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
clickCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Content previous panel click function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
prevCallback: (event: Event) => void;
|
||||||
|
/**
|
||||||
|
* Content next panel click function.
|
||||||
|
* @param {Event} event - Browser event
|
||||||
|
*/
|
||||||
|
nextCallback: (event: Event) => void;
|
||||||
|
}): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom separator template.
|
||||||
|
*/
|
||||||
|
separator(scope: {
|
||||||
|
/**
|
||||||
|
* Index of the stepperpanel
|
||||||
|
*/
|
||||||
|
index: number;
|
||||||
|
/**
|
||||||
|
* Current active state of the stepperpanel
|
||||||
|
*/
|
||||||
|
active: boolean;
|
||||||
|
/**
|
||||||
|
* Current highlighted state of the stepperpanel
|
||||||
|
*/
|
||||||
|
highlighted: boolean;
|
||||||
|
/**
|
||||||
|
* Style class of the stepperpanel
|
||||||
|
*/
|
||||||
|
class: string;
|
||||||
|
}): VNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StepperPanelEmits {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* **PrimeVue - StepperPanel**
|
||||||
|
*
|
||||||
|
* _StepperPanel is a helper component for Stepper component._
|
||||||
|
*
|
||||||
|
* [Live Demo](https://www.primevue.org/stepper/)
|
||||||
|
* --- ---
|
||||||
|
* 
|
||||||
|
*
|
||||||
|
* @group Component
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
declare class StepperPanel extends ClassComponent<StepperPanelProps, StepperPanelSlots, StepperPanelEmits> {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
interface GlobalComponents {
|
||||||
|
StepperPanel: GlobalComponentConstructor<StepperPanel>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StepperPanel;
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<template>
|
||||||
|
<slot />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BaseStepperPanel from './BaseStepperPanel.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'StepperPanel',
|
||||||
|
extends: BaseStepperPanel
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"main": "./stepperpanel.cjs.js",
|
||||||
|
"module": "./stepperpanel.esm.js",
|
||||||
|
"unpkg": "./stepperpanel.min.js",
|
||||||
|
"types": "./StepperPanel.d.ts",
|
||||||
|
"browser": {
|
||||||
|
"./sfc": "./StepperPanel.vue"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { BaseStyle } from '../../base/style';
|
||||||
|
|
||||||
|
export interface StepperPanelStyle extends BaseStyle {}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export default {};
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"main": "./stepperpanelstyle.cjs.js",
|
||||||
|
"module": "./stepperpanelstyle.esm.js",
|
||||||
|
"unpkg": "./stepperpanelstyle.min.js",
|
||||||
|
"types": "./StepperPanelStyle.d.ts"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue