Skip to content

Commit f384ac7

Browse files
lrljoelrljoe
committed
Reworking Blades for TW4
1 parent f3c8e42 commit f384ac7

File tree

76 files changed

+1250
-633
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1250
-633
lines changed

‎resources/js/laravel-livewire-tables.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import tools from "./partials/core/tools.min.js";
77
import boolean from "./partials/filters/boolean.js";
88
import fpf from "./partials/filters/fpf.js";
99
import nrF from "./partials/filters/numberRange.js";
10+
import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js";
1011

1112
document.addEventListener('alpine:init', () => {
1213

@@ -18,5 +19,6 @@ document.addEventListener('alpine:init', () => {
1819
boolean();
1920
fpf();
2021
nrF();
22+
bulkactionsHelper();
2123

2224
});

‎resources/js/laravel-livewire-tables.min.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,17 @@ import tools from "./partials/core/tools.min.js";
77
import boolean from "./partials/filters/boolean.js";
88
import fpf from "./partials/filters/fpf.js";
99
import nrF from "./partials/filters/numberRange.js";
10+
import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js";
1011

11-
document.addEventListener('alpine:init', () => {
12+
document.addEventListener('livewire:init', () => {
1213

1314
table();
14-
tableWrap();
1515
filterPills();
1616
externalFilter();
1717
tools();
1818
boolean();
1919
fpf();
2020
nrF();
21-
21+
bulkactionsHelper();
22+
2223
});

‎resources/js/partials/core/bulkactionsHelper.min.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*jshint esversion: 6 */
2+
3+
function bulkactionsHelper() {
4+
Alpine.data('bulkactions', (wire) => ({
5+
paginationCurrentCount: wire.entangle('paginationCurrentCount'),
6+
paginationCurrentItems: wire.entangle('paginationCurrentItems'),
7+
selectAllStatus: wire.entangle('selectAll'),
8+
delaySelectAll: wire.entangle('delaySelectAll'),
9+
newSelectCount: 0,
10+
bulkActionHeaderChecked: false,
11+
toggleSelectAll() {
12+
if (this.paginationTotalItemCount === this.selectedItems.length) {
13+
this.clearSelected();
14+
this.selectAllStatus = false;
15+
} else {
16+
if (this.delaySelectAll)
17+
{
18+
this.setAllItemsSelected();
19+
}
20+
else
21+
{
22+
this.setAllSelected();
23+
}
24+
}
25+
},
26+
setAllItemsSelected() {
27+
this.selectAllStatus = true;
28+
this.selectAllOnPage();
29+
},
30+
setAllSelected() {
31+
if (this.delaySelectAll)
32+
{
33+
this.selectAllStatus = true;
34+
this.selectAllOnPage();
35+
}
36+
else
37+
{
38+
wire.setAllSelected();
39+
}
40+
},
41+
clearSelected() {
42+
this.selectAllStatus = false;
43+
wire.clearSelected();
44+
},
45+
selectAllOnPage() {
46+
let tempSelectedItems = this.selectedItems;
47+
const iterator = this.paginationCurrentItems.values();
48+
for (const value of iterator) {
49+
tempSelectedItems.push(value.toString());
50+
}
51+
this.selectedItems = [...new Set(tempSelectedItems)];
52+
},
53+
deselectAllOnPage() {
54+
let tempSelectedItems = this.selectedItems;
55+
tempSelectedItems = tempSelectedItems.filter(item => !this.paginationCurrentItems.includes(item));
56+
this.selectedItems = [...new Set(tempSelectedItems)];
57+
}
58+
}));
59+
}
60+
export default bulkactionsHelper;

‎resources/js/partials/core/table.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ function table() {
1414
paginationCurrentItems: wire.entangle('paginationCurrentItems'),
1515
selectedItems: wire.entangle('selected'),
1616
selectAllStatus: wire.entangle('selectAll'),
17+
selectedAllOnPage: false,
1718
delaySelectAll: wire.entangle('delaySelectAll'),
1819
hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'),
1920
reorderEnabled: false,
@@ -103,6 +104,7 @@ function table() {
103104
}
104105
if (this.delaySelectAll)
105106
{
107+
this.selectedAllOnPage = true;
106108
this.selectAllStatus = true;
107109
this.selectAllOnPage();
108110
}
@@ -116,13 +118,14 @@ function table() {
116118
return;
117119
}
118120
this.selectAllStatus = false;
121+
this.selectedAllOnPage = false;
119122
wire.clearSelected();
120123
},
121124
selectAllOnPage() {
122125
if (!this.showBulkActionsAlpine) {
123126
return;
124127
}
125-
128+
this.selectedAllOnPage = true;
126129
let tempSelectedItems = this.selectedItems;
127130
const iterator = this.paginationCurrentItems.values();
128131
for (const value of iterator) {

‎resources/js/partials/core/table.min.js‎

Lines changed: 10 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,22 @@
33
function table() {
44
Alpine.data('laravellivewiretable', (wire) => ({
55
tableId: '',
6-
showBulkActionsAlpine: false,
6+
paginationTotalItemCount: wire.entangle('paginationTotalItemCount'),
7+
selectedItems: wire.entangle('selected'),
8+
hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'),
9+
indeterminateCheckbox: false,
710
primaryKeyName: '',
811
shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
912
tableName: wire.entangle('tableName'),
1013
dataTableFingerprint: wire.entangle('dataTableFingerprint'),
1114
listeners: [],
12-
paginationCurrentCount: wire.entangle('paginationCurrentCount'),
13-
paginationTotalItemCount: wire.entangle('paginationTotalItemCount'),
14-
paginationCurrentItems: wire.entangle('paginationCurrentItems'),
15-
selectedItems: wire.entangle('selected'),
16-
selectAllStatus: wire.entangle('selectAll'),
17-
delaySelectAll: wire.entangle('delaySelectAll'),
18-
hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'),
1915
reorderEnabled: false,
2016
defaultReorderColumn: wire.entangle('defaultReorderColumn'),
2117
reorderStatus: wire.entangle('reorderStatus'),
2218
currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
2319
hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
2420
reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
25-
newSelectCount: 0,
26-
indeterminateCheckbox: false,
27-
bulkActionHeaderChecked: false,
2821
currentOrderOfItems: null,
29-
updateOrderOfItems(items) {
30-
this.currentOrderOfItems = items;
31-
},
32-
storeOrderedItems() {
33-
wire.storeReorder(this.currentOrderOfItems)
34-
},
3522
stripLivewireTags(data) {
3623
let localHtml = data.innerHTML;
3724
localHtml = localHtml.replace('<!--[if BLOCK]>', '')
@@ -71,73 +58,16 @@ function table() {
7158

7259
wire.disableReordering();
7360
},
74-
toggleSelectAll() {
75-
if (!this.showBulkActionsAlpine) {
76-
return;
77-
}
78-
79-
if (this.paginationTotalItemCount === this.selectedItems.length) {
80-
this.clearSelected();
81-
this.selectAllStatus = false;
82-
} else {
83-
if (this.delaySelectAll)
84-
{
85-
this.setAllItemsSelected();
86-
}
87-
else
88-
{
89-
this.setAllSelected();
90-
}
91-
}
92-
},
93-
setAllItemsSelected() {
94-
if (!this.showBulkActionsAlpine) {
95-
return;
96-
}
97-
this.selectAllStatus = true;
98-
this.selectAllOnPage();
99-
},
100-
setAllSelected() {
101-
if (!this.showBulkActionsAlpine) {
102-
return;
103-
}
104-
if (this.delaySelectAll)
105-
{
106-
this.selectAllStatus = true;
107-
this.selectAllOnPage();
108-
}
109-
else
110-
{
111-
wire.setAllSelected();
112-
}
113-
},
114-
clearSelected() {
115-
if (!this.showBulkActionsAlpine) {
116-
return;
117-
}
118-
this.selectAllStatus = false;
119-
wire.clearSelected();
120-
},
121-
selectAllOnPage() {
122-
if (!this.showBulkActionsAlpine) {
123-
return;
124-
}
125-
126-
let tempSelectedItems = this.selectedItems;
127-
const iterator = this.paginationCurrentItems.values();
128-
for (const value of iterator) {
129-
tempSelectedItems.push(value.toString());
130-
}
131-
this.selectedItems = [...new Set(tempSelectedItems)];
61+
updateOrderOfItems(items) {
62+
this.currentOrderOfItems = items;
63+
},
64+
storeOrderedItems() {
65+
wire.storeReorder(this.currentOrderOfItems)
13266
},
13367
setTableId(tableId)
13468
{
13569
this.tableId = tableId;
13670
},
137-
setAlpineBulkActions(showBulkActionsAlpine)
138-
{
139-
this.showBulkActionsAlpine = showBulkActionsAlpine;
140-
},
14171
setPrimaryKeyName(primaryKeyName)
14272
{
14373
this.primaryKeyName = primaryKeyName;
@@ -164,7 +94,7 @@ function table() {
16494
this.listeners.forEach((listener) => {
16595
listener();
16696
});
167-
},
97+
}
16898
}));
16999
}
170100
export default table;

‎resources/lang/json/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"livewire-tables::Columns": "Columns",
1111
"livewire-tables::Debugging Values": "Debugging Values",
1212
"livewire-tables::Deselect All": "Deselect All",
13+
"livewire-tables::Deselect All On Page": "Deselect All On Page",
1314
"livewire-tables::Done Reordering": "Done Reordering",
1415
"livewire-tables::Filters": "Filters",
1516
"livewire-tables::Loading": "Loading",

‎resources/lang/php/en/core.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
'Columns' => 'Columns',
1313
'Debugging Values' => 'Debugging Values',
1414
'Deselect All' => 'Deselect All',
15+
'Deselect All On Page' => 'Deselect All On Page',
1516
'Disabled' => 'Disabled',
1617
'Done Reordering' => 'Done Reordering',
1718
'Enabled' => 'Enabled',

‎resources/views/components/bulk-actions/td.blade.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@aware([ 'tableName', 'isTailwind', 'rowPk', 'bulkActionsTdAttributes', 'bulkActionsTdCheckboxAttributes', 'showBulkActionsSections'])
1+
@aware([ 'tableName', 'isTailwind', 'isTailwind4', 'isBootstrap','rowPk', 'bulkActionsTdAttributes', 'bulkActionsTdCheckboxAttributes', 'showBulkActionsSections'])
22

33
<x-livewire-tables::table.td.plain wire:key="{{ $tableName }}-tbody-td-bulk-actions-td-{{ $rowPk }}" :displayMinimisedOnReorder="true" :customAttributes=$bulkActionsTdAttributes>
4-
<div @class($isTailwind ? [
5-
'inline-flex rounded-md shadow-sm',
6-
] : [
7-
'form-check',
4+
<div @class([
5+
'inline-flex rounded-md shadow-sm' => $isTailwind,
6+
'inline-flex rounded-md shadow-sm' => $isTailwind4,
7+
'form-check' => $isBootstrap,
88
])>
99
<x-livewire-tables::forms.checkbox
1010
wire:key="{{ $tableName . 'selectedItems-'.$rowPk }}"

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,28 @@
66

77
<x-livewire-tables::table.th.plain :displayMinimisedOnReorder="true" wire:key="{{ $tableName }}-thead-bulk-actions" :$customAttributes>
88
<div x-init="$watch('selectedItems', value => indeterminateCheckbox = (value.length > 0 && value.length < paginationTotalItemCount))"
9-
x-cloak x-show="currentlyReorderingStatus !== true"
109
@class([
1110
'inline-flex rounded-md shadow-sm' => $isTailwind,
11+
'inline-flex rounded-md shadow-sm' => $isTailwind4,
1212
'form-check' => $isBootstrap,
1313
])
1414
>
15-
<input
16-
x-init="$watch('indeterminateCheckbox', value => $el.indeterminate = value); $watch('selectedItems', value => newSelectCount = value.length);"
17-
x-on:click="if(selectedItems.length == paginationTotalItemCount) { $el.indeterminate = false; $wire.clearSelected(); bulkActionHeaderChecked = false; } else { bulkActionHeaderChecked = true; $el.indeterminate = false; $wire.setAllSelected(); }"
18-
type="checkbox"
19-
:checked="selectedItems.length == paginationTotalItemCount"
20-
{{
21-
$attributes->merge($bulkActionsThCheckboxAttributes)->class($isTailwind ? [
22-
'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' => (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)),
23-
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => ($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true),
24-
] : [
25-
'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true),
26-
])->except(['default','default-styling','default-colors'])
15+
<input {{
16+
$attributes->merge($bulkActionsThCheckboxAttributes)
17+
->class(
18+
[
19+
// Tailwind3
20+
'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 && ($bulkActionsThCheckboxAttributes['default-colors'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)),
21+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $isTailwind && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)),
22+
23+
// Tailwind4
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' => $isTailwind4 && ($bulkActionsThCheckboxAttributes['default-colors'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)),
25+
'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $isTailwind4 && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)),
26+
27+
// Bootstrap
28+
'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)),
29+
])
30+
->except(['default','default-styling','default-colors'])
2731
}}
2832
/>
2933
</div>

‎resources/views/components/bulk-actions/thead/button.blade.php‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
1-
@aware(['isTailwind','bulkActionsRowButtonAttributes'])
1+
@aware(['isTailwind','isTailwind4','isBootstrap','bulkActionsRowButtonAttributes'])
22
@props(['bulkActionsRowButtonAttributes'])
33
<button {{
44
$attributes->merge([
55
'wire:loading.attr' => 'disabled',
66
'type' => 'button',
7-
])->merge($bulkActionsRowButtonAttributes)->class($isTailwind ?
8-
[
9-
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' =>($bulkActionsRowButtonAttributes['default-styling'] ?? true),
10-
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => ($bulkActionsRowButtonAttributes['default-colors'] ?? true),
11-
]:[
12-
'btn btn-primary btn-sm' => ($bulkActionsRowButtonAttributes['default-styling'] ?? true)
13-
])->except(['default','default-colors','default-styling'])
7+
])
8+
->merge($bulkActionsRowButtonAttributes)
9+
->class(
10+
[
11+
// Tailwind3
12+
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $isTailwind && ($bulkActionsRowButtonAttributes['default-styling'] ?? true),
13+
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $isTailwind && ($bulkActionsRowButtonAttributes['default-colors'] ?? true),
14+
15+
// Tailwind4
16+
'ml-1 underline text-sm leading-5 font-medium focus:outline-none focus:underline transition duration-150 ease-in-out' => $isTailwind4 && ($bulkActionsRowButtonAttributes['default-styling'] ?? true),
17+
'text-blue-600 text-gray-700 focus:text-gray-800 dark:text-white dark:hover:text-gray-400' => $isTailwind4 && ($bulkActionsRowButtonAttributes['default-colors'] ?? true),
18+
19+
// Bootstrap
20+
'btn btn-primary btn-sm' => $isBootstrap && ($bulkActionsRowButtonAttributes['default-styling'] ?? true)
21+
]
22+
)
23+
->except(['default','default-colors','default-styling'])
1424
}}
1525
>
1626
{{ $slot }}

0 commit comments

Comments
 (0)