Jacobs63/vue3-tabs-component

create is-valid class

Closed this issue · 4 comments

cgrisar commented

Hi,

Thanks for a great component.

I'd like to make a further, hard needed FR (for me at least).

At this moment, the classes are set on the tabs component.
This covers a lot of use cases.

However, it would be great to be able to override the tab (not the panel) at the tab-component level.
For instance, one might want to validate a form on a tab and hence, for instance, want the background of the tab in green.

Actually tried a couple of solutions (including programmatically through ref but alas, no joy.

Jacobs63 commented

Hello,

I've stumbled upon this issue myself last week and plan to implement some solution to modify a class of a specific tab.

cgrisar commented

There are a couple of improvements that might be made

  1. use binding classes. One can create for instance a
    :nav-item-link-class=“['bg-gray-300', {‘text-red’:!OK}, {‘bg-green’:OK}]”
    This totally works but you get a warning in the console because of type constraints in ts.

  2. create a :is-valid option like is-disabled

  3. specification on the tab level. I’ve sorted things out for my project with :is-disabled because it only has 3 tabs with a very simple logic (bg in red in disabled class for payment tab when the other 2 forms are not complete).

In other projects, the above improvements might be a real boon and can be a start to creating a multistep form.

You might also want to take a look at dynamically created tabs (with v-for) like I wrote in the previous issue.
I have a simple hack but IMO there shouldn’t be one.

Finally, I wish to congratulate you. Overall, this is a really fine component working as a component should be. Save for dynamic loading, the component is highly predictable.
Well done!

Jacobs63 commented

Hello,

thank you for those suggestions, some of them however seem to only suit your specific use case, which I cannot cover like that, it needs a more flexible solution.
I'll take a look in the upcoming days.

Jacobs63 commented

Hello,

version 1.3.4 has been released which should properly support your use-case:

  1. All class props types now properly typed Object & Array shapes as well
  2. A Tab can now specify nav-item-class & nav-item-link-class explicitly, which would override those classes for the specific tab - you should not be able to set it as:
<tabs nav-item-link-class="bg-gray-300">
  <tab :nav-item-link-class="['bg-gray-300', {'text-red':!OK, 'bg-green':OK}]" name="xx">
    xx
  </tab>
</tabs>