diff --git a/docs/misc/loading-placeholder.md b/docs/misc/loading-placeholder.md index 20ca7f9b5..67c4977ac 100644 --- a/docs/misc/loading-placeholder.md +++ b/docs/misc/loading-placeholder.md @@ -47,7 +47,9 @@ You may use this method to set custom text for the placeholder: $this->setLoadingPlaceholderContent('Text To Display'); } ``` -### setLoadingPlaceHolderWrapperAttributes +### setLoadingPlaceHolderWrapperAttributes (Deprecated) + +This is replaced by setLoadingPlaceHolderRowAttributes, but remains functional. This method allows you to customise the attributes for the <tr> element used as a Placeholder when the table is loading. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes. @@ -62,6 +64,22 @@ This method allows you to customise the attributes for the <tr> element us ``` +### setLoadingPlaceHolderRowAttributes + +Replaces setLoadingPlaceHolderWrapperAttributes +This method allows you to customise the attributes for the <tr> element used as a Placeholder when the table is loading. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes. + +```php + public function configure(): void + { + $this->setLoadingPlaceHolderRowAttributes([ + 'class' => 'text-bold', + 'default' => false, + ]); + } + +``` + ### setLoadingPlaceHolderIconAttributes This method allows you to customise the attributes for the <div> element that is used solely for the PlaceholderIcon. Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes. diff --git a/resources/lang/en.json b/resources/lang/en.json index dcf30f145..1579cbbe2 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -11,6 +11,7 @@ "livewire-tables::Deselect All": "Deselect All", "livewire-tables::Done Reordering": "Done Reordering", "livewire-tables::Filters": "Filters", + "livewire-tables::loading": "Loading", "livewire-tables::max": "Max", "livewire-tables::min": "Min", "livewire-tables::not_applicable": "N/A", @@ -45,6 +46,7 @@ "Deselect All": "Deselect All", "Done Reordering": "Done Reordering", "Filters": "Filters", + "loading": "Loading", "max": "Max", "min": "Min", "not_applicable": "N/A", diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php index f22096321..d439e6c93 100644 --- a/resources/views/components/includes/loading.blade.php +++ b/resources/views/components/includes/loading.blade.php @@ -1,35 +1,38 @@ -@aware(['isTailwind', 'isBootstrap', 'tableName', 'component']) +@aware(['tableName']) @props(['colCount' => 1]) @php -$customAttributes['loader-wrapper'] = $this->getLoadingPlaceHolderWrapperAttributes(); -$customAttributes['loader-icon'] = $this->getLoadingPlaceHolderIconAttributes(); +$loaderRow = $this->getLoadingPlaceHolderRowAttributes(); +$loaderCell = $this->getLoadingPlaceHolderCellAttributes(); +$loaderIcon = $this->getLoadingPlaceHolderIconAttributes(); @endphp -@if($this->hasLoadingPlaceholderBlade()) - @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount]) -@else - merge($customAttributes['loader-wrapper']) - ->class(['hidden w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)]) - ->class(['d-none w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]); - }} - wire:loading.class.remove="hidden d-none" - > - +merge($loaderRow) + ->class(['hidden w-full text-center place-items-center align-middle' => $this->isTailwind && ($loaderRow['default'] ?? true)]) + ->class(['d-none w-100 text-center align-items-center' => $this->isBootstrap && ($loaderRow['default'] ?? true)]) + ->except(['default','default-styling','default-colors']) +}}> + merge($loaderCell) + ->class(['py-4' => $this->isTailwind && ($loaderCell['default'] ?? true)]) + ->class(['py-4' => $this->isBootstrap && ($loaderCell['default'] ?? true)]) + ->except(['default','default-styling','default-colors', 'colspan','wire:key']) + }}> + @if($this->hasLoadingPlaceholderBlade()) + @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount]) + @else +
-
merge($customAttributes['loader-icon']) - ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)]) - ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)]) +
merge($loaderIcon) + ->class(['lds-hourglass' => $this->isTailwind && ($loaderIcon['default'] ?? true)]) + ->class(['lds-hourglass' => $this->isBootstrap && ($loaderIcon['default'] ?? true)]) ->except(['default','default-styling','default-colors']); - }} - >
-
{{ $this->getLoadingPlaceholderContent() }}
+ }}>
+
{!! $this->getLoadingPlaceholderContent() !!}
- - + @endif + + -@endif diff --git a/src/Traits/Configuration/LoadingPlaceholderConfiguration.php b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php index a88bcccda..1c7f7b988 100644 --- a/src/Traits/Configuration/LoadingPlaceholderConfiguration.php +++ b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php @@ -32,27 +32,6 @@ public function setLoadingPlaceholderContent(string $content): self return $this; } - public function setLoadingPlaceHolderAttributes(array $attributes): self - { - $this->loadingPlaceHolderAttributes = $attributes; - - return $this; - } - - public function setLoadingPlaceHolderIconAttributes(array $attributes): self - { - $this->loadingPlaceHolderIconAttributes = $attributes; - - return $this; - } - - public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self - { - $this->loadingPlaceHolderWrapperAttributes = $attributes; - - return $this; - } - public function setLoadingPlaceholderBlade(string $customBlade): self { $this->loadingPlaceholderBlade = $customBlade; diff --git a/src/Traits/Helpers/LoadingPlaceholderHelpers.php b/src/Traits/Helpers/LoadingPlaceholderHelpers.php index 4a5a9e7e7..cd43c583f 100644 --- a/src/Traits/Helpers/LoadingPlaceholderHelpers.php +++ b/src/Traits/Helpers/LoadingPlaceholderHelpers.php @@ -16,23 +16,7 @@ public function getDisplayLoadingPlaceholder(): bool public function getLoadingPlaceholderContent(): string { - return $this->loadingPlaceholderContent ?? __('livewire-tables:loading'); - } - - public function getLoadingPlaceholderAttributes(): array - { - return count($this->loadingPlaceHolderAttributes) ? $this->loadingPlaceHolderAttributes : ['default' => true]; - - } - - public function getLoadingPlaceHolderIconAttributes(): array - { - return count($this->loadingPlaceHolderIconAttributes) ? $this->loadingPlaceHolderIconAttributes : ['default' => true]; - } - - public function getLoadingPlaceHolderWrapperAttributes(): array - { - return count($this->loadingPlaceHolderWrapperAttributes) ? $this->loadingPlaceHolderWrapperAttributes : ['default' => true]; + return $this->loadingPlaceholderContent ?? __('livewire-tables::loading'); } public function hasLoadingPlaceholderBlade(): bool diff --git a/src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php b/src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php new file mode 100644 index 000000000..c07780bdc --- /dev/null +++ b/src/Traits/Styling/Configuration/LoadingPlaceholderStylingConfiguration.php @@ -0,0 +1,34 @@ +setCustomAttributes('loadingPlaceHolderAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: false, classicMode: true), ...$attributes]); + + return $this; + } + + public function setLoadingPlaceHolderIconAttributes(array $attributes): self + { + $this->setCustomAttributes('loadingPlaceHolderIconAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: false, classicMode: true), ...$attributes]); + + return $this; + } + + public function setLoadingPlaceHolderRowAttributes(array $attributes): self + { + $this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]); + + return $this; + } + + public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self + { + $this->setCustomAttributes('loadingPlaceHolderRowAttributes', [...$this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: false, classicMode: true), ...$attributes]); + + return $this; + } +} diff --git a/src/Traits/Styling/HasLoadingPlaceholderStyling.php b/src/Traits/Styling/HasLoadingPlaceholderStyling.php new file mode 100644 index 000000000..1dbb2b80d --- /dev/null +++ b/src/Traits/Styling/HasLoadingPlaceholderStyling.php @@ -0,0 +1,22 @@ + '', 'default' => true]; +} diff --git a/src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php b/src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php new file mode 100644 index 000000000..ef115641f --- /dev/null +++ b/src/Traits/Styling/Helpers/LoadingPlaceholderStylingHelpers.php @@ -0,0 +1,36 @@ +getCustomAttributes(propertyName: 'loadingPlaceHolderAttributes', default: true, classicMode: true); + + } + + public function getLoadingPlaceHolderIconAttributes(): array + { + return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderIconAttributes', default: true, classicMode: true); + + } + + public function getLoadingPlaceHolderWrapperAttributes(): array + { + return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true); + } + + public function getLoadingPlaceHolderRowAttributes(): array + { + return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderRowAttributes', default: true, classicMode: true); + } + + public function getLoadingPlaceHolderCellAttributes(): array + { + return $this->getCustomAttributes(propertyName: 'loadingPlaceHolderCellAttributes', default: true, classicMode: true); + + } +} diff --git a/src/Traits/WithLoadingPlaceholder.php b/src/Traits/WithLoadingPlaceholder.php index 47c3a3072..130b6d51b 100644 --- a/src/Traits/WithLoadingPlaceholder.php +++ b/src/Traits/WithLoadingPlaceholder.php @@ -4,21 +4,17 @@ use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingPlaceholderConfiguration; use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingPlaceholderHelpers; +use Rappasoft\LaravelLivewireTables\Traits\Styling\HasLoadingPlaceholderStyling; trait WithLoadingPlaceholder { use LoadingPlaceholderConfiguration, - LoadingPlaceholderHelpers; + LoadingPlaceholderHelpers, + HasLoadingPlaceholderStyling; protected bool $displayLoadingPlaceholder = false; protected string $loadingPlaceholderContent = 'Loading'; protected ?string $loadingPlaceholderBlade = null; - - protected array $loadingPlaceHolderAttributes = []; - - protected array $loadingPlaceHolderIconAttributes = []; - - protected array $loadingPlaceHolderWrapperAttributes = []; } diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php index 1206f1608..28a3b97ad 100644 --- a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php +++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php @@ -48,11 +48,19 @@ public function test_can_set_loading_placeholder_attributes(): void { $this->basicTable->setLoadingPlaceholderEnabled(); - $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderAttributes()); + $this->assertSame(['default' => true, 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes()); $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345']); - $this->assertSame(['class' => 'test12345'], $this->basicTable->getLoadingPlaceHolderAttributes()); + $this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderAttributes()); + + $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true]); + + $this->assertSame(['class' => 'test12345', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes()); + + $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true]); + + $this->assertSame(['class' => 'test12345', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderAttributes()); } @@ -60,11 +68,19 @@ public function test_can_set_loading_placeholder_icon_attributes(): void { $this->basicTable->setLoadingPlaceholderEnabled(); - $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes()); $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123']); - $this->assertSame(['class' => 'test123'], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + $this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + + $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true]); + + $this->assertSame(['class' => 'test123', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes()); + + $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true]); + + $this->assertSame(['class' => 'test123', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes()); } @@ -72,11 +88,47 @@ public function test_can_set_loading_placeholder_wrapper_attributes(): void { $this->basicTable->setLoadingPlaceholderEnabled(); - $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper']); - $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + + $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]); + + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + + $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]); + + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + + } + + public function test_can_set_loading_placeholder_row_attributes(): void + { + $this->basicTable->setLoadingPlaceholderEnabled(); + + $this->assertSame(['default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + + $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper']); + + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => false], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + + $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true]); + + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => true, 'default-colors' => true, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + + $this->basicTable->setLoadingPlaceHolderRowAttributes(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true]); + + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderRowAttributes()); + $this->assertSame(['class' => 'test1234567-wrapper', 'default' => false, 'default-colors' => false, 'default-styling' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes()); + } public function test_can_set_loading_placeholder_custom_blade(): void