#22 Initial support for vertical tabs

dev-example/WizardRoute.vue

@@ -7,7 +7,8 @@
     <form-wizard @on-complete="onComplete"
                  @on-change="handleChange"
                  :start-index.sync="activeIndex"
-                 shape="tab"
+                 layout="vertical"
+                 steps-classes="steps-size"
                  color="#e74c3c">
        <tab-content v-for="tab in tabs" :title="tab" :key="tab">{{tab}}</tab-content>
         <transition name="fade" mode="out-in">
@@ -66,6 +67,10 @@
   @import "loader.css";
 </style>
 <style lang="scss">
+  .steps-size{
+    width: 200px;
+    height: 400px;
+  }
   $border-radius-extreme: 6px !default;
   $white-color: white;
   $gray-input-bg: #F3F2EE !default;

src/assets/form-wizard/_wizard-card.scss

@@ -125,4 +125,21 @@
       }
     }
   }
+
+  &.vertical {
+    .wizard-card-footer {
+      display: block;
+    }
+    .wizard-nav-pills {
+      flex-direction: column;
+    }
+    .wizard-navigation {
+      display: flex;
+      flex-direction: row;
+    }
+    .wizard-card-footer {
+      padding-top: 30px;
+
+    }
+  }
 }

src/components/FormWizard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-form-wizard" :class="stepSize" @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 +7,11 @@
       </slot>
     </div>
     <div class="wizard-navigation">
-      <div class="wizard-progress-with-circle">
+      <div class="wizard-progress-with-circle" v-if="!isVertical">
         <div class="wizard-progress-bar"
              :style="progressBarStyle"></div>
       </div>
-      <ul class="wizard-nav wizard-nav-pills" role="tablist">
+      <ul class="wizard-nav wizard-nav-pills" role="tablist" :class="stepsClasses">
         <slot name="step" v-for="(tab, index) in tabs"
               :tab="tab"
               :index="index"
@@ -122,6 +122,14 @@
         type: String,
         default: 'circle'
       },
+      layout: {
+        type: String,
+        default: 'horizontal'
+      },
+      stepsClasses: {
+        type: [String, Array],
+        default: ''
+      },
       stepSize: {
         type: String,
         default: 'md',
@@ -174,6 +182,9 @@
       isLastStep () {
         return this.activeTabIndex === this.tabCount - 1
       },
+      isVertical () {
+        return this.layout === 'vertical'
+      },
       displayPrevButton () {
         return this.activeTabIndex !== 0
       },