$js actions for tabs

[mauritskorse]

I have created various $js actions for <flux:tabs>. You can find the gist here: https://gist.github.com/mauritskorse/75817b2297669cfe73146a4252ed6295

Switch optimistically to a tab before wire:model makes the round trip

These actions can be used from within and outside the tab group using wire:click

• switchTab()
• nextTab()
• previousTab()
• firstTab()
• lastTab()

Example

<flux:tab.group>

    <flux:tabs wire:model="steps">
        <flux:tab name="start">Start</flux:tab>
        <flux:tab name="billing">Finish</flux:tab>
    </flux:tabs> 

    <flux:tab.panel name="start">
        <flux:button wire:click="$js.nextTab()">Next</flux:button>
    </flux:tab.panel>

    <flux:tab.panel name="finish">
        <flux:button wire:click="$js.previousTab()">Next</flux:button>
    </flux:tab.panel>

</flux:tab.group>

<!-- button outside the tab.group: target the name of the tab and the name/wire:model of the tab group -->
<flux:button wire:click="$js.switchTab('start', 'steps')">Start</flux:button>

Force loading a lazy livewire component witin a tab when hovering the tab:

This action can be used if your tabpanel has a lazy livewire component inside. It will force to load the component when the user enters the tab when adding x-on:mouseenter="$js.loadLazyTab($el)" toyour <flux:tab>. The load will be triggered after 100ms or cancelled when the user has moved out again.

• loadLazyTab($el)

Example

<flux:tab.group>
    <flux:tabs wire:model="tab" >
        <flux:tab x-on:mouseenter="$js.loadLazyTab($el)" name="profile">Profile</flux:tab>
    </flux:tabs>
    <flux:tab.panel name="profile">
        <livewire:user.profile lazy />
    </flux:tab.panel>
</flux:tab.group>

Note: Unfortunately you need to pass $el to the action as Alpine doesn't forward the Event object. Using @mouseenter is not possible on blade components, so you have to use x-on: