Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TH Fixes - Clean-up, efficiency, and Sort Icons fixes #2140

Merged
merged 8 commits into from
Dec 31, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixes for other TH Elements
lrljoe authored Dec 31, 2024
commit 2bea4b6f4c65cf033f31e18e793229fea29a675e
6 changes: 3 additions & 3 deletions resources/views/components/table/th.blade.php
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@
}}>
@if($column->getColumnLabelStatus())
@unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback()))
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
@else
@if ($this->isTailwind)

@@ -38,7 +38,7 @@
])
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
}}>
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
<x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />
</button>
@elseif ($this->isBootstrap)
@@ -47,7 +47,7 @@
->class(['d-flex align-items-center laravel-livewire-tables-cursor' => (($customSortButtonAttributes['default-styling'] ?? true) || ($customSortButtonAttributes['default'] ?? true))])
->except(['default', 'default-colors', 'default-styling', 'wire:key'])
}}>
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>{{ $column->getTitle() }}</span>
<x-livewire-tables::table.th.label :$customLabelAttributes :columnTitle="$column->getTitle()" />
<x-livewire-tables::table.th.sort-icons :$direction :$customIconAttributes />

</div>
14 changes: 6 additions & 8 deletions resources/views/components/table/th/bulk-actions.blade.php
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
@aware([ 'tableName'])
@php
$customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes'];

$bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes();
$theme = $this->getTheme();
@endphp

@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions())
<x-livewire-tables::table.th.plain wire:key="{{ $tableName }}-thead-bulk-actions" :displayMinimisedOnReorder="true" :$customAttributes>
<x-livewire-tables::table.th.plain :displayMinimisedOnReorder="true" wire:key="{{ $this->getTableName }}-thead-bulk-actions" :$customAttributes>
<div
x-data="{newSelectCount: 0, indeterminateCheckbox: false, bulkActionHeaderChecked: false}"
x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
x-cloak x-show="currentlyReorderingStatus !== true"
@class([
'inline-flex rounded-md shadow-sm' => $theme === 'tailwind',
'form-check' => $theme === 'bootstrap-5',
'inline-flex rounded-md shadow-sm' => $this->isTailwind,
'form-check' => $this->isBootstrap,
])
>
<input
@@ -24,8 +21,9 @@
:checked="selectedItems.length == paginationTotalItemCount"
{{
$attributes->merge($bulkActionsThCheckboxAttributes)->class([
'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),
'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
'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)),
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $this->isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true)),
'form-check-input' => $this->isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
])->except(['default','default-styling','default-colors'])
}}
/>
42 changes: 14 additions & 28 deletions resources/views/components/table/th/collapsed-columns.blade.php
Original file line number Diff line number Diff line change
@@ -1,29 +1,15 @@
@aware([ 'tableName','isTailwind','isBootstrap'])

@if ($this->collapsingColumnsAreEnabled() && $this->hasCollapsedColumns())
@if ($isTailwind)
<th
scope="col"
{{
$attributes
->merge(['class' => 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised'])
->class(['sm:hidden' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
->class(['md:hidden' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
->class(['lg:hidden' => !$this->shouldCollapseAlways()])
}}
:class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
></th>
@elseif ($isBootstrap)
<th
scope="col"
{{
$attributes
->merge(['class' => 'd-table-cell laravel-livewire-tables-reorderingMinimised'])
->class(['d-sm-none' => !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
->class(['d-md-none' => !$this->shouldCollapseOnMobile() && !$this->shouldCollapseOnTablet() && !$this->shouldCollapseAlways()])
->class(['d-lg-none' => !$this->shouldCollapseAlways()])
}}
:class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }"
></th>
@endif
@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns)
<th scope="col" :class="{ 'laravel-livewire-tables-reorderingMinimised': ! currentlyReorderingStatus }" {{
$attributes->merge()
->class([
'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $this->isTailwind,
'sm:hidden' => $this->isTailwind && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
'md:hidden' => $this->isTailwind && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
'lg:hidden' => $this->isTailwind && !$this->shouldCollapseAlways,
'd-table-cell laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap,
'd-sm-none' => $this->isBootstrap && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
'd-md-none' => $this->isBootstrap && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways,
'd-lg-none' => $this->isBootstrap && !$this->shouldCollapseAlways,
])
}}></th>
@endif
4 changes: 4 additions & 0 deletions resources/views/components/table/th/label.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
@props(['columnTitle' => '', 'customLabelAttributes' => ['default' => true]])
<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>
{{ $columnTitle }}
</span>
15 changes: 6 additions & 9 deletions resources/views/components/table/th/plain.blade.php
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
@aware(['isTailwind','isBootstrap'])
@props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false, 'customAttributes' => ['default' => true]])

<th x-cloak {{ $attributes }} scope="col"
{{
<th x-cloak scope="col" @if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif {{
$attributes->merge($customAttributes)->class([
'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)),
'laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
])
}}
@if($hideUntilReorder) :class="!reorderDisplayColumn && 'w-0 p-0 hidden'" @endif
>
'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)),
'bg-gray-50 dark:bg-gray-800' => $this->isTailwind && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)),
])->except(['default','default-styling','default-colors'])
}}>
{{ $slot }}
</th>
12 changes: 7 additions & 5 deletions resources/views/components/table/th/reorder.blade.php
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
@aware(['tableName','isTailwind','isBootstrap'])
@php
$customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes'];
@endphp

