Add support for navigation and header slot

[icrotz]

Features:

• Add support for custom navigation
• Add support for custom header

<form-wizard shape="square" color="#3498db">
          <template slot="header" slot-scope="props">
            Title: {{ props.title }}
          </template>
          <template slot="navigation" slot-scope="props">
            Add something here
          </template>
          <tab-content title="Personal details" icon="ti-user">
            First tab
          </tab-content>
          <tab-content title="Additional Info" icon="ti-settings">
            My second tab content
          </tab-content>
          <tab-content title="Last step" icon="ti-check">
            Yuhuuu! This seems pretty damn simple
          </tab-content>
</form-wizard>

[vesper8]

@cristijora @charles-salmon Any chance one of you kind gentlemen could please merge this most-needed PR? I want to customize the tabs as well and replace by TailwindCSS tabs.

Would be lovely if you could also merge #316 as well

Thank you kindly!!

[vesper8]

@cristijora @charles-salmon any update please? Is this project abandonned? This is a much needed PR and using forks is not the easiest thing.. would love to see this merged in.. we need more control over the steps.. for example I would like to have them at the bottom instead of at the top and currently that isn't easy if possible at all.

Thanks

[michaelbukachi]

@icrotz @cristijora Any progress on this?

[icrotz]

The project is dead...

[BRafols]

@icrotz This is necessary.

I offer myself as a maintainer if you guys have to time

[charles-salmon]

@vesper8 Sorry, I must have missed your comments earlier. I don't actually have write access to this repository, so am unable to help from the perspective of providing a review / merging this in - I simply contributed some improvements to the type definitions.

@icrotz There's a fair number of formatting changes that take away from the meaning of your PR. If these were tidied up, it would be a lot easier for @cristijora to read. It looks as though you perhaps have Prettier installed globally or something. While I haven't done any front-end development for a while, the intent of your PR definitely seems to contribute positively.

@BRafols If you don't hear back from @cristijora, perhaps you could fork the repository. You could also try using the Binarcode Contact Us page to see if they'd be happy to transfer the repository to you or instate appropriate rights.

[BRafols]

Hello @icrotz I got access to this repo and will try to keep the PR's going.

Could you please remove the prettier formatting from the code? I'll probably add that personally in a different PR.

If you do that I'll merge.

Thanks for your contribution

[icrotz]

Done :D

[productdevbook]

I'm waiting to write with tailwindcss :) I hope there will be an improvement

[aswzen]

How to add html code into tab title?

tried with <tab-content title="Personal<br>Detail" :before-change="firstPhaseCheck" icon="ti-check">
got no luck

thank you
regards
sigit

[charles-salmon]

@aswzen You would need to use a slot to render HTML inside the FormWizard component. The TabContent component does not have any slots.

[lemaia]

Is this PR dead? Really need this feature to customize the navigation.

[icrotz]

@lemaia This project is dead, you can my fork or use a package like https://www.npmjs.com/package/patch-package to add this feature yourself. It's pretty easy to add.

[vesper8]

If you ever switch to Vue3, someone has ported this package and is actively maintaining it and fixing issues too https://github.com/parsajiravand/vue3-form-wizard

[yogithesymbian]

@aswzen You would need to use a slot to render HTML inside the FormWizard component. The TabContent component does not have any slots.

we looking for TabContent with slot to change color of the tab navigation....

<wizard-step 
    slot-scope="props"
    slot="step"
    :tab="props.tab"
    :transition="props.transition"
    :index="props.index">
// but how // i didnt get it // need to custom ui and enable click event , // this code make disable event click even you have set activeAll() by `refs`
</wizard-step>