94 lines
5.1 KiB
PHP
94 lines
5.1 KiB
PHP
|
@props(['as' => 'a', 'target' => null, 'unstyled' => false])
|
||
|
|
@aware(['variant' => 'tabs', 'selected' => false, 'id' => null])
|
||
|
|
|
||
|
|
@if (substr($as, 0, 2) == 'x-')
|
||
|
|
<x-dynamic-component
|
||
|
|
data-tw-merge
|
||
|
|
data-tw-target="#{{ $target ? $target : str_replace('-tab', '', uncamelize($id, '-')) }}"
|
||
|
|
role="tab"
|
||
|
|
aria-selected="{{ $selected }}"
|
||
|
|
{{ $attributes->class(
|
||
|
|
merge([
|
||
|
|
!$unstyled
|
||
|
|
? 'cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400'
|
||
|
|
: null,
|
||
|
|
!$unstyled ? '[&.active]:text-slate-800 [&.active]:dark:text-white' : null,
|
||
|
|
|
||
|
|
// Default
|
||
|
|
!$unstyled && $variant == 'tabs' ? 'block border-transparent rounded-t-md dark:border-transparent' : null,
|
||
|
|
!$unstyled && $variant == 'tabs'
|
||
|
|
? '[&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400'
|
||
|
|
: null,
|
||
|
|
!$unstyled && $variant == 'tabs'
|
||
|
|
? '[&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Pills
|
||
|
|
!$unstyled && $variant == 'pills' ? 'rounded-md border-0' : null,
|
||
|
|
!$unstyled && $variant == 'pills'
|
||
|
|
? '[&.active]:bg-primary [&.active]:text-white [&.active]:font-medium'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Boxed tabs
|
||
|
|
!$unstyled && $variant == 'boxed-tabs' ? 'shadow-[0px_3px_20px_#0000000b] rounded-md' : null,
|
||
|
|
!$unstyled && $variant == 'boxed-tabs'
|
||
|
|
? '[&.active]:bg-primary [&.active]:text-white [&.active]:font-medium'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Link tabs
|
||
|
|
!$unstyled && $variant == 'link-tabs' ? 'border-b-2 border-transparent dark:border-transparent' : null,
|
||
|
|
!$unstyled && $variant == 'link-tabs'
|
||
|
|
? '[&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
$selected ? 'active' : null,
|
||
|
|
]),
|
||
|
|
)->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
|
||
|
|
:component="substr($as, 2)"
|
||
|
|
>{{ $slot }}</x-dynamic-component>
|
||
|
|
@else
|
||
|
|
<{{ $as }}
|
||
|
|
data-tw-merge
|
||
|
|
data-tw-target="#{{ $target ? $target : str_replace('-tab', '', uncamelize($id, '-')) }}"
|
||
|
|
role="tab"
|
||
|
|
aria-selected="{{ $selected }}"
|
||
|
|
{{ $attributes->class(
|
||
|
|
merge([
|
||
|
|
!$unstyled
|
||
|
|
? 'cursor-pointer block appearance-none px-5 py-2.5 border border-transparent text-slate-700 dark:text-slate-400'
|
||
|
|
: null,
|
||
|
|
!$unstyled ? '[&.active]:text-slate-800 [&.active]:dark:text-white' : null,
|
||
|
|
|
||
|
|
// Default
|
||
|
|
!$unstyled && $variant == 'tabs' ? 'block border-transparent rounded-t-md dark:border-transparent' : null,
|
||
|
|
!$unstyled && $variant == 'tabs'
|
||
|
|
? '[&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400'
|
||
|
|
: null,
|
||
|
|
!$unstyled && $variant == 'tabs'
|
||
|
|
? '[&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Pills
|
||
|
|
!$unstyled && $variant == 'pills' ? 'rounded-md border-0' : null,
|
||
|
|
!$unstyled && $variant == 'pills'
|
||
|
|
? '[&.active]:bg-primary [&.active]:text-white [&.active]:font-medium'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Boxed tabs
|
||
|
|
!$unstyled && $variant == 'boxed-tabs' ? 'shadow-[0px_3px_20px_#0000000b] rounded-md' : null,
|
||
|
|
!$unstyled && $variant == 'boxed-tabs'
|
||
|
|
? '[&.active]:bg-primary [&.active]:text-white [&.active]:font-medium'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
// Link tabs
|
||
|
|
!$unstyled && $variant == 'link-tabs' ? 'border-b-2 border-transparent dark:border-transparent' : null,
|
||
|
|
!$unstyled && $variant == 'link-tabs'
|
||
|
|
? '[&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary'
|
||
|
|
: null,
|
||
|
|
|
||
|
|
$selected ? 'active' : null,
|
||
|
|
]),
|
||
|
|
)->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}
|
||
|
|
>{{ $slot }}</{{ $as }}>
|
||
|
|
@endif
|