3.3.1 Release (#1776)

### Bug Fixes - Fix NumberRangeFilter initial state when loaded by querystring by @lrljoe in #1774 - Fix SnakeCase issue with snake-cased relations for AggregateColumn types (AvgColumn, CountColumn, SumColumn) by @lrljoe in #1777 ### New Features - Set a Prefix for NumberRangeFilter by @RenoLooijmans in #1773 - Add Separator customisation for Array Filters for FilterPills by @lrljoe in #1772 - Add bulk actions button/dropdown customisations by @lrljoe in #1771 Co-authored-by: lrljoe <[email protected]>
rappasoft · Jul 16, 2024 · 6fb0016 · 6fb0016
1 parent d614186
commit 6fb0016
Show file tree

Hide file tree

Showing 43 changed files with 745 additions and 168 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,11 +2,22 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.3.1] - 2024-07-16
+### Bug Fixes
+- Fix NumberRangeFilter initial state when loaded by querystring by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1774
+- Fix SnakeCase issue with snake-cased relations for AggregateColumn types (AvgColumn, CountColumn, SumColumn) by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1777
+
+### New Features
+- Set a Prefix for NumberRangeFilter by @RenoLooijmans in https://github.com/rappasoft/laravel-livewire-tables/pull/1773
+- Add Separator customisation for Array Filters for FilterPills by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1772
+- Add bulk actions button/dropdown customisations by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1771
+
 ## [v3.3.0] - 2024-07-11
 ### New Features
 - Add new columns (ArrayColumn, AvgColumn, CountColumn, SumColumn) by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1761
 - Add new column WireLinkColumn by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1763
 - Add Option to Retain Selected when Searching/Filtering by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1762
+- Add Option to set locale and default date to DateRangeFilter by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1766
 
 ## [v3.2.8] - 2024-07-03
 ### Bug Fixes

diff --git a/config/livewire-tables.php b/config/livewire-tables.php
@@ -72,6 +72,7 @@
             'dateFormat' => 'Y-m-d', // Date format that will be received by the filter
             'earliestDate' => null, // The earliest acceptable date
             'latestDate' => null, // The latest acceptable date
+            'locale' => 'en', // The default locale
         ],
     ],
 
@@ -87,6 +88,7 @@
             'minRange' => 0, // The minimum possible value
             'maxRange' => 100, // The maximum possible value
             'suffix' => '', // A suffix to append to the values when displayed
+            'prefix' => '', // A prefix to prepend to the values when displayed
         ],
     ],
     /**
@@ -105,7 +107,7 @@
     ],
 
     /**
-     * Configuration options for MultiSelectFilter
+     * Configuration options for MultiSelectDropdownFilter
      */
     'multiSelectDropdownFilter' => [
         'defaultOptions' => [],

diff --git a/docs/bulk-actions/available-methods.md b/docs/bulk-actions/available-methods.md
@@ -184,61 +184,6 @@ public function configure(): void
 }
 ```
 
-## setBulkActionsThAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the table header
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsThAttributes([
-        'class' => 'bg-red-500',
-        'default' => false
-    ]);
-}
-```
-
-## setBulkActionsThCheckboxAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the Select All/None checkbox in the Table Header
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsThCheckboxAttributes([
-        'class' => 'bg-blue-500',
-        'default' => false
-    ]);
-}
-```
-
-## setBulkActionsTdAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the td containing the Bulk Actions Checkbox for the row
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsTdAttributes([
-        'class' => 'bg-green-500',
-        'default' => true
-    ]);
-}
-```
-
-## setBulkActionsTdCheckboxAttributes
-
-You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Checkbox for the row
-
-```php
-public function configure(): void
-{
-    $this->setBulkActionsTdCheckboxAttributes([
-        'class' => 'bg-green-500',
-        'default' => true
-    ]);
-}
-```
 
 ## setShouldAlwaysHideBulkActionsDropdownOption
 
