toggle.blade.php 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. @php
  2. use Filament\Support\View\Components\ToggleComponent;
  3. use Illuminate\Support\Arr;
  4. @endphp
  5. @props([
  6. 'state',
  7. 'offColor' => 'gray',
  8. 'offIcon' => null,
  9. 'onColor' => 'primary',
  10. 'onIcon' => null,
  11. ])
  12. <button
  13. x-data="{ state: {{ $state }} }"
  14. x-bind:aria-checked="state?.toString()"
  15. x-on:click="state = ! state"
  16. x-bind:class="
  17. state ? @js(Arr::toCssClasses([
  18. 'fi-toggle-on',
  19. ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $onColor),
  20. ])) : @js(Arr::toCssClasses([
  21. 'fi-toggle-off',
  22. ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $offColor),
  23. ]))
  24. "
  25. @if ($state)
  26. x-cloak
  27. @endif
  28. {{
  29. $attributes
  30. ->merge([
  31. 'role' => 'switch',
  32. 'type' => 'button',
  33. ], escape: false)
  34. ->class(['fi-toggle'])
  35. }}
  36. >
  37. <div>
  38. <div aria-hidden="true">
  39. {{ \Filament\Support\generate_icon_html($offIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
  40. </div>
  41. <div aria-hidden="true">
  42. {{ \Filament\Support\generate_icon_html($onIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
  43. </div>
  44. </div>
  45. </button>
  46. @if ($state)
  47. <div
  48. x-cloak="inline-flex"
  49. wire:ignore
  50. @class([
  51. 'fi-toggle fi-toggle-on fi-hidden',
  52. ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $onColor),
  53. ])
  54. >
  55. <div>
  56. <div aria-hidden="true"></div>
  57. <div aria-hidden="true">
  58. {{ \Filament\Support\generate_icon_html($onIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
  59. </div>
  60. </div>
  61. </div>
  62. @endif