Add slots to WizardStep

BinarCode · Jul 31, 2017 · 77a16bb · 77a16bb
1 parent 81b6950
commit 77a16bb
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/dev-example/App.vue b/dev-example/App.vue
@@ -12,7 +12,7 @@
                  class="card" ref="wizard">
       <template slot="step" scope="props">
         <wizard-step :tab="props.tab"
-                     :transition="props.transition"
+                     transition="fade"
                      :key="props.tab.title"
                      :index="props.index">
         </wizard-step>
@@ -103,5 +103,10 @@
     position: relative;
     z-index: 1;
   }
-
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .2s
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0
+  }
 </style>
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
@@ -20,7 +20,6 @@
           <wizard-step :tab="tab"
                        @click.native="navigateToTab(index)"
                        :transition="transition"
-                       :key="tab.title"
                        :index="index">
           </wizard-step>
         </slot>

diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
@@ -6,22 +6,29 @@
            :style="[tab.checked ? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
 
         <transition :name="transition" mode="out-in">
-          <div v-if="tab.active" class="wizard-icon-container"
-               :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
-               :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
-            <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
-            <i v-else class="wizard-icon">{{index + 1}}</i>
-          </div>
-          <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
-          <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
+
+            <div v-if="tab.active" class="wizard-icon-container"
+                 :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
+                 :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
+              <slot name="active-step">
+                <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
+                <i v-else class="wizard-icon">{{index + 1}}</i>
+              </slot>
+            </div>
+            <slot v-if="!tab.active">
+              <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
+              <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
+            </slot>
         </transition>
 
       </div>
-      <span class="stepTitle"
-            :class="{active:tab.active, has_error:tab.validationError}"
-            :style="tab.active ? stepTitleStyle : {}">
+      <slot name="title">
+        <span class="stepTitle"
+              :class="{active:tab.active, has_error:tab.validationError}"
+              :style="tab.active ? stepTitleStyle : {}">
               {{tab.title}}
-            </span>
+        </span>
+      </slot>
     </a>
   </li>
 </template>