@@ -345,4 +290,4 @@ public function configure(): void
 {
     $this->setClearSelectedOnFilterDisabled();
 }
-```
+```
diff --git a/docs/bulk-actions/customisations.md b/docs/bulk-actions/customisations.md
@@ -0,0 +1,106 @@
+---
+title: Customising Style
+weight: 5
+---
+
+## setBulkActionsThAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the table header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThAttributes([
+        'class' => 'bg-red-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsThCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Select All/None checkbox in the Table Header
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsThCheckboxAttributes([
+        'class' => 'bg-blue-500',
+        'default' => false
+    ]);
+}
+```
+
+## setBulkActionsTdAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the td containing the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
+
+## setBulkActionsTdCheckboxAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Checkbox for the row
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsTdCheckboxAttributes([
+        'class' => 'bg-green-500',
+        'default' => true
+    ]);
+}
+```
+
+## setBulkActionsButtonAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Button in the Toolbar
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsButtonAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,
+    ]);
+}
+```
+
+## setBulkActionsMenuAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into the Bulk Actions Menu
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsMenuAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,    
+    ]);
+}
+```
+
+
+## setBulkActionsMenuItemAttributes
+
+You may pass an array to this method, which allows you to pass Custom Attributes into Items on the Bulk Actions Menu
+
+```php
+public function configure(): void
+{
+    $this->setBulkActionsMenuItemAttributes([
+        'class' => 'bg-green-500',
+        'default-colors' => true,
+        'default-styling' => true,    
+    ]);
+}
+```
diff --git a/docs/column-types/standard_column.md b/docs/column-types/standard_column.md
@@ -28,4 +28,4 @@ A standard Column has a multitude of different options, making it simple for you
         <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/columns/anonymous_columns">Anonymous Columns</a>
     </li>
 
-</ul>
+</ul>
diff --git a/docs/filter-types/filters-date.md b/docs/filter-types/filters-date.md
@@ -3,8 +3,6 @@ title: Date Filters
 weight: 2
 ---
 
-## Date Filters
-
 Date filters are HTML date elements.
 
 ```php

diff --git a/docs/filter-types/filters-daterange.md b/docs/filter-types/filters-daterange.md
@@ -3,8 +3,6 @@ title: DateRange Filters
 weight: 3
 ---
 
-## DateRange Filters
-
 DateRange filters are Flatpickr based components, and simply filtering by a date range.  If you would like to more smoothly filter your query by a start and end date, you can use the DateRangeFilter:
 
 ```php
@@ -33,6 +31,7 @@ public function filters(): array
             'earliestDate' => '2020-01-01', // The earliest acceptable date
             'latestDate' => '2023-08-01', // The latest acceptable date
             'placeholder' => 'Enter Date Range', // A placeholder value
