Formatting

Add tests for background style
Use provide/inject to get rid of $parent dependency internally

.babelrc

@@ -3,7 +3,7 @@
     ["env", { "modules": false }],
     "stage-2"
   ],
-  "plugins": ["transform-runtime"],
+  "plugins": ["transform-runtime",  "transform-vue-jsx"],
   "comments": false,
   "env": {
     "test": {

dev-example/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
      <router-view></router-view>
   </div>
 </template>

dev-example/FormGeneratorRoute.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <form-wizard @on-complete="onComplete"
+                 shape="tab"
+                 layout="vertical"
+                 steps-classes="steps-size"
                  color="gray"
                  error-color="#a94442">
       <tab-content title="Personal details"
@@ -159,4 +162,8 @@
   }
 </script>
 <style>
+  .steps-size{
+    width: 100vw;
+    height: 400px;
+  }
 </style>

dev-example/WizardRoute.vue

@@ -7,13 +7,10 @@
     <form-wizard @on-complete="onComplete"
                  @on-change="handleChange"
                  :start-index.sync="activeIndex"
-                 layout="vertical"
+                 shape="square"
                  steps-classes="steps-size"
                  color="#e74c3c">
-       <tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
+        <tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
-        <transition name="fade" mode="out-in">
-          <router-view></router-view>
-        </transition>
     </form-wizard>
   </div>
 </template>
@@ -68,7 +65,7 @@
 </style>
 <style lang="scss">
   .steps-size{
-    width: 200px;
+    width: 100vw;
     height: 400px;
   }
   $border-radius-extreme: 6px !default;
@@ -101,4 +98,16 @@
   .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
     opacity: 0
   }
+
+  .list-item {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .list-enter-active, .list-leave-active {
+    transition: all 1s;
+  }
+  .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+    opacity: 0;
+    transform: translateY(30px);
+  }
 </style>

package.json

@@ -32,9 +32,12 @@
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^6.2.10",
     "babel-plugin-istanbul": "^3.1.2",
+    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",

src/components/FormWizard.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="vue-form-wizard" :class="[stepSize, {vertical: isVertical}]" @keyup.right="focusNextTab" @keyup.left="focusPrevTab">
+  <div class="vue-form-wizard"
+       :class="[stepSize, {vertical: isVertical}]"
+       @keyup.right="focusNextTab"
+       @keyup.left="focusPrevTab">
     <div class="wizard-header">
       <slot name="title">
         <h4 class="wizard-title">{{title}}</h4>
@@ -7,11 +10,14 @@
       </slot>
     </div>
     <div class="wizard-navigation">
-      <div class="wizard-progress-with-circle" v-if="!isVertical">
+      <div v-if="!isVertical"
+           class="wizard-progress-with-circle">
         <div class="wizard-progress-bar"
              :style="progressBarStyle"></div>
       </div>
-      <ul class="wizard-nav wizard-nav-pills" role="tablist" :class="stepsClasses">
+      <ul class="wizard-nav wizard-nav-pills"
+          :class="stepsClasses"
+          role="tablist">
         <slot name="step" v-for="(tab, index) in tabs"
               :tab="tab"
               :index="index"
@@ -33,11 +39,15 @@
       </div>
     </div>
 
-    <div class="wizard-card-footer clearfix" v-if="!hideButtons">
+    <div  v-if="!hideButtons" class="wizard-card-footer clearfix">
       <slot name="footer"
             v-bind="slotProps">
         <div class="wizard-footer-left">
-          <span @click="prevTab" @keyup.enter="prevTab" v-if="displayPrevButton" role="button" tabindex="0">
+          <span @click="prevTab"
+                @keyup.enter="prevTab"
+                v-if="displayPrevButton"
+                role="button"
+                tabindex="0">
             <slot name="prev" v-bind="slotProps">
               <wizard-button :style="fillButtonStyle"
                              :disabled="loading">
@@ -50,14 +60,22 @@
 
         <div class="wizard-footer-right">
            <slot name="custom-buttons-right" v-bind="slotProps"></slot>
-            <span @click="nextTab" @keyup.enter="nextTab" v-if="isLastStep" role="button" tabindex="0">
+            <span v-if="isLastStep"
+                  @click="nextTab"
+                  @keyup.enter="nextTab"
+                  role="button"
+                  tabindex="0">
               <slot name="finish" v-bind="slotProps">
                <wizard-button :style="fillButtonStyle">
                 {{finishButtonText}}
               </wizard-button>
             </slot>
           </span>
-          <span @click="nextTab" @keyup.enter="nextTab" role="button" tabindex="0" v-else>
+          <span v-else
+                @click="nextTab"
+                @keyup.enter="nextTab"
+                role="button"
+                tabindex="0">
            <slot name="next" v-bind="slotProps" >
              <wizard-button :style="fillButtonStyle"
                             :disabled="loading">
@@ -81,6 +99,15 @@
       WizardButton,
       WizardStep
     },