<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-thead-reorder" :displayMinimisedOnReorder="false"
<x-livewire-tables::table.th.plain x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $this->getTableName }}-thead-reorder" :displayMinimisedOnReorder="false"
{{
$attributes->merge($customThAttributes)
->class(['text-gray-500 dark:bg-gray-800 dark:text-gray-400' => (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true))])
->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))])
->class(['laravel-livewire-tables-reorderingMinimised' => ($isBootstrap) && ($customThAttributes['default'] ?? true)])
->class([
'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)),
'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)),
'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && ($customThAttributes['default'] ?? true),
])
->except(['default','default-styling','default-colors'])
}}
>
<div x-cloak x-show="currentlyReorderingStatus"></div>
3 changes: 1 addition & 2 deletions resources/views/components/table/th/sort-icons.blade.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@props(['direction' => 'none', 'customIconAttributes'])
@aware(['column'])
<span @class([
'relative flex items-center' => $this->isTailwind,
'relative d-flex align-items-center' => $this->isBootstrap
@@ -44,7 +43,7 @@
'absolute opacity-100 group-hover:opacity-0',
])
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />
<x-heroicon-o-chevron-up {{ $attributes->merge($this->getThSortIconAttributes($column))
<x-heroicon-o-chevron-up {{ $attributes->merge($customIconAttributes)
->class([
'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
'absolute opacity-0 group-hover:opacity-100',
14 changes: 7 additions & 7 deletions resources/views/datatable.blade.php
Original file line number Diff line number Diff line change
@@ -68,7 +68,7 @@
@endif

@foreach($this->selectedVisibleColumns as $index => $column)
<x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :column="$column" :index="$index" />
<x-livewire-tables::table.th wire:key="{{ $tableName.'-table-head-'.$index }}" :$column :$index />
@endforeach
</x-slot>

@@ -84,19 +84,19 @@
@endif

@forelse ($this->getRows as $rowIndex => $row)
<x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex">
<x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$primaryKey} }}" :$row :$rowIndex>
@if($this->getCurrentlyReorderingStatus)
<x-livewire-tables::table.td.reorder x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-row-reorder-{{ $row->{$primaryKey} }}" :rowID="$tableName.'-'.$row->{$this->getPrimaryKey()}" :rowIndex="$rowIndex" />
<x-livewire-tables::table.td.reorder x-cloak x-show="currentlyReorderingStatus" wire:key="{{ $tableName }}-row-reorder-{{ $row->{$primaryKey} }}" :rowID="$tableName.'-'.$row->{$this->getPrimaryKey()}" :$rowIndex />
@endif
@if($this->showBulkActionsSections)
<x-livewire-tables::table.td.bulk-actions wire:key="{{ $tableName }}-row-bulk-act-{{ $row->{$primaryKey} }}" :row="$row" :rowIndex="$rowIndex"/>
<x-livewire-tables::table.td.bulk-actions wire:key="{{ $tableName }}-row-bulk-act-{{ $row->{$primaryKey} }}" :$row :$rowIndex />
@endif
@if ($this->showCollapsingColumnSections)
<x-livewire-tables::table.td.collapsed-columns wire:key="{{ $tableName }}-row-collapsed-{{ $row->{$primaryKey} }}" :rowIndex="$rowIndex" />
<x-livewire-tables::table.td.collapsed-columns wire:key="{{ $tableName }}-row-collapsed-{{ $row->{$primaryKey} }}" :$rowIndex />
@endif

@foreach($this->selectedVisibleColumns as $colIndex => $column)
<x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$primaryKey} . '-datatable-td-' . $column->getSlug() }}" :column="$column" :colIndex="$colIndex">
<x-livewire-tables::table.td wire:key="{{ $tableName . '-' . $row->{$primaryKey} . '-datatable-td-' . $column->getSlug() }}" :$column :$colIndex>
@if($column->isHtml())
{!! $column->setIndexes($rowIndex, $colIndex)->renderContents($row) !!}
@else
@@ -107,7 +107,7 @@
</x-livewire-tables::table.tr>

@if ($this->showCollapsingColumnSections)
<x-livewire-tables::table.collapsed-columns :row="$row" :rowIndex="$rowIndex" />
<x-livewire-tables::table.collapsed-columns :$row :$rowIndex />
@endif
@empty
<x-livewire-tables::table.empty />
2 changes: 2 additions & 0 deletions src/Traits/Helpers/CollapsingColumnHelpers.php
Original file line number Diff line number Diff line change
@@ -11,11 +11,13 @@ public function getCollapsingColumnsStatus(): bool
return $this->collapsingColumnsStatus;
}

#[Computed]
public function hasCollapsingColumns(): bool
{
return $this->getCollapsingColumnsStatus() === true;
}

#[Computed]
public function collapsingColumnsAreEnabled(): bool
{
return $this->getCollapsingColumnsStatus() === true;
4 changes: 4 additions & 0 deletions src/Traits/Helpers/ColumnHelpers.php
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
use Illuminate\Support\Collection;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Columns\AggregateColumn;
use Livewire\Attributes\Computed;

trait ColumnHelpers
{
@@ -133,6 +134,7 @@ public function hasCollapsedColumns(): bool
return false;
}

#[Computed]
public function shouldCollapseOnMobile(): bool
{

@@ -170,6 +172,7 @@ public function getVisibleMobileColumnsCount(): int
return $this->getVisibleMobileColumns()->count();
}

#[Computed]
public function shouldCollapseOnTablet(): bool
{
if (! isset($this->shouldTabletCollapse)) {
@@ -235,6 +238,7 @@ public function getCollapsedAlwaysColumnsCount(): int
return $this->getCollapsedAlwaysColumns()->count();
}

#[Computed]
public function shouldCollapseAlways(): bool
{
if (! isset($this->shouldAlwaysCollapse)) {
Loading