+            'locale' => 'en',
         ])
         ->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values
         ->filter(function (Builder $builder, array $dateRange) { // Expects an array.
@@ -44,31 +43,85 @@ public function filters(): array
 }
 ```
 
+## Configuration
+By default, this filter will inject the Flatpickr JS Library and CSS. However, you can customise this behaviour using the configuration file.
+
+### Option 1 - The default behaviour:
+```
+    'inject_third_party_assets_enabled' => true,
+```
 
+### Option 2 - Bundled
+If you choose to bundle the Tables JS/CSS (recommended) by adding the following to your build process:
 
-## Configuration
-By default, this filter will use a CDN to include the Flatpickr JS Library and CSS. However, you can customise this behaviour using the configuration file.
+```
+'vendor/rappasoft/laravel-livewire-tables/resources/js/laravel-livewire-tables-thirdparty.min.js';
+```
+
+or in your app.js
+
+```
+import '../../vendor/rappasoft/livewire-tables/resources/js/laravel-livewire-tables-thirdparty.min.js';
+```
 
-### Option 1 - The default CDN behaviour:
+Then you should disable injection to avoid conflicts:
+
+```
+    'inject_third_party_assets_enabled' => false,
+```
+
+### Option 3 - CDN
+You must ensure that Flatpickr is present PRIOR to the tables loading.  For example, to add Flatpickr with the Spanish locale, ensure that the following is present in your Layout head section.  Noting the "async" presence to ensure that the script is present before a page renders.
+
+It is typically recommended not to utilise the CDN approach, as changes to core code may impact behaviour, and you may need to implement changes to your CSP if present.
+
+If using the CDN approach, ensure the following config matches:
 ```
-    'published_third_party_assets' => false,
-    'remote_third_party_assets' => true,
+    'inject_third_party_assets_enabled' => false,
 ```
 
-### Option 2 - Publish included version
-You may publish the included version of Flatpickr.  To do so, run:
+Then include the following in your layout:
 ```
-php artisan vendor:publish --tag=livewire-tables-public
+// Flatpickr Core Script
+<script src="https://npmcdn.com/flatpickr" async></script>
+
+// Flatpickr Core CSS
+<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/flatpickr.min.css">
 ```
-This will publish the tested version of Flatpickr to your public directory. You should then set
+
+### Option 4 - Locally Installed
+If you have a locally installed version of Flatpickr already, you can set injection to false, and your local version will be used instead.
 ```
-    'published_third_party_assets' => true,
-    'remote_third_party_assets' => false,
+    'inject_third_party_assets_enabled' => false,
 ```
 
-### Option 3 - Locally Installed
-If you have a locally installed version of Flatpickr already, you can set both options to false, and your local version will be used instead.
+## Localisation (BETA)
+The default installation includes only the English (en) locale.
+
+### Bundling
+Should you wish to localise, you must include the Flatpickr locale files in your build pipeline.  This applies to only the specific locales that you require in your app.js (requires adding the flatpickr library to your package.json by executing "npm i flatpickr --save")
 ```
-    'published_third_party_assets' => false,
-    'remote_third_party_assets' => false,
+import { Arabic } from "../imports/flatpickr/l10n/ar.js";
+import { Catalan } from "../imports/flatpickr/l10n/cat.js";
+import { Danish } from "../imports/flatpickr/l10n/da.js";
+import { German } from "../imports/flatpickr/l10n/de.js";
+import { Spanish } from "../imports/flatpickr/l10n/es.js";
+import { French } from "../imports/flatpickr/l10n/fr.js";
+import { Indonesian } from "../imports/flatpickr/l10n/id.js";
+import { Italian } from "../imports/flatpickr/l10n/it.js";
+import { Malaysian } from "../imports/flatpickr/l10n/ms.js";
+import { Dutch } from "../imports/flatpickr/l10n/nl.js";
+import { Portuguese } from "../imports/flatpickr/l10n/pt.js";
+import { Russian } from "../imports/flatpickr/l10n/ru.js"
+import { Thai } from "../imports/flatpickr/l10n/th.js"
+import { Turkish } from "../imports/flatpickr/l10n/tr.js"
+import { Ukrainian } from "../imports/flatpickr/l10n/uk.js"
+```
+
+### CDN
+You can also add locales using the Flatpickr CDN, ensuring that these are loaded before the page renders.
+
+For example to add German (de), ensure that the following is in the "head" section of your layout, ideally before your app.js
 ```
+<script src="https://npmcdn.com/flatpickr/dist/l10n/de.js" async></script>
+```
diff --git a/docs/filter-types/filters-datetime.md b/docs/filter-types/filters-datetime.md
@@ -3,8 +3,6 @@ title: DateTime Filters
 weight: 4
 ---
 
-## DateTime Filters
-
 DateTime filters are HTML datetime-local elements and act the same as date filters.
 
 ```php

diff --git a/docs/filter-types/filters-livewire-component.md b/docs/filter-types/filters-livewire-component.md
@@ -3,8 +3,6 @@ title: Livewire Custom Filter (Beta)
 weight: 11
 ---
 
-## Livewire Custom Filter
-
 **IN BETA**
 This feature is currently in beta, and use in production is not recommended.