Fixes for other TH Elements

rappasoft · Dec 31, 2024 · 2bea4b6 · 2bea4b6
1 parent 98de49f
commit 2bea4b6
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 62 deletions.
diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th.blade.php
@@ -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>

diff --git a/resources/views/components/table/th/bulk-actions.blade.php b/resources/views/components/table/th/bulk-actions.blade.php
@@ -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'])
                 }}
             />

diff --git a/resources/views/components/table/th/collapsed-columns.blade.php b/resources/views/components/table/th/collapsed-columns.blade.php
@@ -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
diff --git a/resources/views/components/table/th/label.blade.php b/resources/views/components/table/th/label.blade.php
@@ -0,0 +1,4 @@
+@props(['columnTitle' => '', 'customLabelAttributes' => ['default' => true]])
+<span {{ $customLabelAttributes->except(['default', 'default-colors', 'default-styling']) }}>
+    {{ $columnTitle }}
+</span>
diff --git a/resources/views/components/table/th/plain.blade.php b/resources/views/components/table/th/plain.blade.php
@@ -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>
diff --git a/resources/views/components/table/th/reorder.blade.php b/resources/views/components/table/th/reorder.blade.php
@@ -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>

diff --git a/resources/views/components/table/th/sort-icons.blade.php b/resources/views/components/table/th/sort-icons.blade.php
@@ -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',

diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
@@ -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 />

diff --git a/src/Traits/Helpers/CollapsingColumnHelpers.php b/src/Traits/Helpers/CollapsingColumnHelpers.php
@@ -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;

diff --git a/src/Traits/Helpers/ColumnHelpers.php b/src/Traits/Helpers/ColumnHelpers.php
@@ -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)) {