+    provide () {
+      return {
+        addTab: this.addTab,
+        removeTab: this.removeTab,
+        shape: this.shape,
+        color: this.color,
+        errorColor: this.errorColor
+      }
+    },
     props: {
       title: {
         type: String,

src/components/TabContent.vue

@@ -11,6 +11,7 @@
 <script>
   export default{
     name: 'tab-content',
+    inject: ['addTab', 'removeTab'],
     props: {
       title: {
         type: String,
@@ -42,25 +43,14 @@
         checked: false
       }
     },
-    computed: {
-      shape () {
-        return this.$parent.shape
-      },
-      color () {
-        return this.$parent.color
-      },
-      errorColor () {
-        return this.$parent.errorColor
-      }
-    },
     mounted () {
-      this.$parent.addTab(this)
+      this.addTab(this)
     },
     destroyed () {
       if (this.$el && this.$el.parentNode) {
         this.$el.parentNode.removeChild(this.$el)
       }
-      this.$parent.removeTab(this)
+      this.removeTab(this)
     }
   }
 </script>

src/components/WizardButton.vue

@@ -4,7 +4,9 @@
   </button>
 </template>
 <script>
-  export default {}
+  export default {
+    name: 'wizard-button'
+  }
 </script>
 <style>
 </style>

src/components/WizardFooter.vue

@@ -0,0 +1,63 @@
+<template>
+  <div  v-if="!hideButtons"
+        class="wizard-card-footer clearfix">
+    <slot name="footer"
+          v-bind="slotProps">
+      <div class="wizard-footer-left">
+          <span @click="prevTab"
+                @keyup.enter="prevTab"
+                v-if="displayPrevButton"
+                role="button"
+                tabindex="0">
+            <slot name="prev" v-bind="slotProps">
+              <wizard-button :style="fillButtonStyle"
+                             :disabled="loading">
+                {{backButtonText}}
+              </wizard-button>
+            </slot>
+          </span>
+        <slot name="custom-buttons-left" v-bind="slotProps"></slot>
+      </div>
+
+      <div class="wizard-footer-right">
+        <slot name="custom-buttons-right" v-bind="slotProps"></slot>
+        <span v-if="isLastStep"
+              @click="nextTab"
+              @keyup.enter="nextTab"
+              role="button"
+              tabindex="0">
+              <slot name="finish" v-bind="slotProps">
+               <wizard-button :style="fillButtonStyle">
+                {{finishButtonText}}
+              </wizard-button>
+            </slot>
+          </span>
+        <span v-else
+              @click="nextTab"
+              @keyup.enter="nextTab"
+              role="button"
+              tabindex="0">
+           <slot name="next" v-bind="slotProps" >
+             <wizard-button :style="fillButtonStyle"
+                            :disabled="loading">
+              {{nextButtonText}}
+             </wizard-button>
+           </slot>
+         </span>
+      </div>
+
+    </slot>
+  </div>
+</template>
+<script>
+    export default {
+      props: {
+        slotProps: {
+          type: Object,
+          default: () => {}
+        }
+      }
+    }
+</script>
+<style>
+</style>

src/components/WizardStep.vue

@@ -41,6 +41,7 @@
 <script>
   export default {
     name: 'wizard-step',
+    inject: ['color', 'shape', 'errorColor'],
     props: {
       tab: {
         type: Object,
@@ -60,31 +61,31 @@
     computed: {
       iconActiveStyle () {
         return {
-          backgroundColor: this.tab.color
+          backgroundColor: this.color
         }
       },
       stepCheckedStyle () {
         return {
-          borderColor: this.tab.color
+          borderColor: this.color
         }
       },
       errorStyle () {
         return {
-          borderColor: this.tab.errorColor,
+          borderColor: this.errorColor,
-          backgroundColor: this.tab.errorColor
+          backgroundColor: this.errorColor
         }
       },
       stepTitleStyle () {
         let isError = this.tab.validationError
         return {
-          color: isError ? this.tab.errorColor : this.tab.color
+          color: isError ? this.errorColor : this.color
         }
       },
       isStepSquare () {
-        return this.tab.shape === 'square'
+        return this.shape === 'square'
       },
       isTabShape () {
-        return this.tab.shape === 'tab'
+        return this.shape === 'tab'
       }
     }
   }

test/unit/specs/FormWizard.spec.js

@@ -81,4 +81,15 @@ describe('FormWizard.vue', () => {
     expect(nextTabHandler.called).to.equal(true)
   })
 
+  it('styles step with background color', (done) => {
+    const wizard = mount(twoStepWizard, {localVue})
+    const formWizard = wizard.find(FormWizard)
+    Vue.nextTick(()=>{
+      const steps = wizard.findAll(WizardStep)
+      console.log(steps)
+      var stepContainer = steps.at(0).find('.wizard-icon-container')
+      expect(stepContainer.hasStyle('background-color', formWizard.vm.color))
+      done()
+    })
+  })
 })

yarn.lock

@@ -260,13 +260,6 @@ autoprefixer@^6.3.1, autoprefixer@^6.7.2:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-avoriaz@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/avoriaz/-/avoriaz-4.1.0.tgz#db49a282f3758dff83578d7536c51a3cefc07615"
-  dependencies:
-    lodash "^4.17.4"
-    vue-add-globals "^2.0.0"
-
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -440,6 +433,10 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
+babel-helper-vue-jsx-merge-props@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
+
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -501,6 +498,10 @@ babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
 
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -746,6 +747,12 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-plugin-transform-vue-jsx@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.5.0.tgz#6b1ad29351ad753919403675f0bf8b2a43e17671"
+  dependencies:
+    esutils "^2.0.2"
+
 babel-preset-env@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
@@ -4462,6 +4469,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+portal-vue@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-1.1.1.tgz#8b13e18994c120e21dc5c85f4f5f25ce73dca41d"
+
 postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
@@ -5927,10 +5938,6 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-vue-add-globals@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/vue-add-globals/-/vue-add-globals-2.0.1.tgz#c9fba6faac44f679ec15d5a9637f518b181fc44d"
-
 vue-form-generator@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-form-generator/-/vue-form-generator-2.0.0.tgz#c52c2a92d8fbdc85e749044227520125ede7c26b"