Skip to content
This repository was archived by the owner on Jun 1, 2023. It is now read-only.

Commit d9c9b1e

Browse files
cristijoracristijora
committed
#27 Add slots for custom-buttons
1 parent 3c75843 commit d9c9b1e

File tree

2 files changed

+62
-45
lines changed

2 files changed

+62
-45
lines changed

‎docs/README.md‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,32 @@ Vue-form-wizard emits certain events when certain actions happen inside the comp
148148
* **prev** - Previous button content (no need to worry about handling the button functionality)
149149
* **next** - Next button content
150150
* **finish** - Finish button content
151+
* **custom-buttons-left** - Appears on right of "Back" button
152+
* **custom-buttons-right** - Appears on the left of "Next/Finish" button
151153

152154
## Scoped slots
153-
Form-wizard exposes 2 scoped slots which can be used to customize some parts of the wizard. Usage example and implementation details are presented in [0.6.2 release](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2)
155+
156+
Form-wizard exposes multiple scoped slots which can be used to customize some parts of the wizard. Usage example and implementation details are presented in [0.6.2 release](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2)
157+
Since [0.6.3](https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.3), button slots can be also used as scoped slots and have the following methods/properties exposed
158+
159+
* **prev** - Previous button content (no need to worry about handling the button functionality)
160+
* **next** - Next button content
161+
* **finish** - Finish button content
162+
* **custom-buttons-left** - Appears on right of "Back" button
163+
* **custom-buttons-right** - Appears on the left of "Next/Finish" button
164+
165+
- nextTab // will go to the next tab/step when called
166+
- prevTab //will got to the prev tab/step when called
167+
- activeTabIndex // current active tab index
168+
- isLastStep // boolean to tell whether it's the last step or not
169+
- fillButtonStyle // object with styles for wizard-buttons (contains background and color passed through wizard props)
170+
171+
These properties apply to the following slots: prev, next, finish ,custom-buttons-left, custom-buttons-right, footer
154172

155173
### Footer slot
156-
Has the buttons (back, next, finish) as default. When using this slot, those buttons are replaced with the content of your slot. You can achieve the same default functionallity and event tweak it with the help of the exposed methods/properties from `props`
174+
The footer slot would be usually used to replace the whole content of your footer. By default it contains the wizard buttons (back, next, finish). When using this slot, those buttons are replaced with the content of your slot. You can achieve the same default functionallity and event tweak it with the help of the exposed methods/properties from `props`
175+
Note that using this slot, means that you have to handle some of the wizard logic through the exposed methods/properties defined above and your template might get more verbose. If you need very fine customizations and more control over the wizard button actions
176+
then you could use this slot. Otherwise, you could stick with the buttons slots.
157177
One potential usage can be that you want to have a different button when completing the wizard. Maybe you want to position it in the center, give it a different color and click event
158178
```html
159179
<template slot="footer" scope="props">
@@ -170,13 +190,6 @@ One potential usage can be that you want to have a different button when complet
170190
This is just one example. You can add more buttons, hide or display conditionally based on the exposed properties.
171191
Working fiddle for the [example above](https://jsfiddle.net/bt5dhqtf/717/)
172192

173-
#### Exposed props for `footer` slot:
174-
- nextTab // will go to the next tab/step when called
175-
- prevTab //will got to the prev tab/step when called
176-
- activeTabIndex // current active tab index
177-
- isLastStep // boolean to tell whether it's the last step or not
178-
- fillButtonStyle // object with styles for wizard-buttons (contains background and color passed through wizard props)
179-
180193
### Step slot
181194
This slot can be used to disable the click event on the step or to customize the UI of each step
182195
One possible usage:
@@ -189,7 +202,7 @@ One possible usage:
189202
</template>
190203
```
191204
#### Exposed props for the `step` slot
192-
- tab (the tab object which contains the tab-content component corresponding to the step) This object contains several fields such as `active, checked, shape, color` and so on. You can check how these are used [here](https://github.com/cristijora/vue-form-wizard/blob/master/src/components/WizardStep.vue):
205+
- tab (the tab object which contains the tab-content component corresponding to the step) This object contains several fields such as `active, checked, shape, color` and so on. You can check how these are used [here](https://github.com/cristijora/vue-form-wizard/blob/master/src/components/WizardStep.vue):
193206
- index (The index of the step)
194207
- transition (Transition prop passed from form-wizard)
195208

‎src/components/FormWizard.vue‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,38 @@
3232

3333
<div class="wizard-card-footer clearfix" v-if="!hideButtons">
3434
<slot name="footer"
35-
:next-tab="nextTab"
36-
:prev-tab="prevTab"
37-
:active-tab-index="activeTabIndex"
38-
:is-last-step="isLastStep"
39-
:fill-button-style="fillButtonStyle">
35+
v-bind="slotProps">
36+
<div class="wizard-footer-left">
37+
<span @click="prevTab" v-if="displayPrevButton">
38+
<slot name="prev" v-bind="slotProps">
39+
<wizard-button :style="fillButtonStyle"
40+
:disabled="loading">
41+
{{backButtonText}}
42+
</wizard-button>
43+
</slot>
44+
</span>
45+
<slot name="custom-buttons-left" v-bind="slotProps"></slot>
46+
</div>
4047

41-
<template>
42-
<span @click="prevTab" v-if="displayPrevButton" class="wizard-footer-left">
43-
<slot name="prev">
44-
<wizard-button :style="fillButtonStyle"
45-
:disabled="loading">
46-
{{backButtonText}}
47-
</wizard-button>
48-
</slot>
49-
</span>
50-
</template>
48+
<div class="wizard-footer-right">
49+
<slot name="custom-buttons-right" v-bind="slotProps"></slot>
50+
<span @click="nextTab" v-if="isLastStep">
51+
<slot name="finish" v-bind="slotProps">
52+
<wizard-button :style="fillButtonStyle">
53+
{{finishButtonText}}
54+
</wizard-button>
55+
</slot>
56+
</span>
57+
<span @click="nextTab" v-else>
58+
<slot name="next" v-bind="slotProps">
59+
<wizard-button :style="fillButtonStyle"
60+
:disabled="loading">
61+
{{nextButtonText}}
62+
</wizard-button>
63+
</slot>
64+
</span>
65+
</div>
5166

52-
<template>
53-
<span @click="finish" class="wizard-footer-right" v-if="isLastStep">
54-
<slot name="nextTab">
55-
<wizard-button :style="fillButtonStyle">
56-
{{finishButtonText}}
57-
</wizard-button>
58-
</slot>
59-
</span>
60-
</template>
61-
62-
<template>
63-
<span @click="nextTab" class="wizard-footer-right" v-if="!isLastStep">
64-
<slot name="next">
65-
<wizard-button :style="fillButtonStyle"
66-
:disabled="loading">
67-
{{nextButtonText}}
68-
</wizard-button>
69-
</slot>
70-
</span>
71-
</template>
7267
</slot>
7368
</div>
7469
</div>
@@ -153,6 +148,15 @@
153148
}
154149
},
155150
computed: {
151+
slotProps () {
152+
return {
153+
nextTab: this.nextTab,
154+
prevTab: this.prevTab,
155+
activeTabIndex: this.activeTabIndex,
156+
isLastStep: this.isLastStep,
157+
fillButtonStyle: this.fillButtonStyle
158+
}
159+
},
156160
tabCount () {
157161
return this.tabs.length
158162
},

0 commit comments

Comments
 (0)