#39 Support sizing step indicators

BinarCode · Sep 4, 2017 · d7b3962 · d7b3962
1 parent 218d38f
commit d7b3962
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/src/assets/form-wizard/_wizard-card.scss b/src/assets/form-wizard/_wizard-card.scss
@@ -1,3 +1,6 @@
+@import "mixins/wizard-size";
+@import "variables";
+
 .vue-form-wizard {
   padding-bottom: 20px;
   .is_error {
@@ -6,6 +9,11 @@
       background: $danger-states-color !important;
     }
   }
+  @include wizard-size('xs', 40px, 16px);
+  @include wizard-size('sm', 50px, 20px);
+  @include wizard-size('md', 70px, 24px);
+  @include wizard-size('lg', 90px, 28px);
+
   .wizard-icon-circle {
     font-size: 18px;
     border: 3px solid $gray-input-bg;

diff --git a/src/assets/form-wizard/mixins/_wizard-size.scss b/src/assets/form-wizard/mixins/_wizard-size.scss
@@ -0,0 +1,22 @@
+@mixin wizard-size($name, $size, $font-size){
+  $computed-font-size: $size/2 + 5px;
+
+  &.#{$name}{
+    .wizard-icon-circle{
+      width: $size;
+      height: $size;
+      font-size: $font-size;
+      &.tab_shape {
+        height: $computed-font-size;
+      }
+    }
+    .wizard-nav-pills > li.active > a .wizard-icon {
+      font-size: $font-size;
+    }
+    .wizard-navigation .wizard-progress-with-circle {
+      position: relative;
+      top: $computed-font-size;
+      height: 4px;
+    }
+  }
+}
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-form-wizard">
+  <div class="vue-form-wizard" :class="stepSize">
     <div class="wizard-header">
       <slot name="title">
         <h4 class="wizard-title">{{title}}</h4>
@@ -16,16 +16,18 @@
               :tab="tab"
               :index="index"
               :navigate-to-tab="navigateToTab"
+              :step-size="stepSize"
               :transition="transition">
           <wizard-step :tab="tab"
+                       :step-size="stepSize"
                        @click.native="navigateToTab(index)"
                        :transition="transition"
                        :index="index">
           </wizard-step>
         </slot>
       </ul>
       <div class="wizard-tab-content">
-        <slot>
+        <slot v-bind="slotProps">
         </slot>
       </div>
     </div>
@@ -118,6 +120,14 @@
         type: String,
         default: 'circle'
       },
+      stepSize: {
+        type: String,
+        default: 'md',
+        validator: (value) => {
+          let acceptedValues = ['xs', 'sm', 'md', 'lg']
+          return acceptedValues.indexOf(value) !== -1
+        }
+      },
       /**
        * Name of the transition when transition between steps
        * */

diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
@@ -1,7 +1,7 @@
 <template>
   <li :class="{active:tab.active}">
     <a>
-      <div class="wizard-icon-circle"
+      <div class="wizard-icon-circle md"
            :class="{checked: tab.checked,square_shape:isStepSquare, tab_shape:isTabShape}"
            :style="[tab.checked ? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">