| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- @php
- use Filament\Support\View\Components\ToggleComponent;
- use Illuminate\Support\Arr;
- @endphp
- @props([
- 'state',
- 'offColor' => 'gray',
- 'offIcon' => null,
- 'onColor' => 'primary',
- 'onIcon' => null,
- ])
- <button
- x-data="{ state: {{ $state }} }"
- x-bind:aria-checked="state?.toString()"
- x-on:click="state = ! state"
- x-bind:class="
- state ? @js(Arr::toCssClasses([
- 'fi-toggle-on',
- ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $onColor),
- ])) : @js(Arr::toCssClasses([
- 'fi-toggle-off',
- ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $offColor),
- ]))
- "
- @if ($state)
- x-cloak
- @endif
- {{
- $attributes
- ->merge([
- 'role' => 'switch',
- 'type' => 'button',
- ], escape: false)
- ->class(['fi-toggle'])
- }}
- >
- <div>
- <div aria-hidden="true">
- {{ \Filament\Support\generate_icon_html($offIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
- </div>
- <div aria-hidden="true">
- {{ \Filament\Support\generate_icon_html($onIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
- </div>
- </div>
- </button>
- @if ($state)
- <div
- x-cloak="inline-flex"
- wire:ignore
- @class([
- 'fi-toggle fi-toggle-on fi-hidden',
- ...\Filament\Support\get_component_color_classes(ToggleComponent::class, $onColor),
- ])
- >
- <div>
- <div aria-hidden="true"></div>
- <div aria-hidden="true">
- {{ \Filament\Support\generate_icon_html($onIcon, size: \Filament\Support\Enums\IconSize::ExtraSmall) }}
- </div>
- </div>
- </div>
- @endif
|