From cd9502a61cbc4d1aa831e2abad474e22ceaddffa Mon Sep 17 00:00:00 2001 From: Cristi Jora Date: Thu, 8 Jun 2017 22:43:04 +0300 Subject: [PATCH] Create README.md --- README.md | 165 ++---------------------------------------------------- 1 file changed, 4 insertions(+), 161 deletions(-) diff --git a/README.md b/README.md index 8bcefa4..37611ac 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,9 @@ # vue-form-wizard A dynamic form wizard to split your forms easier -Vue-form-wizard is a vue based component with **no external depenendcies** which simplifies tab wizard management and allows you to focus on the functional part of your app rather than -wasting time on details. Just forget about id's, external scripts and jQuery dependencies +Vue-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management. -# [Documentation](https://cristijora.github.io/vue-form-wizard/#/) - -# Demos & Playground -In browser [playground](https://cristijora.github.io/vue-form-wizard/#/?id=playground) - -## JSFiddle demos: +## Demos: Basic [demo](https://jsfiddle.net/bt5dhqtf/97/) Other demos: @@ -25,157 +19,6 @@ Other demos: * [Vue router integration](https://jsfiddle.net/bt5dhqtf/267/) You can place a `router-view` inside the wizard and have a separate page per tab. A `route` prop must be passed to the tabs you want to handle certain tabs * [Async validation with error message](https://jsfiddle.net/CristiJ/bt5dhqtf/298/) `before-change` prop can accept a promise that is resolved with `true` which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet) -# Usage +In browser [playground](https://cristijora.github.io/vue-form-wizard/#/?id=playground) -## NPM -`npm install vue-form-wizard` - -## Or alternatively directly include the javascript -Download the css and js files from `dist` folder or reference them directly from github (check jsfiddle links) -```html - - -``` -## Component registration -```js -//global registration -import VueFormWizard from 'vue-form-wizard' -import 'vue-form-wizard/dist/vue-form-wizard.min.css' -Vue.use(VueFormWizard) - -//local registration -import {FormWizard, TabContent} from 'vue-form-wizard' -import 'vue-formwizard/dist/vue-form-wizard.min.css' -//component code -components: { - FormWizard, - TabContent -} -``` -## Template usage - -```html - - - My first tab content - - - My second tab content - - - Yuhuuu! This seems pretty damn simple - - -``` - -# 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) +# [Documentation](https://cristijora.github.io/vue-form-wizard/#/)