index.blade.php 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. @php
  2. use Filament\Support\Enums\Alignment;
  3. use Filament\Support\Enums\IconSize;
  4. use Filament\Support\View\Components\SectionComponent\IconComponent;
  5. use function Filament\Support\is_slot_empty;
  6. @endphp
  7. @props([
  8. 'afterHeader' => null,
  9. 'aside' => false,
  10. 'collapsed' => false,
  11. 'collapseId' => null,
  12. 'collapsible' => false,
  13. 'compact' => false,
  14. 'contained' => true,
  15. 'contentBefore' => false,
  16. 'description' => null,
  17. 'divided' => false,
  18. 'footer' => null,
  19. 'hasContentEl' => true,
  20. 'heading' => null,
  21. 'headingTag' => 'h2',
  22. 'icon' => null,
  23. 'iconColor' => 'gray',
  24. 'iconSize' => null,
  25. 'persistCollapsed' => false,
  26. 'secondary' => false,
  27. ])
  28. @php
  29. if (filled($iconSize) && (! $iconSize instanceof IconSize)) {
  30. $iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
  31. }
  32. $hasDescription = filled((string) $description);
  33. $hasHeading = filled($heading);
  34. $hasIcon = filled($icon);
  35. $hasHeader = $hasIcon || $hasHeading || $hasDescription || $collapsible || (! is_slot_empty($afterHeader));
  36. @endphp
  37. <section
  38. {{-- TODO: Investigate Livewire bug - https://github.com/filamentphp/filament/pull/8511 --}}
  39. x-data="{
  40. isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${@js($collapseId) ?? $el.id}-isCollapsed`) @else @js($collapsed) @endif,
  41. }"
  42. @if ($collapsible)
  43. x-on:collapse-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = true"
  44. x-on:expand="isCollapsed = false"
  45. x-on:expand-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = false"
  46. x-on:open-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = false"
  47. x-on:toggle-section.window="if ($event.detail.id == @js($collapseId) ?? $el.id) isCollapsed = ! isCollapsed"
  48. x-bind:class="isCollapsed && 'fi-collapsed'"
  49. @endif
  50. {{
  51. $attributes->class([
  52. 'fi-section',
  53. 'fi-section-not-contained' => ! $contained,
  54. 'fi-section-has-content-before' => $contentBefore,
  55. 'fi-section-has-header' => $hasHeader,
  56. 'fi-aside' => $aside,
  57. 'fi-compact' => $compact,
  58. 'fi-collapsible' => $collapsible,
  59. 'fi-divided' => $divided,
  60. 'fi-secondary' => $secondary,
  61. ])
  62. }}
  63. >
  64. @if ($hasHeader)
  65. <header
  66. @if ($collapsible)
  67. x-on:click="isCollapsed = ! isCollapsed"
  68. @endif
  69. class="fi-section-header"
  70. >
  71. {{
  72. \Filament\Support\generate_icon_html($icon, attributes: (new \Illuminate\View\ComponentAttributeBag)
  73. ->color(IconComponent::class, $iconColor), size: $iconSize ?? IconSize::Large)
  74. }}
  75. @if ($hasHeading || $hasDescription)
  76. <div class="fi-section-header-text-ctn">
  77. @if ($hasHeading)
  78. <{{ $headingTag }} class="fi-section-header-heading">
  79. {{ $heading }}
  80. </{{ $headingTag }}>
  81. @endif
  82. @if ($hasDescription)
  83. <p class="fi-section-header-description">
  84. {{ $description }}
  85. </p>
  86. @endif
  87. </div>
  88. @endif
  89. @if (! is_slot_empty($afterHeader))
  90. <div x-on:click.stop class="fi-section-header-after-ctn">
  91. {{ $afterHeader }}
  92. </div>
  93. @endif
  94. @if ($collapsible)
  95. <x-filament::icon-button
  96. color="gray"
  97. :icon="\Filament\Support\Icons\Heroicon::ChevronUp"
  98. :icon-alias="\Filament\Support\View\SupportIconAlias::SECTION_COLLAPSE_BUTTON"
  99. x-on:click.stop="isCollapsed = ! isCollapsed"
  100. class="fi-section-collapse-btn"
  101. />
  102. @endif
  103. </header>
  104. @endif
  105. @if ((! is_slot_empty($slot)) || (! is_slot_empty($footer)))
  106. <div
  107. @if ($collapsible)
  108. x-bind:aria-expanded="(! isCollapsed).toString()"
  109. @if ($collapsed || $persistCollapsed)
  110. x-cloak
  111. @endif
  112. @endif
  113. class="fi-section-content-ctn"
  114. >
  115. @if ($hasContentEl)
  116. <div class="fi-section-content">
  117. {{ $slot }}
  118. </div>
  119. @else
  120. {{ $slot }}
  121. @endif
  122. @if (! is_slot_empty($footer))
  123. <footer class="fi-section-footer">
  124. {{ $footer }}
  125. </footer>
  126. @endif
  127. </div>
  128. @endif
  129. </section>