| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- @php
- use Filament\Support\Enums\Alignment;
- use Filament\Support\Enums\IconSize;
- use Filament\Support\View\Components\SectionComponent\IconComponent;
- use function Filament\Support\is_slot_empty;
- @endphp
- @props([
- 'afterHeader' => null,
- 'aside' => false,
- 'collapsed' => false,
- 'collapseId' => null,
- 'collapsible' => false,
- 'compact' => false,
- 'contained' => true,
- 'contentBefore' => false,
- 'description' => null,
- 'divided' => false,
- 'footer' => null,
- 'hasContentEl' => true,
- 'heading' => null,
- 'headingTag' => 'h2',
- 'icon' => null,
- 'iconColor' => 'gray',
- 'iconSize' => null,
- 'persistCollapsed' => false,
- 'secondary' => false,
- ])
- @php
- if (filled($iconSize) && (! $iconSize instanceof IconSize)) {
- $iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
- }
- $hasDescription = filled((string) $description);
- $hasHeading = filled($heading);
- $hasIcon = filled($icon);
- $hasHeader = $hasIcon || $hasHeading || $hasDescription || $collapsible || (! is_slot_empty($afterHeader));
- @endphp
- <section
- {{-- TODO: Investigate Livewire bug - https://github.com/filamentphp/filament/pull/8511 --}}
- x-data="{
- isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${@js($collapseId) ?? $el.id}-isCollapsed`) @else @js($collapsed) @endif,
- }"
- @if ($collapsible)
- x-on:collapse-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = true"
- x-on:expand="isCollapsed = false"
- x-on:expand-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = false"
- x-on:open-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = false"
- x-on:toggle-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = ! isCollapsed"
- x-bind:class="isCollapsed && 'fi-collapsed'"
- @endif
- {{
- $attributes->class([
- 'fi-section',
- 'fi-section-not-contained' => ! $contained,
- 'fi-section-has-content-before' => $contentBefore,
- 'fi-section-has-header' => $hasHeader,
- 'fi-aside' => $aside,
- 'fi-compact' => $compact,
- 'fi-collapsible' => $collapsible,
- 'fi-divided' => $divided,
- 'fi-secondary' => $secondary,
- ])
- }}
- >
- @if ($hasHeader)
- <header
- @if ($collapsible)
- x-on:click="isCollapsed = ! isCollapsed"
- @endif
- class="fi-section-header"
- >
- {{
- \Filament\Support\generate_icon_html($icon, attributes: (new \Illuminate\View\ComponentAttributeBag)
- ->color(IconComponent::class, $iconColor), size: $iconSize ?? IconSize::Large)
- }}
- @if ($hasHeading || $hasDescription)
- <div class="fi-section-header-text-ctn">
- @if ($hasHeading)
- <{{ $headingTag }} class="fi-section-header-heading">
- {{ $heading }}
- </{{ $headingTag }}>
- @endif
- @if ($hasDescription)
- <p class="fi-section-header-description">
- {{ $description }}
- </p>
- @endif
- </div>
- @endif
- @if (! is_slot_empty($afterHeader))
- <div x-on:click.stop class="fi-section-header-after-ctn">
- {{ $afterHeader }}
- </div>
- @endif
- @if ($collapsible)
- <x-filament::icon-button
- color="gray"
- :icon="\Filament\Support\Icons\Heroicon::ChevronUp"
- :icon-alias="\Filament\Support\View\SupportIconAlias::SECTION_COLLAPSE_BUTTON"
- x-on:click.stop="isCollapsed = ! isCollapsed"
- class="fi-section-collapse-btn"
- />
- @endif
- </header>
- @endif
- @if ((! is_slot_empty($slot)) || (! is_slot_empty($footer)))
- <div
- @if ($collapsible)
- x-bind:aria-expanded="(! isCollapsed).toString()"
- @if ($collapsed || $persistCollapsed)
- x-cloak
- @endif
- @endif
- class="fi-section-content-ctn"
- >
- @if ($hasContentEl)
- <div class="fi-section-content">
- {{ $slot }}
- </div>
- @else
- {{ $slot }}
- @endif
- @if (! is_slot_empty($footer))
- <footer class="fi-section-footer">
- {{ $footer }}
- </footer>
- @endif
- </div>
- @endif
- </section>
|