Skip to content

Commit 83f9a91

Browse files
lrljoelrljoe
committed
Update ColumnSelect
1 parent 1027123 commit 83f9a91

File tree

8 files changed

+193
-80
lines changed

8 files changed

+193
-80
lines changed

‎docs/columns/column-selection.md‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,47 @@ public function configure(): void
268268
}
269269
```
270270

271+
272+
### setColumnSelectMenuAttributes
273+
Allows for customisation of the appearance of the "Column Select" menu
274+
275+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
276+
277+
```php
278+
public function configure(): void
279+
{
280+
$this->setColumnSelectMenuAttributes([
281+
'class' => 'text-rose-300 focus:border-rose-300 focus:ring-rose-300', // Add these classes to the column select menu option checkbox
282+
'default-colors' => false, // Do not output the default colors
283+
'default-styling' => true // Output the default styling
284+
]);
285+
}
286+
```
287+
288+
### setColumnSelectMenuAttributes Transition Behaviour
289+
290+
To modify the transition behaviour, you can customise any of the x-transition properties:
291+
```php
292+
'x-transition:enter' => 'transition ease-out duration-100',
293+
'x-transition:enter-start' => 'transform opacity-0 scale-95',
294+
'x-transition:enter-end' => 'transform opacity-100 scale-100',
295+
'x-transition:leave' => 'transition ease-in duration-75',
296+
'x-transition:leave-start' => 'transform opacity-100 scale-100',
297+
'x-transition:leave-end' => 'transform opacity-0 scale-95',
298+
```
299+
By replacing the relevant attribute, for example, this would slow the "enter" behaviour to 3000ms instead of the default 100ms.
300+
301+
```php
302+
public function configure(): void
303+
{
304+
$this->setColumnSelectMenuAttributes([
305+
'x-transition:enter' => 'transition ease-out duration-[3000ms]',
306+
'default-colors' => true, // Output the default colors
307+
'default-styling' => true // Output the default styling
308+
]);
309+
}
310+
```
311+
271312
### setColumnSelectMenuOptionCheckboxAttributes
272313
Allows for customisation of the appearance of the "Column Select" menu option checkbox
273314

@@ -298,4 +339,4 @@ public function configure(): void
298339
'default-styling' => true // Output the default styling
299340
]);
300341
}
301-
```
342+
```

‎resources/views/components/forms/alpineCheckbox.blade.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@aware(['dataTableFingerprint','primaryKey', 'isTailwind', 'isTailwind4','isBootstrap', 'isBootstrap4', 'isBootstrap5'])
2+
@props(['checkboxAttributes'])
3+
<input x-cloak
4+
{{
5+
$attributes->merge($checkboxAttributes)
6+
->class([
7+
// Tailwind 3
8+
'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' => $isTailwind && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)),
9+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)),
10+
11+
// Tailwind 4
12+
'tw4ph 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' => $isTailwind4 && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)),
13+
'tw4ph rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind4 && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)),
14+
15+
// Bootstrap
16+
'form-check-input' => ($isBootstrap5) && ($checkboxAttributes['default'] ?? true),
17+
])->except(['default','default-styling','default-colors'])
18+
}}
19+
/>

‎resources/views/includes/toolbar/items/column-select/legacy.blade.php‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@php($columnSelectButtonAttributes = $this->getColumnSelectButtonAttributes())
33
@php($columnSelectMenuOptionCheckboxAttributes = $this->getColumnSelectMenuOptionCheckboxAttributes())
44
@php($selectableSelectedColumnCount = $this->getSelectableSelectedColumns()->count())
5+
@php($columnSelectItems = $this->generateColumnSelectItems())
56

67
@if ($isTailwind)
78
<div class="@if ($this->getColumnSelectIsHiddenOnMobile()) hidden sm:block @elseif ($this->getColumnSelectIsHiddenOnTablet()) hidden md:block @endif mb-4 w-full md:w-auto md:mb-0 md:ml-2">
@@ -71,7 +72,7 @@ class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wa
7172
</label>
7273
</div>
7374

74-
@foreach ($this->getColumnsForColumnSelect() as $columnSlug => $columnTitle)
75+
@foreach ($columnSelectItems as $index => $columnDetail)
7576
<div
7677
wire:key="{{ $dataTableFingerprint }}-columnSelect-{{ $loop->index }}"
7778
>
@@ -90,8 +91,8 @@ class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wa
9091
->except(['default-colors', 'default-styling'])
9192
}}
9293
wire:target="selectedColumns"
93-
value="{{ $columnSlug }}" />
94-
<span class="ml-2">{{ $columnTitle }}</span>
94+
value="{{ $columnDetail['slug'] }}" />
95+
<span class="ml-2">{{ $columnDetail['title'] }}</span>
9596
</label>
9697
</div>
9798
@endforeach

‎resources/views/includes/toolbar/items/column-select/modern.blade.php‎

Lines changed: 44 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@aware([ 'dataTableFingerprint','isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
22
@props(['jsoned'])
33
@php($columnSelectButtonAttributes = $this->getColumnSelectButtonAttributes())
4+
@php($columnSelectMenuAttributes = $this->getColumnSelectMenuAttributes)
45
@php($columnSelectMenuOptionCheckboxAttributes = $this->getColumnSelectMenuOptionCheckboxAttributes)
56
@php($selectableSelectedColumnCount = $this->getSelectableSelectedColumns()->count())
67
@php($selectedColCount = count($this->getColumnsForColumnSelect()))
@@ -23,49 +24,30 @@
2324
timeout: 0,
2425
toggleAll()
2526
{
27+
this.open = false;
2628
$wire.call('toggleAllColumns');
2729
},
2830
sendUpdate()
2931
{
3032
if(this.selectedCols != this.previousCols)
3133
{
32-
console.log('this selectedCols: '+this.selectedCols);
33-
console.log('this previousCols: '+this.previousCols);
3434
this.previousCols = this.selectedCols;
3535
open = false;
36-
console.log('SelectedCol Length: '+this.selectedCols.length);
3736
$wire.$refresh();
3837
}
3938
},
40-
adjustSelectedStatus(value)
41-
{
42-
console.log('adjustSelectedStatus');
43-
console.log('value');
44-
let array = JSON.parse(JSON.stringify(value))
45-
console.log(array);
46-
47-
},
4839
init()
4940
{
5041
$nextTick(() => {
5142
this.previousCols = $wire.get('selectedColumns');
52-
console.log('previousCols: '+this.previousCols);
53-
5443
});
55-
$watch('selectedCols', value => this.adjustSelectedStatus(value));
56-
5744
}
5845
}"
5946
@keydown.window.escape="if (!childElementOpen) { open = false }"
6047
x-on:click.away="if (!childElementOpen) { open = false }"
6148
class="inline-block relative w-full text-left md:w-auto"
6249
wire:key="{{ $dataTableFingerprint }}-column-select-button"
63-
> <div>
64-
<div><span>selectedCols.length</span><span x-text="selectedCols.length"></span></div>
65-
<div><span>selectableColumnCount</span><span x-text="selectableColumnCount"></span></div>
66-
67-
68-
</div>
50+
>
6951
<div>
7052
<span class="rounded-md shadow-sm">
7153
<button
@@ -92,57 +74,56 @@ class="inline-block relative w-full text-left md:w-auto"
9274

9375
<div
9476
x-cloak x-show="open"
95-
x-transition:enter="transition ease-out duration-100"
96-
x-transition:enter-start="transform opacity-0 scale-95"
97-
x-transition:enter-end="transform opacity-100 scale-100"
98-
x-transition:leave="transition ease-in duration-75"
99-
x-transition:leave-start="transform opacity-100 scale-100"
100-
x-transition:leave-end="transform opacity-0 scale-95"
101-
class="absolute right-0 z-50 mt-2 w-full rounded-md divide-y divide-gray-100 ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none"
77+
{{ $attributes->merge($columnSelectMenuAttributes)->class(
78+
[
79+
'divide-gray-100 ring-black bg-white dark:bg-gray-700 dark:text-white' => $isTailwind && ($columnSelectMenuAttributes['default-colors'] ?? true),
80+
'absolute right-0 z-50 mt-2 w-full rounded-md divide-y ring-1 ring-opacity-5 shadow-lg origin-top-right md:w-48 focus:outline-none' => $isTailwind && ($columnSelectMenuAttributes['default-styling'] ?? true),
81+
])
82+
}}
10283
>
103-
<div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white" >
104-
<div class="p-2" role="menu" aria-orientation="vertical"
105-
aria-labelledby="column-select-menu"
106-
@click.outside="sendUpdate"
84+
<div class="p-2"
85+
role="menu"
86+
aria-orientation="vertical"
87+
aria-labelledby="column-select-menu"
88+
@click.outside="sendUpdate"
89+
>
90+
<div wire:key="{{ $dataTableFingerprint }}-columnSelect-selectAll-{{ rand(0,1000) }}">
91+
<label
92+
wire:loading.attr="disabled"
93+
class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
94+
>
95+
<x-livewire-tables::forms.checkbox
96+
::checked="selectedCols.length == selectableColumnCount"
97+
wire:key="{{ $dataTableFingerprint }}-columnSelect-selectAll-checkbox"
98+
wire:target="selectedCols"
99+
wire:loading.attr="disabled"
100+
x-on:click="toggleAll"
101+
:checkboxAttributes=$columnSelectMenuOptionCheckboxAttributes
102+
/>
103+
<span class="ml-2">{{ __($localisationPath.'All Columns') }}</span>
104+
</label>
105+
</div>
107106

108-
>
109-
<div wire:key="{{ $dataTableFingerprint }}-columnSelect-selectAll-{{ rand(0,1000) }}">
107+
@foreach ($columnSelectItems as $index => $columnDetail)
108+
<div
109+
wire:key="{{ $dataTableFingerprint }}-columnSelect-{{ $loop->index }}"
110+
>
110111
<label
111112
wire:loading.attr="disabled"
113+
wire:target="selectedCols"
112114
class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
113115
>
114-
<x-livewire-tables::forms.checkbox
115-
::checked="selectedCols.length == selectableColumnCount"
116-
wire:key="{{ $dataTableFingerprint }}-columnSelect-selectAll-checkbox"
117-
wire:target="selectedCols"
118-
wire:loading.attr="disabled"
119-
x-on:click="toggleAll"
116+
<x-livewire-tables::forms.alpineCheckbox
117+
type='checkbox'
118+
wire:key="{{ $dataTableFingerprint . 'selectedItems-'.$columnDetail['slug'] }}"
119+
x-model='selectedCols'
120+
value="{{ $columnDetail['slug'] }}"
120121
:checkboxAttributes=$columnSelectMenuOptionCheckboxAttributes
121-
/>
122-
<span class="ml-2">{{ __($localisationPath.'All Columns') }}</span>
122+
/>
123+
<span class="ml-2">{{ $columnDetail['title'] }}</span>
123124
</label>
124125
</div>
125-
126-
@foreach ($columnSelectItems as $index => $columnDetail)
127-
<div
128-
wire:key="{{ $dataTableFingerprint }}-columnSelect-{{ $loop->index }}"
129-
>
130-
<label
131-
wire:loading.attr="disabled"
132-
wire:target="selectedCols"
133-
class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
134-
>
135-
136-
<input type='checkbox'
137-
wire:key="{{ $dataTableFingerprint . 'selectedItems-'.$columnDetail['slug'] }}"
138-
x-model='selectedCols'
139-
value="{{ $columnDetail['slug'] }}"
140-
/>
141-
<span class="ml-2">{{ $columnDetail['title'] }}</span>
142-
</label>
143-
</div>
144-
@endforeach
145-
</div>
126+
@endforeach
146127
</div>
147128
</div>
148129
</div>

‎src/DataTableComponent.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
use Rappasoft\LaravelLivewireTables\Traits\Core\{HasLocalisations};
99
use Rappasoft\LaravelLivewireTables\Views\Traits\Core\HasTheme;
1010
use Rappasoft\LaravelLivewireTables\Traits\Styling\{HasCoreStyling};
11-
use Rappasoft\LaravelLivewireTables\Features\Core\HandlesCoreAttributes;
11+
use Rappasoft\LaravelLivewireTables\Features\Core\{HandlesCoreAttributes,ProvidesEnhancementDefaults};
1212
use Rappasoft\LaravelLivewireTables\Features\Actions\Core\WithActions;
1313
use Rappasoft\LaravelLivewireTables\Features\BulkActions\Core\WithBulkActions;
1414
use Rappasoft\LaravelLivewireTables\Features\Columns\Core\WithColumns;
@@ -32,6 +32,7 @@ abstract class DataTableComponent extends Component
3232
{
3333

3434
use HandlesCoreAttributes,
35+
ProvidesEnhancementDefaults,
3536
WithFeatureDetection,
3637
ComponentUtilities,
3738
WithQueryString,

‎src/Features/ColumnSelect/Styling/HasColumnSelectStyling.php‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ trait HasColumnSelectStyling
2222
*/
2323
protected array $columnSelectMenuOptionCheckboxAttributes = ['class' => '', 'default-styling' => true, 'default-colors' => true, 'type' => 'checkbox', 'wire:loading.attr' => 'disabled'];
2424

25+
/**
26+
* Column Select Menu Attributes
27+
*
28+
* @var array<mixed>
29+
*/
30+
protected array $columnSelectMenuAttributes = ['class' => '', 'default-styling' => true, 'default-colors' => true];
31+
2532
/**
2633
* Use the New Column Select Design
2734
*
@@ -40,6 +47,12 @@ public function getColumnSelectButtonAttributes(): array
4047
return $this->columnSelectButtonAttributes;
4148
}
4249

50+
#[Computed]
51+
public function getColumnSelectMenuAttributes(): array
52+
{
53+
return [...$this->getCoreTransitionAttributes(), ...$this->columnSelectMenuAttributes];
54+
}
55+
4356
/**
4457
* Undocumented function
4558
*
@@ -59,6 +72,20 @@ public function getColumnSelectMenuOptionCheckboxAttributes(): array
5972

6073
}
6174

75+
/**
76+
* Set Column Select Menu Attributes
77+
*
78+
* @param array<mixed> $attributes
79+
* @return self
80+
*/
81+
public function setColumnSelectMenuAttributes(array $attributes = []): self
82+
{
83+
84+
$this->columnSelectMenuAttributes = [...$this->columnSelectMenuAttributes, ...$attributes];
85+
86+
return $this;
87+
}
88+
6289
/**
6390
* Undocumented function
6491
*

0 commit comments

Comments
 (0)