Merge pull request #235 from rappasoft/develop

v1.3.0

Author: rappasoft

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [1.3.0] - 2021-04-25
+
+### Added
+
+- Added searchable() to columns (https://github.com/rappasoft/laravel-livewire-tables/pull/233)
+
+### Changed
+
+- Fixed offline indicators to display block.
+- Tailwind cool-gray to just gray since it is included by default.
+
 ## [1.2.2] - 2021-04-23
 
 ### Changed
@@ -237,8 +248,11 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 - Initial release
 
-[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.2.0...development
-[1.2.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.4...v1.2.0
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.3.0...development
+[1.3.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.2.2...v1.3.0
+[1.2.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.2.1...v1.2.2
+[1.2.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.2.0...v1.2.1
+[1.2.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.4...v1.1.0
 [1.0.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.3...v1.0.4
 [1.0.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.2...v1.0.3

README.md

@@ -66,9 +66,11 @@ class Table extends DataTableComponent
     {
         return [
             Column::make('Type')
-                ->sortable(),
+                ->sortable()
+				->searchable(),
             Column::make('Name')
-                ->sortable(),
+                ->sortable()
+				->searchable(),
             Column::make('Permissions'),
             Column::blank(),
         ];
@@ -170,7 +172,7 @@ public function getTableRowUrl($row): string
 To create cells, you should use the `<x-livewire-tables::table.cell>` table cell component, which will be rendered to:
 
 ```html
-<td {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-900']) }}>
+<td {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-sm leading-5 text-gray-900']) }}>
     {{ $slot }}
 </td>
 ```
@@ -345,7 +347,23 @@ public array $filterNames = [
 
 ### Adding Search
 
-The search is a special built-in filter that is managed by the component, but you need to define the search query, you can do so the same as any other filter:
+The search is a special built-in filter that is managed by the component, but you need to define the behavior. For a simple default search behavior, add searchable() to columns:
+
+```php
+Column::make('Type')
+	->searchable(),
+```
+
+You can also pass a callback for more control:
+
+```php
+Column::make('Type')
+	->searchable(function (Builder $query, $searchTerm) {
+        $query->orWhere(...);
+    }),
+```
+
+Sometimes the default search behavior may not meet your requirements. If this is the case, skip using the searchable() method on columns and define your own behavior directly on the query.
 
 ```php
 public function query(): Builder

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

@@ -1,5 +1,5 @@
 @if ($offlineIndicator)
-    <div wire:offline>
+    <div wire:offline.class.remove="d-none" class="d-none">
         <div class="alert alert-danger d-flex align-items-center">
             <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />

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

@@ -1,5 +1,5 @@
 @if ($offlineIndicator)
-    <div wire:offline>
+    <div wire:offline.class.remove="d-none" class="d-none">
         <div class="alert alert-danger d-flex align-items-center">
             <svg xmlns="http://www.w3.org/2000/svg" style="width:1.3em;height:1.3em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />

resources/views/tailwind/components/table/cell.blade.php

@@ -1,3 +1,3 @@
-<td {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-900']) }}>
+<td {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-4 whitespace-no-wrap text-sm leading-5 text-gray-900']) }}>
     {{ $slot }}
 </td>

resources/views/tailwind/components/table/heading.blade.php

@@ -6,17 +6,17 @@
 ])
 
 <th
-    {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-3 bg-cool-gray-50'])->only('class') }}
+    {{ $attributes->merge(['class' => 'px-3 py-2 md:px-6 md:py-3 bg-gray-50'])->only('class') }}
 >
     @unless ($sortable)
-        <span class="block text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider">
+        <span class="block text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
             {{ $text ?? $slot }}
         </span>
     @else
         <button
             wire:click="sortBy('{{ $column }}', '{{ $text ?? $column }}')"
             {{ $attributes->except('class') }}
-            class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-cool-gray-500 uppercase tracking-wider group focus:outline-none focus:underline"
+            class="flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none focus:underline"
         >
             <span>{{ $text ?? $slot }}</span>
 

resources/views/tailwind/components/table/table.blade.php

@@ -1,12 +1,12 @@
 <div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden rounded-none md:rounded-lg">
-    <table class="min-w-full divide-y divide-cool-gray-200">
+    <table class="min-w-full divide-y divide-gray-200">
         <thead>
             <tr>
                 {{ $head }}
             </tr>
         </thead>
 
-        <tbody class="bg-white divide-y divide-cool-gray-200">
+        <tbody class="bg-white divide-y divide-gray-200">
             {{ $body }}
         </tbody>
     </table>

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

@@ -1,5 +1,5 @@
 @if ($offlineIndicator)
-    <div wire:offline>
+    <div wire:offline.class.remove="hidden" class="hidden">
         <div class="rounded-md bg-red-50 p-4 mb-4">
             <div class="flex">
                 <div class="flex-shrink-0">

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

@@ -4,7 +4,7 @@
             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"
+            class="flex-1 shadow-sm border-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"
         />
 
         @if (isset($filters['search']) && strlen($filters['search']))

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

@@ -6,7 +6,7 @@
                     <input
                         wire:model="selectPage"
                         type="checkbox"
-                        class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+                        class="rounded-md shadow-sm border-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                     />
                 </div>
             </x-livewire-tables::table.heading>
@@ -38,7 +38,7 @@ class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 e
                             <button
                                 wire:click="selectAll"
                                 type="button"
-                                class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-cool-gray-800 focus:underline transition duration-150 ease-in-out"
+                                class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
                             >
                                 @lang('Select All')
                             </button>
@@ -50,7 +50,7 @@ class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-me
                             <button
                                 wire:click="resetBulk"
                                 type="button"
-                                class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-cool-gray-800 focus:underline transition duration-150 ease-in-out"
+                                class="ml-1 text-blue-600 underline text-gray-700 text-sm leading-5 font-medium focus:outline-none focus:text-gray-800 focus:underline transition duration-150 ease-in-out"
                             >
                                 @lang('Unselect All')
                             </button>
@@ -75,7 +75,7 @@ class="ml-1 text-blue-600 underline text-cool-gray-700 text-sm leading-5 font-me
                                 value="{{ $row->getKey() }}"
                                 onclick="event.stopPropagation();return true;"
                                 type="checkbox"
-                                class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+                                class="rounded-md shadow-sm border-gray-300 block transition duration-150 ease-in-out sm:text-sm sm:leading-5"
                             />
                         </div>
                     </x-livewire-tables::table.cell>
@@ -87,11 +87,11 @@ class="rounded-md shadow-sm border-cool-gray-300 block transition duration-150 e
             <x-livewire-tables::table.row>
                 <x-livewire-tables::table.cell :colspan="count($bulkActions) ? count($columns) + 1 : count($columns)">
                     <div class="flex justify-center items-center space-x-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cool-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                         </svg>
 
-                        <span class="font-medium py-8 text-cool-gray-400 text-xl">@lang('No items found. Try narrowing your search.')</span>
+                        <span class="font-medium py-8 text-gray-400 text-xl">@lang('No items found. Try narrowing your search.')</span>
                     </div>
                 </x-livewire-tables::table.cell>
             </x-livewire-tables::table.row>