Filter Rationalisation & Livewire Array Filter improvements (#2191)

* Partial Merges

* Fix styling

* Minor adjustments

* Fix styling

* Minor tweaks for return type

* Minor dochint fixes

* Migration to support Livewire Filter Array filter pills, docs updates, and reverting away from computed properties for the theme determination

* Fix styling

* Minor tweaks to handle HTML array separators

* Fix broken separator

* Minor tweaks

* Tweaks & Adjustments

* Fix styling

* Minor Tweaks to Tests

* Fix styling

* Test Fixes

* Fix styling

* Test Tweaks

* Fix styling

* Tweaks for tests

* Fix styling

* Tweaks to Base

* Fix styling

Author: lrljoe

docs/column-types/array_column.md

@@ -5,7 +5,7 @@ weight: 2
 
 Array columns provide an easy way to work with and display an array of data from a field.
 
-```
+```php
 ArrayColumn::make('notes', 'name')
     ->data(fn($value, $row) => ($row->notes))
     ->outputFormat(fn($index, $value) => "<a href='".$value->id."'>".$value->name."</a>")
@@ -16,7 +16,7 @@ ArrayColumn::make('notes', 'name')
 ### Empty Value
 You may define the default/empty value using the "emptyValue" method
 
-```
+```php
 ArrayColumn::make('notes', 'name')
     ->emptyValue('Unknown'),
 ```

docs/column-types/avg_column.md

@@ -5,7 +5,7 @@ weight: 3
 
 Avg columns provide an easy way to display the "Average" of a field on a relation.
 
-```
+```php
     AvgColumn::make('Average Related User Age')
         ->setDataSource('users','age')
         ->sortable(),

docs/column-types/count_column.md

@@ -5,7 +5,7 @@ weight: 8
 
 Count columns provide an easy way to display the "Count" of a relation.
 
-```
+```php
     CountColumn::make('Related Users')
         ->setDataSource('users')
         ->sortable(),

docs/column-types/livewire_component_column.md

@@ -8,7 +8,7 @@ Livewire Component Columns allow for the use of a Livewire Component as a Column
 This is **not recommended** as due to the nature of Livewire, it becomes inefficient at scale.
 
 ## component
-```
+```php
 LivewireComponentColumn::make('Action')
     ->component('PathToLivewireComponent'),
 

docs/filter-types/filters-livewire-component-array.md

@@ -0,0 +1,51 @@
+---
+title: Livewire Custom Array Filter (Beta)
+weight: 13
+---
+
+**IN BETA**
+This feature is currently in beta, and use in production is not recommended.
+
+### Usage
+This allows you to use a child/nested Livewire Component in place of the existing Filters, giving you more control over the look/feel/behaviour of a filter.  This version supports use of returning an array of values for use in filtering.
+
+To use a LivewireComponentArrayFilter, you must include it in your namespace:
+```php
+use Rappasoft\LaravelLivewireTables\Views\Filters\LivewireComponentArrayFilter;
+```
+
+When creating a filter:
+- Specify a unique name
+- Set the path to a valid Livewire Component
+- Define a filter() callback to define how the returned value will be used.
+
+```php
+    public function filters(): array
+    {
+        return [ 
+            LivewireComponentArrayFilter::make('My External Filter')
+            ->setLivewireComponent('my-test-external-filter')
+            ->filter(function (Builder $builder, array $values) {
+                $builder->whereIn('foreign_id', $values);
+            }),
+        ];
+    }
+```
+
+### setPillsSeparator
+As this is an array, you can define the separator to use between pills values, by default this is set to ", "
+
+```php
+    public function filters(): array
+    {
+        return [ 
+            LivewireComponentArrayFilter::make('My External Filter')
+            ->setLivewireComponent('my-test-external-filter')
+            ->setPillsSeparator(' OR ')
+            ->filter(function (Builder $builder, array $values) {
+                $builder->whereIn('foreign_id', $values);
+            }),
+        ];
+    }
+```
+

docs/filters/available-component-methods.md

@@ -85,135 +85,9 @@ public function configure(): void
 
 ---
 
-## setFilterPillsStatus
+## Pills
 
-**Enabled by default**, show/hide the filter pills.
-
-```php
-public function configure(): void
-{
-    $this->setFilterPillsStatus(true);
-    $this->setFilterPillsStatus(false);
-}
-```
-
-## setFilterPillsEnabled
-
-Show the filter pills for the component.
-
-```php
-public function configure(): void
-{
-    // Shorthand for $this->setFilterPillsStatus(true)
-    $this->setFilterPillsEnabled();
-}
-```
-
-## setFilterPillsDisabled
-
-Hide the filter pills for the component.
-
-```php
-public function configure(): void
-{
-    // Shorthand for $this->setFilterPillsStatus(false)
-    $this->setFilterPillsDisabled();
-}
-```
-
-## setFilterPillsItemAttributes
-Allows for customisation of the appearance of the "Filter Pills Item"
-
-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.
-
-#### default-colors
-Setting to false will disable the default colors for the Filter Pills Item, the default colors are:
-
-Bootstrap: None
-
-Tailwind: `bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900`
-
-#### default-styling
-Setting to false will disable the default styling for the Filter Pills Item, the default styling is:
-
-Bootstrap 4: `badge badge-pill badge-info d-inline-flex align-items-center`
-
-Bootstrap 5: `badge rounded-pill bg-info d-inline-flex align-items-center`
-
-Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize`
-
-```php
-public function configure(): void
-{
-  $this->setFilterPillsItemAttributes([
-    'class' => 'bg-rose-300 text-rose-800 dark:bg-indigo-200 dark:text-indigo-900', // Add these classes to the filter pills item
-    'default-colors' => false, // Do not output the default colors
-    'default-styling' => true // Output the default styling
-  ]);
-}
-```
-
-## setFilterPillsResetFilterButtonAttributes
-Allows for customisation of the appearance of the "Filter Pills Reset Filter Button"
-
-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.
-
-#### default-colors
-Setting to false will disable the default colors for the Filter Pills Reset Filter Button, the default colors are:
-
-Bootstrap: None
-
-Tailwind: `text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:bg-indigo-500 focus:text-white`
-
-#### default-styling
-Setting to false will disable the default styling for the Filter Pills Reset Filter Button, the default styling is:
-
-Bootstrap: `text-white ml-2`
-
-Tailwind: `flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none`
-
-```php
-public function configure(): void
-{
-  $this->setFilterPillsResetFilterButtonAttributes([
-    'class' => 'text-rose-400 hover:bg-rose-200 hover:text-rose-500 focus:bg-rose-500', // Add these classes to the filter pills reset filter button
-    'default-colors' => false, // Do not output the default colors
-    'default-styling' => true // Output the default styling
-  ]);
-}
-```
-
-## setFilterPillsResetAllButtonAttributes
-Allows for customisation of the appearance of the "Filter Pills Reset All Button"
-
-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.
-
-#### default-colors
-Setting to false will disable the default colors for the Filter Pills Reset All Button, the default colors are:
-
-Bootstrap: None
-
-Tailwind: `bg-gray-100 text-gray-800 dark:bg-gray-200 dark:text-gray-900`
-
-#### default-styling
-Setting to false will disable the default styling for the Filter Pills Reset All Button, the default styling is:
-
-Bootstrap 4: `badge badge-pill badge-light`
-
-Bootstrap 5: `badge rounded-pill bg-light text-dark text-decoration-none`
-
-Tailwind: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium`
-
-```php
-public function configure(): void
-{
-  $this->setFilterPillsResetAllButtonAttributes([
-    'class' => 'bg-rose-100 text-rose-800 dark:bg-gray-200 dark:text-gray-900', // Add these classes to the filter pills reset all button
-    'default-colors' => false, // Do not output the default colors
-    'default-styling' => true // Output the default styling
-  ]);
-}
-```
+See the [Filter Pills](./filter-pills) documentation for help with configuring the pills
 
 ---