From 3ffc16103bef1d922b414da741d2b241c2401046 Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Thu, 8 Jun 2017 22:44:35 +0300 Subject: [PATCH] Create README.md --- docs/README.md | 228 +++++++++++++++++++++++++------------------------ 1 file changed, 115 insertions(+), 113 deletions(-) diff --git a/docs/README.md b/docs/README.md index 1c2bcfa..1fc590e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -64,119 +64,6 @@ components: { ``` -# 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{ } + + +# 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) + +