livewire-material/resources/views/components/tabs.blade.php

{{-- M3's tabs: the sections of one thing, with the chosen one marked by an active indicator.

     The bar is rendered on the server from `tabs`, a list of `['name' => …, 'label' => …]` with an
     optional `icon`, `badge` and `disabled` — so it arrives with the page, never a moment after it.
     The panels are `<x-tab name="…">` in the slot; every panel is rendered, so switching never waits
     on the server, and each arrives with its id and with every panel but the chosen one already
     hidden, so nothing flashes and no screen reader meets four panels at once.

     The chosen tab is the Livewire property in `wire:model` (entangled; `wire:model.live` tells the
     server at once), or, without it, `selected` (the first tab by default) and `x-model`. The bar is
     a real tablist (resources/js/tabs.js). `variant` is `primary` (the default: the indicator under
     the label, in primary) or `secondary` (under the whole tab, for tabs inside a section);
     `stacked` puts a primary tab's icon over its label (64px); `scrollable` lets tabs keep their
     own width and scroll sideways instead of sharing the width equally, offset 52dp from the
     leading edge so it reads as scrollable (resources/css/components/tabs.css). A fixed
     tab's label too long for its share wraps to a second line and truncates there, the whole bar
     growing to hold it; a scrollable tab keeps its label on one line (M3: "may wrap to a max
     second line if needed with truncation, or use scrollable tabs to give longer titles more
     room").

     The root renders `data-md-tabs`; the bar is `data-md-tabs-bar` with `data-md-variant`,
     `data-md-stacked` and `data-md-scrollable`, holding `data-md-tab` buttons (each
     `data-md-tab-content`, `data-md-tab-label` around the label's `data-md-tab-text` and its badge,
     and `data-md-tab-indicator`). Imports icon.css and badge.css for what the view renders. --}}

@props([
    'tabs' => [],
    'variant' => 'primary',
    'selected' => null,
    'stacked' => false,
    'scrollable' => false,
])

@php
    $model = $attributes->wire('model')->value() ?: null;
    $variant = $variant === 'secondary' ? 'secondary' : 'primary';
    // tab.blade.php repeats these two lines off the component stack, because a slot renders before
    // the component around it: change them together, or a panel's id stops matching aria-controls.
    $id = $attributes->get('id') ?? 'tabs-'.substr(md5($model.'|'.implode('|', array_column($tabs, 'name'))), 0, 8);

    $initial = $selected ?? (collect($tabs)->first(fn (array $tab): bool => ! ($tab['disabled'] ?? false))['name'] ?? null);
    $initial = \NoNameWeb\LivewireMaterial\Support\Field::bound($model, $initial, requireFilled: true);
@endphp

<div
    x-data="{
        @if ($model !== null) selected: @entangle($attributes->wire('model')), @else selected: @js($initial), @endif
        tabsId: @js($id),
        ...materialTabs(),
    }"
    @if ($model === null) x-modelable="selected" @endif
    data-md-tabs
    {{ $attributes->whereDoesntStartWith('wire:model')->except(['id']) }}
>
    <div
        x-ref="bar"
        role="tablist"
        data-md-tabs-bar
        data-md-variant="{{ $variant }}"
        @if ($stacked && $variant === 'primary') data-md-stacked @endif
        @if ($scrollable) data-md-scrollable @endif
        style="--tabs-indicator: {{ $id }}-indicator"
        x-on:keydown.arrow-right.prevent="step(1)"
        x-on:keydown.arrow-left.prevent="step(-1)"
        x-on:keydown.home.prevent="edge(false)"
        x-on:keydown.end.prevent="edge(true)"
    >
        @foreach ($tabs as $tab)
            @php($isInitial = (string) $tab['name'] === (string) $initial)

            <button
                type="button"
                role="tab"
                id="{{ $id }}-{{ $tab['name'] }}"
                data-md-tab="{{ $tab['name'] }}"
                aria-controls="{{ $id }}-{{ $tab['name'] }}-panel"
                aria-selected="{{ $isInitial ? 'true' : 'false' }}"
                tabindex="{{ $isInitial ? '0' : '-1' }}"
                x-bind:aria-selected="(selected === @js($tab['name'])).toString()"
                x-bind:tabindex="selected === @js($tab['name']) ? 0 : -1"
                x-on:click="choose(@js($tab['name']))"
                @disabled($tab['disabled'] ?? false)
            >
                <span data-md-tab-content>
                    @isset($tab['icon'])
                        <x-livewire-material::icon :name="$tab['icon']" />
                    @endisset
                    <span data-md-tab-label>
                        <span data-md-tab-text>{{ $tab['label'] }}</span>
                        @if (filled($tab['badge'] ?? null))
                            <x-livewire-material::badge :value="$tab['badge']" />
                        @endif
                    </span>
                    <span data-md-tab-indicator aria-hidden="true"></span>
                </span>
            </button>
        @endforeach
    </div>

    {{ $slot }}
</div>