mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-17 04:00:33 +03:00
Code Activity

Add slots to WizardStep

Browse Source
This commit is contained in:
cristijora
2017-07-31 21:57:23 +03:00
parent 81b69507f5
commit 77a16bb350
3 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FormWizard.vue
-1
View File
@@ -20,7 +20,6 @@
<wizard-step :tab="tab"
@click.native="navigateToTab(index)"
:transition="transition"
:key="tab.title"
:index="index">
</wizard-step>
</slot>
src/components/WizardStep.vue
+19 -12
View File
@@ -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>