Custom buttons

[exnihilo-creatio]

I am currently using the form wizard in a modal and trying to conform to material design guidelines. I would like to have a 'Cancel' button next to the 'next' and 'finish' button. However, there is currently no control on placing extra buttons next to the default ones.

[cristijora]

Indeed there is no way to add extra buttons near the current ones. I might add some additional slots, but don't want to add to many. Do you have any other idea ?

[exnihilo-creatio]

Keep the slots for the buttons, but introduce a 'left' and 'right' slots that comes before and after the 'previous' and 'next' buttons.

[cristijora]

@exnihilo-creatio I actually don't want to add more slots for some limited use cases.
Maybe expose some methods via scoped slots and have something like:

<vue-form-wizard :hide-buttons="true">

  <div slot="footer" scope="props">
    <button @click="props.prev()">Prev</button>
    <button>Cancel</button>
    <button @click="props.next()">Next</button>
    <button>Cancel</button>
  </div>
</vue-form-wizard>

And you can customize it how you want in terms of looks
PS. It can be done even without hide-buttons. I could check if this special slot is defined and hide buttons

[cristijora]

I will try to do this today

[cristijora]

@exnihilo-creatio Sorry for the long delay. I was on a vacation.
I made a scoped slot for the footer
Besides that, the wizard button is exposed as a component now for easier use. You can of course use any buttons you wish

https://jsfiddle.net/bt5dhqtf/696/

Available prop methods/objects

nextTab // will go to the next tab/step when called 
prevTab //will got to the prev tab/step when called
activeTabIndex // current active tab index 
isLastStep // boolean to tell whether it's the last step or not
fillButtonStyle // object with styles for wizard-buttons (contains background and color passed through wizard props)

This is not published to npm yet!

[cristijora]

Released 0.6.2 https://github.com/cristijora/vue-form-wizard/releases/tag/v0.6.2
Also updated docs https://cristijora.github.io/vue-form-wizard/#/?id=footer-slot
Feel free to reopen the issue if something is missing or needs to be added. Will close this for now.

[pvmeerbe]

I just found this component and was able to successfully use it (thanks for the nice work).

However, the current implementation of footer does not allow to reuse the existing buttons and functionality while adding a new button such as a 'cancel' button. Instead one has to redefine the complete footer section and behavior.

From what I understand a 'slot' is only meant to define either the default content as provided by the plugin, or as alternative provide your own custom output. Combining the two is not the intended behavior.

Perhaps an additional (empty) named slot can be added for custom buttons. Adding a cancel button would then be as simple as providing content for this named slot and still use the original footer buttons.

[cristijora]

@pvmeerbe I see your point but you will have little control over the button and the position of the button you want to add. Let's try to make some examples of how you want it to be @pvmeerbe @vxzry

[vxzry]

I just want to add a simple cancel button on the first step
Im having trouble calling the finish method for the submit button
https://jsfiddle.net/vxzry/ad49b9aa/1/

[cristijora]

@vxzry See this updated example. It was a bug in the code. A wrong event was fired when nextTab method was called when you were on the last step.
https://jsfiddle.net/CristiJ/uppptbh0/3/

Released 0.6.4

[cristijora]

@pvmeerbe According to your suggestion, I added 2 slots for custom buttons.
https://jsfiddle.net/CristiJ/uppptbh0/11/

Also, all button slots can be used both as simple or scoped slots

[SINAKZM]

how can i keep active background color of bullet step after i pass the step??