Stepper demos added
tugcekucukoglu
parent
37c423b0c2
commit
14378cd8ec
|
|
@ -270,6 +270,11 @@
|
|||
"name": "Splitter",
|
||||
"to": "/splitter"
|
||||
},
|
||||
{
|
||||
"name": "Stepper",
|
||||
"to": "/stepper",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "TabView",
|
||||
"to": "/tabview"
|
||||
|
|
|
|||
|
|
@ -5364,7 +5364,7 @@
|
|||
}
|
||||
],
|
||||
"methods": [],
|
||||
"extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
|
||||
"extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49495,6 +49495,755 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"stepper": {
|
||||
"description": "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.\n\n[Live Demo](https://www.primevue.org/stepper/)",
|
||||
"components": {
|
||||
"default": {
|
||||
"description": "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.",
|
||||
"methods": {
|
||||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperPassThroughMethodOptions": {
|
||||
"description": "Custom passthrough(pt) option method.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "instance",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines instance."
|
||||
},
|
||||
{
|
||||
"name": "props",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "StepperProps",
|
||||
"default": "",
|
||||
"description": "Defines valid properties."
|
||||
},
|
||||
{
|
||||
"name": "state",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "StepperState",
|
||||
"default": "",
|
||||
"description": "Defines current inline state."
|
||||
},
|
||||
{
|
||||
"name": "attrs",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines valid attributes."
|
||||
},
|
||||
{
|
||||
"name": "parent",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines parent options."
|
||||
},
|
||||
{
|
||||
"name": "global",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "undefined | object",
|
||||
"default": "",
|
||||
"description": "Defines passthrough(pt) options in global config."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPassThroughOptions": {
|
||||
"description": "Custom passthrough(pt) options.",
|
||||
"relatedProp": "StepperProps.pt",
|
||||
"props": [
|
||||
{
|
||||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "navContainer",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the nav container's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "nav",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the nav's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "panelContainer",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the panel container's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "stepperpanel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the end handler's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "hooks",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ComponentHooks",
|
||||
"default": "",
|
||||
"description": "Used to manage all lifecycle hooks."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPassThroughAttributes": {
|
||||
"description": "Custom passthrough attributes for each DOM elements",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "[key: string]",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperState": {
|
||||
"description": "Defines current inline state in Stepper component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "d_activeStep",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"description": "Current active index state."
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Unique id for the Stepper component."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperChangeEvent": {
|
||||
"description": "Custom tab change event.",
|
||||
"relatedProp": "StepperEmits['step-change']",
|
||||
"props": [
|
||||
{
|
||||
"name": "originalEvent",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "Event",
|
||||
"default": "",
|
||||
"description": "Browser event"
|
||||
},
|
||||
{
|
||||
"name": "index",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"description": "Index of the selected stepper panel"
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperProps": {
|
||||
"description": "Defines valid properties in Stepper component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "activeStep",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"description": "Active step index of stepper."
|
||||
},
|
||||
{
|
||||
"name": "orientation",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "\"horizontal\" | \"vertical\"",
|
||||
"default": "horizontal",
|
||||
"description": "Orientation of the stepper."
|
||||
},
|
||||
{
|
||||
"name": "linear",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "Whether the steps are clickable or not."
|
||||
},
|
||||
{
|
||||
"name": "pt",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThrough<StepperPassThroughOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to DOM elements inside the component."
|
||||
},
|
||||
{
|
||||
"name": "ptOptions",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThroughOptions",
|
||||
"default": "",
|
||||
"description": "Used to configure passthrough(pt) options of the component."
|
||||
},
|
||||
{
|
||||
"name": "unstyled",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"description": "When enabled, it removes component related styles in the core."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperSlots": {
|
||||
"description": "Defines valid slots in Stepper component.",
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": []
|
||||
},
|
||||
"StepperEmits": {
|
||||
"description": "Defines valid emits in Stepper component.",
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": [
|
||||
{
|
||||
"name": "update:activeStep",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "value",
|
||||
"optional": false,
|
||||
"type": "number",
|
||||
"description": "New value."
|
||||
}
|
||||
],
|
||||
"returnType": "void",
|
||||
"description": "Emitted when the value changes."
|
||||
},
|
||||
{
|
||||
"name": "step-change",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "event",
|
||||
"optional": false,
|
||||
"type": "StepperChangeEvent"
|
||||
}
|
||||
],
|
||||
"returnType": "void",
|
||||
"description": "Callback to invoke when an active panel is changed."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"types": {
|
||||
"description": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperPassThroughOptionType": {
|
||||
"values": "StepperPassThroughAttributes | (options: StepperPassThroughMethodOptions) => undefined | string | null | undefined"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stepper/style/StepperStyle": {
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperStyle": {
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "name",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "css",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "classes",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "inlineStyles",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "loadStyle",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "getStyleSheet",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
}
|
||||
],
|
||||
"methods": [],
|
||||
"extendedTypes": "BaseStyle"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stepperpanel": {
|
||||
"description": "StepperPanel is a helper component for StepperPanel component.\n\n[Live Demo](https://www.primevue.org/stepper/)",
|
||||
"components": {
|
||||
"default": {
|
||||
"description": "StepperPanel is a helper component for Stepper component.",
|
||||
"methods": {
|
||||
"description": "Defines methods that can be accessed by the component's reference.",
|
||||
"values": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperPanelPassThroughMethodOptions": {
|
||||
"description": "Custom passthrough(pt) option method.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "instance",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines instance."
|
||||
},
|
||||
{
|
||||
"name": "props",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelProps",
|
||||
"default": "",
|
||||
"description": "Defines valid properties."
|
||||
},
|
||||
{
|
||||
"name": "context",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelContext",
|
||||
"default": "",
|
||||
"description": "Defines current options."
|
||||
},
|
||||
{
|
||||
"name": "attrs",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines valid attributes."
|
||||
},
|
||||
{
|
||||
"name": "parent",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any",
|
||||
"default": "",
|
||||
"description": "Defines parent options."
|
||||
},
|
||||
{
|
||||
"name": "global",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "undefined | object",
|
||||
"default": "",
|
||||
"description": "Defines passthrough(pt) options in global config."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPanelPassThroughOptions": {
|
||||
"description": "Custom passthrough(pt) options.",
|
||||
"relatedProp": "StepperPanelProps.pt",
|
||||
"props": [
|
||||
{
|
||||
"name": "root",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the root's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "header",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the header's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "action",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the action's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "number",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the number's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the title's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "separator",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the separator's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the content's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "panel",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the panel's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "toggleableContent",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughOptionType",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to the toggleable content's DOM element."
|
||||
},
|
||||
{
|
||||
"name": "transition",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "StepperPanelPassThroughTransitionType",
|
||||
"default": "",
|
||||
"description": "Used to control Vue Transition API."
|
||||
},
|
||||
{
|
||||
"name": "hooks",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "ComponentHooks",
|
||||
"default": "",
|
||||
"description": "Used to manage all lifecycle hooks."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPanelPassThroughAttributes": {
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "[key: string]",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "any"
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPanelProps": {
|
||||
"description": "Defines valid properties in StepperPanel component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "header",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": "",
|
||||
"description": "Orientation of tab headers."
|
||||
},
|
||||
{
|
||||
"name": "pt",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThrough<StepperPanelPassThroughOptions>",
|
||||
"default": "",
|
||||
"description": "Used to pass attributes to DOM elements inside the component."
|
||||
},
|
||||
{
|
||||
"name": "ptOptions",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "PassThroughOptions",
|
||||
"default": "",
|
||||
"description": "Used to configure passthrough(pt) options of the component."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPanelContext": {
|
||||
"description": "Defines current options in StepperPanel component.",
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "index",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"description": "Current index of the stepperpanel."
|
||||
},
|
||||
{
|
||||
"name": "count",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"description": "Count of stepperpanels"
|
||||
},
|
||||
{
|
||||
"name": "first",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "",
|
||||
"description": "Whether the stepperpanel is first."
|
||||
},
|
||||
{
|
||||
"name": "last",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "",
|
||||
"description": "Whether the stepperpanel is last."
|
||||
},
|
||||
{
|
||||
"name": "active",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "",
|
||||
"description": "Whether the stepperpanel is active."
|
||||
},
|
||||
{
|
||||
"name": "highlighted",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "",
|
||||
"description": "Whether the stepperpanel is highlighted."
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"optional": false,
|
||||
"readonly": false,
|
||||
"type": "boolean",
|
||||
"default": "",
|
||||
"description": "Whether the stepperpanel is disabled."
|
||||
}
|
||||
],
|
||||
"methods": []
|
||||
},
|
||||
"StepperPanelSlots": {
|
||||
"description": "Defines valid slots in StepperPanel slots.",
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": [
|
||||
{
|
||||
"name": "default",
|
||||
"parameters": [],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom content template."
|
||||
},
|
||||
{
|
||||
"name": "header",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Header click function.</span>\n}"
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom header template."
|
||||
},
|
||||
{
|
||||
"name": "content",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">clickCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Content click function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">prevCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Content previous panel click function.</span>\n\t <span class=\"ml-3 doc-option-parameter-name\">nextCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) ⇒ void</span>, <span class=\"doc-option-parameter-type\">// Content next panel click function.</span>\n}"
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom content template."
|
||||
},
|
||||
{
|
||||
"name": "separator",
|
||||
"parameters": [
|
||||
{
|
||||
"name": "scope",
|
||||
"optional": false,
|
||||
"type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">index</span>: <span class=\"doc-option-parameter-type\">number</span>, <span class=\"doc-option-parameter-type\">// Index of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">active</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current active state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">highlighted</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current highlighted state of the stepperpanel</span>\n \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the stepperpanel</span>\n }"
|
||||
}
|
||||
],
|
||||
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
|
||||
"description": "Custom separator template."
|
||||
}
|
||||
]
|
||||
},
|
||||
"StepperPanelEmits": {
|
||||
"relatedProp": "",
|
||||
"props": [],
|
||||
"methods": []
|
||||
}
|
||||
}
|
||||
},
|
||||
"types": {
|
||||
"description": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperPanelPassThroughOptionType": {
|
||||
"values": "StepperPanelPassThroughAttributes | (options: StepperPanelPassThroughMethodOptions) => undefined | string | null | undefined"
|
||||
},
|
||||
"StepperPanelPassThroughTransitionType": {
|
||||
"values": "TransitionProps | (options: StepperPanelPassThroughMethodOptions) => TransitionProps | undefined"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"stepperpanel/style/StepperPanelStyle": {
|
||||
"interfaces": {
|
||||
"description": "Defines the custom interfaces used by the module.",
|
||||
"eventDescription": "Defines the custom events used by the component's emit.",
|
||||
"methodDescription": "Defines methods that can be accessed by the component's reference.",
|
||||
"typeDescription": "Defines the custom types used by the module.",
|
||||
"values": {
|
||||
"StepperPanelStyle": {
|
||||
"relatedProp": "",
|
||||
"props": [
|
||||
{
|
||||
"name": "name",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "css",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "classes",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "inlineStyles",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "object",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "loadStyle",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
},
|
||||
{
|
||||
"name": "getStyleSheet",
|
||||
"optional": true,
|
||||
"readonly": false,
|
||||
"type": "Function",
|
||||
"default": ""
|
||||
}
|
||||
],
|
||||
"methods": [],
|
||||
"extendedTypes": "BaseStyle"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"steps": {
|
||||
"description": "Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.\n\n[Live Demo](https://www.primevue.org/steps/)",
|
||||
"components": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<h3>Screen Reader</h3>
|
||||
<p>
|
||||
Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a
|
||||
<i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and
|
||||
<i>aria-labelledby</i> reference to the header as the accessible name.
|
||||
</p>
|
||||
|
||||
<h3>Tab Header Keyboard Support</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<i>tab</i>
|
||||
</td>
|
||||
<td>Moves focus through the header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>enter</i>
|
||||
</td>
|
||||
<td>Activates the focused stepper header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<i>space</i>
|
||||
</td>
|
||||
<td>Activates the focused stepper header.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Stepper consists of one or more StepperPanel elements.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<!-- <Button label="Confirm" /> -->
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import Stepper from 'primevue/stepper';
|
||||
import StepperPanel from 'primevue/stepperpanel';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column justify-content-center">
|
||||
<Stepper
|
||||
v-model:activeStep="active"
|
||||
:pt="{
|
||||
stepperpanel: {
|
||||
separator: ({ context }) => ({
|
||||
style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
|
||||
})
|
||||
}
|
||||
}"
|
||||
>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
|
||||
<span class="text-lg ml-2">Account</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
|
||||
<h3 class="text-center mt-3">Personal Details</h3>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-user" />
|
||||
</InputIcon>
|
||||
<InputText id="input" v-model="name" type="text" placeholder="Name" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-envelope" />
|
||||
</InputIcon>
|
||||
<InputText id="email" v-model="email" type="email" placeholder="Email" />
|
||||
</IconField>
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText v-model="password" type="text" placeholder="Password" />
|
||||
</div>
|
||||
<div class="field p-fluid">
|
||||
<InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
|
||||
</div>
|
||||
</div>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar
|
||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
|
||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
||||
size="large"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="text-lg ml-2">Cart</span>
|
||||
</div>
|
||||
</template>
|
||||
<DataView :value="products">
|
||||
<template #header>
|
||||
<h3 class="text-center">Cart Details</h3>
|
||||
</template>
|
||||
<template #list="slotProps">
|
||||
<div class="grid grid-nogutter">
|
||||
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
|
||||
<div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
|
||||
<div class="md:w-10rem relative">
|
||||
<img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
|
||||
</div>
|
||||
<div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
|
||||
<div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
|
||||
<div>
|
||||
<span class="font-medium text-secondary text-sm">{{ item.category }}</span>
|
||||
<div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="surface-100 p-1" style="border-radius: 30px">
|
||||
<div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
|
||||
<span class="text-900 font-medium text-sm">{{ item.rating }}</span>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column md:align-items-end gap-5">
|
||||
<span class="text-xl font-semibold text-900">${{ item.price }}</span>
|
||||
<div class="flex flex-row-reverse md:flex-row gap-2">
|
||||
<InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</StepperPanel>
|
||||
<StepperPanel>
|
||||
<template #header="slotProps">
|
||||
<div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
|
||||
<Avatar
|
||||
:icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
|
||||
:style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
|
||||
size="large"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="text-lg ml-2">Billing</span>
|
||||
</div>
|
||||
</template>
|
||||
<h3 class="text-center mt-3">Payment</h3>
|
||||
<div class="grid formgrid p-fluid">
|
||||
<div class="col-12 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">Card Number</label>
|
||||
<InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
|
||||
<InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 field mb-4">
|
||||
<label class="text-900 font-medium mb-3 ml-1">CVC</label>
|
||||
<InputMask v-model="cvc" mask="999" placeholder="999" />
|
||||
</div>
|
||||
<div class="col-12 field mb-0">
|
||||
<label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
|
||||
<InputText id="holderName" type="text" class="w-full mb-3" />
|
||||
</div>
|
||||
</div>
|
||||
</StepperPanel>
|
||||
<template #end>
|
||||
<div v-if="!completed" class="flex justify-content-end gap-2">
|
||||
<Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
|
||||
<Button v-if="active !== 2" label="Continue" @click="active += 1" />
|
||||
<Button
|
||||
v-if="active === 2"
|
||||
label="Complete"
|
||||
@click="
|
||||
() => {
|
||||
active = null;
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="flex flex-column justify-content-center mx-auto">
|
||||
<Message severity="success">The order was submitted successfully.</Message>
|
||||
<Button
|
||||
label="New Order"
|
||||
class="w-10rem mx-auto"
|
||||
@click="
|
||||
() => {
|
||||
active = 0;
|
||||
completed = false;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div>
|
||||
<!-- <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
|
||||
<Stepper v-model:activeStep="active" orientation="vertical">
|
||||
<StepperPanel v-for="(step, index) of steps" :key="step.id">
|
||||
<template #header="slotProps">
|
||||
<div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
|
||||
<Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
|
||||
<span>{{ step.header }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ clickCallback }">
|
||||
<div class="flex flex-column gap-5">
|
||||
<span>{{ step.content }}</span>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
|
||||
<Button
|
||||
v-else
|
||||
label="Finish"
|
||||
@click="
|
||||
(event) => {
|
||||
clickCallback(event, null);
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<template v-if="completed" #end>
|
||||
<div class="flex">
|
||||
<Button
|
||||
severity="contrast"
|
||||
label="Reset"
|
||||
@click="
|
||||
completed = false;
|
||||
active = 0;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div>
|
||||
<div class="card flex flex-column justify-content-center gap-5" style="height: auto">
|
||||
<Stepper v-model:activeStep="active">
|
||||
<StepperPanel v-for="(step, index) of steps" :key="step.id">
|
||||
<template #header="slotProps">
|
||||
<div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
|
||||
<Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
|
||||
<span>{{ step.header }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #content="{ clickCallback }">
|
||||
<div class="flex flex-column gap-5">
|
||||
<span>{{ step.content }}</span>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
|
||||
<Button
|
||||
v-else
|
||||
label="Finish"
|
||||
@click="
|
||||
(event) => {
|
||||
clickCallback(event, null);
|
||||
completed = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<template v-if="completed" #end>
|
||||
<div class="flex">
|
||||
<Button
|
||||
severity="contrast"
|
||||
label="Reset"
|
||||
@click="
|
||||
completed = false;
|
||||
active = 0;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Stepper>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ProductService } from '@/service/ProductService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
completed: false,
|
||||
products: null,
|
||||
name: null,
|
||||
email: null,
|
||||
password: null,
|
||||
cpassword: null,
|
||||
quantity: [1, 2],
|
||||
selectedValue: null,
|
||||
cc: null,
|
||||
cvc: null,
|
||||
exp: null,
|
||||
steps: [
|
||||
{
|
||||
id: 0,
|
||||
header: 'Long Header 1',
|
||||
content: 'Content 1',
|
||||
icon: 'pi pi-cog'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
header: 'Long Header 2',
|
||||
content: 'Content 2',
|
||||
icon: 'pi pi-discord'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
header: 'Long Header 3',
|
||||
content: 'Content 3',
|
||||
icon: 'pi pi-twitter'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<Stepper orientation="vertical">
|
||||
<StepperPanel header="Header 1">
|
||||
<template #content="{ nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 2">
|
||||
<template #content="{ prevCallback, nextCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<Button label="Next" @click="(event) => nextCallback(event)" />
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
<StepperPanel header="Header 3">
|
||||
<template #content="{ prevCallback }">
|
||||
<p class="m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<div class="flex gap-2 justify-content-end">
|
||||
<Button label="Prev" severity="secondary" @click="(event) => prevCallback(event)" />
|
||||
<!-- <Button label="Confirm" /> -->
|
||||
</div>
|
||||
</template>
|
||||
</StepperPanel>
|
||||
</Stepper>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>{{ $attrs.description }}</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Stepper Pass Through</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
|
||||
import PTImage from './PTImage.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'pt.image',
|
||||
label: 'Wireframe',
|
||||
component: PTImage
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepper',
|
||||
label: 'Stepper PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('Stepper')
|
||||
},
|
||||
{
|
||||
id: 'pt.doc.stepperpanel',
|
||||
label: 'StepperPanel PT Options',
|
||||
component: DocApiTable,
|
||||
data: getPTOption('StepperPanel')
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-stepper</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-horizontal</td>
|
||||
<td>Container element with horizontal layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-vertical</td>
|
||||
<td>Container element with vertical layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-nav-container</td>
|
||||
<td>Container element of navigator container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-nav</td>
|
||||
<td>Container element of navigator.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-panels</td>
|
||||
<td>Container element of stepper panel elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-panel</td>
|
||||
<td>Container element of stepper panel element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-header</td>
|
||||
<td>Container element of stepper header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-action</td>
|
||||
<td>Container element of stepper action.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-number</td>
|
||||
<td>Container element of stepper number.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-title</td>
|
||||
<td>Container element of stepper title.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-separator</td>
|
||||
<td>Container element of stepper separator.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-toggleable-content</td>
|
||||
<td>Container element of stepper toggleable content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-stepper-content</td>
|
||||
<td>Container element of stepper content.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
|
||||
Tailwind CSS.
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Stepper Theming</h1>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'theming.styled',
|
||||
label: 'Styled',
|
||||
component: StyledDoc
|
||||
},
|
||||
{
|
||||
id: 'theming.unstyled',
|
||||
label: 'Unstyled',
|
||||
description: 'Theming is implemented with the pass through properties in unstyled mode.',
|
||||
children: [
|
||||
{
|
||||
id: 'theming.tailwind',
|
||||
label: 'Tailwind',
|
||||
component: TailwindDoc
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -2,8 +2,12 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>Label of the tag is defined with the <i>value</i> property.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Tag value="New"></Tag>
|
||||
<div class="card">
|
||||
<Stepper>
|
||||
<StepperPanel header="Header 1">Content 1</StepperPanel>
|
||||
<StepperPanel header="Header 2">Content 2</StepperPanel>
|
||||
<StepperPanel header="Header 3">Content 3</StepperPanel>
|
||||
</Stepper>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const button = ['Button', 'SpeedDial', 'SplitButton'];
|
|||
|
||||
const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];
|
||||
|
||||
const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'TabView', 'TabPanel', 'Toolbar'];
|
||||
const panel = ['Accordion', 'AccordionTab', 'Card', 'DeferredContent', 'Divider', 'Fieldset', 'Panel', 'ScrollPanel', 'Splitter', 'SplitterPanel', 'Stepper', 'StepperPanel', 'TabView', 'TabPanel', 'Toolbar'];
|
||||
|
||||
const overlay = [{ name: 'ConfirmDialog', use: { as: 'ConfirmationService' } }, { name: 'ConfirmPopup', use: { as: 'ConfirmationService' } }, 'Dialog', { name: 'DynamicDialog', use: { as: 'DialogService' } }, 'OverlayPanel', 'Sidebar'];
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,8 @@ const STYLE_ALIAS = {
|
|||
'primevue/splitter/style': path.resolve(__dirname, './components/lib/splitter/style/SplitterStyle.js'),
|
||||
'primevue/splitterpanel/style': path.resolve(__dirname, './components/lib/splitterpanel/style/SplitterPanelStyle.js'),
|
||||
'primevue/steps/style': path.resolve(__dirname, './components/lib/steps/style/StepsStyle.js'),
|
||||
'primevue/stepper/style': path.resolve(__dirname, './components/lib/stepper/style/StepperStyle.js'),
|
||||
'primevue/stepperpanel/style': path.resolve(__dirname, './components/lib/stepperpanel/style/StepperPanelStyle.js'),
|
||||
'primevue/tabmenu/style': path.resolve(__dirname, './components/lib/tabmenu/style/TabMenuStyle.js'),
|
||||
'primevue/tabpanel/style': path.resolve(__dirname, './components/lib/tabpanel/style/TabPanelStyle.js'),
|
||||
'primevue/tabview/style': path.resolve(__dirname, './components/lib/tabview/style/TabViewStyle.js'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<DocComponent
|
||||
title="Vue Stepper Component"
|
||||
header="Stepper"
|
||||
description="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."
|
||||
:componentDocs="docs"
|
||||
:themingDocs="themingDoc"
|
||||
:ptTabComponent="ptComponent"
|
||||
:apiDocs="['Stepper', 'StepperPanel']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AccessibilityDoc from '@/doc/stepper/AccessibilityDoc.vue';
|
||||
import BasicDoc from '@/doc/stepper/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/stepper/ImportDoc.vue';
|
||||
import TemplateDoc from '@/doc/stepper/TemplateDoc.vue';
|
||||
import VerticalDoc from '@/doc/stepper/VerticalDoc.vue';
|
||||
import PTComponent from '@/doc/stepper/pt/index.vue';
|
||||
import ThemingDoc from '@/doc/stepper/theming/index.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
label: 'Basic',
|
||||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'vertical',
|
||||
label: 'Vertical',
|
||||
component: VerticalDoc
|
||||
},
|
||||
{
|
||||
id: 'template',
|
||||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
component: AccessibilityDoc
|
||||
}
|
||||
],
|
||||
ptComponent: PTComponent,
|
||||
themingDoc: ThemingDoc
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue