Feature/allow nested tab components

[ChristophWalter]

Bug

The order of content-tabs is broken if one or more tabs are wrapped within other tags or components. Take a look at the extended unit test.

Problem

Large wizards may use sub components to keep a clear structure and before-change validation. There are issues relating to this, e.g. https://github.com/BinarCode/vue-form-wizard/issues/247

Explanation

Searching $slots für tab-contents to get an index will fail for nested components as indexOf will return -1:

const index = this.$slots.default.indexOf(item.$vnode)

But there is even a problem with the current implementation and non-nested components. Imagine the following markup:

<form-wizard>
  <content-tab title="Tab1"/>
  <content-tab title="Tab2"/>
  <content-tab title="Tab3"/>
</form-wizard>

Array.splice() won't work correctly as the tabs may come up in the following order:

• Tab1 registers first with index 1-> [Tab1]
• Tab3 follows with index 3 -> [Tab1, Tab3]
• Tab2 follows with index 2 -> [Tab1, Tab3, Tab2]

=> The result of using splice with an index is not like desired. The order in which subcomponents are registered is still critical.

Solution

Using Array.push() will still be dependent of the tab registration order but fix the lookup of nested components. Furthermore, adding tabs when they are created instead of mounted may help to be more consistent.

Further improvements

We need to come up with a solution to be independent of component registration order. This way we can also handle dynamically toggled tabs.