Add support for navigation and header slot

docs/README.md

@@ -96,7 +96,7 @@ props: {
     default: '#e74c3c' //circle, border and text color
   },
   /***
-  *  Is set to current step and text when beforeChange function fails 
+  *  Is set to current step and text when beforeChange function fails
   */
   errorColor: {
     type: String,
@@ -160,7 +160,9 @@ Vue-form-wizard emits certain events when certain actions happen inside the comp
 
 ## Slots
 * **Default** - Used for tab-contents
-* **title** - Upper title section including sub-title
+* **header** - Header containing title and subtitle
+* **title** - Upper title section including sub-title ( unused when header slot is present )
+* **navigation** - Navigation and progress bar
 * **prev** - Previous button content (no need to worry about handling the button functionality)
 * **next** - Next button content
 * **finish** - Finish button content
@@ -172,7 +174,7 @@ By using [refs](https://vuejs.org/v2/api/#ref) on the `form-wizard` component, y
 Some of them are intended for internal usage while others can be used for general purpose operations.
 
 * **reset** - will reset the wizard to the initial state
-* **activateAll** - will activate all steps as if the user went through all 
+* **activateAll** - will activate all steps as if the user went through all
 * **nextTab** - navigates to the next tab. The same method is used when clicking next button
 * **prevTab** - navigates to the prev tab. The same method is used when clicking prev button
 * **changeTab(oldIndex, newIndex)** - Navigates from one tab to another. Note that this method does not trigger validation methods. Use it with caution!
@@ -185,14 +187,16 @@ Form-wizard exposes multiple scoped slots which can be used to customize some pa
 
 Since [0.6.4](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.4), button slots can be also used as scoped slots and have the following methods/properties exposed
 
-* **nextTab** // will go to the next tab/step when called 
+* **nextTab** // will go to the next tab/step when called
 * **prevTab** //will got to the prev tab/step when called
-* **activeTabIndex** // current active tab index 
+* **activeTabIndex** // current active tab index
 * **isLastStep** // boolean to tell whether it's the last step or not
 * **fillButtonStyle** // object with styles for wizard-buttons (contains background and color passed through wizard props)
 
-These properties apply to the following slots: 
+These properties apply to the following slots:
 
+* **header** - Header containing title and subtitle
+* **navigation** - Navigation and progress bar
 * **prev** - Previous button content (no need to worry about handling the button functionality)
 * **next** - Next button content
 * **finish** - Finish button content
@@ -203,7 +207,7 @@ These properties apply to the following slots:
 The footer slot would be usually used to replace the whole content of your footer. By default it contains the wizard buttons (back, next, finish).
 When using this slot, those buttons are replaced with your own content. You can achieve the same default wizard functionality and event tweak it with the help of the exposed methods/properties from slot `props`
 
-Note that using this slot, means that you have to handle some of the wizard logic through the exposed methods/properties defined above and your template might get more verbose. 
+Note that using this slot, means that you have to handle some of the wizard logic through the exposed methods/properties defined above and your template might get more verbose.
 If you need very fine customizations and more control over the wizard button actions,
 then you could use this slot. Otherwise, you could stick with the buttons slots as they can be used as scoped slots as well.
 One potential usage can be that you want to have a different button when completing the wizard. Maybe you want to position it in the center, give it a different color and click event
@@ -215,7 +219,7 @@ One potential usage can be that you want to have a different button when complet
         </div>
         <div class="wizard-footer-right">
           <wizard-button v-if="!props.isLastStep"@click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
-          
+
           <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">  {{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
         </div>
 </template>
@@ -227,7 +231,7 @@ Working fiddle for the [example above](https://jsfiddle.net/bt5dhqtf/717/)
 This slot can be used to disable the click event on the step or to customize the UI of each step
 One possible usage:
 ```html
-<wizard-step 
+<wizard-step
     slot-scope="props"
     slot="step"
     :tab="props.tab"
@@ -236,7 +240,7 @@ One possible usage:
 </wizard-step>
 ```
 #### Exposed props for the `step` slot
-- tab (the tab object which contains the tab-content component corresponding to the step) This object contains several fields such as `active, checked, shape, color` and so on. You can check how these are used [here](https://github.com/cristijora/vue-form-wizard/blob/master/src/components/WizardStep.vue): 
+- tab (the tab object which contains the tab-content component corresponding to the step) This object contains several fields such as `active, checked, shape, color` and so on. You can check how these are used [here](https://github.com/cristijora/vue-form-wizard/blob/master/src/components/WizardStep.vue):
 - index (The index of the step)
 - transition (Transition prop passed from form-wizard)
 
@@ -280,7 +284,7 @@ Other demos:
        Yuhuuu! This seems pretty damn simple
      </tab-content>
  </form-wizard>
- 
+
 </template>
 
 <script>
@@ -302,7 +306,7 @@ Other demos:
 
 <script v-pre type="text/x-template" id="squaredsteps">
 <template>
-  <form-wizard @on-complete="onComplete" 
+  <form-wizard @on-complete="onComplete"
                         shape="square"
                         color="#3498db">
       <tab-content title="Personal details"
@@ -318,7 +322,7 @@ Other demos:
         Yuhuuu! This seems pretty damn simple
       </tab-content>
   </form-wizard>
- 
+
 </template>
 
 <script>
@@ -340,7 +344,7 @@ Other demos:
 
 <script v-pre type="text/x-template" id="tabbedsteps">
 <template>
-  <form-wizard @on-complete="onComplete" 
+  <form-wizard @on-complete="onComplete"
                         shape="tab"
                         color="#9b59b6">
         <tab-content title="Personal details"
@@ -356,7 +360,7 @@ Other demos:
           Yuhuuu! This seems pretty damn simple
         </tab-content>
    </form-wizard>
- 
+
 </template>
 
 <script>
@@ -394,7 +398,7 @@ Other demos:
        Yuhuuu! This seems pretty damn simple
      </tab-content>
  </form-wizard>
- 
+
 </template>
 
 <script>
@@ -437,7 +441,7 @@ Other demos:
        Yuhuuu! This seems pretty damn simple
      </tab-content>
  </form-wizard>
- 
+
 </template>
 
 <script>
@@ -461,7 +465,7 @@ Other demos:
  <form-wizard @on-complete="onComplete"
                        shape="tab"
                        color="#e67e22">
-     <h2 slot="title">This will replace my whole title</h2> 
+     <h2 slot="title">This will replace my whole title</h2>
      <tab-content title="Personal details"
                   icon="ti-user">
        My first tab content
@@ -474,19 +478,19 @@ Other demos:
                   icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
-     
+
      <template slot="footer" slot-scope="props">
        <div class="wizard-footer-left">
            <wizard-button v-if="props.activeTabIndex > 0 && !props.isLastStep" @click.native="props.prevTab()" :style="props.fillButtonStyle">Previous</wizard-button>
         </div>
         <div class="wizard-footer-right">
           <wizard-button v-if="!props.isLastStep" @click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
-          
+
           <wizard-button v-else @click.native="alert('Done')" class="wizard-footer-right finish-button" :style="props.fillButtonStyle">{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>
         </div>
       </template>
  </form-wizard>
- 
+
 </template>
 
 <script>
@@ -507,7 +511,7 @@ Other demos:
 
 <script v-pre type="text/x-template" id="callfunction">
 <template>
-  <form-wizard @on-complete="onComplete" 
+  <form-wizard @on-complete="onComplete"
                        shape="tab"
                        color="#9b59b6">
      <tab-content title="Personal details"
@@ -523,7 +527,7 @@ Other demos:
        Yuhuuu! This seems pretty damn simple
      </tab-content>
  </form-wizard>
- 
+
 </template>
 
 <script>
@@ -568,13 +572,13 @@ Other demos:
                  icon="ti-check">
             Third tab
     </tab-content>
-    
+
     <div class="loader" v-if="loadingWizard"></div>
     <div v-if="errorMsg">
       <span class="error">{{errorMsg}}</span>
     </div>
   </form-wizard>
- 
+
 </template>
 <style>
 span.error{
@@ -616,7 +620,7 @@ span.error{
               }else{
                this.count = 0
                resolve(true)
-              }   
+              }
             }, 1000)
           })
          },
@@ -659,7 +663,7 @@ span.error{
     <el-button type="primary" slot="next">Next</el-button>
     <el-button type="primary" slot="finish">Finish</el-button>
   </form-wizard>
- 
+
 </template>
 
 <script>
@@ -700,7 +704,7 @@ span.error{
                resolve(valid);
              });
            })
-     
+
          }
        }
   }
@@ -712,7 +716,7 @@ span.error{
 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 
+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)