@php use Filament\Support\Enums\ActionSize; use Filament\Support\Enums\IconPosition; use Filament\Support\Enums\IconSize; @endphp @props([ 'color' => 'primary', 'deleteButton' => null, 'disabled' => false, 'form' => null, 'formId' => null, 'href' => null, 'icon' => null, 'iconAlias' => null, 'iconPosition' => IconPosition::Before, 'iconSize' => IconSize::Small, 'keyBindings' => null, 'loadingIndicator' => true, 'size' => ActionSize::Medium, 'spaMode' => null, 'tag' => 'span', 'target' => null, 'tooltip' => null, 'type' => 'button', ]) @php if (! $iconPosition instanceof IconPosition) { $iconPosition = filled($iconPosition) ? (IconPosition::tryFrom($iconPosition) ?? $iconPosition) : null; } if (! $size instanceof ActionSize) { $size = filled($size) ? (ActionSize::tryFrom($size) ?? $size) : null; } if (! $iconSize instanceof IconSize) { $iconSize = filled($iconSize) ? (IconSize::tryFrom($iconSize) ?? $iconSize) : null; } $isDeletable = count($deleteButton?->attributes->getAttributes() ?? []) > 0; $iconClasses = \Illuminate\Support\Arr::toCssClasses([ 'fi-badge-icon h-4 w-4', match ($iconSize) { IconSize::Small => 'h-4 w-4', IconSize::Medium => 'h-5 w-5', IconSize::Large => 'h-6 w-6', default => $iconSize, }, match ($color) { 'gray' => 'text-gray-400 dark:text-gray-500', default => 'text-custom-500', }, ]); $iconStyles = \Illuminate\Support\Arr::toCssStyles([ \Filament\Support\get_color_css_variables( $color, shades: [500], alias: 'badge.icon', ) => $color !== 'gray', ]); $wireTarget = $loadingIndicator ? $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first() : null; $hasLoadingIndicator = filled($wireTarget) || ($type === 'submit' && filled($form)); if ($hasLoadingIndicator) { $loadingIndicatorTarget = html_entity_decode($wireTarget ?: $form, ENT_QUOTES); } $hasTooltip = filled($tooltip); @endphp <{{ $tag }} @if ($tag === 'a') {{ \Filament\Support\generate_href_html($href, $target === '_blank', $spaMode) }} @endif @if ($keyBindings || $hasTooltip) x-data="{}" @endif @if ($keyBindings) x-bind:id="$id('key-bindings')" x-mousetrap.global.{{ collect($keyBindings)->map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }}="document.getElementById($el.id).click()" @endif @if ($hasTooltip) x-tooltip="{ content: @js($tooltip), theme: $store.theme, }" @endif {{ $attributes ->merge([ 'disabled' => $disabled, 'form' => $tag === 'button' ? $formId : null, 'type' => $tag === 'button' ? $type : null, 'wire:loading.attr' => $tag === 'button' ? 'disabled' : null, 'wire:target' => ($hasLoadingIndicator && $loadingIndicatorTarget) ? $loadingIndicatorTarget : null, ], escape: false) ->class([ 'fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset', 'pointer-events-none opacity-70' => $disabled, match ($size) { ActionSize::ExtraSmall => 'px-0.5 min-w-[theme(spacing.4)] tracking-tighter', ActionSize::Small => 'px-1.5 min-w-[theme(spacing.5)] py-0.5 tracking-tight', ActionSize::Medium, ActionSize::Large, ActionSize::ExtraLarge => 'px-2 min-w-[theme(spacing.6)] py-1', default => $size, }, match ($color) { 'gray' => 'bg-gray-50 text-gray-600 ring-gray-600/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20', default => 'fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30', }, is_string($color) ? "fi-color-{$color}" : null, ]) ->style([ \Filament\Support\get_color_css_variables( $color, shades: [ 50, 400, 600, ], alias: 'badge', ) => $color !== 'gray', ]) }} > @if ($iconPosition === IconPosition::Before) @if ($icon) @endif @if ($hasLoadingIndicator) @endif @endif {{ $slot }} @if ($isDeletable) @elseif ($iconPosition === IconPosition::After) @if ($icon) @endif @if ($hasLoadingIndicator) @endif @endif