Support for dynamic tab-content

[vl4d]

Hey I have been playing around with your wizard, and I would love to update the number of tab-contents on the fly (managed by an array) depending on user preference the wizard would lengthen or shorten.

Here is a fiddle with what I would like to do. The remove first item button, though doesnt seem to remove the corresponding tab-content as I'd expect.

https://jsfiddle.net/bt5dhqtf/482/

Please let me know if this is the expected behaviour.

[cristijora]

Hi @vl4d I think I know why the issue appears. On mobile right know but I will look into it today.

[cristijora]

@vl4d Can you take a look at this fiddle https://jsfiddle.net/CristiJ/bt5dhqtf/497/
It references a develop branch so it's not ready for usage yet but wanted to know your opinion here on how steps should be handled.

1. What happens if the current checked step is removed?
2. What happens if a step before or after the current checked step is removed?
3. What happens if a step is added before or after the current checked step ?
4. Do you want similar cases to be handled or you have a more general use-case ?

[vl4d]

@cristijora thanks for the quick response, and based on your questions i'd say:

1. If the current checked step is remove, I'd go to the step before it.
2. If the step before or after the current step is removed then I'd expect the wizard to remain at the current step. The wizard would just be 1 step shorter.
3. If a step is added before the current checked, it would mean that we send the user back to this newly added step (that way the user addresses the step immediately) or a visual representation that it was added and needs to be addressed. If a step is added after the current checked step, nothing would change but an extra additional step.
4. The use-cases you stated would handle most of what I'd think would come up.

The good thing is that the developer could validate the information and force the user to go back to step is deemed invalid. That is, can't finish the wizard unless all steps are valid.

I can see why you made it concrete steps. I had changed my implementation to select steps before even starting the wizard, since this feature wasn't available.

I did testing using this fiddle: https://jsfiddle.net/bt5dhqtf/502/
just added a few buttons to see how the wizard would change.

[cristijora]

Sorry for late response on this. I will most likely rewrite the wizard in jsx. Currently I'm a bit limited of rendering dynamic content from slots and don't have as much control over that as I have with render functions and jsx. I have tried implementing this but it very quickly got dirty and uncontrollable. This might take 2-3 weeks until I find time to port the wizard to jsx and consider this functionality again. Hope that's fine

[cristijora]

3. If a step is added before the current checked, it would mean that we send the user back to this newly added step (that way the user addresses the step immediately) or a visual representation that it was added and needs to be addressed. If a step is added after the current checked step, nothing would change but an extra additional step.

This is the only point which I have not addressed yet since it's rather hard to detect where a step was added. If you have any ideas, please let me know. Kind of stuck on it.

[exnihilo-creatio]

@cristijora Regarding your comment 312689794. One idea might be the give every tab a private index in initializeTabs , then in reinitializeTabs you keep track of this.
Why not keep track of the tabs by hashing the tab-content by it's title and icon? Assuming these are unique per wizard.

[cristijora]

@exnihilo-creatio Thanks for the idea. I sort of improved this with a new internal implementation but I still feel that it doesn't work as expected mainly due to the fact that different array operations (shift, pop etc) can cause multiple additions/removals which in the end provides inconsistent results. Don't know if hashing would help too much here but I could give a try.

[exnihilo-creatio]

The idea for the hash is to find out which tabs are currently being tracked. Once the array has been changed you loop over the new tabs and check which hashes are not present in the interal hash cache. Those not present are new tabs, and from the loop you can know the position of newly added tabs.

After checking for new tabs, you can loop and check for removed tabs and update indexes hereafter.

It might be benificial to try and complete both steps in the same loop. Hopefully using these steps the type of array operation is not important.

[cristijora]

@exnihilo-creatio Do you have the desire to do a PR 😄 ?
The current logic for this is here
https://github.com/cristijora/vue-form-wizard/blob/master/src/components/FormWizard.vue#L226
and here
https://github.com/cristijora/vue-form-wizard/blob/master/src/components/FormWizard.vue#L237

You could add a watch property for tabs and add this hash as a computed property maybe inside tab-content and do the checks accordingly. When you know exactly what tabs to change you can use

this.changeTab(this.activeTabIndex, newIndex)

And potentially adjust this.maxStep = // max value the wizard reached

[exnihilo-creatio]

@cristijora Yes, but I can't guarantee a timeline, I'm swamped with work the coming weeks.

[cristijora]

@exnihilo-creatio No worries about that. I would be grateful for the help regardless of timeline

[vl4d]

Sorry for the delay. (finals came up)
@cristijora I had tried to do something hacky to introduce a hash as @exnihilo-creatio mentioned. If my proof of concept works I'll share and hopefully you can make it more elegant.

[cristijora]

@vl4d Would be happy to see a working concept :)

[un-matthewdavis]

Any more feedback on this issue? I'd be keen to have the ability to dynamically insert tabs based on the current tabs status. I'd only need to add/remove tabs in front of the current one, not behind.

[cristijora]

@un-matthewdavis This is partially supported. It might not work as expected in some situations. It should be more or less reliable when you use an array to generate all steps rather then combine static html + a v-for

See this example as a reference https://jsfiddle.net/bt5dhqtf/1185/

[zhang-yafei]

Hi @cristijora ,
I have a problem.I have a question array,The number of questions is unknown, The number of answers is unknown(input type have text and checkbox and radio).

I want to dynamically generate step component,but I got a problem when I verified.I do not know how to verify(checkbox and radiobox).

I've seen you write ReadMe.md,I have more style in my vue file,
I want if can return a currentIndex and current Tab-content is good.

This is my demo https://jsfiddle.net/YoungHarry/Lsmjrpeq/10/

[cristijora]

Hi @zhang-yafei
The most simple way
https://jsfiddle.net/Lsmjrpeq/15/

Is to add :start-index.sync="stepIndex" on the wizard. The stepIndex will be synced and will be changed whenever the wizard goes to another step.

Another option would be on-change event
https://cristijora.github.io/vue-form-wizard/#/?id=events

<form-wizard @on-change="handleChange">

handleChange(prevIndex, nextIndex){
// This will be called when wizard goes from one step to another
}

Based on that you can access your arrayData

[zhang-yafei]

Thank you.I will try to solve it.Thanks again for your reply.
I have a final version.It can check every tab-content in loop.
https://jsfiddle.net/YoungHarry/ug00booq/16/

[cristijora]

Closing this since it's out of scope for now.
Dynamic tab contents are supported if used all together in a v-for. There is an example in the readme already https://jsfiddle.net/bt5dhqtf/1251/

[dhaval1123]

see the link https://jsfiddle.net/bt5dhqtf/502/ The only step I have remove that it should be returned only.In same posotion