Skip to content

Commit c67247b

Browse files
lrljoelrljoe
authored
TH Fixes - Clean-up, efficiency, and Sort Icons fixes (rappasoft#2140)
* Tweaks for Sort Icon Styling * Move customIconAttributes into th * Further tweaks & tidying * Fixes for other TH Elements * Move Visuals tests to Visuals section, clean up tests --------- Co-authored-by: lrljoe <[email protected]>
1 parent eda4c5e commit c67247b

27 files changed

+339
-206
lines changed

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

Lines changed: 42 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,58 @@
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'];
12-
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 ;
8+
$customIconAttributes = $this->getThSortIconAttributes($column);
9+
$direction = $column->hasField() ? $this->getSort($column->getColumnSelectName()) : $this->getSort($column->getSlug()) ?? null;
1810
@endphp
1911

20-
@if ($isTailwind)
21-
<th scope="col" {{
22-
$attributes->merge($customThAttributes)
23-
->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
24-
->class(['px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true))])
25-
->class(['hidden' => $column->shouldCollapseAlways()])
26-
->class(['hidden md:table-cell' => $column->shouldCollapseOnMobile()])
27-
->class(['hidden lg:table-cell' => $column->shouldCollapseOnTablet()])
28-
->except(['default', 'default-colors', 'default-styling'])
29-
}}
30-
>
31-
@if($column->getColumnLabelStatus())
32-
@unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
33-
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
34-
@else
35-
<button wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
36-
{{
12+
<th {{
13+
$attributes->merge($customThAttributes)
14+
->class([
15+
'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)),
16+
'px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $this->isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)),
17+
'hidden' => $this->isTailwind && $column->shouldCollapseAlways(),
18+
'hidden md:table-cell' => $this->isTailwind && $column->shouldCollapseOnMobile(),
19+
'hidden lg:table-cell' => $this->isTailwind && $column->shouldCollapseOnTablet(),
20+
'' => $this->isBootstrap && ($customThAttributes['default'] ?? true),
21+
'd-none' => $this->isBootstrap && $column->shouldCollapseAlways(),
22+
'd-none d-md-table-cell' => $this->isBootstrap && $column->shouldCollapseOnMobile(),
23+
'd-none d-lg-table-cell' => $this->isBootstrap && $column->shouldCollapseOnTablet(),
24+
])
25+
->except(['default', 'default-colors', 'default-styling'])
26+
}}>
27+
@if($column->getColumnLabelStatus())
28+
@unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
29+
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
30+
@else
31+
@if ($this->isTailwind)
32+
33+
<button wire:click="sortBy('{{ $column->getColumnSortKey() }}')" {{
3734
$attributes->merge($customSortButtonAttributes)
38-
->class(['text-gray-500 dark:text-gray-400' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
39-
->class(['flex items-center space-x-1 text-left text-xs leading-4 font-medium uppercase tracking-wider group focus:outline-none' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
40-
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
41-
}}
42-
>
43-
<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)
35+
->class([
36+
'text-gray-500 dark:text-gray-400' => (($customSortButtonAttributes['default-colors'] ?? true) || ($customSortButtonAttributes['default'] ?? true)),
37+
'flex items-center space-x-1 text-left text-xs leading-4 font-medium uppercase tracking-wider group focus:outline-none' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true)),
38+
])
4739
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
48-
}}
49-
/>
50-
40+
}}>
41+
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
42+
<x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />
5143
</button>
52-
@endunless
53-
@endif
54-
</th>
55-
@elseif ($isBootstrap)
56-
<th scope="col" {{
57-
$attributes->merge($customThAttributes)
58-
->class(['' => $customThAttributes['default'] ?? true])
59-
->class(['d-none' => $column->shouldCollapseAlways()])
60-
->class(['d-none d-md-table-cell' => $column->shouldCollapseOnMobile()])
61-
->class(['d-none d-lg-table-cell' => $column->shouldCollapseOnTablet()])
62-
->except(['default','default-styling','default-colors'])
63-
}}
64-
>
65-
@if($column->getColumnLabelStatus())
66-
@unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
67-
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
68-
@else
69-
<div
70-
class="d-flex align-items-center laravel-livewire-tables-cursor"
71-
wire:click="sortBy('{{ $column->getColumnSortKey() }}')"
72-
{{
44+
@elseif ($this->isBootstrap)
45+
<div wire:click="sortBy('{{ $column->getColumnSortKey() }}')" {{
7346
$attributes->merge($customSortButtonAttributes)
74-
->class(['' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
47+
->class(['d-flex align-items-center laravel-livewire-tables-cursor' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
7548
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
76-
}}
77-
>
78-
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
49+
}}>
50+
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
51+
<x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />
7952

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-
/>
8653
</div>
87-
@endunless
88-
@endif
89-
</th>
90-
@endif
54+
@endif
55+
56+
@endunless
57+
@endif
58+
</th>

‎resources/views/components/table/th/bulk-actions.blade.php‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
1-
@aware([ 'tableName'])
21
@php
32
$customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];
4-
53
$bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
6-
$theme = $this->getTheme();
74
@endphp
85

96
@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
10-
<x-livewire-tables::table.th.plain wire:key="{{ $tableName }}-thead-bulk-actions" :displayMinimisedOnReorder="true" :$customAttributes>
7+
<x-livewire-tables::table.th.plain :displayMinimisedOnReorder="true" wire:key="{{ $this->getTableName }}-thead-bulk-actions" :$customAttributes>
118
<div
129
x-data="{newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"
1310
x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
1411
x-cloak x-show="currentlyReorderingStatus !== true"
1512
@class([
16-
'inline-flex rounded-md shadow-sm' => $theme === 'tailwind',
17-
'form-check' => $theme === 'bootstrap-5',
13+
'inline-flex rounded-md shadow-sm' => $this->isTailwind,
14+
'form-check' => $this->isBootstrap,
1815
])
1916
>
2017
<input
@@ -24,8 +21,9 @@
2421
:checked="selectedItems.length == paginationTotalItemCount"
2522
{{
2623
$attributes->merge($bulkActionsThCheckboxAttributes)->class([
27-
'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
28-
'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
24+
'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $this->isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)),
25+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $this->isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true)),
26+
'form-check-input' => $this->isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
2927
])->except(['default','default-styling','default-colors'])
3028
}}
3129
/>

‎resources/views/components/table/th/collapsed-columns.blade.php‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,15 @@
1-
@aware([ 'tableName','isTailwind','isBootstrap'])
2-
3-
@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
4-
@if ($isTailwind)
5-
<th
6-
scope="col"
7-
{{
8-
$attributes
9-
->merge(['class' => 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised'])
10-
->class(['sm:hidden' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
11-
->class(['md:hidden' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
12-
->class(['lg:hidden' => !$this->shouldCollapseAlways()])
13-
}}
14-
:class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
15-
></th>
16-
@elseif ($isBootstrap)
17-
<th
18-
scope="col"
19-
{{
20-
$attributes
21-
->merge(['class' => 'd-table-cell laravel-livewire-tables-reorderingMinimised'])
22-
->class(['d-sm-none' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
23-
->class(['d-md-none' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
24-
->class(['d-lg-none' => !$this->shouldCollapseAlways()])
25-
}}
26-
:class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
27-
></th>
28-
@endif
1+
@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
2+
<th scope="col" :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }" {{
3+
$attributes->merge()
4+
->class([
5+
'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $this->isTailwind,
6+
'sm:hidden' => $this->isTailwind && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
7+
'md:hidden' => $this->isTailwind && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
8+
'lg:hidden' => $this->isTailwind && !$this->shouldCollapseAlways,
9+
'd-table-cell laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap,
10+
'd-sm-none' => $this->isBootstrap && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
11+
'd-md-none' => $this->isBootstrap && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
12+
'd-lg-none' => $this->isBootstrap && !$this->shouldCollapseAlways,
13+
])
14+
}}></th>
2915
@endif

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@props(['columnTitle' => '', 'customLabelAttributes' => ['default' => true]])
2+
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>
3+
{{ $columnTitle }}
4+
</span>

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
@aware(['isTailwind','isBootstrap'])
21
@props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false, 'customAttributes' => ['default' => true]])
32

4-
<th x-cloak {{ $attributes }} scope="col"
5-
{{
3+
<th x-cloak scope="col" @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif {{
64
$attributes->merge($customAttributes)->class([
7-
'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left bg-gray-50 dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => ($isTailwind) && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
8-
'laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
9-
])
10-
}}
11-
@if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif
12-
>
5+
'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left laravel-livewire-tables-reorderingMinimised' => $this->isTailwind && (($customAttributes['default-styling'] ?? true) || ($customAttributes['default'] ?? true)),
6+
'bg-gray-50 dark:bg-gray-800' => $this->isTailwind && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
7+
'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
8+
])->except(['default','default-styling','default-colors'])
9+
}}>
1310
{{ $slot }}
1411
</th>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
@aware(['tableName','isTailwind','isBootstrap'])
21
@php
32
$customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes'];
43
@endphp
54

6-
<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false"
5+
<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $this->getTableName }}-thead-reorder" :displayMinimisedOnReorder="false"
76
{{
87
$attributes->merge($customThAttributes)
9-
->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
10-
->class(['table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true))])
11-
->class(['laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && ($customThAttributes['default'] ?? true)])
8+
->class([
9+
'table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $this->isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)),
10+
'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)),
11+
'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && ($customThAttributes['default'] ?? true),
12+
])
13+
->except(['default','default-styling','default-colors'])
1214
}}
1315
>
1416
<div x-cloak x-show="currentlyReorderingStatus"></div>

0 commit comments

Comments
 (0)