wrapper.blade.php 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. @props([
  2. 'alpineDisabled' => null,
  3. 'alpineValid' => null,
  4. 'disabled' => false,
  5. 'inlinePrefix' => false,
  6. 'inlineSuffix' => false,
  7. 'prefix' => null,
  8. 'prefixActions' => [],
  9. 'prefixIcon' => null,
  10. 'prefixIconColor' => 'gray',
  11. 'prefixIconAlias' => null,
  12. 'suffix' => null,
  13. 'suffixActions' => [],
  14. 'suffixIcon' => null,
  15. 'suffixIconColor' => 'gray',
  16. 'suffixIconAlias' => null,
  17. 'valid' => true,
  18. ])
  19. @php
  20. use Filament\Support\View\Components\InputComponent\WrapperComponent\IconComponent;
  21. use Illuminate\View\ComponentAttributeBag;
  22. $prefixActions = array_filter(
  23. $prefixActions,
  24. fn (\Filament\Actions\Action $prefixAction): bool => $prefixAction->isVisible(),
  25. );
  26. $suffixActions = array_filter(
  27. $suffixActions,
  28. fn (\Filament\Actions\Action $suffixAction): bool => $suffixAction->isVisible(),
  29. );
  30. $hasPrefix = count($prefixActions) || $prefixIcon || filled($prefix);
  31. $hasSuffix = count($suffixActions) || $suffixIcon || filled($suffix);
  32. $hasAlpineDisabledClasses = filled($alpineDisabled);
  33. $hasAlpineValidClasses = filled($alpineValid);
  34. $hasAlpineClasses = $hasAlpineDisabledClasses || $hasAlpineValidClasses;
  35. $wireTarget = $attributes->whereStartsWith(['wire:target'])->first();
  36. $hasLoadingIndicator = filled($wireTarget);
  37. if ($hasLoadingIndicator) {
  38. $loadingIndicatorTarget = html_entity_decode($wireTarget, ENT_QUOTES);
  39. }
  40. @endphp
  41. <div
  42. @if ($hasAlpineClasses)
  43. x-bind:class="{
  44. {{ $hasAlpineDisabledClasses ? "'fi-disabled': {$alpineDisabled}," : null }}
  45. {{ $hasAlpineValidClasses ? "'fi-invalid': ! ({$alpineValid})," : null }}
  46. }"
  47. @endif
  48. {{
  49. $attributes
  50. ->except(['wire:target', 'tabindex'])
  51. ->class([
  52. 'fi-input-wrp',
  53. 'fi-disabled' => (! $hasAlpineClasses) && $disabled,
  54. 'fi-invalid' => (! $hasAlpineClasses) && (! $valid),
  55. ])
  56. }}
  57. >
  58. @if ($hasPrefix || $hasLoadingIndicator)
  59. <div
  60. @if (! $hasPrefix)
  61. wire:loading.delay.{{ config('filament.livewire_loading_delay', 'default') }}.flex
  62. wire:target="{{ $loadingIndicatorTarget }}"
  63. wire:key="{{ \Illuminate\Support\Str::random() }}" {{-- Makes sure the loading indicator gets hidden again. --}}
  64. @endif
  65. @class([
  66. 'fi-input-wrp-prefix',
  67. 'fi-input-wrp-prefix-has-content' => $hasPrefix,
  68. 'fi-inline' => $inlinePrefix,
  69. 'fi-input-wrp-prefix-has-label' => filled($prefix),
  70. ])
  71. >
  72. @if (count($prefixActions))
  73. <div class="fi-input-wrp-actions">
  74. @foreach ($prefixActions as $prefixAction)
  75. {{ $prefixAction }}
  76. @endforeach
  77. </div>
  78. @endif
  79. {{
  80. \Filament\Support\generate_icon_html($prefixIcon, $prefixIconAlias, (new \Illuminate\View\ComponentAttributeBag)
  81. ->merge([
  82. 'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
  83. 'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
  84. ], escape: false)
  85. ->color(IconComponent::class, $prefixIconColor))
  86. }}
  87. @if ($hasLoadingIndicator)
  88. {{
  89. \Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
  90. 'wire:loading.delay.' . config('filament.livewire_loading_delay', 'default') => $hasPrefix,
  91. 'wire:target' => $hasPrefix ? $loadingIndicatorTarget : null,
  92. ]))->color(IconComponent::class, 'gray'))
  93. }}
  94. @endif
  95. @if (filled($prefix))
  96. <span class="fi-input-wrp-label">
  97. {{ $prefix }}
  98. </span>
  99. @endif
  100. </div>
  101. @endif
  102. <div
  103. @if ($hasLoadingIndicator && (! $hasPrefix))
  104. @if ($inlinePrefix)
  105. wire:loading.delay.{{ config('filament.livewire_loading_delay', 'default') }}.class.remove="ps-3"
  106. @endif
  107. wire:target="{{ $loadingIndicatorTarget }}"
  108. @endif
  109. @class([
  110. 'fi-input-wrp-content-ctn',
  111. 'fi-input-wrp-content-ctn-ps' => $hasLoadingIndicator && (! $hasPrefix) && $inlinePrefix,
  112. ])
  113. >
  114. {{ $slot }}
  115. </div>
  116. @if ($hasSuffix)
  117. <div
  118. @class([
  119. 'fi-input-wrp-suffix',
  120. 'fi-inline' => $inlineSuffix,
  121. 'fi-input-wrp-suffix-has-label' => filled($suffix),
  122. ])
  123. >
  124. @if (filled($suffix))
  125. <span class="fi-input-wrp-label">
  126. {{ $suffix }}
  127. </span>
  128. @endif
  129. {{
  130. \Filament\Support\generate_icon_html($suffixIcon, $suffixIconAlias, (new \Illuminate\View\ComponentAttributeBag)
  131. ->merge([
  132. 'wire:loading.remove.delay.' . config('filament.livewire_loading_delay', 'default') => $hasLoadingIndicator,
  133. 'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
  134. ], escape: false)
  135. ->color(IconComponent::class, $suffixIconColor))
  136. }}
  137. @if (count($suffixActions))
  138. <div class="fi-input-wrp-actions">
  139. @foreach ($suffixActions as $suffixAction)
  140. {{ $suffixAction }}
  141. @endforeach
  142. </div>
  143. @endif
  144. </div>
  145. @endif
  146. </div>