Merge branch 'DeltaSystems-feature-search-model-options' into develop

Author: rappasoft

README.md

@@ -386,15 +386,18 @@ In the component you have access to `$this->selectedRowsQuery` which is a **Buil
 
 There are some class level properties you can set:
 
-| Property | Default | Usage |
-| -------- | ------- | ----- |
-| $showSearch | true | Show the search box |
-| $showPerPage | true | Show the per page selector |
-| $showPagination | true | Show the pagination |
-| $showSorting | true | Show the sorting pills |
-| $showFilters | true | Show the filter pills |
-| $refresh | false | Whether or not to refresh the table at a certain interval. false = off, int = ms, string = functionCall |
-| $offlineIndicator | true | Shows a red banner when there is no internet connection. |
+| Property | Default | Options | Usage |
+| -------- | ------- | ------- | ----- |
+| $showSearch | true | bool | Show the search box |
+| $showPerPage | true | bool | Show the per page selector |
+| $showPagination | true | bool | Show the pagination |
+| $showSorting | true | bool | Show the sorting pills |
+| $showFilters | true | bool | Show the filter pills |
+| $searchFilterDebounce | null | null/int | Adds a debounce of `$searchFilterDebounce` ms to the search input |
+| $searchFilterDefer | null | null/bool | Adds `.defer` to the search input |
+| $searchFilterLazy | null | null/bool | Adds `.lazy` to the search input |
+| $refresh | false | false/int/string | Whether or not to refresh the table at a certain interval. false = off, int = ms, string = functionCall |
+| $offlineIndicator | true | bool | Shows a red banner when there is no internet connection. |
 
 #### Using more than one table on a page
 

resources/views/bootstrap-4/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="mb-3 mb-md-0 input-group">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="form-control"

resources/views/bootstrap-5/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="mb-3 mb-md-0 input-group">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="form-control"

resources/views/tailwind/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="flex rounded-md shadow-sm">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="flex-1 shadow-sm border-cool-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo @if (isset($filters['search']) && strlen($filters['search'])) rounded-none rounded-l-md @else rounded-md @endif"

src/Traits/WithFilters.php

@@ -7,12 +7,66 @@
  */
 trait WithFilters
 {
+    /**
+     * Filter values
+     *
+     * @var array
+     */
     public array $filters = [];
+
+    /**
+     * Map filter names
+     *
+     * @var array
+     */
     public array $filterNames = [];
+
+    /**
+     * Default filters
+     *
+     * @var array|null[]
+     */
     public array $baseFilters = [
         'search' => null,
     ];
 
+    /**
+     * @var int|null
+     */
+    public ?int $searchFilterDebounce = null;
+
+    /**
+     * @var bool|null
+     */
+    public ?bool $searchFilterDefer = null;
+
+    /**
+     * @var bool|null
+     */
+    public ?bool $searchFilterLazy = null;
+
+    /**
+     * Build Livewire model options for the search input
+     *
+     * @return string
+     */
+    public function getSearchFilterOptionsProperty(): string
+    {
+        if ($this->searchFilterDebounce) {
+            return '.debounce.' . $this->searchFilterDebounce . 'ms';
+        }
+
+        if ($this->searchFilterDefer) {
+            return '.defer';
+        }
+
+        if ($this->searchFilterLazy) {
+            return '.lazy';
+        }
+
+        return '';
+    }
+
     public function resetFilters(): void
     {
         $search = $this->filters['search'] ?? null;