124 lines
4.4 KiB
PHP
124 lines
4.4 KiB
PHP
@php
|
|
use Filament\Support\Enums\IconPosition;
|
|
@endphp
|
|
|
|
@props([
|
|
'active' => false,
|
|
'alpineActive' => null,
|
|
'badge' => null,
|
|
'badgeColor' => null,
|
|
'badgeTooltip' => null,
|
|
'badgeIcon' => null,
|
|
'badgeIconPosition' => IconPosition::Before,
|
|
'href' => null,
|
|
'icon' => null,
|
|
'iconColor' => 'gray',
|
|
'iconPosition' => IconPosition::Before,
|
|
'spaMode' => null,
|
|
'tag' => 'button',
|
|
'target' => null,
|
|
'type' => 'button',
|
|
])
|
|
|
|
@php
|
|
if (! $iconPosition instanceof IconPosition) {
|
|
$iconPosition = filled($iconPosition) ? (IconPosition::tryFrom($iconPosition) ?? $iconPosition) : null;
|
|
}
|
|
|
|
$hasAlpineActiveClasses = filled($alpineActive);
|
|
|
|
$inactiveItemClasses = 'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5';
|
|
|
|
// @deprecated `fi-tabs-item-active` has been replaced by `fi-active`.
|
|
$activeItemClasses = 'fi-active fi-tabs-item-active bg-gray-50 dark:bg-white/5';
|
|
|
|
$inactiveLabelClasses = 'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200';
|
|
|
|
$activeLabelClasses = 'text-primary-600 dark:text-primary-400';
|
|
|
|
$iconClasses = 'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75';
|
|
|
|
$inactiveIconClasses = 'text-gray-400 dark:text-gray-500';
|
|
|
|
$activeIconClasses = 'text-primary-600 dark:text-primary-400';
|
|
@endphp
|
|
|
|
<{{ $tag }}
|
|
@if ($tag === 'button')
|
|
type="{{ $type }}"
|
|
@elseif ($tag === 'a')
|
|
{{ \Filament\Support\generate_href_html($href, $target === '_blank', $spaMode) }}
|
|
@endif
|
|
@if ($hasAlpineActiveClasses)
|
|
x-bind:class="{
|
|
@js($inactiveItemClasses): {{-- format-ignore-start --}} ! ({{ $alpineActive }}) {{-- format-ignore-end --}},
|
|
@js($activeItemClasses): {{ $alpineActive }},
|
|
}"
|
|
@endif
|
|
{{
|
|
$attributes
|
|
->merge([
|
|
'aria-selected' => $active,
|
|
'role' => 'tab',
|
|
])
|
|
->class([
|
|
'fi-tabs-item group flex items-center justify-center gap-x-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
|
|
$inactiveItemClasses => (! $hasAlpineActiveClasses) && (! $active),
|
|
$activeItemClasses => (! $hasAlpineActiveClasses) && $active,
|
|
])
|
|
}}
|
|
>
|
|
@if ($icon && $iconPosition === IconPosition::Before)
|
|
<x-filament::icon
|
|
:icon="$icon"
|
|
:x-bind:class="$hasAlpineActiveClasses ? '{ ' . \Illuminate\Support\Js::from($inactiveIconClasses) . ': ! (' . $alpineActive . '), ' . \Illuminate\Support\Js::from($activeIconClasses) . ': ' . $alpineActive . ' }' : null"
|
|
@class([
|
|
$iconClasses,
|
|
$inactiveIconClasses => (! $hasAlpineActiveClasses) && (! $active),
|
|
$activeIconClasses => (! $hasAlpineActiveClasses) && $active,
|
|
])
|
|
/>
|
|
@endif
|
|
|
|
<span
|
|
@if ($hasAlpineActiveClasses)
|
|
x-bind:class="{
|
|
@js($inactiveLabelClasses): {{-- format-ignore-start --}} ! ({{ $alpineActive }}) {{-- format-ignore-end --}},
|
|
@js($activeLabelClasses): {{ $alpineActive }},
|
|
}"
|
|
@endif
|
|
@class([
|
|
'fi-tabs-item-label transition duration-75',
|
|
$inactiveLabelClasses => (! $hasAlpineActiveClasses) && (! $active),
|
|
$activeLabelClasses => (! $hasAlpineActiveClasses) && $active,
|
|
])
|
|
>
|
|
{{ $slot }}
|
|
</span>
|
|
|
|
@if ($icon && $iconPosition === IconPosition::After)
|
|
<x-filament::icon
|
|
:icon="$icon"
|
|
:x-bind:class="$hasAlpineActiveClasses ? '{ ' . \Illuminate\Support\Js::from($inactiveIconClasses) . ': ! (' . $alpineActive . '), ' . \Illuminate\Support\Js::from($activeIconClasses) . ': ' . $alpineActive . ' }' : null"
|
|
@class([
|
|
$iconClasses,
|
|
$inactiveIconClasses => (! $hasAlpineActiveClasses) && (! $active),
|
|
$activeIconClasses => (! $hasAlpineActiveClasses) && $active,
|
|
])
|
|
/>
|
|
@endif
|
|
|
|
@if (filled($badge))
|
|
<x-filament::badge
|
|
:color="$badgeColor"
|
|
:icon="$badgeIcon"
|
|
:icon-position="$badgeIconPosition"
|
|
size="sm"
|
|
:tooltip="$badgeTooltip"
|
|
class="w-max"
|
|
>
|
|
{{ $badge }}
|
|
</x-filament::badge>
|
|
@endif
|
|
</{{ $tag }}>
|