Skip to content
This repository was archived by the owner on Jun 1, 2023. It is now read-only.

Commit 88587a9

Browse files
cristijoracristijora
authored
Update README.md
1 parent 7e8a466 commit 88587a9

File tree

1 file changed

+102
-104
lines changed

1 file changed

+102
-104
lines changed

‎docs/README.md‎

Lines changed: 102 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,108 @@ components: {
4646
</tab-content>
4747
</form-wizard>
4848
```
49+
# Props
50+
## Form Wizard props
51+
```js
52+
props: {
53+
title: {
54+
type: String,
55+
default: 'Awesome Wizard'
56+
},
57+
subtitle: {
58+
type: String,
59+
default: 'Split a complicated flow in multiple steps'
60+
},
61+
nextButtonText: {
62+
type: String,
63+
default: 'Next'
64+
},
65+
backButtonText: {
66+
type: String,
67+
default: 'Back'
68+
},
69+
finishButtonText: {
70+
type: String,
71+
default: 'Finish'
72+
},
73+
/***
74+
* Sets validation (on/off) for back button. By default back button ignores validation
75+
*/
76+
validateOnBack: Boolean,
77+
/***
78+
* Applies to text, border and circle
79+
*/
80+
color: {
81+
type: String,
82+
default: '#e74c3c' //circle, border and text color
83+
},
84+
/***
85+
* Is set to current step and text when beforeChange function fails
86+
*/
87+
errorColor: {
88+
type: String,
89+
default: '#8b0000'
90+
},
91+
/**
92+
* Can take one of the following values: 'circle|square|tab`
93+
*/
94+
shape: {
95+
type: String,
96+
default: 'circle'
97+
},
98+
/**
99+
* name of the transition when transition between steps
100+
*/
101+
transition: {
102+
type: String,
103+
default: '' //name of the transition when transition between steps
104+
},
105+
/***
106+
* Index of the initial tab to display
107+
*/
108+
startIndex: {
109+
type: Number,
110+
default: 0
111+
}
112+
}
113+
```
114+
115+
## Tab content props
116+
```js
117+
props: {
118+
title: {
119+
type: String,
120+
default: ''
121+
},
122+
/***
123+
* Icon name for the upper circle corresponding to the tab
124+
* Supports themify icons only for now.
125+
*/
126+
icon: {
127+
type: String,
128+
default: ''
129+
},
130+
/***
131+
* Function to execute before tab switch. Return value must be boolean
132+
* If the return result is false, tab switch is restricted
133+
*/
134+
beforeChange: {
135+
type: Function
136+
}
137+
}
138+
```
139+
## Events
140+
Vue-form-wizard emits certain events when certain actions happen inside the component. The events can be noticed in some of the demos and especially in the [async validation demo](https://jsfiddle.net/bt5dhqtf/272/)
141+
* **on-complete** Called when the finish button is clicked and the `before-change` for the last step (if present) was executed. No params are sent together with this event. `this.$emit('on-complete')`
142+
* **on-loading** Called whenever an async `before-change` is executed. This event is emitted before executing `before-change` and after finishing execution of `before-change` method. `on-loading` is emitted together with a Boolean value. `this.$emit('on-loading', value)`
143+
* **on-validate** Called whenever the execution of a `before-change` method is completed. The event sends along a Boolean which represents the validation result as well as an int with te tab index. `this.$emit('on-validate', validationResult, this.activeTabIndex)`
144+
* **on-error** Called when `before-change` is a promised and is rejected with a message. The message is passed along `this.$emit('on-error', error)` See async validation fiddle
145+
## Slots
146+
* **Default** - Used for tab-contents
147+
* **title** - Upper title section including sub-title
148+
* **prev** - Previous button content (no need to worry about handling the button functionality)
149+
* **next** - Next button content
150+
* **finish** - Finish button content
49151

50152
## Scoped slots
51153
Form-wizard exposes 2 scoped slots which can be used to customize some parts of the wizard. Usage example and implementation details are presented in [0.6.2 release](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2)
@@ -556,110 +658,6 @@ span.error{
556658
</script>
557659
</script>
558660

559-
560-
# Props
561-
## Form Wizard props
562-
```js
563-
props: {
564-
title: {
565-
type: String,
566-
default: 'Awesome Wizard'
567-
},
568-
subtitle: {
569-
type: String,
570-
default: 'Split a complicated flow in multiple steps'
571-
},
572-
nextButtonText: {
573-
type: String,
574-
default: 'Next'
575-
},
576-
backButtonText: {
577-
type: String,
578-
default: 'Back'
579-
},
580-
finishButtonText: {
581-
type: String,
582-
default: 'Finish'
583-
},
584-
/***
585-
* Sets validation (on/off) for back button. By default back button ignores validation
586-
*/
587-
validateOnBack: Boolean,
588-
/***
589-
* Applies to text, border and circle
590-
*/
591-
color: {
592-
type: String,
593-
default: '#e74c3c' //circle, border and text color
594-
},
595-
/***
596-
* Is set to current step and text when beforeChange function fails
597-
*/
598-
errorColor: {
599-
type: String,
600-
default: '#8b0000'
601-
},
602-
/**
603-
* Can take one of the following values: 'circle|square|tab`
604-
*/
605-
shape: {
606-
type: String,
607-
default: 'circle'
608-
},
609-
/**
610-
* name of the transition when transition between steps
611-
*/
612-
transition: {
613-
type: String,
614-
default: '' //name of the transition when transition between steps
615-
},
616-
/***
617-
* Index of the initial tab to display
618-
*/
619-
startIndex: {
620-
type: Number,
621-
default: 0
622-
}
623-
}
624-
```
625-
626-
## Tab content props
627-
```js
628-
props: {
629-
title: {
630-
type: String,
631-
default: ''
632-
},
633-
/***
634-
* Icon name for the upper circle corresponding to the tab
635-
* Supports themify icons only for now.
636-
*/
637-
icon: {
638-
type: String,
639-
default: ''
640-
},
641-
/***
642-
* Function to execute before tab switch. Return value must be boolean
643-
* If the return result is false, tab switch is restricted
644-
*/
645-
beforeChange: {
646-
type: Function
647-
}
648-
}
649-
```
650-
## Events
651-
Vue-form-wizard emits certain events when certain actions happen inside the component. The events can be noticed in some of the demos and especially in the [async validation demo](https://jsfiddle.net/bt5dhqtf/272/)
652-
* **on-complete** Called when the finish button is clicked and the `before-change` for the last step (if present) was executed. No params are sent together with this event. `this.$emit('on-complete')`
653-
* **on-loading** Called whenever an async `before-change` is executed. This event is emitted before executing `before-change` and after finishing execution of `before-change` method. `on-loading` is emitted together with a Boolean value. `this.$emit('on-loading', value)`
654-
* **on-validate** Called whenever the execution of a `before-change` method is completed. The event sends along a Boolean which represents the validation result as well as an int with te tab index. `this.$emit('on-validate', validationResult, this.activeTabIndex)`
655-
* **on-error** Called when `before-change` is a promised and is rejected with a message. The message is passed along `this.$emit('on-error', error)` See async validation fiddle
656-
## Slots
657-
* **Default** - Used for tab-contents
658-
* **title** - Upper title section including sub-title
659-
* **prev** - Previous button content (no need to worry about handling the button functionality)
660-
* **next** - Next button content
661-
* **finish** - Finish button content
662-
663661
## Contribution
664662
1. Fork the repo
665663
2. run `npm install`

0 commit comments

Comments
 (0)