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