Tabs refactoring

[mosinve]

Hi @pi0, there is my refactor attempt of Tabs. Please check code b4 merge :) I've tested already, but just for sure :)

[pi0]

@mosinve Thnks :) Preparing docs. If ESLint fails i'll fix it too

[pi0]

Change list :

• docs page
• updated example
• fix bug when we initially set tab to something not 0
• changed fade to no-fade for easier usage
• cards integration ability

@mosinve Would you please check changes and also what is your idea changing navStyle to just a pills prop? Is it intended for special usages or we may have only two possible values for that?

[mosinve]

About navstyle, I left it as it was. In bootstrap there're 2 options: tabs or pills. So this prop intended to handle this.
Quickly looked at changes from phone , and don't understand about cards... Check this today later from pc.

[mosinve]

Figured about cards - cool feature :)
One little notation: "card?'card-header':null" - {'card-header': card} looks better IMHO, and according Vue's guide it's the same ;)
tab - why i'd prefer v-show instead v-if: with v-if transition between tabs shows with some twitching and this not corrected by changing transition modes, with v-show it doesn't twitching - very smooth.

[pi0]

@mosinve I was just used to card? syntax :)) Yep object style is much better.
v-show may help a little. But a real case: we have a blogging platform & a post editor with 3 tabs editor, preview and comments. All of them are heavy enough ckeditor needs a big js chunk, comments are heavy and if we just use v-show we can't lazy load tabs. We may combine both methods with a lazy prop on each tab-item :

<tab-item v-if="localshow || !lazy" v-show="localshow || lazy">```

And about navs if you agree we can make usage more semantic by (at least) providing `pills` prop to easily change style.

[mosinve]

I like lazy variant - it's more flexible.
Pills prop - i think about it too, so i agree ))

And one more thing, when i tested tabs on local playground, i catch a bug with parent/child assigment. Because of it i moved tabs init from tab (this.$parent) to tabs (this.$slots) - in playground all components are childen of this.vm, but in real life - tab are child of tabs so old version worked well, but gave an error in playground.

[pi0]

@mosinve I didn't get your meaning about $slots . Do you mean it won't work outside of playground?

[mosinve]

slots work everywhere
$parent/$child - not work in playground

[pi0]

I think i got it :)) @mosinve Would you please commit final fixes for that? so we merge & release it sooner :)

[mosinve]

I'll do

[mosinve]

funny thing:
if I write in tab item
v-if="localActive" v-show="localActive"
transition begin to work smooth ))) even without lazy prop....

[pi0]

😂 It seems being related to <transition> wrapper.

[pi0]

@mosinve Merge it when done :) We can be ready for next release

[pi0]

поздравления :)

[mosinve]

متشکرم ;) Hope google trans make it correct)))))