Skip to content

Commit 4e1507d

Browse files
lrljoelrljoe
authored
Tweaks for Sort Icon Styling
1 parent eda4c5e commit 4e1507d

File tree

2 files changed

+70
-38
lines changed

2 files changed

+70
-38
lines changed

‎resources/views/components/table/th.blade.php‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
1-
@aware([ 'tableName','isTailwind','isBootstrap'])
21
@props(['column', 'index'])
32

43
@php
5-
$attributes = $attributes->merge(['wire:key' => $tableName . '-header-col-'.$column->getSlug()]);
64
$allThAttributes = $this->getAllThAttributes($column);
7-
85
$customThAttributes = $allThAttributes['customAttributes'];
96
$customSortButtonAttributes = $allThAttributes['sortButtonAttributes'];
10-
$customSortIconAttributes = $allThAttributes['sortIconAttributes'];
117
$customLabelAttributes = $allThAttributes['labelAttributes'];
8+
$direction = $column->hasField() ? $this->getSort($column->getColumnSelectName()) : $this->getSort($column->getSlug()) ?? null;
129
13-
//$customThAttributes = $this->getThAttributes($column);
14-
//$customSortButtonAttributes = $this->getThSortButtonAttributes($column);
15-
//$customSortIconAttributes = $this->getThSortIconAttributes($column);
16-
17-
$direction = $column->hasField() ? $this->getSort($column->getColumnSelectName()) : $this->getSort($column->getSlug()) ?? null ;
1810
@endphp
1911

20-
@if ($isTailwind)
12+
@if ($this->isTailwind)
2113
<th scope="col" {{
2214
$attributes->merge($customThAttributes)
2315
->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
@@ -41,18 +33,12 @@
4133
}}
4234
>
4335
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
44-
<x-livewire-tables::table.th.sort-icons :$direction
45-
{{
46-
$attributes->merge($customSortIconAttributes)
47-
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
48-
}}
49-
/>
50-
36+
<x-livewire-tables::table.th.sort-icons :$direction />
5137
</button>
5238
@endunless
5339
@endif
5440
</th>
55-
@elseif ($isBootstrap)
41+
@elseif ($this->isBootstrap)
5642
<th scope="col" {{
5743
$attributes->merge($customThAttributes)
5844
->class(['' => $customThAttributes['default'] ?? true])
@@ -76,13 +62,8 @@ class="d-flex align-items-center laravel-livewire-tables-cursor"
7662
}}
7763
>
7864
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
65+
<x-livewire-tables::table.th.sort-icons :$direction />
7966

80-
<x-livewire-tables::table.th.sort-icons :$direction {{
81-
$attributes->merge($customSortButtonAttributes)
82-
->class(['' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
83-
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
84-
}}
85-
/>
8667
</div>
8768
@endunless
8869
@endif

‎resources/views/components/table/th/sort-icons.blade.php‎

Lines changed: 65 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,83 @@
1-
@props(['direction'])
2-
<span {{ $attributes->class([
1+
@props(['direction' => 'none'])
2+
@aware(['column'])
3+
<span @class([
34
'relative flex items-center' => $this->isTailwind,
45
'relative d-flex align-items-center' => $this->isBootstrap
5-
]) }}
6+
])
67
>
8+
@php
9+
$customIconAttributes = $this->getThSortIconAttributes($column)
10+
@endphp
11+
712
@if($this->isTailwind)
813
@switch($direction)
914
@case('asc')
10-
<x-heroicon-o-chevron-up class="w-3 h-3 group-hover:opacity-0" />
11-
<x-heroicon-o-chevron-down class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
12-
@break
15+
<x-heroicon-o-chevron-up {{ $attributes->merge($customIconAttributes)
16+
->class([
17+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
18+
'absolute opacity-100 group-hover:opacity-0',
19+
])
20+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
21+
<x-heroicon-o-chevron-down {{ $attributes->merge($customIconAttributes)
22+
->class([
23+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
24+
'absolute opacity-0 group-hover:opacity-100',
25+
])
26+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
27+
@break
1328
@case('desc')
14-
<x-heroicon-o-chevron-down class="w-3 h-3 group-hover:opacity-0" />
15-
<x-heroicon-o-x-circle class="w-3 h-3 opacity-0 group-hover:opacity-100 absolute"/>
16-
@break
29+
<x-heroicon-o-chevron-down {{ $attributes->merge($customIconAttributes)
30+
->class([
31+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
32+
'absolute opacity-100 group-hover:opacity-0',
33+
])
34+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
35+
<x-heroicon-o-x-circle {{ $attributes->merge($customIconAttributes)
36+
->class([
37+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
38+
'absolute opacity-0 group-hover:opacity-100',
39+
])
40+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
41+
42+
@break
1743
@default
18-
<x-heroicon-o-chevron-up class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
19-
@endswitch
44+
<x-heroicon-o-chevron-up-down {{ $attributes->merge($customIconAttributes)
45+
->class([
46+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
47+
'absolute opacity-100 group-hover:opacity-0',
48+
])
49+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
50+
<x-heroicon-o-chevron-up {{ $attributes->merge($this->getThSortIconAttributes($column))
51+
->class([
52+
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
53+
'absolute opacity-0 group-hover:opacity-100',
54+
])
55+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
56+
@endswitch
57+
58+
2059
@else
2160
@switch($direction)
2261
@case('asc')
23-
<x-heroicon-o-chevron-up class="laravel-livewire-tables-btn-smaller ms-1 " />
62+
<x-heroicon-o-chevron-up {{ $attributes->merge($customIconAttributes)
63+
->class([
64+
'laravel-livewire-tables-btn-smaller ms-1 ' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
65+
])
66+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
2467
@break
2568
@case('desc')
26-
<x-heroicon-o-chevron-down class="laravel-livewire-tables-btn-smaller ms-1" />
69+
<x-heroicon-o-chevron-down {{ $attributes->merge($customIconAttributes)
70+
->class([
71+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
72+
])
73+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
2774
@break
2875
@default
29-
<x-heroicon-o-chevron-up-down class="laravel-livewire-tables-btn-smaller ms-1" />
76+
<x-heroicon-o-chevron-up-down {{ $attributes->merge($customIconAttributes)
77+
->class([
78+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
79+
])
80+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
3081
@endswitch
3182
@endif
3283
</span>

0 commit comments

Comments
 (0)