mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-07 16:32:24 +03:00
Code Activity

Create README.md

Browse Source
This commit is contained in:
Cristi Jora
2017-06-08 22:44:35 +03:00
committed by GitHub
parent cd9502a61c
commit 3ffc16103b
1 changed files with 115 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/README.md
+115 -113
View File
@@ -64,119 +64,6 @@ components: {
</form-wizard>
```
# Props
## Form Wizard props
```js
props: {
title: {
type: String,
default: 'Awesome Wizard'
},
subtitle: {
type: String,
default: 'Split a complicated flow in multiple steps'
},
nextButtonText: {
type: String,
default: 'Next'
},
backButtonText: {
type: String,
default: 'Back'
},
finishButtonText: {
type: String,
default: 'Finish'
},
/***
* Sets validation (on/off) for back button. By default back button ignores validation
*/
validateOnBack: Boolean,
/***
* Applies to text, border and circle
*/
color: {
type: String,
default: '#e74c3c' //circle, border and text color
},
/***
* Is set to current step and text when beforeChange function fails
*/
errorColor: {
type: String,
default: '#8b0000'
},
/**
* Can take one of the following values: 'circle|square|tab`
*/
shape: {
type: String,
default: 'circle'
},
/**
* name of the transition when transition between steps
*/
transition: {
type: String,
default: '' //name of the transition when transition between steps
},
/***
* Index of the initial tab to display
*/
startIndex: {
type: Number,
default: 0
}
}
```
## Tab content props
```js
props: {
title: {
type: String,
default: ''
},
/***
* Icon name for the upper circle corresponding to the tab
* Supports themify icons only for now.
*/
icon: {
type: String,
default: ''
},
/***
* Function to execute before tab switch. Return value must be boolean
* If the return result is false, tab switch is restricted
*/
beforeChange: {
type: Function
}
}
```
## Events
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/)
* **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')`
* **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)`
* **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)`
* **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
## Slots
* **Default** - Used for tab-contents
* **title** - Upper title section including sub-title
* **prev** - Previous button content (no need to worry about handling the button functionality)
* **next** - Next button content
* **finish** - Finish button content
## Contribution
1. Fork the repo
2. run `npm install`
3. `npm run dev` for launching the dev example
4. After making your changes make sure to pull the changes from the source repo to avoid conflicts
5. `npm run build` to generate the new js and css bundles
6. Commit your changes + the js and css bundles so it's easy to test them right away in fiddles, codepen etc
7. Open a Pull Request. For more information refer to [github forking workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962)
# Playground
## Simple
@@ -617,3 +504,118 @@ span.error{
}
</script>
</script>
# Props
## Form Wizard props
```js
props: {
title: {
type: String,
default: 'Awesome Wizard'
},
subtitle: {
type: String,
default: 'Split a complicated flow in multiple steps'
},
nextButtonText: {
type: String,
default: 'Next'
},
backButtonText: {
type: String,
default: 'Back'
},
finishButtonText: {
type: String,
default: 'Finish'
},
/***
* Sets validation (on/off) for back button. By default back button ignores validation
*/
validateOnBack: Boolean,
/***
* Applies to text, border and circle
*/
color: {
type: String,
default: '#e74c3c' //circle, border and text color
},
/***
* Is set to current step and text when beforeChange function fails
*/
errorColor: {
type: String,
default: '#8b0000'
},
/**
* Can take one of the following values: 'circle|square|tab`
*/
shape: {
type: String,
default: 'circle'
},
/**
* name of the transition when transition between steps
*/
transition: {
type: String,
default: '' //name of the transition when transition between steps
},
/***
* Index of the initial tab to display
*/
startIndex: {
type: Number,
default: 0
}
}
```
## Tab content props
```js
props: {
title: {
type: String,
default: ''
},
/***
* Icon name for the upper circle corresponding to the tab
* Supports themify icons only for now.
*/
icon: {
type: String,
default: ''
},
/***
* Function to execute before tab switch. Return value must be boolean
* If the return result is false, tab switch is restricted
*/
beforeChange: {
type: Function
}
}
```
## Events
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/)
* **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')`
* **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)`
* **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)`
* **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
## Slots
* **Default** - Used for tab-contents
* **title** - Upper title section including sub-title
* **prev** - Previous button content (no need to worry about handling the button functionality)
* **next** - Next button content
* **finish** - Finish button content
## Contribution
1. Fork the repo
2. run `npm install`
3. `npm run dev` for launching the dev example
4. After making your changes make sure to pull the changes from the source repo to avoid conflicts
5. `npm run build` to generate the new js and css bundles
6. Commit your changes + the js and css bundles so it's easy to test them right away in fiddles, codepen etc
7. Open a Pull Request. For more information refer to [github forking workflow](https://gist.github.com/Chaser324/ce0505fbed06b947d962)